/*

bg :										#0F0B00
text, border : 								#7A6530
contrast text : 							#FDF3CB
first letter (h1, h4 title): 				#FF0000
h1, h4 title : 								#FFFFFF
demo reel, h3 demo reel :					#AB9458
portfolio, h3 portfolio :					#E9D48B
scripts, h3 scripts :						#FDF3CB
demo reel div, portfolio li, scripts li : 	#322405

*/


body {
	/*background-color : #0F0B00;*/
	margin : 0 auto;
	width : 960px;
	color : #7A6530;
	background : #0F0B00 url(../content/graphics/gradient.png) repeat-x fixed;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* HEADER																																		*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#header {
	padding : 10em 0;
}

#contact {
	padding : .5em 0;
	text-align : center ;
}

#contact li , #contact li p{
	display : inline;
}

#contact li {
	margin : 0 1em;
}

#contact li, #contact li a{	
	color : #FDF3CB;
}

#contact strong {
	color : #7A6530;
}

#resume img, #cv  img, #linkedin img{
	vertical-align : bottom;
}

#header h1 {
	font-size : 23em;
	font-weight : bold;
	text-align : center;
	padding : 0;
	border-bottom : 1px solid #7A6530;
	border-top : 1px solid #7A6530;
	color : #FFFFFF;
}

#header h1:first-letter{
	color : #FF0000;
}

#header h2 {
	font-size : 3em;
	text-align : right ;
	padding : .5em 0;
	margin-top : -.5em;
	color : #FDF3CB;
}

#caption{
	text-align : right ;
	margin-top : -2em;
	padding : .5em 0;
}

#navigation_menu{
	font-size : 2em;
	text-align : right ;
	padding : 4em 0 0;
	font-weight : bold;
}

#navigation_menu li{
	padding : 0;
	display : inline;
}

#demo_reel_link, #demo_reel_container h3 {
	color : #AB9458;
}

#portfolio_link , #portfolio_container h3{
	color : #E9D48B;
}

#scripts_link, #scripts_container h3 {
	color : #FDF3CB;
}

#photo_link {
	color : #FFFFFF;
}

#demo_reel_link:hover, #portfolio_link:hover, #scripts_link:hover, #photo_link:hover {
	color : #FFFFFF;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* COMMON ELEMENTS																																*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#demo_reel_container, #portfolio_container {
	padding : 0 0 25em;
}

#demo_reel_container h3, #portfolio_container h3 , #scripts_container h3{
	font-size : 10em;
}

#demo_reel_container .back2top_button, #portfolio_container .back2top_button , #scripts_container .back2top_button{
	padding : 0;
	text-align : right;
	border-bottom : 1px solid #7A6530;
}

#demo_reel_container .back2top_button a, #portfolio_container .back2top_button a, #scripts_container .back2top_button a{
	color : #7A6530;
}

#demo_reel_container .back2top_button a:hover, #portfolio_container .back2top_button a:hover, #scripts_container .back2top_button a:hover{
	color : #FFFFFF;
}

#demo_reel, #portfolio, #scripts_category {
	padding : 1em 0 0;
	border-bottom : 1px solid #7A6530;
	background-color : #322405;
}

#demo_reel p, #portfolio p{
	padding : 0;
}

#demo_reel .breakdown h6, #portfolio .breakdown h6{
	font-style : italic;
	text-decoration	: underline;
	font-weight : bold;
	font-size : 1em;
}

#demo_reel .breakdown ul, #portfolio .breakdown ul{
	padding : 0 2em;
	margin : 2em 0;
	line-height : 1.5em;
}

#demo_reel .breakdown ul li, #portfolio .breakdown ul li{
	margin-bottom : 1em;
}

#demo_reel .breakdown ul ul, #portfolio .breakdown ul ul{
	padding : 0;
	margin : 0 0 0 1em;
}

#scripts_category  .script h4 {
	font-size : 4em;
	font-weight : bold;
	color : #FFFFFF;
	padding : 0 10px 0 ;
}

#scripts_category  .script h4{
	margin : 0 0 .1em;
	text-align : left;
}

#scripts_category  .script h4:first-letter{
	color : #FF0000;
	text-transform : capitalize;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* DEMO REEL																																	*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#demo_reel .work, #demo_reel .breakdown{
	margin : 0 10px 0;
	width : 940px;
}

#demo_reel .breakdown .breakdown_button{
	font-size : 1em;
	font-weight : bold;
	color : #FDF3CB;
	text-transform : capitalize;	
}

#demo_reel .breakdown .breakdown_button:hover{
	color : #FFFFFF;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FILTERS																																		*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#filters_container {
	display : none;
	text-align : center;
	padding-top : 1em;
	background-color : #322405;
}

#filters1, #filters2, #filters3 {
	display : inline;
	padding	: 0;
	margin : 0 2em;
}

#filters1 li,  #filters2 li, #filters3 li {
	display : inline;
	font-weight: bold;
}

#filters1 .active_filter ,  #filters2 .active_filter, #filters3 .active_filter, #filters1  li a ,  #filters2  li a, #filters3  li a {
	color : #7A6530;
}

#filters1 .active_filter:hover ,  #filters2 .active_filter:hover, #filters3 .active_filter:hover, #filters1  li a:hover ,  #filters2  li a:hover, #filters3  li a:hover{
	color : #FFFFFF;
}

#filters1 .inactive_filter , #filters2 .inactive_filter, #filters3 .inactive_filter,
#filters1 .inactive_filter:hover , #filters2 .inactive_filter:hover, #filters3 .inactive_filter:hover{
	color : #0F0B00;
}

#filters1 .current_filter1 , #filters2 .current_filter2, #filters3 .current_filter3 {
	color : #FDF3CB;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* PORTFOLIO																																	*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#portfolio .work {
	margin : 0 10px 10px;
	width : 940px;
}

#portfolio .thumbs{
	height : 125px;
	overflow : auto ;
}

#portfolio .floatbox{
	display : block;
}

#portfolio .description{
	font-size : 1em;
}

#portfolio .title{
	font-weight : bold;
	color : #FDF3CB;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* SCRIPTS																																		*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#scripts_container{
	clear : both;
}

#scripts_category  .script{
	padding : 1em 0 0;
}

#scripts_category .script table{
	border-spacing : 0;
	padding : 0 10px 0;	
}

#scripts_category .script table td{
	height : 3em;
}

#scripts_category  .script table .odd{
	background-color : #AB9458;
	color : #E9D48B;
}

#scripts_category  .script table .even{
	background-color : #E9D48B;
	color : #AB9458;
}

#scripts_category .script table .title{
	width : 15%;
	color : #FDF3CB;
	font-weight : bold;
}

#scripts_category .script table .description{
	width : 80%;
}

#scripts_category .script table .download{
	width : 5%;
}

#scripts_category .script table tr .download a{
	color : #7A6530;
	text-transform : capitalize;	
}

#scripts_category .script table tr .download a:hover{
	color : #FFFFFF;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER																																		*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#footer {
	padding : 1em 0 2em;
	text-align : right;
}

#footer p {
	padding : 0;
}

#footer a {
	color : #FDF3CB;
}

#footer a:hover{
	color : #FFFFFF;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* IMAGE REPLACEMENT																															*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
.replace{ 
	position : relative;
	margin : 0px;
	padding : 0px;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow : hidden;
	/* */
}

.replace span{
	display : block;
	position : absolute;
	top : 0px;
	left : 0px;
}

.replace .cover{
	z-index : 1;
}

#header h1, #header h1 .cover{
	height : 340px;
	width : 960px;
	background : url(../content/graphics/gradient.png) repeat-x fixed;
}

#header h1 .banner{
	height : 340px;
	width : 960px;
	background-image : url(../content/graphics/banner.png);
	z-index : 2;
} 

#demo_reel_container h3, #demo_reel_container h3 .cover{
	height : 150px;
	width : 960px;
	background : url(../content/graphics/gradient.png) repeat-x fixed;
}

#demo_reel_container h3 .banner{
	height : 150px;
	width : 960px;
	background-image : url(../content/graphics/banner_demo_reel.png);
	z-index : 2;
}

#portfolio_container h3, #portfolio_container h3 .cover{
	height : 150px;
	width : 960px;
	background : url(../content/graphics/gradient.png) repeat-x fixed;
}

#portfolio_container h3 .banner{
	height : 150px;
	width : 960px;
	background-image : url(../content/graphics/banner_portfolio.png);
	z-index : 2;
}

#scripts_container h3, #scripts_container h3 .cover{
	height : 150px;
	width : 960px;
	background : url(../content/graphics/gradient.png) repeat-x fixed;
}

#scripts_container h3 .banner{
	height : 150px;
	width : 960px;
	background-image : url(../content/graphics/banner_dev.png);
	z-index : 2;
}