@charset "UTF-8";

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input, iframe { margin: 0; padding: 0; border: 0;}
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

body {margin:0; padding:0; color: #3f3f3f; font-family: "Times New Roman", Times, serif; font-size:62.5%; text-align: left; background: #fff;}



p {font-size: 1.2em; line-height:1.9em; margin: 0 0 .8em;}
p.small {font-size:.8em;}
h1, h2, h3, h4 {font-weight: normal; font-style: normal;}

img {border:0;}

.green {color: #80cd4b;}
.darkgrey{color: #333;}

a {display: inline; text-decoration: none;}
a:hover {text-decoration:none;}

/* Accessibility */
.hide {font-size:1px; height:1px; line-height:0px; overflow:hidden; position:absolute; left:-9999px; top:-9999px;}


/* Building blocks */

#container { 
	margin: 50px auto auto;
	width: 790px; 
	background: #fff none repeat-y;
	padding-bottom:0;
	position:relative; 
} 
#container.portfolio {
	width: 790px; 
	margin-top: 0;  
} 

#header { 
	width: 795px; 
	float: left;
	text-align: center;
	height: 135px;
	border-bottom: 1px dotted #ccc;
} 











/* Content */

#content { 
	margin: 30px 0 40px;
	width: 790px;
	float: left;
} 
#content.portfolio { 
	margin: 30px;
	width: 730px;
	padding: 0;
} 


#textbox {
	margin: 0 0 40px;
	width: 515px;
	float: left;
}


#content p {font-size: 1.3em; line-height:1.9em; margin: 0 0 .8em;}
#content p.small {font-size:.8em;}
#content a {color: #a9a9a9; text-decoration:none;}
#content a.black {color: #a9a9a9; text-decoration:none;}
#content a:hover {color: #4bb94e; text-decoration: none;}

#content p.main {
	font-size: 2.6em;
	line-height: 1.7em;
	color: #a9a9a9;
	margin: .5em 0 .7em;
	text-align: center;
	/*text-shadow: #eaeaea 0 1px 0;*/
}
#content.portfolio p.main {
	text-align: left;
	}
#content p.main a {
	text-decoration: none;
	border-bottom:1px dotted;
	}

#content .contact p.main a:hover {
	color: #ec836a;
	}

#content h1 {
	color: #4bb94e;
	font-weight: normal;
	line-height: 1em;
	font-size: 3em;
	font-style: normal;
	padding-bottom: .2em;
	margin: 0;
}
#content h2 {
	color: #4bb94e;
	font-weight: normal;
	line-height: 1.5em;
	font-size: 1.5em;
	font-style: normal;
	margin-top: 1.2em;
	padding-bottom: .4em;
}
#content h3 {
	color: #4bb94e;
	font-weight: normal;
	line-height: 1.2em;
	font-size: 1.8em;
	font-style: normal;
	margin-bottom: .6em;
}




#basemenu {
	width: 790px;
	text-align: center;
	float: left;
	margin-top: 30px;
	padding: 0;
	height: 50px;
}
#basemenu p {
	font-size: 2.6em;
}
#basemenu.home a {
	color: #9f1f63;
}
#basemenu.home a:hover {
	color: #701244;
}
#basemenu.work a {
	color: #4bb94e;
}
#basemenu.work a:hover {
	color: #43a846;
}
#basemenu.contact a {
	color: #ec836a;
}
#basemenu.contact a:hover {
	color: #ea5942;
}

#portfolio {
	width: 730px;
	margin: 30px auto 0;
	text-align: center;
	overflow: hidden;
} 
#portfolio img {
	margin-right: 45px;
	margin-bottom: 25px;
	float: left;
}
#portfolio img.right {
	margin-right: 0px;
}
.portfolio-content {
	height: 570px;
}

#submenu {
	width: 730px;
	float: left;
	margin-top: 30px;
	padding: 0;
	height: 50px;
}
#submenu .left{
	width: 365px;
	float: left;
	margin: 0;
	text-align: left;
}
#submenu .right{
	width: 365px;
	float: right;
	margin: 0;
	text-align: right;
}
#submenu p {
	font-size: 2.6em;
}
#submenu a {
	color: #4bb94e;
}
#submenu a:hover {
	color: #43a846;
}








#footer { 
	width: 790px;
	padding: 20px 0;
	position: relative;
	left:0;
	clear: both;
	border-top: 1px dotted #ccc;
} 


#footer p {
	color: #ccc;
	text-align: left;
}
#footer ul {
	list-style-type: none;
	background-image: none;
	margin: 0;
	text-align: center;
	padding: 5px 0;
	font-size: 70%;
	height: 20px;
}
/*#footer ul.big {
	padding: 5px 0;
	font-size: 1.1em;
}
#footer ul.small {
	padding: 5px 0;
	font-size: 70%;
}*/
#footer li {
	color: #ccc;
	line-height: 1.5em;
	display: inline;
	text-indent: 0px;
	height: 20px;
	padding: 10px 0;
	margin: 0 5px 0 0;
	list-style-type: none;
	background-image: none;
}
#footer li.divider {
	background: url(../images/structural/dot-div.png) no-repeat 0 5px;
	margin-right: 10px;
	margin-left: 10px;
}

#footer a {color: #ccc; text-decoration:none;}
#footer a:hover {color: #888; text-decoration:none;}





.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}