@font-face {
    font-family: 'CartoGothicStdBook';
    src: url('../fonts/CartoGothicStd-Book-webfont.eot');
    src: url('../fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
         url('../fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
         url('../fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CartoGothicStdBold';
    src: url('../fonts/CartoGothicStd-Bold-webfont.eot');
    src: url('../fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
         url('../fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
         url('../fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{
	margin: 0;
	padding: 0;
	border: none;
}

html{
	height: 101%
}

header{
	position: fixed;
	background: #a8d1f6;
	height: 6px;
	width: 100%;
	z-index: 1;
}

body{
	font-family: 'CartoGothicStdBook', Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
	font-size: 14px;
	color: #818282;
}


#container{
	width: 960px;
	margin: auto;
}

nav{
	float: left;
	text-transform: uppercase;
	position: fixed;
	width: 115px;
	margin-top: 2em;
	margin-left: 1.5em;
	letter-spacing: 0.1em;
}

ul.nav {
  	font-family: 'CartoGothicStdBold', helvetica, sans-serif;
  	margin: 0;
  	padding: 0;
  	list-style-type: none;
}

dropdown {
	display:block;
}

.subnav{
	font-size: 12px;
	margin-left: 15px;
	list-style-type: none;
}

.subopen{
	font-size: 12px;
	margin-left: 15px;
	list-style-type: none;
}

ul.nav a {
	display: block;
	color: #2B3F00;
  	text-decoration: none;
	padding: 0.3em 1em;
}


ul a:hover,
ul a:focus,
ul.nav .selected {
	color: #a8d1f6;
}

.selected{
	padding: 0.3em 1em;
}

section {
	float: left;
	margin-top: 70px;
	margin-left: 160px;
	min-height: 550px;
}

section h1{
	margin-left: 60px;
}


/* PORTFOLIO */

section .project{
	float: left;
	margin-bottom: 30px;
	margin-left: 60px;
}

section .preview{
	float: right;
	width: 420px;
	height: 258px;
}

section .description{
	float: right;
	width: 240px;
	height: 258px;
	border-top: solid #818282 2px;
	margin-right: 20px;
}

section a{
	text-decoration: none;
	color: #818282;
}

section .work{
	margin-left: 60px;
}

.space{
	margin-bottom: 2em;
}



/* ABOUT and CONTACT */

section .confirmation{
	margin-left: 60px;
}

section .contact, 
section .about{
	width: 550px;
	margin-left: 60px;
}

section .contact a,
section .about a{
	text-decoration: none;
	color: #818282;
}

section .contact a:hover,
section .about a:hover{
	color: #a8d1f6;
}

form{
	margin-left: 60px;
}


.aboutheader {
	width: 575px;
	margin-left: 60px;
}

.aboutheader,
.text{
	font-family: 'CartoGothicStdBook';
	line-height: 1.35em;
	font-size: 20px;
}


input, textarea {
	padding: 5px;
	margin-bottom: 10px;
	font-family: 'CartoGothicStdBook', Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
	font-size: 14px;
	outline: none;
}

input[type=text], textarea {
	width: 500px;
	color: #818282;
	border: 1px solid #a8d1f6;
}

input[type=submit] {
	width: 75px;
	background-color: #818282;
	border: none;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #FFFFFF;
	
	/* rounded corners */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

input[type=submit]:hover {
	background-color: #a8d1f6;
	cursor: pointer;
}

input[type=submit]:active {
	background-color: #4A6F00;
}


.copyright{
	float: left;
	clear: both;
	color: #818282;
	font-size: 10px;
	margin-top: 3em;
	margin-left: 220px;
	padding-bottom: 30px;
}

h1 {
	font-family: 'CartoGothicStdBook';
	margin-top: 0.35em;
	font-size: 27px;
}

h2 {
	font-family: 'CartoGothicStdBold';
	text-transform: uppercase;
	margin-top: 0.35em;
	font-size: 13px;
	letter-spacing: 0.05em;
}


.breadcrumbs{
	font-size: 10px;
	margin-top: 5px;
	margin-left: 60px;
}

.breadcrumbs a{
	text-decoration: none;
	color: #818282;
}

.breadcrumbs a:hover{
	color: #a8d1f6;
}

.border{
	border: 1px solid #DCDCDC;
}


/* PREVIOUS AND NEXT*/
#prev-next{
	width: 119px;
	margin-top: 1.5em;
	margin-left: 1em;
}

.next{
	margin-left: 1em;
}

.next, .prev{
	float: left;
	width: 25px;
}

/* arrow icon (span tag) */

.next span{
	background: #ddd url(next-arrow.png) no-repeat center center;
}

.prev span{
	background: #ddd url(prev-arrow.png) no-repeat center center;
}

.next span, 
.prev span{
	width: 25px;
	height: 25px;
	display: block;

	/* rounded corners */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	/* transition */
	-webkit-transition: .25s;
	-moz-transition: .25s;
	transition: .25s;
}

#prev-next a:hover span{
	background-color: #a8d1f6;
}



/* BACK TO TOP */
#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: 1.5em;	
}

/* arrow icon (span tag) */
#back-top span {
	width: 40px;
	height: 40px;
	display: block;
	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	/* transition */
	-webkit-transition: .5s;
	-moz-transition: .5s;
	transition: .5s;
}

#back-top a:hover span {
	background-color: #a8d1f6;
}


/*for 900px or less */
@media screen and (max-width: 900px) {
	
	#container{
		width: 900px;
		margin: auto;
	}
	
	section{
		width: 85%;
		margin-left: 130px;
	}
	
	section .project{
		float: right;
		margin-bottom: 70px;
	}

	section .preview{
		float: right;
		width: 400px;
		height: 175px;
		margin-left: 15px;
	}
	
	section .description{
		float: left;
		width: 240px;
		height: 100%;
		margin-right: 10px;
	}
	
	.thumbs{
		width: 90%;
		height: auto;
	}
}



/*for 700px or less */
@media screen and (max-width: 700px) {

	#container{
		width: 320px;
		margin: auto;
	}
	
	#logo{
		margin-left: 95px;
		width: auto;
		height: 125px;
	}

	nav{
		position: relative;
		width: 290px;
		margin-top: 1em;
		font-size: 15px;
		letter-spacing: 0.1em;
		margin-left: 1.35em;
	}
	
	nav ul li{
  		float: left;
  	}
  	
  	ul.nav a {
		padding: 0.3em 0.15em;
		margin-left: 11px;
	}
	
	.selected{
		padding: 0.3em 0.15em 0.3em 0.85em;
	}
	
	.subnav{
  		float: left;
  		width: 290px;
  		position: relative;
  		font-size: 15px;
  		margin-top: 5px;
  		right: 95px;
  	}
  	
  	.subopen{
  		float: left;
  		width: 290px;
  		position: absolute;
  		font-size: 15px;
  		margin-top: 5px;
  		right: 10px;
  	}
  	
	
	section {
		width: 290px;
		margin-left: auto;
		margin-top: 30px;
	}
	
	section h1{
		margin-left: 15px;
	
	}
	
	section .h1-space{
		margin-top: 35px;
	}
	
	
	section .project{
		float: left;
		margin-bottom: 45px;
		margin-left: 1em;
	}

	section .preview{
		float: left;
		width: 290px;
		height: 175px;
		margin-left: 0px;
		padding-top: 5px;
		border-top: solid #818282 2px;
	}
	
	section .description{
		float: left;
		width: 290px;
		height: 100%;
		border-top: none;
		margin-top: 10px;
		margin-left: 0px;
	}

	section .work{
		margin-left: 15px;
	}
	
	.space{
		width: 290px;
		height: auto;
		margin-bottom: 1em;
	}

	.thumbs{
		width: 290px;
		height: auto;
	}
	
	.copyright{
		float: left;
		margin-left: 20px;
		padding-bottom: 10px;
	}
	
	h1{
	font-size: 20px;
	}
	
	h2 {
	letter-spacing: 0.1em;
	}
	
	.text{
	font-size: 14px;
	}
	
	.breadcrumbs{
	font-size: 12px;
	margin-left: 15px;
	}
	
	/* ABOUT and CONTACT */

	section .confirmation{
		margin-left: 15px;
	}

	section .contact, 
	section .about{
		width: 290px;
		margin-left: 15px;
	}

	form{
		margin-left: 15px;
	}

	.aboutheader {
		width: 290px;
		margin-left: 15px;
	}

	.aboutheader,
	.text{
		font-family: 'CartoGothicStdBook';
		line-height: 1.35em;
		font-size: 16px;
	}


	input[type=text], textarea {
		width: 290px;
	}
	
	input[type=submit] {
	width: 75px;
	background-color: #818282;
	border: none;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #FFFFFF;
	
	/* rounded corners */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}

	/* PREVIOUS AND NEXT*/
	#prev-next{
		position: relative;
		margin-top: 4.25em;
		margin-left: -5px;
	}