/*
*************************************************

MATT PENSWORTH
Master Screen Styles

*************************************************

*/


/*-------------------------------------------    
    Basic Browser Settings
-------------------------------------------*/

article,aside,blockquote,body,button,dd,div,dl,dt,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,label,legend,li,nav,ol,p,section,textarea,ul { border: 0; margin: 0; padding: 0; }
html,input,select,textarea { font-size: 100%; font-style: normal; }

ul,ol { list-style: none; }

body {
	background-color: #fff;
	color: #999;
	font: 87.5%/1.5 'Droid Serif', Courier, Times, serif;
	font-style: normal;
	}
	
@font-face {font-family: 'CheapPine-Sans';src: url('webfonts/eot/style_199154.eot');src: url('webfonts/eot/style_199154.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_199154.woff') format('woff'),url('webfonts/ttf/style_199154.ttf') format('truetype'),url('webfonts/svg/style_199154.svg#CheapPine-Sans') format('svg');}
@font-face {font-family: 'CheapPine-Shadow';src: url('webfonts/eot/style_199155.eot');src: url('webfonts/eot/style_199155.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_199155.woff') format('woff'),url('webfonts/ttf/style_199155.ttf') format('truetype'),url('webfonts/svg/style_199155.svg#CheapPine-Shadow') format('svg');}
@font-face {font-family: 'CheapPine';src: url('webfonts/eot/style_199156.eot');src: url('webfonts/eot/style_199156.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_199156.woff') format('woff'),url('webfonts/ttf/style_199156.ttf') format('truetype'),url('webfonts/svg/style_199156.svg#CheapPine') format('svg');}

	
/*-------------------------------------------    
    Links
-------------------------------------------*/

a img { border: none; }

a,
a:link,
a:visited {
	color: #1DB7CB;
	outline: none;
	text-decoration: none;
	}
	
a:hover,
a.current { text-decoration: underline; }

/*-------------------------------------------    
    Headers
-------------------------------------------*/
	
h1,h2 {
    display: inline-block;
    line-height: normal;
    width: 100%;
    }

h1 {
    background: transparent url(../img/bg_logo.gif) center 42px no-repeat;
    color: #000;
    font-family: CheapPine-Sans;
    font-size: 4em;
    letter-spacing: -2px;
    margin: 25px auto 0;
    padding: 0 0 35px;
    text-align: center;
    }
    
    h1 em {
        display: block;
        clear: both;
        font-family: 'Miniver', cursive;
        font-size: .5em;
        font-weight: 100;
        letter-spacing: -1px;
        margin: 75px 0 0;
        text-align: center;
        }
    
h2 {
    color: #000;
    font-family: CheapPine-Sans;
    font-size: 2em;
    margin: 0 auto;
    text-align: center;
    }
    
    h2 em {
        background: transparent url(../img/bg_roles.png) 0 0 no-repeat;
        display: inline-block;
        height: 20px;
        margin: 3px 0 0 5px;
        opacity: 0.5;
        text-indent: -9999em;
        vertical-align: text-top;
        width: 18px;
        }
        
        h2 em.design { background-position: -44px 0; }
        
        .large h2 em { margin-top: 15px; }
        
#projects ul li h2 {
    background: transparent url(../img/bg_project_title.gif) left bottom no-repeat;
    left: -15px;
    margin: 0;
    opacity: 0;
    padding-bottom: 26px;
    position: absolute;
    top: 25px;
    width: auto;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    transition: opacity .5s ease;
    }
        
#projects ul li h2 span {
    background-color: rgba(228,31,17,1);
    color: #fff;
    padding: 15px;
    }
    
    #projects ul li a:hover h2 { opacity: 1; }
    
    #projects ul li.large h2 { font-size: 4em; }
        
#footer h2 {
    font-family: 'Miniver', cursive;
    font-size: 1.5em;
    font-weight: 100;
    margin: 25px 0 25px;
    }

/*-------------------------------------------    
    Structure
-------------------------------------------*/

#container {
	padding: 0 20px;
	}

#container header,
#container section,
#container footer {
    height: auto;
    margin: 0 auto;
    max-width: 755px;
    min-width: 755px;
    overflow: visible;
    width: 100%;
    }
    
#container #footer { padding-bottom: 25px; text-align: center; }

/*-------------------------------------------    
    Styling
-------------------------------------------*/
	
hr.fade {
    background: #0B444B;
    background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(255,255,255)),
      color-stop(0.1, rgb(0,0,0)),
      color-stop(0.9, rgb(0,0,0)),
      color-stop(1, rgb(255,255,255))
      );
    background-image: -moz-linear-gradient(
      left center,
      rgb(255,255,255) 0%,
      rgb(0,0,0) 10%,
      rgb(0,0,0) 90%,
      rgb(255,255,255) 100%
      );
    border: none;
    clear: both; 
    float: none;
    height: 1px;
    margin: 0 0 35px;
    opacity: 0.2;
    width: 100%;
    }
    
#about p {
  color: black;
  font-size: 2em;
  margin: 0 0 25px;
  }
  
  #about a.nsw  { color: #F75500; }
  #about a.nbw  { color: #32913C; }
  #about a.nbwj { color: #31923D; }
  #about a.tmp  { color: #85A9C9; }
  #about a.mb   { color: #faaf40; }
  #about a.psd  { color: #717070; }
    
#projects p.roles { color: #000; margin: 1em 0 2em; text-align: center; }
    
#projects p.roles em {
    background: transparent url(../img/bg_roles.png) 0 -30px no-repeat;
    color: #000;
    display: inline-block;
    height: 20px;
    margin: 0 5px 0 25px;
    vertical-align: text-bottom;
    width: 18px;
    }
    
    #projects p.roles em.design { background-position: -44px -30px; margin-left: 0; }
    
#projects ul { margin-bottom: 35px; }

#projects ul li {
    display: inline;
    height: auto;
    margin: 0 5px 1px 0;
    min-height: 248px;
    padding-bottom: 25px;
    position: relative;
    width: 248px;
    }
    
    #projects ul li:nth-child(3n+3) { margin-right: 0; }
	
#projects ul li img {
    height: auto;
    max-width: 248px;
    min-height: 100px;
    width: auto;
    }
    
    /* custom project widths */
    
    #projects ul li#nsw,
    #projects ul li#nsw img { height: 488px; width: 820px; }
    
    #projects ul li#forrester,
    #projects ul li#forrester img { height: 412px; }
    
    #projects ul li#elyton { margin-left: 30px; }
    
    #projects ul li#elyton,
    #projects ul li#elyton img,
    #projects ul li#cclc,
    #projects ul li#cclc img { height: 330px; width: 505px; }
    
#projects ul li a {
    height: 100%;
    width: 100%;
    }
    
ul#social-links { opacity: 0.7; text-align: center; width: 100%; }

ul#social-links li {
    display: inline;
    margin: 0 10px;
    text-align: center;
    }

/*-------------------------------------------    
    Utilities
-------------------------------------------*/

.accessibility {
	height: 0;
	left: -9999em;
	line-height: 0;
	position: absolute;
	}

.hide { display: none; }

.group:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
	}
	
	/* IE6 */
	* html .group { height: 1%; }
	/* IE7 */
	*:first-child+html .group { min-height: 1px; }
	
/*-------------------------------------------    
    Mobile
-------------------------------------------*/

@media handheld, only screen and (max-width: 767px) {

	body {
  	font-size: 16px;
  	-webkit-text-size-adjust: none;
  	}
	
	#container, body {
  	width: 100%;
  	min-width: 0;
  	margin-left: 0px;
  	margin-right: 0px;
  	padding-left: 0px;
  	padding-right: 0px;
  	}
	
	#container header,
	#container section,
	#container footer {
  	width: auto !important;
  	float: none !important;
  	margin-left: 0px !important;
  	margin-right: 0px !important;
  	padding-left: 20px !important;
  	padding-right: 20px !important;
  	}

}