/*
THEME NAME: Bonsai Media
THEME URI:  http://www.bonsaimedia.com.au
DESCRIPTION: Custom CSS Framework Photography Website Template
VERSION: 1.0
AUTHOR: Bonsai Media
AUTHOR URI: http://www.bonsaimedia.com.au
TAGS: bonsai media, photography
*/

/** HTML5 Reset **/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }
body { line-height:1 }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block }
nav ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent }
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none }
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold }
del { text-decoration: line-through }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help }
table { border-collapse:collapse; border-spacing:0 }
/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #3f3f3f; margin:1.4em 0; padding:0 }
input, select { vertical-align:middle }

/** Default Wordpress Classes **/
.aligncenter, div.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignleft { float:left; margin:20px 20px 20px 0; }
.alignright { float:right; margin:20px 0 20px 20px; }
.clr { clear:both; height:1px; line-height:1px;}
.clear { clear:both }


/** Global Values **/
body {
	/* set site-wide font properties here */
	font-family:Verdana, 'Open Sans', sans-serif, Helvetica;
	font-size:.8em;
	line-height:normal;
	color:#fefefe;
}
	a { color:#ffa800; text-decoration:underline } /* links color */
	a:hover, a:focus { color:#ffc85f } /* links hover state color */
	
	/* menu colors */
	nav { font-family:Calibri, 'Open Sans', sans-serif, Helvetica; font-size:1.25em; text-transform:uppercase }
		nav li a { background:#ff9c00; color:#fff }
		nav li a:hover, nav li a:focus, nav li.current_page_item a, nav li.current_page_parent a { color:#fff }
			nav li:nth-child(1) a { background:#ff0000 }
			nav li:nth-child(2) a { background:#0071c8 }
			nav li:nth-child(3) a { background:#429621 } /* added */
			nav li:nth-child(4) a { background:#c003e8 }
			nav li:nth-child(5) a { background:#ffa800 }
		nav li ul { background:inherit }
			nav li li a, nav li.current_page_item li a { color:#f8f7f5 }
			nav li li a:hover, nav li li a:focus { background:#010101 }
	
	/* footer text */
	footer, footer a { color:#202020; font-size:10px; font-family:Arial; }
	footer a:hover, footer a:focus { text-decoration:none }
	
	/* other font formats - add here, so we only need to change it in one location */
	#content .submenu { color:#ffa800 } /* orange */
	#content .subtitle { color:#0071c8 } /* blue */


/** Main Containers **/
body { background:#000; position:relative }
	.wrapper { margin:0 auto; width:1066px; position:relative; clear:both;  padding-bottom:15px;  }
	
	/* add for inside pages with different layout from home page */
	.inside #content { background:url(images/bg_inner.png) }
	
	/* two column layout */
	.twocolumn .mContent { width:635px; float:left; position:relative }
	.twocolumn .sidebar { width:305px; float:left; padding:8px 0 0 56px }
	
/** Menu **/
nav { height:56px; line-height:70px; margin-bottom:14px; position:absolute; right:0; top:0; z-index:9 }
	nav li { float:left; display:block; position:relative }
	nav li a { padding:0 20px; margin:0 3px; height:56px; display:block; float:left; text-align:left; text-decoration:none }
	nav li:hover ul { display:block }
	nav li ul { padding:0; display:none; position:absolute; left:3px; top:62px; z-index:9 }
	nav li li { float:none; padding:0; margin:0; line-height:19px; text-transform:capitalize }
	nav li li a, nav li.current_page_item li a { float:none; text-align:left; padding:12px 12px 12px 20px; width:inherit; height:inherit; min-width:160px; display:block; margin:0 }

/** Banner **/
#bannerfg { background:url(images/fg.png) repeat-x; position:absolute; bottom:0; left:0; width:100%; height:24px }
#banner { width:100%; min-width:100%; height:100%; min-height:100%; position:absolute; overflow:hidden; top:0; left:0; z-index:-100 }
#banner div.childslide { position:absolute; top:0; left:0; width:100%; height:510px; z-index:1 }
	#banner div img { width:100% }
	#banner .titles { position:absolute; bottom:30px; left:180px; font-size:60px; line-height:20px; z-index:9 }
	#banner .description { background:url(images/bg.png) repeat; width:365px; min-height:62px; padding:25px; display:block; position:absolute; bottom:30px; right:180px; z-index:9 }
	#banner .testimonial { /*background:url(images/bg.png) repeat;*/ width:610px; min-height:62px; padding:25px; display:block; position:absolute; top:45px; right:150px; z-index:9; font-size:36px; text-align:right; /*text-shadow:2px 2px #a1a0a1; */}
	#banner .testimonial span.testimonial_author { font-size:16px; display:block;margin-right: 20px;   }
#banner div.active { z-index:8; opacity:1.0 }
#banner div.last-active { z-index:7 }

	/* inside page rotating image */
	#pagebanner .titles { position:absolute; top:425px; left:0; font-size:60px; line-height:20px; z-index:9 }
	#pagebanner .description { background:url(images/bg.png) repeat; width:365px; height:inherit; padding:25px; position:absolute; left:0; top:45px; z-index:9; text-align:justify }

	/* inside page banner */
	.inside #banner { margin-top:10px; margin-top:0; height:270px; position:relative; z-index:1; top:inherit; left:inherit; text-align:center }

/** Form Elements **/
input[type='text'], input[type='email'], input[type='password'], textarea { display:block; border:1px solid #878787; padding:2% 3%; font-size:13px; width:92%; margin-bottom:7px}
input[type='submit'], input[type='button'] { clear:both; background:0; border:0; font-size:15px; font-family:Trebuchet MS; letter-spacing:2px; cursor:pointer; margin:0; padding:0}

/** For Everything Else In Between - add your css for template changes here **/
header { background:#010101; height:46px; padding-top:65px }
	#logo {}
	#content { min-height:510px; position:relative }
	.inside #content { padding-bottom:35px; min-height:475px }
	.inside #content .wrapper { background:#000; width:996px; min-height:405px; padding:30px 40px 40px 30px }
		
footer { padding:20px 0 30px 0 }

	/* projects */
	#content .runningtime { display:block; padding-left:5px }
	#content .submenu { position:absolute; top:45px; right:50px }
		#content .submenu a { text-decoration:underline}
			
	.imgBox { float:left; margin:35px 22px 0 0; width:315px; min-height:510px; }
	.imgBox:nth-of-type(3n+3) { margin-right:0 }
		.imgBox .imgHolder { padding-bottom:18px; height:444px; overflow:hidden }
		.imgBox .title, #content .subtitle { font-size:1em; font-weight:bold }
		
		/* two column */
	.twocolumn #content .submenu { position:absolute; top:8px; right:0 }
		.twocolumn .sidebar hr:last-child { display:none }
		
		/* mini gallery */
		.mn_gallery img { margin:10px 8px 0 0 }


/** Typography - override font properties for dynamic content **/
.mContent { line-height:normal }
.mContent h1, .mContent h2, .mContent h3 {}
.mContent h4, .mContent h5, .mContent h6, .mContent p, .mContent li { font-weight:normal }

	.mContent h1 { font-size:2.4em }
	.mContent h2 { font-size:2.4em }
	.mContent h3 { font-size:2em }
	.mContent h4 { font-size:1.6em }
	.mContent h5 { font-size:1.2em }
	.mContent h6 { font-size:1.2em }
	.mContent p, .mContent li { font-size:1em }
	.mContent ul, .mContent ol { margin-bottom:0; padding-left:8px; margin-left:26px }
	.mContent ul li { list-style:url(images/dot.png) outside; margin-top:5px }
	.mContent ul.arrow li, .mContent ol.arrow li { list-style:url(images/tab_arrow_orange.png) outside }
	.mContent strong {}
	.mContent em {}
	.mContent a { text-decoration:none }
		.mContent a:hover, .mContent a:focus {}

	.mContent .gotham_bd, .mContent .gotham_bk { line-height:1em }


/** Responsive Layouts **/
	/* Tablet View (for smaller resolutions only, allow larger tablets to display web view) */
@media only screen and (max-width:600px), only screen and (max-device-width:600px) {
	/* Reset Containers /
	body header, body footer, body #content, body .wrapper
	{
		min-width:100%; max-width:100%; width:100%; margin:0; padding:0; float:inherit; display:block
	}
	
	#content .mContent img { max-width:100%; height:auto } /* responsive images for dynamic content */
}
	/* Mobile View (specifically for apple devices, some brands will display on tablet view above) */
@media only screen and (max-width:320px), only screen and (max-device-width:320px) {
	/* Reset Containers /
	body header, body footer { min-width:320px }
	body #content, body .wrapper { min-width:300px; padding:0 10px }
	
	/* end */
}