/*  ----------------------------------------------------------------------
  GENERAL REDECLARATIONS
  ---------------------------------------------------------------------- */

html				{height: 100%;}
* 					{margin:0; padding:0;}

body 				{
	text-align:center;
	background: #333333 url("../images/content-bg.jpg") repeat-x 0 0;
}

body, tr,
td, input,
select, textarea 	{font:normal 12.5px/1.5em "Century Gothic", arial, helvetica, sans-serif;color:#fff;}



a {outline:none;}
a:link,
a:visited {color: #fff;text-decoration: none;}
a:hover,
a:active,
li.active a {color: #6EAB23;text-decoration: none;}

a.plus-link {background: url("../images/plus-large.gif") no-repeat 0 0;padding-left:20px;padding-top: 2px;margin-top: 3px;display: block}

ul, ol	 	{margin:0 0 10px 25px;}
dl 			{margin:0 0 10px;}
dt 			{font-weight:bold;}
dd			{margin:0 0 3px 10px;}
p 			{margin:0 0 15px;}
h1 					{font-size:large; margin:0 0 12px;}
h2 					{font-size:medium; margin:8px 0;color:#6EAB23 }
h3 			{font-size:small; margin:6px 0 5px;}
h5			{font-size:xx-small; margin:3px 0;}
h6 			{font-size:xx-small; margin:0;}
hr 			{border-style: none; border-bottom: 1px dotted #fff; color: #28292C; background-color: #28292C;margin-bottom: 15px;}
			/*color and background color should be the same as the background color of the div it is contained within*/
img 		{border:none;}
acronym		{border-bottom: 1px dotted;}
blockquote 	{margin:0 25px 20px 25px; font-style:italic;}

.clr		{clear: both;}
.clear-right{clear: right;}
.clear-left {clear: left;}
.right		{float: right;}
.left		{float: left;}
.rightimage {float: right; margin: 0 0 10px 10px;}
.leftimage {float: left; margin: 0 10px 10px 0;}
.intro {font-size: 15px; font-weight: normal;line-height: 1.4em;}
.hidden {display:none;}
.margin-left {margin-left: 9px;}
.margin-top {margin-top: 10px;}


#preload {position: absolute;top: -1000px; left: -1000px;}

img.left	{margin-right:10px;}
img.right	{margin-left:10px;}
.red 		{color: #ff1000;}
#map 		{width: 450px;height: 300px;}

.scroll {width:534px;height:251px;overflow:hidden;padding-right:74px !important;padding-left:152px;padding-bottom:120px;margin-left:-66px;}
.jScrollPaneContainer {margin-left: -83px;}
a.jScrollArrowDown {background:red;bottom:-45px;right:358px;}
a.jScrollArrowUp {background:blue;top:315px;right:0px;}
.jScrollPaneTrack {top:300px !important;height:180px !important;left:0px;width:761px !important;background:red;}
.jScrollPaneDrag {display:none;} 

a.jScrollArrowDown {background: url("../images/arrows-up-down-new.gif") no-repeat 0px 0;width: 381px !important;height: 57px;left:0px;top:314px;}
a.jScrollArrowDown:hover {background-position: 0px -57px;}
a.jScrollArrowDown.disabled {background-position: 0px -114px;}
a.jScrollArrowUp {background: url("../images/arrows-up-down-new.gif") no-repeat -383px 0;width: 381px !important;height: 57px;top:314px;}
a.jScrollArrowUp:hover {background-position: -383px -57px;}
a.jScrollArrowUp.disabled {background-position: -383px -114px;}
/*  ----------------------------------------------------------------------
  STANDARD LAYOUT
  ---------------------------------------------------------------------- */

#wrapper {
	position: relative;
	width: 997px;
	text-align: left;
	margin: 0 auto;
}

#header {
	position: relative;
	width: 997px;
	height: 124px;
}

#header h1 {
	margin: 0px;
}

#header h1 a {
	position: absolute;
	top: 60px;
	right: 0px;
	width: 310px;
	height: 63px;
	text-indent: -9000px;
	background: url("../images/logo.gif") no-repeat 0 0;
}

#content {
	width: 780px;
	margin-left: 230px;
	height:auto;
	
}

#content-top {
	width: 595px;
	height: 401px;
	padding: 34px 84px 0 84px;
	background: url("../images/content-top-text-page.gif") no-repeat 0 0;
}

body.photo-page #content-top {
	width: 780px;
	height: 443px;
	padding: 0px;
	background: url("../images/content-top-photo-backing-lime.png") no-repeat 0 0;
}

/*body#page-projects #content-top {
	background: url("../images/content-top-projects-backing.png") no-repeat 0 0;
}*/



.slideshow {
	width: 766px;
	height: 377px;
	overflow: hidden;
}


#content-bottom {
	width: 670px;
	height: auto;
	min-height: 400px;
	padding: 32px 20px 0 73px;
	background: url("../images/content-bottom-bg.png") no-repeat 34px 0;
}

body.photo-page #content-bottom {
	margin-top: -8px;
}

.col-1,
.col-2,
.col-3 {
	float:left;
	width: 320px;
	margin: 0;
	height:100%;
}

.col-2,
.col-3 {
	margin-left: 20px;
}

#content-top .col-1,
#content-top .col-2,
#content-top .col-3 {
	height: auto;
}


/*----------------------------------
	FOOTER
-----------------------------------*/

#footer {
	clear:both;
	width: 767px;
	height: 51px;	
	font-size:10px;
	color:#666;
	padding: 10px 0 30px 0;
	text-align: left;
	background: url("../images/footer.gif") no-repeat 73px 10px;
}

#footer a {
	float: right;
	display: inline;
	width: 767px;
	height: 51px;	
	text-indent: -9000px;
}

/*----------------------------------
	HEADINGS and TEXT
-----------------------------------*/

h1.text,
h2.text,
h3.text {
	width: 400px;
	height: 13px;
	margin: 0 0 15px 0;
	text-indent: -9000px;
	background-repeat: no-repeat;
}

h2.text {height: 22px;margin-bottom: 18px;}
h3.text {width: 130px;height: 21px;margin-bottom: 12px;}

h1.welcome {background-image: url("../images/text/h1-welcome.gif");}
h1.about-us {background-image: url("../images/text/h1-about-us.gif");}
h1.about-us-services {background-image: url("../images/text/h1-about-us-services.gif");}
h1.our-clients {background-image: url("../images/text/h1-our-clients.gif");}
h1.testimonials {background-image: url("../images/text/h1-testimonials.gif");}
h1.contact-us {background-image: url("../images/text/h1-contact-us.gif");}
h1.resources {background-image: url("../images/text/h1-resources.gif");}
h1.projects-id {background-image: url("../images/text/h1-projects-id.gif");height: 15px;}
h1.projects-publications {background-image: url("../images/text/h1-projects-publications.gif");height: 15px;}
h1.projects-print {background-image: url("../images/text/h1-projects-print.gif");height: 15px;}
h1.projects-web {background-image: url("../images/text/h1-projects-web.gif");height: 15px;}


h2.welcome-to {background-image: url("../images/text/h2-welcome-to.gif");width: 639px;height: 44px;}
h2.about-the-director {background-image: url("../images/text/h2-about-the-director.gif");}
h2.we-offer {background-image: url("../images/text/h2-we-offer.gif");width: 598px;height: 47px;}
h2.some-of-our-clients {background-image: url("../images/text/h2-some-of-our-clients.gif");}
h2.we-are-open {background-image: url("../images/text/h2-we-are-open.gif");width: 470px;}
h2.the-following {background-image: url("../images/text/h2-the-following.gif");width: 575px;height: 42px;}
h2.latest-news {background-image: url("../images/text/h2-latest-news.gif");;}

h3.design-print {background-image: url("../images/text/h3-design-print.gif");}
h3.packaging {background-image: url("../images/text/h3-packaging.gif");}
h3.online-media {background-image: url("../images/text/h3-online-media.gif");}
h3.momentum {background-image: url("../images/text/h3-momentum.gif");width: 219px;}
h3.online-quote-request {background-image: url("../images/text/h3-online-quote-request.gif");width: 204px;}
h3.location-map {background-image: url("../images/text/h3-location-map.gif");}
h3.graphic-design {background-image: url("../images/text/h3-graphic-design.gif");width: 228px;}
h3.web-design {background-image: url("../images/text/h3-web-design.gif");width: 204px;}
h3.our-credentials {background-image: url("../images/text/h3-our-credentials.gif");width: 140px;}
h3.launch {background-image: url("../images/text/h3-launch.gif");width: 175px;}

/*----------------------------------
	LISTS
-----------------------------------*/

ul.bullet-plus,
ul.bullet-blank  {margin-left: 0px;}

ul.bullet-plus li {
	list-style: none;
	background: url("../images/plus.gif") no-repeat 0 6px;
	padding-left: 15px;
	margin-left: 0px;
}

ul.bullet-blank li {
	list-style: none;
	padding-left: 0px;
	margin-left: 0px;
}

/*----------------------------------
	INDIVIDUAL PAGE LAYOUT
-----------------------------------*/

#page-about-us-services .col-1,
#page-about-us-services .col-2,
#page-about-us-services .col-3 {
	width: 245px;
}

#page-about-us-services .col-2,
#page-about-us-services .col-3 {
	margin-left: 2px;
	width: 203px;
}

#page-about-us-services .col-3 {
	margin-left: 11px;
	width: 209px;
}

#page-about-us-services #content-top,
#page-about-us-director #content-top {padding-right:4px;width: 675px;}

#page-our-clients .col-1 {width: 355px;}
#page-our-clients .col-2 {width: 295px;margin-left: 10px;}
#page-our-clients #content-top {padding-right:4px;width: 675px;}

#page-resources .col-1,
#page-resources .col-2 {margin-top: 30px;width:260px;height: auto;}
#page-resources .col-1 {width:320px;}

#page-contact #content-top,
#page-resources #content-top {padding-right:74px;width: 605px;}
#page-contact .col-2 {width: 260px;}
#page-contact .col-1,
#page-contact .col-2 {margin-top: 40px;height: auto;}


#page-contact h3.text,
#page-resources h3.text {margin-bottom: 2px;}

#page-projects .col-1,
#page-projects .col-2,
#page-projects .col-3 {
	width: 200px;
}



/*----------------------------------
	FORM STYLING 
-----------------------------------*/

form {
	margin-top:10px;
	padding-bottom: 40px;
}

form hr {
  clear: both;
  border: 0px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 10px;
}

form h3 {
 	margin-bottom:6px;
	padding: 2px; 
}

form .hidden {
  text-indent: -9000px;
}

form input[type="hidden"] {
  display: none;
}

form br {clear:left;}

/*fieldset {
	margin-top: 12px;
	margin-bottom:20px;
	border: 1px solid #51B52D;
	padding: 10px;
	width: 400px;
}*/

label, input, textarea, .radiolabel {
	display:block;
	float:left;
  	width:282px;
	margin-bottom:0px;
	padding: 2px;
}

input[type="checkbox"] {
  width: auto;
  border: none;
}

input.checkbox {
  width: auto;
  border: none;
}

form span {
 /* color: #FF0000;*/
  color: #58595B;
  font-size: 10px;
}

legend {
  color: #518CF2;
  font-weight: bold;
}

label {
	width:180px;
	text-align:left;
	padding-right:10px;
	padding-top:2px;
	padding-left: 0px;
	font-weight: bold;
}

input{
	/*border: 1px solid #0F0F0F;*/
	margin-bottom: 2px;
}

input.short {width: 40px;}

input.noborder {border: none;} 

textarea{
  width: 400px;
  height: 120px;
  margin-bottom: 6px;
}

select {margin-bottom: 6px;}
option {padding-right: 10px;}

.fieldWithErrors input{
	background-color: #FCC;
}

input.button {
	width: auto;
	text-align: center;

	margin: 5px 8px 10px 0px;
}
input.button:hover		{}

.failed-validation {background: #FF8888;}

/*----------------------------------
	TABLE STYLING
-----------------------------------*/

table.data {
	margin-bottom: 10px;
}

table.data td {
	vertical-align: top;
	padding: 1px;
	border-bottom: 1px solid #B1460E;
}

td.bold {
	font-weight: bold;
	color: #F57E3D;
}

/* ----------------------------------------------- 
		NOTICES
----------------------------------------------- */

#error {
	background: #FF4E4E;
	border: 3px solid #FF7C7C;
	padding: 10px;
	padding-bottom: 10px;
	font-weight: bold;
	color: #333;
	margin-bottom:10px;
}

#success {
	background: #BBEECC;
	border: 3px solid #E3FFED;
	padding: 10px;
	padding-bottom: 10px;
	font-weight: bold;
	color: #333;
	margin-bottom:10px;
}


/* ----------------------------------------------- 
		SCROLLABLE
----------------------------------------------- */


/*
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 766px;	
	height:850px;		
}

div.scrollable .scrollable {
	height:377px;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	top: 0px;
	left: 0px;
	clear:both;		
	
	/* decoration */
}

/* single scrollable item */
div.scrollable div.items div.scrolling-item {
	float:left;
	width:766px;
	height: 377px;
	padding:0px 0px;
}

/* active item */
div.scrollable div.items div.active {

}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	/*float:left;*/	
	

}


/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	position: absolute;
	display:block;
	width:383px;
	height:300px;
	cursor:pointer;
	text-indent: -12000px;
	background: #333 url("../images/arrows.gif") no-repeat 0 0;
}

a.next, a.nextPage {
	left: 383px;t0op:0px;
	background-position: -383px 0;
}

a.prev, a.prevPage {
	left: 0px;top:0px;
}


/* mouseover state */
a.prev:hover, a.prevPage:hover {
	background-position: 0 -57px;
}

a.next:hover, a.nextPage:hover {
	background-position: -383px -57px;
	
}

/* disabled navigational button */
a#prev.disabled {}
a#next.disabled {}


/* next button uses another background image */
a.next, a.nextPage {
	/*clear:right;*/	
}



/*********** navigator ***********/

body#page-projects ul#navi {
	position: absolute;
	top: 640px;
	left: 302px;
	z-index: 1;
}

body#page-projects .scrolling-item a.next {
	position:relative;
	top:-57px;
	right:766px;
	height:57px;
}
		
body#page-projects .scrolling-item a.prev {
	position:relative;
	top:0px;
	left:0px;
	height:57px;
}



.column-1 {
	width: 200px;
	height: 100%;
	margin-top: 5px;
	margin-left: 290px;
	padding-bottom:10px;
}