@charset "UTF-8";
body  {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 11px;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

img, div,  { behavior: url(fx-iepngfix.htc) } 

a:active, a:focus{ outline:none; }  


.twoColElsLt #container {
	width: 850px;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 50px;
} 

.twoColElsLt #sidebar1 {
	float: left;
	width: 190px; /* since this element is floated, a width must be given */
	padding: 15px 0; /* top and bottom padding create visual space within this div */
	height: 340px;
	margin: 200px 0 0 0px;
}



.twoColElsLt #mainContent {
	margin: 0 0 0 210px; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
} 

/* Miscellaneous classes for reuse */
.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;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

/* BODY styles BELOW */

.home {
	background-color: #FFCC00;
}

.design {
	background-color: #990066;
}

.marketing {
	background-color: #8DC02F;
}

.promo {
	background-color: #C7D725;
}

.digital-print {
	background-color: #D53D21;
}

.litho-print {
	background-color: #E57D37;
}

.screen-print {
	background-color: #EDA139;
}

.large-format {
	background-color: #EFB829;
}

.portfolio {
	background-color: #77D2F7;
}

.quote-me {
	background-color: #607F64;
}

.contact {
	background-color: #1C5696;
}

.web {
	background-color: #441A67;
}

/* container styles BELOW */

#home-background {
	background-image: url(images/backgrounds/home.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#design-background {
	background-image: url(images/backgrounds/design.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#marketing-background {
	background-image: url(images/backgrounds/marketing.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#promo-background {
	background-image: url(images/backgrounds/promo.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#digital-print-background {
	background-image: url(images/backgrounds/digital-print.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#litho-print-background {
	background-image: url(images/backgrounds/litho-print.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#screen-print-background {
	background-image:url(images/backgrounds/screen-print.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#large-format-background {
	background-image: url(images/backgrounds/large-format.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#portfolio-background {
	background-image: url(images/backgrounds/portfolio.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#quote-me-background {
	background-image: url(images/backgrounds/quote-me.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#contact-background {
	background-image: url(images/backgrounds/contact.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}

#web-background {
	background-image: url(images/backgrounds/web.png);
	background-repeat:no-repeat;
	margin: 0 0 0 210px;
	height: 570px;
}


h1.logo {
	float: left;
	padding: 0;
	margin: 0;
	text-indent: -9999px;
	overflow: hidden;
}

h1.logo a {
	display: block;
	width: 64px !important;
	width: 64px;
	height: 56px;
	margin: 10px 20px 0 26px;
}

#content {
	width: 550px;
	height: 310px;
	float: left;
	margin: 160px 50px 0px 30px;
}

#content2 {
	width: 565px;
	height: 310px;
	float: left;
	margin: 160px 10px 0px 30px;
}


a:link {
	color: #0873bb;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0873bb;
}
a:hover {
	text-decoration: underline;
	color: #acd834;
}
a:active {
	text-decoration: none;
	color: #0873bb;
}

#home {
	width: 940px;
	height: 609px;
	background-image:url(images/home-background.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#design {
	width: 940px;
	height: 609px;
	background-image:url(images/page1.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}



#marketing {
	width: 940px;
	height: 609px;
	background-image: url(images/marketing-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#promo {
	width: 940px;
	height: 609px;
	background-image: url(images/promo-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#print-main {
	width: 940px;
	height: 609px;
	background-image: url(images/print-main-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}


#digi-print {
	width: 940px;
	height: 609px;
	background-image: url(images/digi-print-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}
#litho {
	width: 940px;
	height: 609px;
	background-image: url(images/litho-print.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#client {
	width: 940px;
	height: 609px;
	background-image: url(images/client-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#portfolio {
	width: 940px;
	height: 609px;
	background-image: url(images/portfolio-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#wide-print {
	width: 940px;
	height: 609px;
	background-image: url(images/wide-print-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#screen-print {
	width: 940px;
	height: 609px;
	background-image: url(images/screen-print-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#contact {
	width: 940px;
	height: 609px;
	background-image: url(images/contact-back.jpg);
	background-repeat:no-repeat;
	margin: none;
	padding: none;
}

#navigation {
	width: 650px;
	height: 30px;
	text-align: right;
	float: right;
}

#bottom-nav {
	margin: 0 0 0 31px;
	height: 88px;
	overflow: hidden;
	float: left;
	width: 750px;
}

#logo {
	width: 60px;
	float: left;
	margin: 0 10px 0 0;
	height: 78px;
	padding-top: 10px;
}

#inner-nav {
	height: 20px;
	margin: 20px 0 4px 0;
	width: 650px;
	text-align:left;
	vertical-align:bottom;
	font-weight: bold;
	color: #999;
	text-transform:uppercase;
	font-size: 140%;
}
.clr-right {
	clear: right;
}
#inner-nav-lvl2 {
	height: 30px;
	width: 650px;
}

#gallery-lvl2 {
	width: 106px;
	height: 19px;
	background:url(images/gallery-2nd.jpg) no-repeat;
	float: left;
	color: #FFF;
	font-weight: bold;
	padding: 3px 10px 3px 8px;
	margin-left: 120px;
}

#gallery-lvl2 a:link {
	color: #FFF;
	text-decoration: none;
}
#gallery-lvl2 a:visited {
	text-decoration: none;
	color: #FFF;
}
#gallery-lvl22 a:hover {
	text-decoration: underline;
	color: #acd834;
}
#gallery-lvl2 a:active {
	text-decoration: none;
	color: #FFF;
}





#print-lvl2 {
	width: 225px;
	height: 19px;
	background:url(images/print-2nd.jpg) no-repeat;
	float: left;
	color: #FFF;
	font-weight: bold;
	padding: 3px 5px 3px 6px;
	margin-left: 13px;
	letter-spacing: 0.5px;
}


#print-lvl2 a:link {
	color: #FFF;
	text-decoration: none;
}
#print-lvl2 a:visited {
	text-decoration: none;
	color: #FFF;
}
#print-lvl2 a:hover {
	text-decoration: underline;
	color: #acd834;
}
#print-lvl2 a:active {
	text-decoration: none;
	color: #acd834;
}

#content-body {
	float: left;
	width: 750px;
	height: 321px;
	margin: 160px 30px 25px 31px;
	overflow: hidden;
	z-index: 6;
	position: relative;
}

#content-body2 {
	float: left;
	width: 750px;
	height: 321px;
	margin: -285px 30px 25px 31px;
	overflow: hidden;
	z-index: 6;
	position: relative;
}

#quote-body {
	float: left;
	width: 600px;
	height: 456px;
	margin: 35px 30px 15px 141px;
	overflow: hidden;
}

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block;}
.menu li{padding:0; margin:0; list-style:none; display:inline; text-transform:uppercase; font-weight: bold;}
.menu li a{float:left; padding-left:15px; display:block; color:#0873bb; text-decoration:none; cursor:pointer; }
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; }
.menu li a:hover{background-position:0px -60px; color:#acd834;}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; color:#acd834;}
.menu li a.active span, .menu li a.active:hover span{background:one;}

.client-login {
	font-size: 30px;
	color: #617f65;
	font-weight: bold;
	letter-spacing:0px;
}


.name, .password {
	font-size: 14px;
	letter-spacing: 0px;
}

.namefield, .passfield {
	width: 300px;
	padding: 4px;
	border: 1px solid #617f65;
	margin-bottom: 10px;
	color: #617f65;
}

/* ------- wide format print ------- */

.wide-head {
	font-size: 24px;
	color: #f8c724;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#wide-col1 {
	width: 230px;
	margin: 0 10px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#wide-col2 {
	width: 240px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
/* ------- wide format print ------- */


/* ------- screen print ------- */

.screen-head {
	font-size: 20px;
	color: #fbb541;
	font-weight: bold;
	letter-spacing:0px;
	margin: 17px 0 0 0;
}

#screen-col1 {
	width: 230px;
	margin: 0px 15px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#screen-col2 {
	width: 200px;
	margin: 0px 2px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
/* ------- screen print ------- */



/* ------- litho print ------- */

.litho-head {
	font-size: 22px;
	color: #f6983f;
	font-weight: bold;
	letter-spacing:0px;
	margin: 20px 0 0 0;
}

#litho-col1 {
	width: 200px;
	margin: 0px 15px 0 0;
	float: left;
	text-align:left;
	font-size:10px;
}
#litho-col2 {
	width: 200px;
	margin: 0px 20px 0 0;
	float: left;
	text-align:left;
	font-size:10px;
}
/* ------- litho print ------- */

/* ------- digi print ------- */

.digi-head {
	font-size: 24px;
	color: #f15b26;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#digi-col1 {
	width: 200px;
	margin: 0 15px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#digi-col2 {
	width: 240px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
/* ------- digi print ------- */

/* ------- web  ------- */

.web-head {
	font-size: 24px;
	color: #441A67;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#web-col1 {
	width: 220px;
	margin: 0 30px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#web-col2 {
	width: 220px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left ;
	font-size:10.5px;
}
/* ------- end web ------- */


/* ------- promo ------- */

.promo-head {
	font-size: 24px;
	color: #d7df23;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#promo-col1 {
	width: 200px;
	margin: 0 10px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#promo-col2 {
	width: 190px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
/* ------- promo ------- */


/* ------- design ------- */

.design-head {
	font-size: 24px;
	color: #9e005d;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#design-col1 {
	width: 140px;
	margin: 0 10px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#design-col2 {
	width: 150px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
/* ------- design ------- */



/* ------- marketing ------- */

.market-head {
	font-size: 24px;
	color: #a5ce39;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#market-col1 {
	width: 150px;
	margin: 0 10px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#market-col2 {
	width: 130px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
/* ------- marketing ------- */




/* ------- portfolio ------- */

.port-head {
	font-size: 24px;
	color: #78d2f7;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#port-col1 {
	width: 220px;
	margin: 0 0px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
	overflow: auto;
	height: 160px;
}

#port-col1-under {
	width: 500px;
	margin: 10px 0px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
	overflow: auto;
	height: 95px;
	padding: 0;
}

#port-col2 {
	width: 320px;
	margin-left: 15px;
	float: left;
	text-align:left;
	font-size:10.5px;
}
/* ------- portfolio ------- */



/* ------- INDEX ------- */

.home-head {
	font-size: 50px;
	color: #fada1a;
	font-weight: bold;
	letter-spacing:0px;
	margin: 130px 0 0 0;
}
/* ------- INDEX ------- */




/* ------- print main ------- */

.print-head {
	font-size: 24px;
	color: #cf70e0;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#print-col1 {
	width: 220px;
	margin: 0 30px 0 0;
	float: left;
	text-align:left;
	font-size:10.5px;
}
#print-col2 {
	width: 220px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left ;
	font-size:10.5px;
}
/* ------- print main ------- */


/* ------- print main ------- */

.contact-head {
	font-size: 28px;
	color: #0d72ba;
	font-weight: bold;
	letter-spacing:0px;
	margin: 20px 0 0 0;
}

#contact-col1 {
	width: 220px;
	margin: 15px 30px 0 0;
	float: left;
	text-align:left;
	font-size:13px;
	color: #0d72ba;
	font-weight: bold;
}
#contact-col2 {
	width: 220px;
	margin: 0 20px 0 0;
	float: left;
	text-align:left ;
	font-size:10.5px;
}
/* ------- print main ------- */



ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	float: left;
	width: 650px;
	text-transform: uppercase;
	font-weight: bold;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #0873bb;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	
	color: #acd834;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	height: 35px;
	float: left;
	width: 17px;
	background: url(images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 30px;
	background: url(images/drop-menuback.png) repeat;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border: 1px dotted #FFF;
	text-align: left;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: url(images/drop-menuback.png) repeat 10px center;
	border-top: 1px dotted #acd834;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: url(images/drop-menu-hover.png) repeat center; 
	color: #FFFFFF;
}

.quote-input {
	width: 350px;
	height: 20px;
	padding: 2px;
	color: #333333;
	background-color: #FFFFFF;
	border: 1px solid #d4d4d4;
}

.quote-input2 {
	width: 250px;
	height: 20px;
	padding: 2px;
	color: #333333;
	background-color: #FFFFFF;
	border: 1px solid #d4d4d4;
}

.additional {
	width: 350px;
	padding: 2px;
	color: #333333;
	background-color: #FFFFFF;
	border: 1px solid #d4d4d4;
}
	

td {
	padding: 2px;
}


.submit {
	color: #0873bb;
	font-size: 200%;
	font-weight: bold;
	background: none;
	border: none;
	text-align: left;
	margin: 0px;
	padding: 0px;
}

#home-lemon {
	float: right;
	width: 614px;
	height: 444px;
	
}

#bottom-nav2 {
	margin: 62px 0 0 31px;
	height: 88px;
	overflow: hidden;
	float: left;
	width: 750px;
}

#content-body3 {
	float: left;
	width: 220px;
	height: 200px;
	margin: 0;
	overflow: hidden;
}

#quote-me-body {
	float: left;
	width: 500px;
	height: 400px;
	margin: 61px 30px 0px 30px;
	overflow: hidden;
}

.portfolio-list {
	display: inline;
	padding: 4px;
	color: #78d2f7;
	line-height: 16px;
	font-size: 110%;
	width: 100%;
	font-weight: bold;
	margin: 0px;
	list-style: none;
}

.portfolio-list li a {
	text-decoration: none;
}

.portfolio-list li a:hover {
	background-color: #d2eaf4;
	color: #006699;
}

.port-title {
	font-size: 16px;
	color: #78d2f7;
	font-weight: bold;
	letter-spacing:0px;
	margin: 0px;
}

#tel-no {
	height: 35px;
	float: right;
	width: 500px;
	margin: 28px 45px 0 0;
	font-weight: bold;
	color: #0873ba;
	font-size: 150%;
	text-align:left;
}

.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
}

#project1, #project2, #project3, #project4, #project5, #project6, #project7, #project8, #project9, #project10, #project11, #project12, #project13, #project14, #project15, #project16, #project17, #project18 {
	width: 300px;
	height: 170px;
	display: none;
}

#content-home {
	float: right;
	width: 500px;
	height: 365px;
	margin: 35px 25px 70px 0;
	overflow: hidden;
	text-align:right;
}


/* add display:inline to floated elements */
.twoColElsLt #sidebar1,
.fltrt,
.fltlft,
h1.logo,
#content,
#content2,
#navigation,
#bottom-nav,
#logo,
#gallery-lvl2,
#print-lvl2,
#content-body,
#content-body2,
#quote-body,
.menu li a,
.menu li a span,
#wide-col1,
#screen-col1,
#screen-col2,
#litho-col1,
#litho-col2,
#digi-col1,
#promo-col1,
#promo-col2,
#design-col1,
#design-col2,
#market-col1,
#market-col2,
#port-col1,
#port-col1-under,
#port-col2,
#contact-col1,
ul.topnav,
ul.topnav li,
ul.topnav li a,
ul.topnav li span,
ul.topnav li ul.subnav,
html ul.topnav li ul.subnav li a,
#home-lemon,
#bottom-nav2,
#content-body3,
#quote-me-body,
#tel-no,
#content-home,
#wide-col2,#digi-col2,
#web-col1,#print-col1,
#web-col2,#print-col2,#contact-col2 {display:inline;}

/* add zoom:1 to overflow:hidden */
h1.logo,
#bottom-nav,
#content-body,
#content-body2,
#quote-body,
#bottom-nav2,
#content-body3,
#quote-me-body,
#content-home {zoom:1;}

/* fix negative margins */
#content-body2 {position:relative; zoom:1;}

/* add zoom:1 to pos:relative elements */
#content-body,
#content-body2,
ul.topnav li {zoom:1;}


/* ============================================= */
/* potentially harmful settings                  */

/* add zoom:1 to backgrounds -- Manually check for problems with inline elements! */
#gallery-lvl2,
#print-lvl2,
.menu li a.active span,.menu li a.active:hover span,
ul.topnav li span,
ul.topnav li ul.subnav,
html ul.topnav li ul.subnav li a,
html ul.topnav li ul.subnav li a:hover,
.submit {zoom:1;}