/* -------------------------------------------------------------- 
  
   Screen styles for webmitten.com
   Author: Laura Fisher
   Copyright: All rights reserved. 2008.
   
-------------------------------------------------------------- */


html { min-width: 900px; }

body {
	min-width: 900px;
	background: #fff url(http://images.webmitten.com.s3.amazonaws.com/webmitten.jpg) no-repeat 50% 0%;
	}

div#canvas {
	position: relative;
	height: 2400px;
	width: 900px;
	padding: 0;
	margin: 0 auto;
	font-family: GillSans, Calibri, Trebuchet, sans-serif;
	}

div#canvas.shortened { height: 1600px; }
div#services { height: 930px; }

div#services div.blocktext {
	width: 440px;
	margin-left: 110px;
	padding-top: 95px;
	}

div#welcome { height: 870px; }

div#welcome div {
	width: 190px;
	margin-left: 590px;
	padding-top: 20px;
	}

div#welcome img {
	display: block;
	margin-left: 340px;
	padding-top: 50px;
	}

div#communication { height: 600px; }

div#communication div.blocktext {
	width: 215px;
	margin-left: 345px;
	padding: 75px 0 0 0;
	}

div#communication div#formcontainer {
	width: 426px;
	margin-left: 70px;
	float: left;
	}

div#formcontainer input {
	width: 204px;
	margin: 0 0 4px 0;
	padding: 3px;
	border: 0px;
	background: #E2EFD1;
	}

div#formcontainer textarea {
	width: 418px;
	height: 124px;
	margin: 0 0 4px 0;
	padding: 3px;
	border: 0px;
	background: #E2EFD1;
	font-family: GillSans, Calibri, Trebuchet, sans-serif;
	font-size: .75em;
	}

div#formcontainer fieldset p label {
	display: inline-block;
	width: 210px;
	margin-bottom: 0px;
	padding: 0;
	}

div#formcontainer fieldset p { margin-bottom: 0; }

div#communication div#error p.blocktext {
	float: right;
	width: 160px;
	margin: 53px 200px 0px 0px;
	padding: 10px;
	background: url(../images/fifty.png);
	letter-spacing: .1em;
	color: #FFF;
	text-align: center;
	}

div#successmessage {
	width: 417px;
	height: 120px;
	margin-top: 20px;
	padding: 30px 3px 3px 3px;
	background: #E2EFD1;
	text-align: center;
	}


/* portfolio styles */

div#portfolio {
	position: absolute;
	display: none;
	height: 570px;
	width: 270px;
	top: 950px;
	left: 30px;
	background: url(../images/seventy.png);
	}

div#portfolio div#showcase {
	width: 450px;
	margin-top: 118px;
	margin-left: 310px;
	}

div#portfolio div#showcase img {
	display: block;
	margin: 0 auto 4px auto;
	border: 2px #000 solid;
	}

div#portfolio p.thumbs a {
	display: block;
	margin-bottom: 20px;
	color: #FFF;
	text-decoration: none;
	}

div#portfolio div#projectlist {
	width: 270px;
	float: left;
	}

div#portfolio div#projectlist img {
	display: block;
	margin: 0 auto 4px auto;
	border: 1px #000 solid;
	}

p.thumbs { margin-top: 40px; }

p.thumbs span {
	display: block;
	height: 22px;
	width: 180px;
	margin: 0 auto;
	padding-top: 2px;
	color: #EEE;
	text-align: center;
	letter-spacing: .075em;
	background: url(../images/forty.png);
	}

div#projectdescription {
	width: 436px;
	margin-top: 4px;
	padding: 10px 4px 12px 14px;
	background: url(../images/seventy.png);
	color: #EEE;
	letter-spacing: .075em;
	line-height: 1em;
	}

div#projectdescription a:hover { text-decoration: none; }

div#projectdescription a {
	color: #EEE;
	text-decoration: underline;
	}

div#closebutton {
	position: absolute;
	top: 10px;
	right: 10px;
	}


/* navigation styles */

div#sectionnavigation {
	position: absolute;
	width: 100%;
	top: 30px;
	left: 66px;
	}

div#sectionnavigation ul {
	display: inline;
	margin-left: 30px;
	}

div#sectionnavigation ul li {
	display: inline;
	padding: 0 8px 0 8px;
	list-style-type: none;
	}

div#sectionnavigation ul li a {
	color: #0B8CBF;
	text-decoration: none;
	}

div#sectionnavigation ul li a:hover { color: #EF9D1D; }
div#sectionnavigation img { display: inline; }

div.return {
	position: relative;
	float: right;
	top: -220px;
	right: 170px;
	}

div.return ul li {
	display: block;
	height: 40px;
	margin-bottom: 20px;
	}

div.return ul li a {
	display: block;
	margin-left: 20px;
	padding-top: 12px;
	color: #000;
	text-decoration: none;
	}

div.return ul li span.work {
	display: block;
	margin-left: 20px;
	padding-top: 12px;
	color: #000;
	text-decoration: none;
	}

li.blue { background: url(../images/blue.png) no-repeat; }
li.green { background: url(../images/green.png) no-repeat; }
li.yellow { background: url(../images/yellow.png) no-repeat; }
li.orange { background: url(../images/orange.png) no-repeat; }


/* miscellaneous styles */

div.hide { display: none; }

div.blocktext p a {
	color: #0B8CBF;
	text-decoration: none;
	}

div.blocktext p a:hover { color: #EF9D1D; }

div h2 {
	margin-bottom: .5em;
	font-size: 1.25em;
	line-height: 1.25em;
	}

div p {
	margin-bottom: 1em;
	font-size: .875em;
	line-height: 1.5em;
	}

.intext { text-transform: lowercase; }

span.work {
	cursor: pointer;
	color: #0B8CBF;
	}

span.work:hover { color: #EF9D1D; }

div#rule {
	position: relative;
	width: 12px;
	height: 2400px;
	right: 80px;
	float: right;
	background: #000;
	}


/* portfolio page styles */


div#staticportfolio {
	width: 550px;
	margin: 0 auto 30px auto;
	padding-bottom: 40px;
	position: relative;
	top: 140px;
	background: url(../images/forty.png);
	}

div#staticportfolio div.project {
	padding-top: 50px;
	width: 450px;
	margin: 0 auto 20px auto;
	}

div.project p.projectimage img {
	border: 2px #000 solid;
	display: block;
	width: 454px;
	}

div.project p.description {
	padding: 10px 14px 12px 14px;
	display: block;
	width: 430px;
	background: url(../images/seventy.png);
	color: #EEE;
	letter-spacing: .075em;
	line-height: 1em;
	}

div.project p.description a:hover { text-decoration: none; }

div.project p.description a {
	color: #EEE;
	text-decoration: underline;
	}

div.project p.projectimage { margin-bottom: 4px; }

p.returnlink {
	width: 440px;
	margin: 0 auto;
	}

p.returnlink a {
	color: #EEE;
	text-decoration: none;
	}