/*  Satisfaction Stylesheet                           */
/*  modern.css - Modern Browsers                      */
/*                                                    */
/*                                                    */
/*                                                    */
/*                                                    */
/*                                                    */
/*  Last Updated - May 2010                         */


/* ======================== 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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

:focus 
{
outline: 0;
}

ol, ul 
{
list-style: none;
}

table 
{
border-collapse: separate;
border-spacing: 0;
}

caption, th, td 
{
text-align: left;
font-weight: normal;
}

input[type=hidden] {  
visibility: hidden;  /* keeps hidden fields hidden in ff3 */
height:0px;
border:0px;
margin: 0 0 0 0; 
padding: 0 0 0 0; 
position:absolute;
}  

strong
{
font-weight:bold;
}


/* ======================== Basic page structure ======================== */


html 
{
background: url(images/bg_tile.png)  top center ;
}

body 
{
background: url(images/top_strip.jpg) repeat-x top center ;
color: black;
font-family: verdana, Arial, sans-serif;
font-size:12px;
line-height: 22px;
}

#contact_page
{
background:none;
}

#wrapper
{
width:960px;
margin:0 auto 0 auto; 
position:relative;
 
}

#contact_page #wrapper
{
width:300px;
margin:10px auto 0 auto; 
position:relative;
}

/* navigation */

#top_navigation_area
{
position:relative;
height:40px;
}

#main_nav
{
margin: 15px 70px 0 0; 
float:right;
background: url(images/nav_bg.png) no-repeat bottom left ;
height:25px;
}

/* header */

#header
{
position:relative;
width: 940px;
margin: 0 10px 0 10px; 
height:220px;
background: url(images/header_bg.png) no-repeat bottom left ;
}

#main_content
{
width: 640px;
margin: 19px 10px 20px 10px;
background: #a2a092 url(images/main_col_top.png) no-repeat 0 0 ;
float:left;
}

#home_page #main_content
{
margin: 30px 10px 20px 10px;
background: #a2a092 url(images/main_col_top.png) no-repeat 0 0 ;
}

#side_boxes
{
width: 280px;
margin: 30px 10px 0 10px; 
float:left;
}

.article
{
padding: 5px 0 24px 0; 
width: 620px;
margin: 20px 10px 10px 10px; 
background: url(images/article_bg_divider.png) repeat-x left bottom ;
} 	

.news
{
background-color:#b2b0a0;
}

.recommendation
{
background-color:#bcbaa9;
}


.boxout
{
width: 280px; 
background: #eae4dd url(images/boxout_foot_bg.png) repeat-x left bottom ;
padding: 0 0 10px 0; 
margin: 0 0 15px 0; 
}

.boxout.contact
{
margin: 0 0 15px 10px; 
}

#leader
{
width: 640px;
height: 46px;
margin: 22px 10px 0 10px;
float:left;
background: transparent url(images/leader_bg.png) no-repeat 0 0 ;
}

#photos
{
margin: 10px 10px 10px 10px;
overflow:auto;
}

.gallery_list div
{
position:relative;
width:260px;
height:50px;
margin: 25px 10px 10px 10px; 
}


#footer
{
 
width: 640px;
height:20px;
background: #a2a092 url(images/main_col_foot_bg.png) no-repeat 0 bottom ; 
padding: 0 0 10px 0; 
}



/*========== Headings ==========*/



h1
{
position:relative;
left:-20px;
top: -20px;
width:296px;
height:81px;
overflow:hidden;
text-indent:-999px;
background:transparent url(images/satisfaction_logo.png) no-repeat 0 0 ; 
}

#home_page h1
{
position:absolute;
top:8px;
left:-19px;
}


#main_content h2
{
height: 30px;
color:#8d140e;
font-size:16px;
font-weight:bold;
background:transparent url(images/main_col_heading_bg_left.png) no-repeat 0 0 ;
margin: 20px 0 0 10px; 
}

#main_content h2 span
{
display:block;
float:left;
height: 28px;
background:white url(images/main_col_heading_bg_right.png) no-repeat bottom right ;
padding: 2px 10px 0 5px; 
margin: 0 0 0 2px; 
}

.article h3
{
font-size:14px;
font-weight:bold;
margin: 5px 0 0 10px; 
}


.boxout h2
{
font-size:15px;
font-weight:normal;
color:white;
width:300px;
height:28px;
position:relative;
left:-10px;
text-align:center;
padding: 10px 0 0 0; 
}

.contact h2
{
 
left:-20px;

}

.gallery h2, .gallery_list h2, .sub_nav h2
{ 
background:white url(images/boxout_heading_bg_green.png) no-repeat 0 0 ;
}

.signup h2
{
background:white url(images/boxout_heading_bg_purple.png) no-repeat 0 0 ;
}

.social h2, .contact h2
{
background:white url(images/boxout_heading_bg_orange.png) no-repeat 0 0 ;
}

#leader h2
{
padding: 10px 0 0 10px; 
color:white;
font-size:15px;
letter-spacing:1px;
}

#leader h2 span
{
font-weight:normal;
padding: 0 10px 0 0; 
margin: 0 5px 0 0; 
color:#82120d;
background:transparent url(images/green_triangle_pointer.png) no-repeat  right 5px ;
}

#contact_page h2
{
font-size:15px;
font-weight:normal;
color:black;
margin: 0 0 0 10px; 
}

/*========== Paragraphs ==========*/


#header p
{
width: 682px;
position:relative;
top:100px;
margin: 0 0 0 20px; 
font-size:14px;
color:#1a1915;
line-height:20px;
}

#header p em
{
color:white;
font-style:normal;
}

.article p
{
margin: 0 10px 5px 10px; 
line-height:20px;
}

.boxout p
{
margin: 5px 10px 0 10px; 
font-size:11px;
line-height:15px;
color:#4d4d4d;
}

.signup form p.privacy
{
text-align:center; 
font-size:10px;
}


/*========== Images ==========*/

#header img
{
position:absolute;
top:40px;
left:714px;
}

.article img
{
background:white;
padding: 5px 5px 5px 5px; 
float:left;
margin: 5px 15px 0 10px; 
border-right: 1px #929083 solid;
border-bottom: 1px #929083 solid;
}

.gallery img

{
margin: 10px 10px 5px 10px; 
}

.gallery_list ul li img, .sub_nav ul li img
{
position:absolute;
top:12px;
left:270px;
}


#footer img
{
margin: 0 0 0 455px; 
}

/*========== Lists ==========*/

/*========== main navigaton*/

#main_nav ul
{
padding: 0 7px 25px 0;  
margin: 0 0 0 7px; /* 7px left margin to reveal left corner*/ 
background: url(images/nav_bg.png) no-repeat bottom right ;
}

#main_nav ul li
{
padding: 0 0 0 15px; 
margin: 0 0 0 6px; 
background: url(images/star.png) no-repeat  left 7px;
float:left;
}

#main_nav ul li.first
{
padding: 0 0 0 0; 
margin: 0 0 0 0; 
background: none;
}

/*========== sub nav lists*/

.gallery_list ul, .sub_nav ul
{
width:260px;
margin: 30px 10px 0 10px; 
}

.sub_nav ul
{

margin: 30px 10px 20px 10px; 
}

.gallery_list ul li, .sub_nav ul li
{
position:relative;
border-bottom: 1px #407471 dashed;
padding: 0 0 0 0; 
}

.gallery_list ul .first,  .sub_nav ul .first
{
border-top: 1px #407471 dashed;
min-height:0; /* fix top border visibility in ie7 */
}

/*========== socia list*/

.social ul{

margin: 10px 10px 10px 10px;

}

.social ul li{
padding: 0 0 0 25px;
margin: 0 0 5px 0;
}

.social ul #facebook{
background:transparent url(images/social_logo_facebook.png) no-repeat 0 4px ;
}

.social ul #twitter{
background:transparent url(images/social_logo_twitter.png) no-repeat 0 4px ;
}

.social ul #mixcloud{
background:transparent url(images/social_logo_mixcloud.png) no-repeat 0 4px ;
}


.social ul #spotify{
background:transparent url(images/social_logo_spotify.png) no-repeat 0 4px ;
}

/*========== Anchors ==========*/

div.article p a

{
color:#434035;
text-decoration:none;
border-bottom: 1px #434035 dotted
}


div.article p a:hover
{

border-bottom: 1px white dotted
}


#main_nav ul li a
{
color:#501f0c;
letter-spacing:1px;
text-decoration:none;
font-weight:bold;
float:left;
}

#main_nav a:hover
{
color:#82120d;
}

#main_nav .selected
{
color:#1a1915;
}

#main_nav a.selected:hover
{
color:#1a1915;
cursor:default;
}

.gallery_list ul li a.selected, .sub_nav ul li a.selected
{
color:black;
cursor:default;
}

.gallery_list ul a, .sub_nav ul a
{
display:block;
color:#82120d;
text-decoration:none;
padding: 10px 0 10px 0; 
}

.gallery_list ul a:hover, .sub_nav ul a:hover
{
color:black;
text-decoration:none;
}

#footer a
{
color:black;
}

#footer a:hover
{
color:#5d2835;
}

.golink
{
display:block;
text-align:right;
text-decoration:none;
color:#407471;
height:9px;
line-height:9px;
padding: 0 12px 1px 0; 
margin: 10px 10px 5px 0; 
}

.gallery .golink
{
color:#407471;
background:transparent url(images/pixel_arrow_greenbox.png) no-repeat right 1px ;
}

.gallery .golink:hover
{
color:#1e3635; 
}


#older
{
display:block;
width: 100px;
height: 36px;
background:transparent url(images/older.png) no-repeat 0 0 ;
text-indent:-999px;
position:absolute;
left:15px;
top:6px;
}

#newer
{
display:block;
width: 100px;
height: 36px;
background:transparent url(images/newer.png) no-repeat 0 0 ;
text-indent:-999px;
position:absolute;
left:145px;

}

.solo

{
left:80px !important;
}


/*========== socia links*/

.social ul a{

text-decoration:none;
color:#4d4d4d;
border-bottom: 1px #b4afaa dotted
}

.social ul a:hover{


color:black;
border-bottom: 1px #b4afaa dotted
}


/*========== Forms ==========*/


.signup form, .contact form
{
width: 260px;
padding: 0 10px 0 10px; 
}

.signup form input, .contact form input
{
width: 258px;
height:21px;
display:block; 
background: #ffffff;
border:1px #d2d2d2 solid;
}

.signup form label, .contact form label
{
display:block;
font-size:11px;
color:#714103;
}

.signup form .submit, .contact form .submit
{
width: 80px;
margin: 7px auto 5px auto; 
font-size:10px;
padding: 0 0 3px 0;
color:#714103;
}

.contact form textarea
{
width: 258px;
display:block; 
background: #ffffff;
border:1px #d2d2d2 solid;
}

/* form error messages - mootools generated */

.validation-advice 
{
color:#82120d;
font-size:10px;
line-height:10px;
padding: 2px 0 0 0;
text-align:center;
} 

.validation-failed 
{ 
border:1px #82120d dotted !important;
}


#infobox
{
text-align:center;
font-size:11px;
font-weight:bold;
color:#8a5004;
}

.spinner
{
background:white;

}

.spinner-img {
	background: url(images/spinner.gif) no-repeat;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}


/* gallery photo's */



  

.pic_holder
{
outline:none;
width:135px;
height:135px;
float:left;
margin:10px;


display: table-cell;
text-align: center;
vertical-align: middle;
}

.pic_holder span {
display: inline-block;
height: 100%;
width: 1px;
}

.pic_holder span, .pic_holder img 
{
vertical-align: middle;
}

.pic_holder a
{
outline:none;
}

.pic_holder img
{

background:white;
padding:5px;
border-right: 1px #929083 solid;
border-bottom: 1px #929083 solid;
}