/*
----------------------------------------------------------------
	colors: green: #59b5ab;
	dark blue: #13181a;
	creme: #b3aca1;
---------------------------------------------------------------- */
@import "reset.css";
@import "layout.css";
@import "960.css";
@import "thickbox.css";
/*
----------------------------------------------------------------
	H E A D I N G S
---------------------------------------------------------------- */
p { font-size: 13px; line-height: 22px; margin-bottom: 15px;}
ul { list-style: none; margin-bottom: 15px;}
a:link, a:visited { color: #fff;}
a:hover { color: #3aafa3; text-decoration: none;}
a:focus { outline-style: none;}
/*
----------------------------------------------------------------
	B O D Y
---------------------------------------------------------------- */
html { background: url(../images/background.jpg) repeat fixed center top;}
body { background: url(../images/pattern.png) repeat center top; color: #fff; font-family: "lucida grande", Arial, sans-serif; vertical-align: top;}
#header, #footer-inner, #container { margin: 0 auto; width: 960px;}
/*
----------------------------------------------------------------
  H E A D E R 
---------------------------------------------------------------- */
#header { background: url(../images/header.png) no-repeat; width: 960px; height: 160px; margin: 0 auto 40px auto;}
h1.logo a { background: url(../images/logo.png) no-repeat; height: 130px; width: 260px; text-indent: -9999px; float: left; margin-left: 10px;}
h3 { margin: 0 0 0 10px; line-height: 1em }
h2 { margin-bottom: 15px; }
h4 { font-weight: normal; margin: 0 0 0 9px; color: #666666; }


/*
----------------------------------------------------------------
	N A V I G A T I O N
---------------------------------------------------------------- */
#header .navigation { height: 60px; position: relative; padding: 88px 0 0 0; width: 525px; height: 95px;}
#header .navigation li { display: inline;}
#header .navigation li a { background: url(../images/nav.png) no-repeat; float: left; overflow: hidden; width: 130px; height: 40px;}
#header .navigation li.homepage a { background-position: 0 0;}
#header .navigation li.work a { background-position: -130px 0;}
#header .navigation li.about a { background-position: -260px 0;}
#header .navigation li.contactus a { background-position: -390px 0;}
#header .navigation li.homepage a:hover { background-position: 0 -40px;}
#header .navigation li.work a:hover { background-position: -130px -40px;}
#header .navigation li.about a:hover { background-position: -260px -40px;}
#header .navigation li.contactus a:hover { background-position: -390px -40px;}
body#home #header .navigation li.homepage a { background-position: 0 -80px !important;}
body#work #header .navigation li.work a { background-position: -130px -80px !important;}
body#about #header .navigation li.about a { background-position: -260px -80px !important;}
body#contact #header .navigation li.contactus a { background-position: -390px -80px !important;}
.search { float: right; clear: both; margin-top: 20px;}
.clear { clear: both;}
.right { float: right;}
.left { float: left;}
.button { background: #fff; color: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: none; padding: 2px;}
/*
----------------------------------------------------------------
	C O N T E N T
---------------------------------------------------------------- */
#container { min-height: 550px; background: url(../images/transparent.png) repeat; margin-bottom: 80px;  -moz-border-radius: 5px; -webkit-border-radius: 5px;}
body#home #container, body#work #container { background: none !important;}
/*
----------------------------------------------------------------
	H O M E  
---------------------------------------------------------------- */
h2.about-me { background: transparent url(../images/h-aboutme.png) no-repeat scroll left top; height: 28px; text-indent: -9999px; width: 200px;}
.intro { padding-top: 20px; padding-left:230px}
.intro h2 { background: transparent url(../images/intro.png) no-repeat scroll left top; height: 118px;}
.intro span { display: none;}
.intro p { color: #ddd; font-size: 21px; line-height: 34px; margin-bottom: 5px;text-align:center}
.intro a { -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #3aa7aa; padding: 2px 8px;}
.intro a:hover { background: #206a6e; color: #fff;}
.featured-box { width: 460px; height: 541px; float: right; background: transparent url(../images/paisley.png) no-repeat scroll left top;}
/*
----------------------------------------------------------------
	A B O U T M E
---------------------------------------------------------------- */
.about-left p { font-size: 13px; line-height: 20px; margin-bottom: 15px;}
.about-left { padding: 20px; margin-left: 0;}
.about-left .pic { background: transparent url(../images/eric.png) no-repeat; width: 220px; height: 260px; float: left; margin-right: 15px;}
.about-left h2, .about-right h2 { margin-bottom: 5px;}
.about-right { padding: 20px; margin-right: 0;}
.about-right ul li { font-size: 12px; margin-bottom: 5px; margin-left: 20px; list-style-type: square;}
h2.h-about-me { background: transparent url(../images/h2-aboutme.png) no-repeat scroll left top; height: 28px; text-indent: -9999px; width: 250px;}
h2.h-about-site { background: transparent url(../images/h2-aboutsite.png) no-repeat scroll left top; height: 28px; text-indent: -9999px; width: 250px;}
h2.h-services { background: transparent url(../images/h2-skills.png) no-repeat scroll left top; height: 28px; text-indent: -9999px; width: 250px;}
h2.h-resume { background: transparent url(../images/h2-resume.png) no-repeat scroll left top; height: 28px; text-indent: -9999px; width: 250px;}
/*
----------------------------------------------------------------
  P R O J E C T S
---------------------------------------------------------------- */
.grid_3 img { border: 1px solid #000;}
.grid_3 h3 { font-size: 14px; color: #999;}
.container-area {padding-left: 48px;}

/*
----------------------------------------------------------------
 P R O J E C T   L I S T 
---------------------------------------------------------------- */
h2.works { background: transparent url(../images/h2-recentwork.png) no-repeat scroll left top; height: 28px; text-indent: -9999px; width: 200px;}
#lst-container { width: 870px; height: 455px; position: relative; overflow: hidden; z-index: 1 }
.lst { margin-top: 0px; position: absolute; left: 0; top: 0; height: 405px; width: 10000px; }
.item { background: transparent url(../images/transparent.png) repeat; position: relative; float: left; width: 276px; height: 405px; margin: 0 16px 0 0; cursor: pointer; z-index: 100 }
.item a { width: 276px; height: 405px;  line-height: 1.2em; color: #bbb!important; text-decoration: none !important; }
.item a:hover { text-decoration: none; }
.item a:hover .client-name b,
.item a:hover .client-name em { text-decoration: none; }
.item img { background: transparent; border-bottom: 1px solid #13181a; }
.item .client-name { display: block; padding: 7px 0 0 0; margin: 0 0 0 10px; font-weight: bold; font-size: 12px; }
.item em { font-style: normal }
.item .date { font-weight: normal; display: block; color: #59b5ab; }
.item .web { background:url(../images/item-web.png) no-repeat; position: absolute; right: 5px; bottom: 10px; width: 40px; height: 20px; }
.item .print { background:url(../images/item-print.png) no-repeat; position: absolute; right: 5px; bottom: 10px; width: 40px; height: 20px; }


/* Navi Page */
#navi { width: 940px; margin: 17px 0 20px 0; clear: both; }
#navi div.navi-container { background: #000000; position: relative; width: 940px; padding: 10px 0; text-align: center }
#navi li { position: absolute; top: 10px; }
#navi li.navi-prev { left: 13px; }
#navi li.navi-next { right: 13px; }
#navi a { color: #fefefe; text-decoration: underline; font-weight: bold; cursor: pointer; padding: 2px 3px 2px 2px; }
#navi a:hover { text-decoration: none; background: #fefefe; color: black }
#navi .navi-perpage { color: #cccccc; padding: 3px 10px; font-weight: bold; }
#navi li.navi-prev a.first-page,
#navi li.navi-next a.last-page,
#navi-gallery.oneimage a { color: #999999; text-decoration: none; cursor: auto; }
#navi li.navi-prev a.first-page:hover,
#navi li.navi-next a.last-page:hover,
#navi-gallery.oneimage a:hover  { background: none; color: #999999 }
#navi-gallery.noimages { display: none!important }
#navi-item { width: 100%; height: 39px; position: absolute; left:0; top: 200px; z-index: 0; /* overflow: hidden; */ z-index: 0 }
#navi-item .navi-item-container { width: 960px; height: 39px; margin: 0 auto; text-align: left }
#navi-item .navi-item-container ul { width: 960px; height: 39px; position: relative }
#navi-item .navi-item-container li.next-item { position: absolute; right: 0; top: 0; }
#navi-item .navi-item-container li { height: 39px; width: 40px; }
#navi-item .navi-item-container li img { cursor: pointer; }
#navi-item .navi-item-container li.first-item img,
#navi-item .navi-item-container li.last-item img { cursor:auto }

/*
----------------------------------------------------------------
 P R O J E C T   D E T A I L E
---------------------------------------------------------------- */
#project-details { display:block; width: 930px; }
#project-details .project-details-area { position: absolute; left: -3px; top: -10px; height: 450px; width: 941px; }
#project-details #gallery { position: relative; overflow: hidden; width: 650px; height: 500px }
#project-details ul.gallery { position: absolute; left: 0; top: 0; width: 25000px; height: 500px; z-index: 21 }
#project-details ul.gallery li { float: left; width: 650px; }
#project-details #navi-gallery a { padding: 0 3px; }
#project-details a { color: #fefefe; font-weight: bold; text-decoration: underline; }
#project-details a:hover { text-decoration: none; background: #fefefe; color: black }

/* Project details NAVI */
#project-details #navi-gallery { position: absolute; left: 0; bottom: 0; width: 650px; height: 20px; padding: 10px 0; color: #cccccc; background: #000; text-align: center; z-index: 22; }
#project-details #navi-gallery span { font-weight: bold; }
#project-details #navi-gallery .prev-image { position: absolute; left: 12px; top: 11px; }
#project-details #navi-gallery .next-image { position: absolute; right: 12px; top: 11px; }
#project-details #navi-gallery .prev-image:hover { color: black; background: #fefefe }
#project-details .proj-info { position: absolute; right: 20px; top: 10px; width: 250px; }
#project-details .proj-info a { color: #666666; }
#project-details .proj-date { color: #999; margin: 0 0 15px 0;}
#project-details .proj-info h4,
#project-details .proj-info h3 { line-height: 18px;  margin: 0; padding: 0; }
#project-details .proj-info h4 { font-size: 18px;  font-weight: normal; color: #eee; }
#project-details .proj-info h3 { font-size: 12px; line-height: 20px; color: #59b5ab;}

/*
----------------------------------------------------------------
	C O N T A C T
---------------------------------------------------------------- */
#contact-left { width: 340px; float: left; background: transparent url(../images/contact_info.png) repeat; height: 400px; margin-right: 20px;}
#contact-left ul {	margin-top: 80px;}
#contact-left ul li { width: 340px;	height: 110px;}
#contact-left ul li a {	float: left;	text-indent: -9999px;	width: 340px;	height: 110px;}
#contact-right { width: 320px; float: left; padding: 0 20px;}
.paisley2 { background: transparent url(../images/paisley2.png) no-repeat; width: 430px; height: 390px; position: absolute; top: -80px; left: 300px;}
input.btTxt { background: url(../images/submit.png) no-repeat !important; width: 110px !important; height: 30px !important;}
/*
----------------------------------------------------------------
  F O O T E R
---------------------------------------------------------------- */
#footer { background: #13181a; text-align: center; margin: 0 auto 0; width: 100%; height: 280px; padding-top: 20px;}
#footer p, #footer ul { font-size: 11px; line-height: 16px; color: #ccc;}
#footer a:link, #footer a:visited { color: #707070; text-decoration: none;}
#footer a:hover { text-decoration: underline;}
#footer strong { color: #fff;}
#footer .footer-about, #footer .footer-services, #footer .footer-contact { float: left; text-align: left;}
#footer .footer-about { width: 230px; margin-right: 20px;}
#footer .footer-services { width: 260px;}
#footer .footer-graphic { width: 280px; background: url(../images/footer-graphic.png) no-repeat top left; height: 360px; position: absolute; top: -50px; left: 530px; z-index: 2;}
#footer .footer-services .title { font-weight: bold; line-height: 16px; color: #fff;}
#footer .footer-services ul li { line-height: 16px; background: url(../images/services.gif) no-repeat top left; padding-left: 60px; width: 230px; height: 46px; margin-bottom: 10px;}
#footer .footer-services ul li.print { background-position: 0 -5px;}
#footer .footer-services ul li.web { background-position: 0 -50px;}
#footer .footer-services ul li.dev { background-position: 0 -100px;}
#footer .footer-services ul li.cms { background-position: 0 -150px;}
#footer .footer-contact { width: 155px; float: right;}
.footer-credits { background: #0d1112; color: #1d2427; width: 100%; height: 24px; text-align: center; font-size: 12px; margin: 0px auto 0 auto; padding-top: 10px;}
/*
----------------------------------------------------------------
  Thickbox - Override 
---------------------------------------------------------------- */
#TB_window { border: none !important; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 0; background: #232a2d !important; color: #b3aca1 !important;}
#TB_title { background-color: transparent !important; height: auto !important;}
#TB_ajaxWindowTitle { display: none;}
#TB_closeWindow { padding: 0 25px 0 0; float: right;}
#TB_ajaxContent { top: -20px !important; position: relative !important;}
#TB_closeAjaxWindow a { position: relative; top: 20px; padding: 7px 10px 5px 0; margin-bottom: 1px; text-align: left !important; background: url(../images/close.png) no-repeat !important; height: 20px !important; width: 10px; float: left !important; text-indent: -9999px; z-index: 400 !important;}