/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
	background:#EBDED9;
	max-width:1140px;
	margin:0.1em auto;
	font-family:helvetica,arial,sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #3d3d3d;
	}
		
	a {
	color: #5bd698;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	}
	
	a:link, a:visited {
	font-weight:bold;
	color: #4E678E;
	}

	a:hover {
    color: #46a173;
	}
	
	p {
	margin: 0 0 0px 0;
	}
	
	/* drop cap 
	.row.fourcol p:first-child:first-letter {
	float: left; 
	font-size: 75px; 
	line-height: 60px; 
	padding-top: 4px; 
	padding-right: 8px; 
	padding-left: 3px; 
	font-family: Georgia; 
	}
	*/
	
	h2 {
	margin: 0 0 12px 0;
	}
	
	ul li{font-size:10pt;}
	
	.details {
	background: #e8e8e8 url(../img/whitetobiege.png) repeat-x;
	padding-top: 60px;
	padding-bottom: 50px;
	}
	
	.details h2 {
	margin-top: 20px;
	}
	
	.details code {
	background: #eef695;
	background: rgba(234,239,175,0.9);
	padding: 2px 3px;
	}
	
	.details img {
	margin: 20px 0 0 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}
	
	.details a {
	color: #000;
	text-decoration: underline;
	font-weight: bold;
	}
	
	.details a:hover {
	text-decoration: none;
	}
		
	.container {
	background: #ffffff;
	box-shadow:0 0 60px rgba(0,0,0,.5);	
	}
	
	/*
	div.header {
	background:#e8e8e8 url(/_css/_images/header.png) no-repeat 50% 50%;
	height:65px;
	}
	*/
	
	.comment {
	font-size: 0.8em;
	}
    
    /* NAVIGATION */	
	div.nav {
	float: left;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
    }

	div.navbg {
	width:1140px;
    background:#000 url(/_css/_images/navband.png) no-repeat 50% 50%; 
    margin-left:0px;
    margin-top:0px;
	}
	
	.navmenu {
    font-family:Arial;
    font-size:10pt;
    color: #FFF;
    font-weight:600;
    margin-left:0px;
    margin-top:-18px;
    background-image:url(/_css/_images/bg-black.gif);
    }
    
	.staticMenuItemStyle {
    text-align:left;
    display:block;
    padding-left:2px;
    padding-right:2px;
    padding-top:1px;
    padding-bottom:2px;
    margin-left:0;
    }

    .staticMenuItemSelectedStyle {
    background-image:url(../_images/bg-black2.gif);
    border:none 0px #000;
    }

    .staticHoverStyle {
    background-image:url(../_images/bg-black.gif);
    }
    
    .menuItem {
    display:block;
    }

    .dynamicMenuItemStyle {
    border:solid 1px #000;
    background-color:Silver;
    padding-left:8px;
    padding-right:8px;
    padding-top:2px;
    padding-bottom:2px;
    text-align:left;
    color:Red;
    position:relative;
    }
    
    .menuItemMouseOver,.menuItemSelected {
    border:0px none;
    background-image:url(/_css/_images/bg-black.gif);
    }

    .navmenu a:link,.navmenu a:visited,.navmenu a:active {
    text-decoration:none;
    color:#FFF;
    display:block;
    }
    
    .gotonav,
    footer nav{
	    display:none;
    }
    
    navband{
	height:32px;
	padding:0
    }


    /* Placing images */	
	div.polaroid
    {
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    box-shadow:2px 2px 3px #aaaaaa;
    }

    div.rotate_left
    {
    float:left;
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
    transform:rotate(7deg);
    }

    div.rotate_right
    {
    float:left;
    -ms-transform:rotate(-8deg); /* IE 9 */
    -moz-transform:rotate(-8deg); /* Firefox */
    -webkit-transform:rotate(-8deg); /* Safari and Chrome */
    -o-transform:rotate(-8deg); /* Opera */
    transform:rotate(-8deg);
    }
	
	div.statusbar.left {
	float:left;
	color: #3B3B3B;
	background: transparent;
	height:18px;
	padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;
	}
	
	div.statusbar.right {
	float:right;
	color: #3B3B3B;
	background: transparent;
	height:18px;
	padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;
	}
	
    div.hscroll {
    height: 138px;
    max-width: 1140px;
    overflow: auto;
    border: 1px solid #888;
    background-color: #fff;
    padding: 2px;
    }
    
    iframe {
    max-width:1140px;
    }
	
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

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

	body {
    margin-bottom: 30px;
	}
    
    div.header {
    background:#e8e8e8 url(/_css/_images/m_header.png) no-repeat 50% 50%;
	height:128px;
    }
    
    figure img{
    width:inherit;
    }
    
    /* SWITCH TO BOTTOM NAVIGATION */    
    .navmenu {
    display:none;
    }
    
    footer nav{
	display:block;
    }

    .gotonav:link,
    .gotonav:visited {
    float:left;
    display:block;
    font-weight:bold;
    background-color:#000;
    color:#fff !important;
    text-decoration:none;
    font-size:16px;
    line-height:1.5em;
    margin-left:2%;
	padding: 6px 12px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	cursor:pointer;    
    }
    
    .gotonav:hover,
    .gotonav:active{
	    background-color:#666;
    }

    nav ul li{    	
    position:relative;
    xmargin-left:3%;
    }

    nav ul li a {
    display:block;
    text-transform:lowercase;
    xpadding:2em 3%;
    padding:0.5em 3%;
    font-size:16px;
    background:#121314 url(/_css/_images/view-project.png) no-repeat 93.5% 50%;
    border-bottom:1px solid #222;
    }

    nav ul li a:link,
    nav ul li a:visited {
    color:#888;
    font-weight:bold;
    text-decoration:none;
    -webkit-transition: all .25s linear;
    transition: color .25s linear;
    }

    nav ul li a:hover,
    nav ul li a:active {
    color:#eee;
    background-color:#666;
    }


}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}