/******************************************
begin css resets
******************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	background:#fff;
	font-family: Tahoma;
	font-size: 12px;
	color: #7A7a7A;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
.clear {
	clear: both;
}



a {color: #0088CC;text-decoration:none;}
a:hover {text-decoration:underline;}

/******************************************
begin css layout
******************************************/
#top {}
.wrap {width:960px;}
#top-logo { width:300px; float:left; }
a#logo {background:url(../images/logo.gif) top left no-repeat;width:221px;height:96px;display:block;}
a#logo:hover {background-position: 0px -96px;}
a#logo span {display:none;}
#top-menu {width:650px;float:left;}
#top-menu div ul {width:201px;height:32px;margin-top:30px;}
#top-menu div ul li {float:left;}
#top-menu div ul li a {background:url(../images/menu.gif) top left no-repeat;}
#top-menu div ul li a span {display:none;}
#top-menu div ul li#menu-about a {width:63px;height:32px;display:block;background-position: 0px 0px;}
#top-menu div ul li#menu-about a:hover {background-position: 0px -32px;}
#top-menu div ul li#menu-work a {width:57px;height:32px;display:block;background-position: -63px 0px;}
#top-menu div ul li#menu-work a:hover {background-position: -63px -32px;}
#top-menu div ul li#menu-contact a {width:81px;height:32px;display:block;background-position: -120px 0px;}
#top-menu div ul li#menu-contact a:hover {background-position: -120px -32px;}
#top-menu div ul li#menu-about a.active {background-position: 0px -32px;}
#top-menu div ul li#menu-work a.active {background-position: -63px -32px;}
#top-menu div ul li#menu-contact a.active {background-position: -120px -32px;}

#recent-work {position:relative;margin-top:10px;}
#recent-black {position:absolute; top:75px;left:0;width:186px;background:url(../images/transparent-black.png);}
#recent-black p {padding:10px; font-family:calibri;font-weight:bold;text-transform:uppercase;}
#recent-black p a { color:#ffffff !important; }
#recent-black p a:hover { color:#7a7a7a !important; text-decoration:none; }

#recent-work2 {position:relative;margin-top:10px; width:960px;}
#recent-black2 {position:absolute; top:75px;right:0;width:186px;background:url(../images/transparent-black.png);}
#recent-black2 p {padding:10px; font-family:calibri;font-weight:bold;text-transform:uppercase;}
#recent-black2 p a { color:#ffffff !important; }
#recent-black2 p a:hover { color:#7a7a7a !important; text-decoration:none; }

.intro {width:960px;padding:45px 0px;background:#f5f5f5;color:#7a7a7a;}
.intro h3 {color:#555555;font-family:calibri;font-size:24px;}

#content {margin:30px 0px;}
#content p {line-height:1.5; margin-bottom:10px;}

#footer {margin: 30px 0px;}
.footer-in {font-size:11px;}
.footer-in a { color:#7a7a7a !important; }
.footer-in a:hover { color:#000000 !important; text-decoration:none; }

.left {width:300px;float:left;}
.left-in { padding: 0px 10px; }
.left-in ul { margin-left: 20px; margin-bottom: 15px; }
.left-in ul li { list-style: square; list-style-position: outside; padding: 5px;}

.middle {width:450px;float:left;}
.middle2 {width:630px;float:left;}
.right {width:200px;float:left;}
img.back-to-top {vertical-align:middle;margin-right:5px;}

/** work **/
.col {float: left; display: block; width: 22em; margin: 0 2em;}
.work {min-height: 22em; margin-bottom: -2em;}
.work-details {color: #757575; text-transform: none;font-size:10px;}
.work-details em {display: block; float: left; color: #aaa; width: 5em;}
.thumb {float: left; width: 99%; border: 1px solid #aaa; overflow: hidden; margin: 0.2em 0 1em 0;}
.thumb span {float: left; display: block; width: 98.5%; height: 128px; border: 2px solid #fff;}
a:hover .thumb {border-color: #D33436;}

.contact-form label {display:block;}

.error {color:#D33436;}
.ok {color:#709A23;}