/* _________________________________________________

320 and Up boilerplate extension

Author: Andy Clarke
Version: 0.9b
URL: http://stuffandnonsense.co.uk/projects/320andup/
_____________________________________________________

1.ROOT
2.HEADINGS
3.TYPOGRAPHY
4.LINKS
5.FIGURES & IMAGES
6.TABLES
7.FORMS (See css/mylibs/forms.css)
8.BANNER header[role="banner"]
9.NAVIGATION nav[role="navigation"]
10.CONTENT
11.MAIN div[role="main"]
12.COMPLIMENTARY div[role="complementary"]
13.CONTENTINFO footer[role="contentinfo"]
14.GLOBAL OBJECTS
15.VENDOR-SPECIFIC 
16.TEMPLATE SPECIFICS
17.MODERNIZR

COLOURS 

*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin : 0;
padding : 0;
border : 0;
font-size : 100%;
font : inherit;
vertical-align : baseline; }

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display : block; }

abbr[title] { 
border-bottom : 1px dotted; 
cursor : help; }

/* 1.ROOT */

html {
overflow-y : scroll;
}

body { 
/*margin : 0 auto;
padding : 24px 0;
width : 90%; /* 252px */
font : 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
color : rgb(40,40,40); 
background-color : transparent; 
background: #ccc;
}

/* 2.HEADINGS */

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { color: #2C4746;
}

h1 { 
font-size : 1.7em; 
line-height : .8em; 
margin-bottom: .125em}

.no-fontface h1 {font-size: 1.2em;}

h2 { 
margin-bottom : .75em;
font-size : 1.2em; 
line-height : .95em; 
margin-bottom: .75em;
border-bottom: 1px solid #939C7F;
padding-bottom: 4px;
}

h3 { 
margin-bottom : 1em;
font-size : 1.5em; /* 24 / 16 = 1.5 */
line-height : 1.3; }

h4 { 
margin-bottom : 1.25em;
font-size : 1.25em; /* 20 / 16 = 1.25 */
line-height : 1.25; }

h5 { 
margin-bottom : 1.5em;
font-size : 1em; /* 16 / 16 = 1 */ }

h6 { 
font-size : 1em; /* 16 / 16 = 1 */ }

/* 3.TYPOGRAPHY */

p { 
margin-bottom : 1.3em; 
font-size : .8em; /* 16 / 16 = 1 */ }

li ul, 
li ol { 
margin : 0;
font-size : 1em; /* 16 / 16 = 1 */ }


b, 
strong	{ 
font-weight : bold; }

i, 
em { 
font-style : italic; }


pre { 
margin-bottom : 1.5em; 
white-space : pre; 
white-space : pre-wrap; 
word-wrap : break-word; }

pre, 
code { 
font : .875em 'andale mono', 'lucida console', monospace; 
line-height : 1.5; }

small {
font-size : 1em; /* 16 / 16 = 1 */ }

/* 4.LINKS */

a, 
a:visited {
outline : none;
color : rgb(50, 76, 73);
text-decoration : none; }
 
a:hover { 
outline : none;
color : rgb(40,40,40); 
text-decoration : underline; }
 
a:active, 
a:focus { 
outline : none;
color : rgb(0,0,0); }

.navLinks a, .nav a:visited, .nav a:hover {text-decoration: none;}

/* 5.FIGURES & IMAGES */



img,
object,
embed {
max-width : 100%; }


/* 7.FORMS (See css/mylibs/forms.css) */

/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */

/* 14.GLOBAL OBJECTS */

.clearfix { 
zoom : 1; }

.clearfix:before, 
.clearfix:after { 
content : "\0020"; 
display : block; 
height : 0; 
overflow : hidden; }

.clearfix:after { 
clear : both; }

/* 15.VENDOR-SPECIFIC */

body {
-webkit-text-size-adjust : 100%; 
-ms-text-size-adjust : 100%; }

a:link { 
-webkit-tap-highlight-color : rgb(52,158,219); }

::-webkit-selection { 
background : rgb(23,119,175); 
color : rgb(250,250,250); 
text-shadow : none; }

::-moz-selection { 
background : rgb(23,119,175); 
color : rgb(250,250,250); 
text-shadow : none; }

::selection { 
background : rgb(23,119,175); 
color : rgb(250,250,250); 
text-shadow : none; }

/* input[type=search] {
-webkit-appearance : none; }

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
display : none; } */

::-webkit-input-placeholder {
padding : 10px;
font-size : .875em; 
line-height : 1.4; }

input:-moz-placeholder { 
padding : 10px;
font-size : .875em; 
line-height : 1.4; }

.ie7 img,
.iem7 img { 
-ms-interpolation-mode : bicubic; }

div,
input,
textarea  { 
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box; }


/* Hide for screenreaders and visual browsers */
.hidden { 
display : none; 
visibility : hidden; }

/* Hide visually */
.visuallyhidden { 
position : absolute;
clip : rect(0 0 0 0); 
overflow : hidden;
margin: -1px;
padding : 0;
height : 1px;      
width : 1px;
border : 0; }

/* Allow an element to be focusable via keyboard  */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
position : static;
clip : auto; 
overflow : visible;
height : auto; 
margin : 0;   
width : auto; }

/* Hide but maintain layout */
.invisible { 
visibility : hidden; }

/* 16.TEMPLATE SPECIFICS */

#goog-fixurl ul  {
list-style-type : none; }

#goog-fixurl input  {
margin-bottom : 1.5em; }

/* 17.MODERNIZR */

/*TYPEKIT FOUT*/
 .wf-loading .headerTxt {
    /* Hide the blog title and post titles while web fonts are loading */
    visibility: hidden;
  }

/* MEDIA QUERIES */

/*Print __________________________________________________________________________________________________________ */
@media print {
* { 
background : transparent !important; 
color : black !important; 
text-shadow : none !important; 
filter : none !important;
-ms-filter : none !important; } 

a, a:visited { 
color : #444 !important; 
text-decoration : underline; }

a[href]:after { 
content : " (" attr(href) ")"; }

abbr[title]:after { 
content : " (" attr(title) ")"; }

a[href^="javascript:"]:after, 
a[href^="#"]:after { 
content : ""; }
  
pre, blockquote { 
border : 1px solid #999; 
page-break-inside : avoid; }

thead { 
display : table-header-group; }

tr, img { 
page-break-inside : avoid; }

@page { 
margin : .5cm; }

p, h2, h3 { 
orphans : 3; 
widows : 3; }

h2, h3 { 
page-break-after : avoid; }
}/*/mediaquery*/

.clear { clear:both; }
	
	
body {
    height:100%;
    width:100%;
    margin:0;padding:0;
	background: url(../img/background.jpg);
}

#left { 
	width: 100%;
	color:#fff; 
	background: url(../img/sidebar-back.jpg);
	padding: 15px 0;
} 

	.title {width: 86%; margin: 0 auto; text-align: center;}
	
	.navLinks {
		list-style:none; 
		text-align: center; 
		margin-bottom: 8px;
		border-top: 1px solid #43615f;
		border-bottom: 1px solid #43615f;
		padding: 3px 0 4px 0;
		text-shadow: 1px 1px 1px #2e2e2e;
		}
	
		.navLinks li {display: inline; padding: 0 .35em;}
	
		.navLinks a, .navLinks a:visited {
			color: #fff; 
			text-decoration: none; 
			text-transform: uppercase;
			font-size: .8em;
			padding-top: 1px;
			}
			
		.navLinks a:hover {color: #acc4ba; text-decoration: none;}
		
	
	
	.social {margin: 0 auto 10px auto; list-style: none; width: 71px; padding: 0px;}
		
		.social li {float: left;}
		
			.social li a {
				display: block; 
				position: relative; 
				height: 22px; 
				width: 23px;
				overflow: hidden;
				}
				
			.social li a#soc1 {width: 25px;}								
			
			.social li a span {display: block; position: absolute; top: 0; left: 0; height: 22px; width: 23px;}
			
				.social li a#soc1 span {background: url(../img/social.png) no-repeat 0 0; width: 25px;}
				.social li a#soc2 span {background: url(../img/social.png) no-repeat -25px 0;}
				.social li a#soc3 span {background: url(../img/social.png) no-repeat -48px 0;}
				
				.social li a#soc1:hover span {background: url(../img/social.png) no-repeat 0 -22px; width: 25px;}
				.social li a#soc2:hover span {background: url(../img/social.png) no-repeat -25px -22px;}
				.social li a#soc3:hover span {background: url(../img/social.png) no-repeat -48px -22px;}
		

#wrapper, #portWrapper {
    width:100%;
	background: url(../img/header-back.png) repeat-x 0 0;
}
	
	.item {width:100%; clear: both;}
	
	#item1 h2 {border: 0px;}

	.content {		
		width: 100%; /*increase width percentage for underlap to the left of nav bar*/
		padding: 18px 3% 0 3%;
		/*padding-top:18px;*/
    }    
	
	.thumbBox {
		width: 100%; 
		display: inline-block;
		margin-bottom: 20px;
		/*height: 200px; 
		overflow: hidden;*/
	}
	
	.ie7 .thumbBox, .ie6 .thumbBox {display: inline;}

	.thumb {
		display: block;
		width: 94%;
		margin: 0 auto;
		border: 8px solid #F2ECE6;
		border: 8px solid rgba(255, 255, 255, 0.5); 
		/*height: 170px;
		overflow: hidden;*/ 
		-moz-box-shadow: 0px 0px 3px #888;
		-webkit-box-shadow: 0px 0px 3px #888;
		box-shadow: 0px 0px 3px #888;
		line-height: 0;
		}

		
		.thumb:hover {border-color: #fff;}
		
		/*.thumb img {min-height: 140px;}*/
	

form {width: 100%;}

form ol {list-style: none;}

label, input[type=text], textarea {width: 100%}

label {font-size: .8em; line-height: .8em; font-weight: bold; color: #2C4746;}

input, textarea {
	background-color: rgba(255, 255, 255, 0.5); 
	border: 0px; 
	padding: 12px; 
	margin-bottom: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

textarea {height: 100px; margin-bottom: 15px;}

input[type=submit], .portNav {
	padding: 12px 20px; 
	background-color: #2C4746; 
	color: #fff; 
	font-weight: bold;
	cursor: pointer;
	text-shadow: 1px 1px 1px #2e2e2e;
	}	
	
	.bio, .project {width:100%;}
	
	.bioPict {width: 30%; float: left; margin-right: 5%;}
	
	.bioPict img {border: 5px solid rgba(255, 255, 255, 0.5);}
	

	.sideBox { 
		font-size: .85em;
		line-height: 1em;
		padding: 2%;
		background: rgba(255, 255, 255, 0.5);
		margin-bottom: 20px;
		}
		
		.plainBox {padding: 0px; background: none;}
	
	.sideBox h2 {margin-bottom: 10px; font-size: 2em;}
	.sideBox ul {margin-left: 20px;}
		.sideBox ul li {margin-bottom: .8em;}
	
/*portfolio pages*/
.mainPict, .projAlt {padding: 8px 8px 0px 8px; background: rgba(255, 255, 255, 0.5); margin-bottom: 20px;}
.mainPict img, .projAlt img {margin: 0px;}

.portNav {
	display: block; 
	float: left; 
	margin-right: 10px;
	padding: 10px 16px; 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: .85em;
	color: #acc4ba;
	}
	
.portNav:visited {color: #acc4ba;}
.portNav:hover {color: #fff; text-decoration: none;}


/*480px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 480px) {

.navLinks a, .navLinks a:visited {font-size: 1em; }
		
			
.navLinks li {display: inline-block; padding: 0 .75em;}

#item1 .headerTxt {width: 97%; margin-left: auto; margin-right: auto;}


.thumbBox {
	width: 48%;
	/*height: 185px; 
	float:left; 
	overflow:hidden;*/
	}
	
.thumbBox.odd {margin-right: 2%;}
	
	/*.thumb {height: 150px; width: 89%; margin: 0 auto;}
	.thumbCaption {width: 90%; margin: 0 auto;}
	*/

	.sideBox { 
		width: 49%;
		float: left;
		}
		
	.sideBox.first {margin-right: 2%;}
	


/*Portfolio Pages*/

.portBox {width: 100%;}

.projAlt {width: 48%; float: left;}
.projAlt.first {margin-right: 4%;}
	


}/*/mediaquery*/

/*775px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 775px) {


h1 { font-size : 1.95em;}
.no-fontface h1 {font-size: 1.45em;}

h2 {font-size: 1.3em; /*margin-bottom: 2.75em;*/ margin-bottom: 0px; border: 0px;}
.no-fontface h2 {font-size: .8em;}

p {font-size: 1em;}

#left { 
	width: 30.194%;
	margin-left: 5.488%;
	top:0; 
	height:100%; /* works only if parent container is assigned a height value*/   
	color:#333; 
	position: fixed;
	z-index: 1000;
	padding-top: 0px;
	} 
	

	.nav {
		width: 85%;
		margin: 0 auto;
		}
		
		.navLinks {margin-bottom: 15px; border: 0px;}
		
		.navLinks li {
			display: block;
			float: none; 
			width: 100%;
			padding: 0px;
			}
		
		.navLinks li a, .navLinks li a:visited {
			color: #acc4ba; 
			display: block; 
			position: relative; 
			width: 100%; 
			text-align: center;
			border-bottom: 1px solid #43615f;
			font-size: .875em;
			line-height: .875em;
			padding: 7px 0 8px 0;
			}
			
		.navLinks li:first-child a {border-top: 1px solid #43615f;}
			
		.navLinks li a:hover {color: #fff; text-decoration: none;}
		
		.navLinks li a.selected, .navLinks li a:hover.selected {
			color: #fff;
			}
	
	#wrapper{
    width:100%;
    overflow:hidden;
	min-height: 1640px;
    position: relative;
}

	.ie6 #wrapper {overflow:visible;}

 
 	#innerWrapper {  
		width:100%;
    	height:100%;
		position:absolute;
    	top:0;left:0;}
	
	   #mask { 
		width: 300%;
        height:100%;
    }
		
	.item {
      width:33.333%;
        height:100%;
        float:left;
		clear:none;
    }
	
	#item1, .port {background: url(../img/header-work.jpg) no-repeat 0 0;}
	#item2 {background: url(../img/header-about.jpg) no-repeat 0 0;}
	#item3 {background: url(../img/header-contact.jpg) no-repeat 0 0;}

.content {		
	margin-left: 41.17%;
	width: 58.83%; 
    position:relative;
	padding: 0px;
    }
	
#item2 .content, #item3 .content, .port .content {padding-right: 40px;}


	.title {
		margin-top: 37px;
		height: 106px;
		margin-bottom: 48px;
	}
	
	.header {
		height: 90px;
		margin-bottom: 27px;
		margin-top: 74px;
	}
	
	
	.content.nohead {padding-top: 191px;}
	
	
	
.thumbBox {
	width: 46.085%;
	margin-right: 2.908%; 
	/*float: left;
	height: 120px;*/
	}
	
	.ie7 .thumbBox, .ie6 .thumbBox {display: block; float: left;}
	
	.thumbBox.odd {margin-right: 2.908%;}
	
	
	/*.thumb {height: 140px; width: 93%;}*/
	
	
.topBtn {display:none;}	

	.sideBox {margin-right: 0%;}
			
		
/* portfolio pages */
.port {padding-top: 74px;}
	.portHeader {height: 122px;}
	
	.projAlt {width: 100%; padding-top: 6px; float: none;}
	.projAlt.first {margin-right: 0;}
	
	/*.sideBox.port {width: 100%;}*/


}/*/mediaquery*/


@media only screen and (min-width: 900px) {

 
#wrapper {min-height: 1460px;}

h1 { font-size : 2.25em;}
.no-fontface h1 {font-size: 1.75em;}

h2 {font-size: 1.4em; margin-bottom: 3.5em;}
.no-fontface h2 {font-size: .9em;}


#item1 .headerTxt {width: 99%;}

#left { 
	width: 25.194%;
	margin-left: 3.488%;
	}
		
		.navLinks li a, .navLinks li a:visited {	
			font-size: 1em;
			line-height: 1em;
			}

.content {		
	margin-left: 32.17%;
	width: 67.83%; 
    position:relative;
    }
	
	#item2 .content, #item3 .content {padding-right: 20px;}
	
	
	
/*.thumbBox {
	height: 190px;
	}*/

	
	/*.thumb {height: 160px; }*/


form {width: 80%;}

.bio, .project {width:55%; float: left; margin-right: 5%;}	

	.sideBox {
		width: 40%; 
		float: right; 
		clear:right; 
		margin-bottom: 20px;
		margin-right: 0px;
		}
		
	.sideBox.first {margin-right: 0px;}
				
		
/*.sideBox.port {width: 40%;}*/


}/*/mediaquery*/

/*1175px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 1175px) {

#wrapper {min-height: 1060px;}



#left { 
	width: 25.194%;
	min-width: 264px;
	} 
	
	.nav {
		width: 264px;
		height: 276px;
		/*padding-top: 60px;*/
		}
		
	.navLinks {margin-bottom: 1em;}
	
	.navLinks li a, .navLinks li a:visited {
		width: 100%; 
		height: 26px;
		padding: 14px 0 0 0;
		border: 0px;
		font-size: 12px;
		}
		
		.navLinks li:first-child a {border: none;}
	
	.navLinks li a span {
		display: block; 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 28px;
		}
	
	.navLinks li a#nav4 {height: 40px;}
	.navLinks li a#nav4 span {height: 40px;}
	
	.navLinks li a#nav1 span {background: url(../img/nav.png) no-repeat 0px 0;}
	.navLinks li a#nav2 span {background: url(../img/nav.png) no-repeat 0px -38px;}
	.navLinks li a#nav3 span {background: url(../img/nav.png) no-repeat 0px -76px;}
	.navLinks li a#nav4 span {background: url(../img/nav.png) no-repeat 0px -114px;}
	
	.navLinks li a#nav1:hover span, .navLinks li a#nav1.selected span {background: url(../img/nav.png) no-repeat -264px 0;}
	.navLinks li a#nav2:hover span, .navLinks li a#nav2.selected span {background: url(../img/nav.png) no-repeat -264px -38px;}
	.navLinks li a#nav3:hover span, .navLinks li a#nav3.selected span {background: url(../img/nav.png) no-repeat -264px -76px;}
	.navLinks li a#nav4:hover span, .navLinks li a#nav4.selected span {background: url(../img/nav.png) no-repeat -264px -114px;}

.content {		
	margin-left: 30.697%;
	width: 69.303%;
	/*padding-top: 80px;*/
    }
	
	#item2 .content, #item3 .content {padding-right: 40px;}
	
	.title {
		margin-top: 32px;
		height: 106px;
		margin-bottom: 53px;
	}
	
	.header {
		height: 90px;
		margin-bottom: 28px;
		margin-top: 73px;
	}
	

.thumbBox {
	/*height: 150px;*/
	width: 29.754%; 
	}
	
	

form {width: 60%;}

.bio, .project {width:65%; float: left; margin-right: 5%;}
	

	.sideBox {width: 30%;}
		
	/* portfolio pages */
	
	.projAlt {width: 48%; float: left; padding-top: 6px;}
	.projAlt.first {margin-right: 4%;}


}/*/mediaquery*/

/*1400px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 1400px) {



#left { 
	width: 350px;
	margin-left: 50px;
	} 
	
.content {		
	margin-left: 450px;
	width: 69.303%; 
    }
	
	/*.thumbBox {
	height: 175px;
	}*/
	
.project {max-width: 690px;}
	
.port .content {width: 100%; padding: 0px; margin: 0px; padding-left: 450px; padding-right: 40px;}
	


}/*/mediaquery*/

/*2x __________________________________________________________________________________________________________ */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/

/* 
Sources: 
http://meyerweb.com/eric/tools/css/reset
http://people.opera.com/patrickl/experiments/keyboard/test
http://gist.github.com/413930
http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
http://tjkdesign.com/ez-css/css/base.css
http://viget.com/inspire/styling-the-button-element-in-internet-explorer
http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing
http://html5doctor.com/html-5-reset-stylesheet/
http://praegnanz.de/weblog/htmlcssjs-kickstart/
http://camendesign.com/design/
http://yui.yahooapis.com/2.8.1/build/base/base.css
http://webaim.org/techniques/css/invisiblecontent/
http://drupal.org/node/897638
*/