/*===================================================================================================
Contents
=====================================================================================================
	1) @font-face definitions
	2) Styles
	3) Positioning adjustments
	4) Media query adjustments
*/

/*===================================================================================================
1) @font-face definitions
===================================================================================================*/
@import url(http://fonts.googleapis.com/css?family=Ropa+Sans:400,400italic);

/*===================================================================================================
2) Styles
===================================================================================================*/

#logo h1, #logoDetailView h1 {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 26px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
}
.logo h1 {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 26px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
}
#logo h2, #logoDetailView h2 {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}
nav ul li {
	line-height: 45px;
}
nav ul li a, nav ul li button, nav ul li span, #detailViewBack a {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 18px;
	line-height: 45px;
	margin: 0;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}

.button
{
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
    
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
    
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    
}

.button, .button span
{
    -moz-border-radius: .3em;
    border-radius: .3em;
}

.button span
{
    padding: 0.5em 2.5em;
    
    /* The background pattern */
    
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

    /* Pattern settings */
    
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
    background-size: 3px 3px;            
}

.button:hover
{
	color: #FFFFFF;
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    top: 1px;
}

.button:active
{
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}
 /* button color */
 /*----------------------------*/         
  a.button, a:visited.button {
	 color: #FFF;
 }
 
 .button-black        {            
 	background: #141414;            
	background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#141414) );            
	background: -moz-linear-gradient(-90deg, #CCCCCC, #141414);          
	border: none;  
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CCCCCC', EndColorStr='#141414');        
	}                
	
.button-black:hover        {            
	position: relative;
	margin-top:8px;
	background: #CCCCCC;            
	background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#CCCCCC) );            
	background: -moz-linear-gradient(-90deg, #141414, #CCCCCC);            
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#141414', EndColorStr='#CCCCCC');        
	}              
	  
.button-black:active        {            
	background: #141414;        
}   

/* linkbox styles */
     
#boxes {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}
#boxes ul {
	padding-left: 0px;
}
#boxes li{
    display: -moz-inline-stack;
    display: inline-block;
	*display: inline;
	width: 200px;
	padding: 10px 13px;
	vertical-align: top;
}
#boxes .linkbox {
	background-repeat: no-repeat;
	background-color: #FFF;
	border-radius: 4px;
	padding-top: 166px;
	padding-bottom: 1px;
	min-height: 20px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	width: 200px;
	text-align: center;
	margin: 20px 0;
	box-shadow: 0 0 8px 2px #CCC;
	-webkit-box-shadow: 0 0 8px 2px #CCC;
	-moz-box-shadow: 0 0 8px 2px #CCC;
}
#boxes h2 {
	line-height: 27px;
}
#boxes .linkbox a, #boxes .linkbox a:visited {
	text-decoration: none;
	font-size: 27px;
}

h3.headline {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 42px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: optimizeLegibility;
}

.projectThumbnailHover h4 {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

.projectThumbnailHover h5 {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

.projectInfo h4 {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

.projectNavCounter {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

.projectNavButtons button {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}

.projectNavClose button, .projectNavEnlarge button {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}

p {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

footer p {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 16px;
	line-height: 1.5em;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

blockquote, blockquote p {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
    font-style: italic;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

blockquote cite {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
	letter-spacing: -0.02em;
	text-transform: none;
}

#formField {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

#formSubmit {
	font-family: 'Ropa Sans', Georgia, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
}
.slide:hover {
	cursor: pointer;
}

/*===================================================================================================
3) Positioning adjustments
===================================================================================================*/
#logoContainer {
	width: 100%;
	text-align: center;
}
#logo h2, #logoDetailView h2 {
	padding-left: 1px;
}

nav {
	width: 100%;
	height: 45px;
	text-rendering: auto;
	font-family: 'Ropa Sans', Georgia, sans-serif;
}
nav .menu {
	display: none;
	width: 2.2em;
	margin: 0 auto;
	font-size: 27px;
	color:#CCC;
	line-height: 45px;
}
nav ul li {
	padding-left: 24px;
}

.stick-right {
	float: right;
	margin: 0 0 8px 12px;
}
#overview {
	text-align: center;
}

#overview h3 {
	margin-bottom: 22px;
}

.projectThumbnailHover h4 {
	margin-top: 40px;
}

.projectThumbnailHover h5 {
	padding-top: 63px;
}

.projectInfo h4 {
	padding-top: 10px;
	padding-bottom: 8px;
}

.projectNavCounter {
	padding-top: 13px;
}

.projectNavClose, .projectNavEnlarge {
	padding-top: 4px;
	padding-top: 7px\9; /* IE adjustment */
}

.projectNavButtons {
	padding-top: 4px;
	padding-top: 7px\9; /* IE adjustment */
}

/* Tweak positioning slightly in Firefox */
@-moz-document url-prefix() {
  .projectNavEnlarge, .projectNavClose, .projectNavButtons {
		padding-top: 6px;
	}
}

.projectInfo ul {
	margin-top: -8px;
	margin-bottom: 7px;
}

.projectInfo p + ul {
	margin-top: -20px;
}

.projectInfo li, .linedList li {
	border-top: 1px solid #ddd;
	margin-top: 6px;
	margin-bottom: -2px;
	padding-top: 6px;
	padding-bottom: 0px;
}

@-moz-document url-prefix() {
	.projectInfo li, .linedList li {
		margin-bottom: -1px;
	}
}

.projectInfo li:last-child {
	margin-bottom: -2px;
}

.linedList {
	padding-bottom: 7px;
}


/*===================================================================================================
4) Media query adjustments
===================================================================================================*/
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		nav ul li a, nav ul li button, nav ul li span, #detailViewBack {
			font-size: 13px;
			width: 100%;
		}
		
	}

	/* Tablet portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		.projectThumbnailHover h4 {
			font-size: 14px;
		}
		
		.projectThumbnailHover h5 {
			font-size: 11px;
			padding-top: 59px;
		}
		
	}

	/* All mobile sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		#logo h1, #logoDetailView h1 {
			line-height: 1.1;
		}
		#overview {
			padding: 0px;
			margin: 0;
			
		}
		
		#overview h3 {
			font-size: 25px;
		}
		
		footer p {
			font-size: 14px;
		}
		.button-black {
			font-size: 18px;
		}
		
	}

	/* Mobile landscape size to tablet portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		
		
	}

	/* Mobile portrait size to mobile landscape size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		#logo h1, #logoDetailView h1 {
			font-size: 24px;
		}
				
		#overview h3 {
			font-size: 24px;	
		}
		
		.projectThumbnailHover h4 {
			font-size: 14px;
		}
		
		.projectThumbnailHover h5 {
			font-size: 11px;
			padding-top: 59px;
		}
		
	}
	
	@media print {
		.nav-list {
			display:none;
		}
	}