/*
Title: 		Goldlog
Author: 	Espen Lund
Modified:	08/2010
Media:		Screen
*/


/* ----------------------------------- RESET ----------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, 
h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, 
legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent;}

/* ----------------------------------- GENERAL ----------------------------------- */

body
{
background: #281E1C;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.75em;
line-height: 1.5em;
color: #333333;

/* BACKGROUND IMAGE */


background-image:url('../../Content/images/goldlog_bgr.jpg');
background-repeat: no-repeat;
background-position: top center;}

p{
line-height: 130%;}

a img{
border: none;}

a, a:link, a:active, a:visited{
color: #333333; 
text-decoration: none;}

a:hover{
color: #000;}

h1{
font-size: 34px;
font-weight: normal;
line-height: 115%;}

h2{
font-size: 20px;}

h3{
font-size: 14px;}

h4{
font-size: 15px;
margin-bottom: 10px;}

h5{
margin-top: 20px;}

h6{
font-weight: normal;
padding: 0;
margin: 0;}

.small{
font-size: 10px;}


/* ----------------------------------- TOOLS ----------------------------------- */


.left{ 
float: left;}

.right{ 
float: right;}

.center{ 
margin: 0 auto;}

.clear{ 
clear: both;}

.textCenter{ 
text-align: center;}

.textRight{ 
text-align: right;}

.textLeft{ 
text-align: left;}

.hide{ 
display: none;}

.show{ 
display: block;}

.invisible{ 
visibility: hidden;}

.sub{
vertical-align:sub;}

hr.separator{
border: 0;
background: silver;
height: 1px;
margin: 20px 0 20px 0;}

/* ----------------------------------- GRID ----------------------------------- */

#container{
margin: 0 auto;
width: 970px;}

#header{
float: left;
width: 100%;
min-height: 400px;
position: relative;
*position: absolute;}

#main{
margin-top: 315px;
position: absolute;
*position: relative;
padding: 0 10px 0 10px;}

.unit{
float: left;
margin: 0 10px 10px 0;
opacity: .9; /*CSS3 for modern browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */ 
filter: alpha(opacity=90); /* IE 5-7 */}

.size1of3{
width: 310px;}

.size2of3{
width: 630px;}

.size3of3{
width: 950px;}

.lastunit{
margin-right: 0;}

/* ----------------------------------- NAVIGATION -----------------------------------*/

#navigation{
float: left;
width: 100%;
*width: 950px; /* IE 7 and below /*
/*margin: 10px 0 10px 0;
padding: 10px 0 10px 0;*/
margin-bottom: 10px;
background-color: #424242;

/* Opacity */
opacity: .8; /*CSS3 for modern browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */ 
filter: alpha(opacity=90); /* IE 5-7 */

/* Rounded corners */
border-radius: 5px;   
-moz-border-radius: 5px;   
-webkit-border-radius: 5px;

/* Gradient */
background-color: #4a4a4a; /* fallback color */
background-image: url(../../Content/images/#4a4a4a.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #191919, #424242);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#191919), to(#424242));}

#navigation ul{
margin: 0;
padding: 0;
list-style: none;}

#navigation ul li{
display: inline;}

#navigation ul li a{
color: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
text-transform: uppercase;
text-decoration:none;
padding:10px 0;
width:120px;
float:left;
text-align:center;
border-right:1px solid #898989;}

#navigation ul li a.active{
background-color: #3d3d3d;}

#navigation li a:hover{
background-color: #3d3d3d;}

/* ----------------------------------- SEARCH ----------------------------------- */

#search{
float: right;
margin-right: 10px;
margin-top: 7px;}

#search .searchleft{
float: left;
background-image: url('../../Content/images/searchbar_left.png');
background-repeat: no-repeat;
background-position: left;
width: 4px;
height: 24px;}

#search .searchbar input{
float: left;
border: 0;
padding: 0 0 0 5px;
margin: 0;
background-color: #cccccc;
height: 24px;
width: 250px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 25px;}

#search .searchright{
float: left;
background-image: url('../../Content/images/searchbar_right.png');
background-repeat: no-repeat;
background-position: right;
width: 29px;
height: 24px;}

/* ----------------------------------- UNIT ----------------------------------- */

.unit .title{
float: left;
background: #4a4a4a;
width: 100%;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;}

.unit .title h3,
.unit .title .gradient{
color: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-weight: bold;
line-height: 35px;
padding: 0 0 0 10px;

/* Opacity */
opacity: .8; /*CSS3 for modern browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */ 
filter: alpha(opacity=80); /* IE 5-7 */

/* Rounded corners */
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;

/* Gradient */
background-color: #4a4a4a; /* fallback color
/*background-image: url(../../Content/images/#4a4a4a.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #191919, #424242);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#191919), to(#424242));}

.unit .title h3 a{
padding-left: 17px;
color: #fff;
background: url('../../Content/images/buttons/arrow_close.png') no-repeat left;
background-position: 0px 5px;}

.box .active h3{
color: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-weight: bold;
line-height: 35px;
padding: 0 0 0 10px;

/* Opacity */
opacity: .8; /*CSS3 for modern browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */ 
filter: alpha(opacity=80); /* IE 5-7 */

/* Rounded corners */
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;

/* Gradient */
background-color: #4a4a4a; /* fallback color
/*background-image: url(../../Content/images/#4a4a4a.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #191919, #424242);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#191919), to(#424242));}


.box .active h3 a{
padding-left: 17px;
color: #fff;
background: url('../../Content/images/buttons/arrow_open.png') no-repeat left;
background-position: 0px 5px;}


.unit .title h3.follow a{
background-image: none;
background-position: inherit;
display: inline;
padding: 0;}

.content{
float: left;
width: 100%;
min-height: 100px;
background: #fff;}

.unit .footer{
float: left;
width: 100%;
background: #fff;

/* Rounded corners */
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;}

.unit .footer p{
padding: 10px;
padding-bottom: 5px; /* IE 8 and below */
font-weight: bold;}

.unit .footer p a{
background: url('../../Content/images/buttons/arrow_right.png') no-repeat right;
background-position: 48px 3px;
display: block;}

.unit .footer.social p {
font-weight: normal;}

.unit .footer.social p a{
background: none;
font-weight: bold;
display: inline;}

.unit .footer.social p a img{
vertical-align:sub;}

.unit .line{
float: left;
border-top: 1px solid #b3b3b3;}

.box{
float: left;
width: 100%;
margin-bottom: 10px;}

/* ----------------------------------- LISTS ----------------------------------- */

ul.rollup_list{
margin: 0;
padding: 0;
list-style: none;}

ul.rollup_list .small{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;
padding: 10px 5px 5px 5px;}

ul.rollup_list li{
float: left;
padding: 1px;
background: #fff;
border-bottom: 1px solid #b3b3b3;
width: 308px;}

ul.rollup_list li.even{
background: #e1e1e1;}

ul.rollup_list li.active{
background: #2e2e2e;}

ul.rollup_list li.active p, ul.rollup_list li.active h4 a{
color: #fff;}

ul.rollup_list li img{
float: left;
margin-right: 10px;}

ul.rollup_list li p.small{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;
margin-top: 10px;}

ul.rollup_list li h4{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 0;}

ul.rollup_list li h4 span{
font-weight: normal;}

.list{
float: left;
width: 100%;}

.list .small{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;
padding: 10px 5px 5px 5px;}

.imagelist .thumbnail{
float: left;
width: 101px;
margin: 1px;
margin-bottom: 0;}

.imagelist .small{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;
padding: 10px 5px 5px 5px;}


/* ----------------------------------- ARTICLE ----------------------------------- */

.article, .album, .song{
float: left;
padding: 20px;}

.article h1, .album h1, .song h1{
padding-bottom: 10px;}

.article small, .album small, .song small{
float: left;
width: 100%;
font-size: 12px;
font-weight:normal;
padding-bottom: 10px;}

.article small span, .album small span, .song small span{
font-weight: bold;}

.article p, .album p, .song p{
font-size: 14px;}

.article p a, .album p a, .song p a{
text-decoration: underline;}

.article img{
padding: 10px 0 10px 0;}

.album_img{
margin: 0px 30px 0px 0;
width: 190px;
height: 190px;
}

.article .imagelist .thumbnail{
float: left;
width: 101px;
margin: 8px;}

.article .imagelist .thumbnail img{
padding: 0;
}

.albumview{
padding: 10px;
float: left;}

.credits{
width: 200px;}

.tracklist{
border-left: 1px solid silver; 
padding-left: 15px;
width: 370px;}

.tracklist table tr td img{
position: relative;
top: 3px;}

.tracklist table td.play_icon{
width: 20px;}

.tracklist table td.track{
width: 20px;
font-weight: bold;}

.tracklist table td.song{
width: 250px;}

.article .social{
margin-top: 15px;}

/* ----------------------------------- BUTTONS ----------------------------------- */

.play a {
display: block;
width: 20px;
padding: 10px 0;
position: relative;
top: 3px;
background: url("../../Content/images/buttons/play_up.png") 0 0 no-repeat;}

.play a:hover { 
background: url("../../Content/images/buttons/play_over.png") 0 0 no-repeat;}

.play a:active {
background: url("../../Content/images/buttons/play_down.png") 0 0 no-repeat;}

.buy a {
display: block;
width: 30px;
padding: 10px 0;
position: relative;
top: 5px;
background: url("../../Content/images/buttons/buy_up.png") 0 0 no-repeat;}

.buy a:hover { 
background: url("../../Content/images/buttons/buy_over.png") 0 0 no-repeat;}

.buy a:active {
background: url("../../Content/images/buttons/buy_down.png") 0 0 no-repeat;}

.box_social .bottom.comment a{
background: url('../../Content/images/buttons/comment.png') no-repeat left;
background-position: 10 0px;
display: block;
color: #fff;}

.box_social .bottom.comment a span{
padding-left: 22px;}

.box_social .bottom.share a{
background: url('../../Content/images/buttons/share.png') no-repeat left;
background-position: 10 0px;
display: block;
color: #fff;}

.box_social .bottom.share a span{
padding-left: 22px;}

.box_social .bottom.like a{
background: url('../../Content/images/buttons/like.png') no-repeat left;
background-position: 10 0px;
display: block;
color: #fff;}

.box_social .bottom.like a span{
padding-left: 22px;}

.box_social{
float: left;
min-width: 100px;
min-height: 100px;
margin-right: 10px;
background-image: url('../../Content/images/bg_social_box.jpg');
background-repeat: repeat-x;
margin-top: 10px;}

.box_social .count{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 45px;}

.box_social small{
text-align: center;
padding: 0;}

.box_social .bottom{
background-image: url('../../Content/images/bg_social_box_bottom.jpg');
background-repeat: repeat-x;
clear: both;
min-height: 34px;
color: #fff;
line-height: 31px;
font-size: 11px;
padding-left: 10px; }


/* -------------------------------- COMMENTS -------------------------------- */

.comment_input{
float: left;
padding: 20px;}

.comment_input h3{
margin-bottom: 10px;}

.comment_input p{
padding: 5px 0 5px 0;}

.comment_input a.post{
float: left;
padding: 10px 0 10px 0;}

.comments{
float: left;
width: 100%;}

.comments small{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;}

.comments .item{
padding: 20px;
border-top: 1px solid #b3b3b3;}

.comments .item span.date{
margin-right: 10px;}

.comments .item.even{
background-color: #e1e1e1;}

.comments .item p{
padding-top: 5px;}

.comments .item p span{
font-weight: bold;}

.comments .item .like a{
background: url('../../Content/images/buttons/like.png') no-repeat left;
background-position: 10 0px;
display: block;}

.comments .item .like a span{
padding-left: 22px;}

/* ----------------------------------- TABLE ----------------------------------- */

table th{
text-align: left;}

table td,
table th{
border-bottom: 1px solid #b3b3b3;
padding-left: 10px;}

table tr{
border-bottom: 1px solid #b3b3b3;
line-height: 30px;}

table tr.even{
background-color: #e1e1e1;}

table td.date{
width: 80px;}


.trigger{
float: left;}

.trigger a {
	/*color: #fff;
	text-decoration: none;*/
	/*display: block;*/
}
.trigger a:hover { color: #ccc; }

h3.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/

.toggle_container {
	background: #fff;
	overflow: hidden;
}