@charset "UTF-8";
/* CSS Document */


/*-- http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ ---*/

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;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}

a img, :link img, :visited img { border: 0; }

ol, ul { list-style: none; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; } 




/*------------------------------------------
	Global Styles
  ------------------------------------------*/
* { margin: 0; padding: 0; outline: none; }
body, html { margin: 0; padding: 0; background-color: #f1eee3; background-image: url(../images/bg_content.gif); background-position: top center; background-repeat:repeat;  }
img { border: none;}

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.hide { display:none; }
.over { overflow:visible}


/*------------------------------------------
	Typography
  ------------------------------------------*/
a:link {color: #e3297e; text-decoration:none; }
a:visited {color: #a72761; text-decoration:none;}
a:hover {color: #e3297e; text-decoration:underline;}
a:active {color: #e3297e; text-decoration:none;}  
  
div {font-size: 13px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000000; text-align: left; line-height: 20px;}
h1 {display:block; width: 139px; height:140px; background:url(../images/logo.png) 0 0 no-repeat; text-indent:-9999px;  z-index:1000;}
h2 {font-size: 19px; color: #000; font-family: "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:0.2em; font-weight:normal; line-height:25px}
h3 {font-size: 15px; color: #000; font-family: "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:0.2em; font-weight:bold; line-height:20px}
h4 {font-size: 24px; color: #000; font-family: "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:0.2em; font-weight:normal; line-height:28px}
hr {border-top: 1px solid #e0e0e0; height: 1px;}
p {margin: 0 0 15px 0; padding: 0; line-height:20px}

.footTitle {font-size: 16px; color:#cfc485; font-family: "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:0.2em; font-weight:lighter; line-height:20px;}


/*------------------------------------------
	Structure
  ------------------------------------------*/
#bgTop { margin:0 auto; height:949px; background:url(../images/bg_page_top83.jpg) center -20px repeat-x;}
#wrapper {margin: 0 auto; background: url(../images/bg_wrapper_mainimg83.jpg) center -20px no-repeat; }

#slider {position:fixed; top:0; width:100%; z-index:500; margin:0 auto;}
#slideCenter {margin:0 auto; width:1022px;}


ul#nav { z-index:1000; position:relative; }
ul#nav li {display:block; width:96px; height:113px; text-indent:-9999px; margin:0; padding:0;  float:right; }
ul#nav li.services a {background:url(../images/nav_sprite.png) 0 -2px no-repeat; display:block; width:96px; height:113px; }
ul#nav li.services a:hover {background:url(../images/nav_sprite.png) 0 0 no-repeat; display:block; width:96px; height:113px; cursor:pointer; }
ul#nav li.process a {background:url(../images/nav_sprite.png) -96px -2px no-repeat; display:block; width:96px; height:113px; }
ul#nav li.process a:hover {background:url(../images/nav_sprite.png) -96px 0 no-repeat; display:block; width:96px; height:113px; cursor:pointer; }
ul#nav li.contact a {background:url(../images/nav_sprite.png) -192px -2px no-repeat; display:block; width:90px; height:113px; }
ul#nav li.contact a:hover {background:url(../images/nav_sprite.png) -192px 0 no-repeat; display:block; width:90px; height:113px; cursor:pointer; }
ul#nav li.folio a {background:url(../images/nav_sprite.png) -280px -2px no-repeat; display:block; width:96px; height:113px; }
ul#nav li.folio a:hover {background:url(../images/nav_sprite.png) -280px 0 no-repeat; display:block; width:96px; height:113px; cursor:pointer; }


#header {margin: 0 auto; width:1022px; height:612px }
.main {margin: 0 auto; width:1022px; position:relative; /*margin-bottom:-50px;*/ padding-top:150px; }
.port {display:block; width:780px; }
.sixCol { display:block; width:460px; margin-bottom:20px}
.fourCol {width:300px; margin-top:-40px; z-index:2}
.threeCol {width:220px; margin-right:20px; margin-bottom:30px}
.twoCol {width:140px; margin-left:20px; margin-top:10px}


.sixCol.about h3 { background:url(../images/title_wow.jpg) 0 0 no-repeat; height:60px; text-indent:-9999px; margin-left:-5px; margin-bottom:10px}
.sixCol.about p span {font-size:17px}
.sixCol.about a.btn {background: url(../images/bg_stand_out.png) 0 bottom no-repeat; text-indent:-9999px; display:block; height:30px; }
.sixCol.about a.btn:hover {cursor:pointer}

.serv {height:250px; width:482px; padding-left:10px; background:url(../images/bg_services.png) 0 0 no-repeat; background-position:10px -15px; margin-bottom:10px; margin-top:30px}

.procWrapper {background: url(../images/bg_process_btm_repeat.png) 0 bottom repeat-x;}
.processBG { margin:0 auto; background:url(../images/bg_process_btm.png) center bottom no-repeat; padding-bottom:60px}
.processBG .main {padding-top:0}
.proc {padding-top:120px}
.proc h3 { background: url(../images/title_process.jpg) 0 0 no-repeat; height:104px; text-indent:-9999px; margin-bottom:0; z-index:1}
.proc img {margin-bottom:10px}

#footerwrapper {background:url(../images/bg_footer_repeat83.jpg) center 0  repeat-x; height:893px}
#footer { margin:0 auto; background:url(../images/bg_footer83.jpg) center 0 no-repeat; height:893px;}
#footer .main {padding-top:0;  }
#footer .twoCol img.icon { display:inline; padding:10px 0 20px 0; margin-right:15px}
#footer .twoCol {margin-top:230px}
#footer .fourCol {margin-right:80px; width:300px; color:#9f9a8a; margin-top:190px}
#footer .fourCol img {margin-bottom:10px}


.btnEmail {background:url(../images/btn_email.gif) 0 0 no-repeat; display:block; width:264px; height:33px; text-indent:-9999px}

/*------------------------------------------   http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
	Tabs
  ------------------------------------------*/

ul.tabs { float: right; padding-right:5px; list-style: none; height: 29px; /*--Set height of tabs--*/ width: 100%; }
	
ul.tabs li { float: right; margin: 0; padding-left: 5px; width:90px; height: 28px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 28px; /*--Vertically aligns the text within the tab--*/ border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/
 overflow: hidden; position: relative;text-indent:-999px;}
 
ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em;  height: 28px; padding: 0 20px; outline: none; }

ul.tabs li.web a  {background:url(../images/tab_web.gif) 0 0 no-repeat}
ul.tabs li.print a  {background:url(../images/tab_print.gif) 0 0 no-repeat}
ul.tabs li.market a  {background:url(../images/tab_marketing.gif) 0 0 no-repeat}

ul.tabs li.web a:hover { background-position:0 -31px }
ul.tabs li.market a:hover { background-position:0 -31px }
ul.tabs li.print a:hover { background-position:0 -31px }

html ul.tabs li.active a, html ul.tabs li.active a:hover { background-position:0 -62px; cursor:auto }

.tab_container { overflow: hidden; clear: both; float: right; width: 460px;}
.tab_container img { padding-right:10px;}
.tab_content { padding: 30px 25px 20px 10px; }


/*------------------------------------------   
	Slider
  ------------------------------------------*/
#folioFrame {background:transparent url(../images/img_folio_frame.png) no-repeat scroll 0 0; height:351px; margin-left:-32px; position:absolute; top:160px; width:584px; z-index:1; }


div.slideshow-container,
div.loader,
div.slideshow a.advance-link { width: 530px; /* This should be set to be at least the width of the largest image in the slideshow with padding */ }

div.loader,
div.slideshow a.advance-link,
div.caption-container { height: 310px; /* This should be set to be at least the height of the largest image in the slideshow with padding */ }

div.slideshow-container { position: absolute; clear: both; float: left; margin-left:7px; z-index:1; top:17px; }

div.navigation a.pageLink { height: 77px; line-height: 77px; }

div.controls {margin-top: 5px; height: 23px; }
div.controls a { padding: 5px; }
div.ss-controls { float: left; }
div.nav-controls { float: right; }


div.loader { position: absolute; top: 100px; left: 0; background-image: url(../images/loading.gif); background-repeat: no-repeat; background-position: center; }

div.slideshow span.image-wrapper { display: block; position: absolute; top: 166px; left: 0; }

div.slideshow a.advance-link:focus { outline: none; }


div.caption-container { float: right; left:-40px; position: relative; background:url(../images/bg_caption.png) -30px 0 no-repeat; width: 200px;	 top: 180px; }

span.image-caption { display: block; position: absolute; top: 0; left: 0; padding-left:20px; padding-right:20px; margin-top:40px; }

div.navigation-container {	float: left; position: relative; margin-left:-20px; margin-top:8px }

div.navigation a.pageLink { display: block; position: relative; float: left; margin: 2px; width: 16px; background-position:center center; background-repeat:no-repeat; }
div.navigation a.pageLink:focus { outline: none;}

ul.thumbs { position: relative; float: left; margin: 0; padding: 0; top:190px }
ul.thumbs li { float: left; padding: 0; margin: 2px; list-style: none; margin-right:15px}
a.thumb { padding: 1px; display: block; }
a.thumb:focus { outline: none; }
ul.thumbs img { border: none; display: block; }

div.tools {margin-top:10px;}

div.tools img {display:inline; padding-right:2px; margin-top:10px;}

div.tools img .psd:hover {background: url(../images/txt_tools.gif) 0 0 no-repeat; width:30px; height:10px}