/* 
	Main CSS doc for Parade (Justin Grohl Template) | Copyright 2008
	Created By Lift. (http://www.liftinteractive.com)
*/

/*
	Font-sizes. Browser default is 16px. Set body to 75%, which is equal to 12px and, therefore, 1em is 12px.
		9px		: 0.75em
		10px	: 0.8333em
		11px	: 0.9167em
		12px	: 1.0em
		13px	: 1.0833em
		14px	: 1.1667em
		15px	: 1.25em
		16px	: 1.3333em
		17px	: 1.4167em
		18px	: 1.5em
		19px	: 1.5833em
		20px	: 1.6667em
		21px	: 1.75em
		22px	: 1.8333em
		23px	: 1.9167em
		24px	: 2.0em
		25px	: 2.0833em
		26px	: 2.1667em
		27px	: 2.25em
		28px	: 2.3333em
		29px	: 2.4167em
		30px	: 2.5em
		31px	: 2.5833em
		32px	: 2.6667em
*/

/*
	Palette
	#333333		dark gray
	
*/

/*
**	=global
**************************/
html						{ overflow:hidden; }
body						{ background:#333; font-size:75%; font-family:"helvetica neue",arial,sans-serif; }

a							{ color:#333; text-decoration:none; }
a:hover						{ color:#000; text-decoration:underline; }
a img, img					{ border:0; }
p,ul,ol,
h1,h2,h3,h4,h5,h6			{ margin-bottom:1em; }
h1,h2,h3,h4,h5,h6			{ color:#777; font-weight:bold; margin-bottom:0.5em; }
strong, b					{ font-weight:bold; }
em, i						{ font-style:italic; }




/*
**	=wrap
**************************/
#wrap.welcome			{ background:0; margin-left:-309px; padding:0; width:618px; }
#wrap					{ background:url('../img/bg-content.png'); color:#c6c6c6; height:560px; left:50%; margin:-307px auto auto -520px; padding:27px; position:absolute; top:50%; width:985px; } /* height:614px; width:1039; */

#wrap.welcome p			{ font-size:2em; }
#wrap.welcome p a		{ color:#797979; }
#wrap.welcome p a:hover	{ color:#fff; }

#view-portfolio			{ background:#262626; color:#fff; cursor:pointer; display:block; float:left; font-size:2em; font-weight:bold; padding:0.5em; text-decoration:none; text-transform:uppercase; -moz-border-radius: 15px; -webkit-border-radius: 15px; }



/*
**	=welcome
**************************/
.welcome #section-welcome	{ display:block; }
#section-welcome			{ display:none; }


/*
**	=branding
**************************/
.welcome #branding		{ color:#FFFFFF; font-size:3em; left:0; margin:4em 0 1em; position:relative; top:0; width:auto; }

#branding				{ color:#787878; display:block; font-size:2.75em; font-weight:bold; line-height:1; text-decoration:none; position:absolute; left:25px; top:28px; width:160px; }
#branding span			{ color:#ffea00; display:block; font-size:0.333em; font-weight:normal; letter-spacing:0.125em; margin-top:0.5em; }



/*
**	=nav
**************************/
.welcome #nav			{ display:none; }
#nav					{ position:absolute; left:30px; bottom:50px; margin:0; }
#nav li					{ }
#nav li a				{ color:#636363; font-size:1.25em; font-weight:bold; text-decoration:none; }
#nav li a.active		{ color:#212121; }
#nav li ul				{ margin:0.25em 0 0.5em 5px; }
#nav li li				{  }
#nav li li a			{ color:#aeaeae; font-size:1.0833em; }
#nav li li a.activeSlide{ color:#ffea00; }



/*
**	=sections
**************************/
.welcome #mask,
.welcome #sections		{ display:none; }

#mask					{ position:absolute; height:560px; right:27px; top:27px; margin:0; overflow:hidden; width:801px; }
#sections				{ margin:0; padding:0; position:relative; left:0; top:0; }
#sections li			{ /*background:#e5e5e5;*/ display:block; height:560px; position:absolute; top:0; left:0; overflow:hidden; width:801px; }
#sections li li,
#sections li.gallery	{ background:#fff; }

#galleries				{ z-index:1 !important; }

#sections .gallery li	{ height:534px; }

.content				{ background:#E5E5E5; }
.error-404 .content		{ background:0; }
#sections .content		{ color:#787878; float:left; height:560px; overflow:auto; padding:0 30px; width:741px; } /* width:801px */
#section-welcome h2,
.content h2				{ color:#777; font-size:1.8333em; font-weight:bold; margin:40px 0 20px; }
#section-welcome h2		{ margin-left:0; }
.content h3				{ font-size:1.75em; }
.content h4				{ font-size:1.6667em; }
.content h5				{ font-size:1.5em; }
.content h6				{ font-size:1.333em; margin-bottom:1em; }
.content p				{ line-height:1.25; margin:0 30px 1em 0; }
.content p,
.content li				{ font-size:1.5em; }
#sections .content ul,
#sections .content ol	{ list-style-position:inside; }
#sections .content li	{ background:0; display:list-item; list-style-type:disc; position:static; left:auto; top:auto; height:auto; width:auto; }
#sections .content ol li{ list-style-type:decimal; }




/*
**	=gallery
**************************/
#section-gallery li		{ display:block; position:absolute; left:0; top:0; }
.gallery				{ height:560px; margin:0; padding:0; position:relative; width:801px; z-index:98; }
.gallery h2				{ display:none; }
.images					{ margin:0; z-index:1; }
.images li				{ height:534px; }
.images li img			{ display:block; margin:auto; }
.thumbs					{ background:#fff; position:relative; height:115px; left:0; padding-top:7px; margin:0; top:534px; width:801px; z-index:99; } /* bottom:26px */
.thumbs .scroll			{ height:100px; left:0; margin:0; position:absolute; top:0; width:801px !important; }
.thumbs .scroll img		{ position:relative; float:left; margin:0 5px 0 0; } 	/*  display:inline-block;  haslayout TRIPswitch */
/*.thumbs .scroll img		{ display:block; }	 display tripSWITCH */ 
.thumbs .navi			{ position:absolute; bottom:0; left:0; }
.navi span				{ background:url('../img/dots.png') no-repeat 0 0; cursor:pointer; display:block; float:left; height:8px; margin-right:3px; width:8px; }
.navi span:hover		{ background-position:0 -8px; }
.navi span.active		{ background-position:0 -16px; }

.prev,.next				{ background:url('../img/iereallysucks.gif'); display:block; position:absolute; width:400px; height:534px; left:0; top:0; text-indent:-9999px; z-index:2; }
.next					{ left:401px; }

.prev:hover				{ background:url('../img/prev.png') no-repeat left center; }
.next:hover				{ background:url('../img/next.png') no-repeat right center; }


#details				{ background:#fff; height:20px; position:absolute; bottom:0; left:0; width:801px; z-index:99; }
#details p				{ color:#7A7A7A; font-size:0.9167em; position:absolute; bottom:0; margin:0; left:0; width:100%; }
#caption				{ text-align:center; font-style:italic; }
#viewthumbs				{  }
#viewthumbs a			{ position:absolute; right:0; bottom:0; display:block; height:14px; background:url('../img/view-thumbs.png') no-repeat; text-indent:-9999px; width:78px; }


.thumbs-next,
.thumbs-prev			{ background:#fff; display:block; height:50px; position:absolute; right:0; top:7px; width:30px; z-index:2; }

.thumbs-next			{ top:57px; }


/*
**	=copyright
**************************/
#sticky				{ background:transparent url('../img/bg-sticky.png') no-repeat 0 0; color:#a2a2a2; position:absolute; left:50%; bottom:0; width:618px; height:37px; margin-left:-309px; z-index:99; }		/*background:#181818;*/			/*-moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px;*/
#sticky p			{ text-align:center; font-size:0.9167em; letter-spacing:0.015em; margin:0; padding-top:0.9167em; }
#sticky a			{ color:#a2a2a2; text-decoration:none; }
#sticky a:hover		{ color:#fff; }
#sticky strong		{ color:#fff; font-size:1.25em; font-weight:bold; margin:0 0.25em 0 0.5em; }


/*
**	=font variations
**************************/
body.georgia, body.small-georgia	{ font-family: Georgia, "Times New Roman", serif;}
.georgia #branding span				{ font-style: italic; }

body.small-georgia #branding 			{ font-size: 1.75em !important; }
body.small-georgia #branding span		{ font-size: .667em !important; }

body.small-helvetica #branding 			{ font-size: 1.75em !important; }
body.small-helvetica #branding span		{ font-size: .667em !important; }



/*
**	=color variations
**************************/
body.pink #branding span, .pink #nav li li a.activeSlide { color:#FF0066; }

body.cyan #branding span, .cyan #nav li li a.activeSlide { color:#00FFFA;}

body.yellow #branding span, .yellow #nav li li a.activeSlide { color:#FFFF00;}

body.grey #branding span, .grey #nav li li a.activeSlide { color:#777; }

/*.grey #section-welcome h2, .grey .content h2 { color:; }*/

/* no background with grey text */
body.custom-bg #wrap						{ background: transparent; }
body.custom-bg #nav li li a.activeSlide 	{ color:#777; }