@CHARSET "UTF-8";
/*
THEME:
white: #ffffff
grayish blue: #dee3e6
green: #e7e9d1, #c7c9b1(darker)
gray: #444444


*/

/* global reset */
body,img,p,h1,h2,h3,h4,h5,h6,fieldset,form,table,td,ul,li,dl,ol,dd,dt,pre,blockquote,code{ margin:0; padding:0; border:0; }

/*
------------------------------
	elements
------------------------------
*/
body{
	background-color: #ffffff;
	font-family: Georgia;
	font-size: 100%;
	text-align: center;
}
p{
	font-size: 12px;
	line-height: 22px;
	margin: 10px 0;
}
a{

}
h1,h2,h3{ margin: 10px 0; }
h4,h5,h6{ margin: 6px 0; }
h1{}
h2{ color: #a7a991; font-size: 18px; }
h3{ color: #777777; font-size: 16px; }
ul,ol{  }
textarea{ overflow: auto; }
button{ border: solid 1px #ffffff; background-color: #c7c9b1; color: #ffffff; font-weight: bold; padding: 5px 10px; }
button:hover{ border: solid 1px #f4f4f4; }
/*
------------------------------
	layout
------------------------------
*/
#wrapper{
	background-color: #ffffff;
	width: 800px;
	margin: 20px auto;
	text-align: left;
}
#header{
	background-color: #ffffff;
	position: relative;
	margin: 0 0 30px 0;
}
#content{

}
#footer{
	background: #ffffff url(/static/images/footer_top.jpg) top center no-repeat;
	margin: 30px 0 0 0;
	padding: 40px;
	font-size: 11px;
}

/*
------------------------------
	sections
------------------------------
*/
#header #nav{ position: absolute; right: 0; top: 120px; }
#header #nav li{ float: left; list-style: none; }
#header #nav li a{ display: block; color: #444444; text-decoration: none; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 14px; padding: 10px 0; border-top: solid 4px #dee3e6; border-bottom: solid 4px #dee3e6; }
#header #nav li a:hover,#header #nav li a:active, #header #nav li a.current{ border-top: solid 4px #c7c9b1; border-bottom: solid 4px #c7c9b1; }
#header #nav li a.homelink{ width: 100px; }
#header #nav li a.aboutlink{ width: 130px; }
#header #nav li a.portfoliolink{ width: 130px; }
#header #nav li a.contactlink{ width: 140px; }


#footer .lhalf{ float: left; width: 300px; text-align: center; }
#footer .rhalf{ float: right; width: 300px; text-align: center; }
#footer .rhalf ul{ list-style: none; }
#footer .rhalf li{ display: inline; margin: 0 12px; }
#footer a{ color: #444444; }

/*
------------------------------
	pages
------------------------------
*/
.page{  }
.page .leftcol{ float: left; width: 450px; }
.page .rightcol{ float: left; width: 320px; margin: 0 0 0 20px; border: solid 2px #e6e3e6; padding: 2px; }
.page .rightcol .box{ border: solid 1px #e6e3e6; background: #ffffff url(/static/images/box_bg.jpg) top left repeat; /*padding: 10px;*/ }


.page .rightcol .box a.galleryimg{  }
.page .rightcol .box a.galleryimg img{ border: solid 3px #c7c9b1; width: 125px; height: 100px; margin: 10px 0 5px 18px; }
.page .rightcol .box .viewportfolio{}
.page .rightcol .box .viewportfolio img{ width: 285px; border: solid 3px #c7c9b1; margin: 15px 0 15px 15px; }

.portfolio{  }
.portfolio .project{ border-bottom: dotted 2px #e7e9d1; margin: 0 0 20px 0; }
.portfolio .project h3 a{ text-decoration: none; color: #777777; }
.portfolio .project a.portfolioimg{ float: right; margin: 0 0 10px 15px; }
.portfolio .project a.portfolioimg img{ border: solid 2px #777777; width: 150px; }
.portfolio .project a.viewit{ color: #444444; }


/*
------------------------------
	classes
------------------------------
*/
.clear{ clear: both; }
.error label{ color: #ff0000; }
.errorBlock{ background-color: #FFC6A5; border: solid 1px #ff0000; color: #ff0000; padding: 5px 10px; font-weight: bold; font-size: 12px; }
.successBlock{ background-color: #99ff99; border: solid 1px #00aa00; color: #00aa00; padding: 5px 10px; font-weight: bold; font-size: 12px; }

form.contactForm{ font-size: 12px; padding: 20px; }
form.contactForm .row{ margin: 10px 0; }
form.contactForm .row label{ display: block; float: left; clear: left; width: 70px; font-weight: bold; } 
form.contactForm .row input{ width: 300px; background-color: #ffffff; border: solid 1px #aaaaaa; }
form.contactForm .row textarea{ width: 300px; height: 150px; background-color: #ffffff; border: solid 1px #aaaaaa; }
form.contactForm .buttonrow{ padding-left: 70px; }

.wysiwyg{ font-size: 11px; line-height: 22px; }
.wysiwyg ul,.wysiwyg ol{ font-size: 11px; }
.wysiwyg li{ margin: 3px 0; }
.wysiwyg blockquote{ margin: 10px 0 10px 40px; }
.wysiwyg a{ color: #444444; text-decoration: underline; }


/*
------------------------------
	slideshow
------------------------------
*/
.slideshowContainer { border: 1px solid #ccc; width: 316px; height: 211px; }
.loading { background: url(/static/images/slideshow/loading.gif) center no-repeat; }
.slideshowThumbnail { outline: none; }
.slideshowThumbnail img { padding: 2px; margin: 3px; width: 90px; height: 60px; }
a:hover.slideshowThumbnail img { border: 1px solid #ccc; padding: 1px; }
.current img { border: 1px solid red; padding: 5px; }
.outline { border: 1px solid orange; z-index: 0; position: absolute; }
#thumbnails{ padding: 5px; }



/*
*------------------------
* Medium Screens (tablet)
*------------------------
*/
@media only screen and (max-width:800px),(max-device-width:800px){
	#wrapper{ width: 100%; }

	#header{ text-align: center; }
	#header #nav{ position: static; width: 100%; }
	#header #nav ul{ width: 100% }
	#header #nav li{ display: inline-block; width: 25%; padding: 0; }
	#header #nav li a{ width: 100%; text-align: center; font-size: .6rem; }
	#header #nav li a.homelink{ width: 100%; }
	#header #nav li a.aboutlink{ width: 100%; }
	#header #nav li a.portfoliolink{ width: 100%; }
	#header #nav li a.contactlink{ width: 100%; }

	#footer .lhalf{ float: none; width: 100%; padding: 10px; }
	#footer .rhalf{ float: none; width: 100%; padding: 10px; }

	.page .leftcol{ float: none; width: auto; padding: 0 15px; }
	.page .rightcol{ float: none; width: 100%; max-width: 320px; margin: 0 auto; text-align: center;  }
	
}

/*
*------------------------
* Small Screens (mobile)
*------------------------
*/
@media only screen and (max-width:600px),(max-device-width:600px){

}

/*
*------------------------
* Print
*------------------------
*/
@media print{

}