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

/*  
Client: Abaca Press
Client URL: http://www.abaca-press.com

Author: 12 Grain Studio
Author URL: http://www.12grainstudio.com/


	
*/



/*
A. COLORS
-----------------------------------------------------------------------------

#hex (desc)

#9d958c  (light brown)
#615644 (brown)
#333333  (dark grey)
#ffffff (white)
#000000 (Black)



B. TABLE OF CONTENTS
-----------------------------------------------------------------------------
1. RESET

2. BASE
   Basic Styles
3. LAYOUT
	Content
	Navigation
	Sub-Nav
	Footer
	Homepage
	Promo Section
	Logo
	Page Styles


 	
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------*/


/* 1. RESET
no editing required
----------------------------------------------------------------------------- */

html, body, br, hr, 
div, span, a,
object, iframe,
ul, ol, dl, li, dt, dd,
h1, h2, h3, h4, h5, h6,
p, blockquote, q, address,
small, big, cite, dfn, ins, del, 
i, em, b, strong, sup, sub, strike,
pre, code, samp, kbd, var, tt,
form, fieldset, legend, label,
input, textarea, option, .nobox{
	background: transparent;
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	margin-top: 0px;
}

blockquote, q{
	quotes: none;
	color: #333333;
	text-align: left;
}

br{ height: 0; }

ul, ol, dl{ list-style: none; }

a img{
	border: 0;
	margin: 0px auto;
}

img{
	display: block;
}






/* 2. BASE
----------------------------------------------------------------------------- */

body {
	margin: 0 auto;
	padding: 0;
	text-align: left;
	font-size:16px;
	font-family: 'OFL Sorts Mill Goudy TT', Times, serif;
	color: #615644;
	background:#e8e4de url('images/bg_paper.jpg') repeat 0 0;
}


/* main wrapper thing */
#container{
	margin:0 auto;
	width:960px;
	height: 100%;
}

#header {
	margin: 0px auto;
	padding:0px;
	width:960px;
	height: 70px;
}
#content {
	margin: 10px 0 20px 0;
	padding:0px 0px;
	width:960px;
}

#home {
	margin: 15px auto;
	padding:45px 0px 0 0;
	width:960px;
	height:520px;
	background: transparent url('images/img_studio.png') no-repeat center 0;
}

#inter {
	margin: 25px auto;
	padding:45px 0px 0 0;
	width:960px;
	height:520px;
	background: transparent url('images/bg_flower.jpg') no-repeat center 0;
}


.leftCol {
	width: 310px;
	margin:0 0px 0 0;
	padding:0;
	float:left;
	height: 500px;
}

.centerCol {
	width: 250px;
	margin:0 15px 0 100px;
	padding: 0px;
	float:left;
	text-align:right;
}

.centerColCat {
	width: 140px;
	margin:100px 0 0 0px;
	padding: 0px;
	float:left;
	height: 400px;
}



.rightCol {
	width: 250px;
	margin:0;
	padding: 0px;
	float:right;
	text-align:center;
}

.rightColContent {
	width: 500px;
	margin:0;
	padding: 0px 0px 0 0;
	float:right;
}


#footer {
	width: 100%;
	height:154px;
	margin:20px auto;
	padding:10px 0;	
	background:transparent url(images/img_footerLine.jpg) no-repeat 0 0;
	
}

/*========== TEXT =========*/

h1, h2, h3, h4 { font-family: 'OFL Sorts Mill Goudy TT', Times, serif; font-weight:normal;}


h1 {
	font-size:30px;
	color:#333333;
	margin:0px 0 40px 0px;
	text-align:right;
	line-height:32px;
}

h2 {
	font-size:21px;
	color:#333333;
	margin:0px 0px 5px 0px;
	padding:0;
}

h3 {
	font-size:18px;
	color:#333333;
	margin:0px 0px 0px 0;
	padding:0;
	text-align:left;
}

h4 {
	font-size:16px;
	color:#333;
	margin:8px 0 0px 0px;
	padding:0;
	
}

/*------  COPY -----*/

p {
	font-family: 'OFL Sorts Mill Goudy TT', Times, serif;
	padding:5px 0px 8px 0px;
	margin:0 auto;
	text-align:left;
	line-height:1.5;
}

.caption {
	margin:0;
	color:#666;
	text-align: left;
	font-size: 12px;
	padding: 0 10px;
}



.address {
	width: 640px;
	margin:0 0 0 0px;
	padding:0 0px 0px 0px;
	float: left;
	
}


.address p {font-size:12px; color:#615644; line-height: 16px;}

.quote {
	width:480px;
	font-style:italic;
	font-spacing:0.1px;
	letter-spacing: 0.1em;
	background-color:#eeeeee;
	padding:15px;
	color: #000000;
	font-family: Georgia;
	font-size:12px;
}

.list {
	list-style-type: circle;
	display:block;
	padding-left:25px;
	margin:0;
	text-align:left;
	line-height:16px;
	color:#333333;
	width: 200px;
	float: left;
}

.list li {
	padding:3px 0;
}



/*============  LINKS ===========*/
a {
	color:#96917f;
	text-decoration:none;
	padding: 0px;
}

a:hover {
	color:#615644;
	text-decoration:none;
	padding: 0px;
	
}


#footer a {
	color:#615644;
	text-decoration:none;
	padding: 0px;
}

#footer a:hover {
	color:#96917f;
	text-decoration:underline;
	padding: 0px;
}

.12g {
	margin: 5px auto;
	display:block;
	text-align:center;
	width: 80px;
}

a.return, a.return:hover{
text-align:right;
}


a.copyLink{
padding:0px;
color:#FF9900;
font-weight:bold;
text-decoration:none;
}

a.copyLink:hover{
padding:0px;
background-color:#FF9900;
color:#000;
font-weight:bold;
text-decoration:none;
}


a.moreLink{
padding:2px 4px;
background-color:#ccc;
color:#000;
text-decoration:none;
}

a.moreLink:hover{
padding:2px 4px;
background-color:#FF9900;
color:#000;
text-decoration:none;
}

/*------  NAV -----*/

.nav {
	float:none;
	margin:0px 0 0 0;
	padding:40px 0 0 0;
	text-align:right;
	background: transparent url("") no-repeat center center;
}


.nav li {
	list-style:none;
	display:inline;
	padding:0px 5px 0 5px;
	font-size: 18px;
	font-family: 'OFL Sorts Mill Goudy TT', Times, serif; 
	font-weight:normal;
	
}

.nav .last {border:none;}

.nav .lastOn { color:#ff9900; border:none;}

.nav li a {
	color:#333333;
	font-weight:normal;

}
.nav li a:hover {
	color:#000;
	font-weight:normal;
	text-decoration:line-through;
}
.nav .on{
	list-style:none;
	display:inline;
	padding:0px 5px 0 5px;
	font-size: 14px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	color:#615644;
	text-decoration:line-through;
}

.subNav {
	width: 145px;
	margin:25px 0px;
	padding:0px;
	text-align: right;
}

.subNav li {
	list-style:none;
	display:block;
	padding:4px 0px;
	height: 16px;
}

.subNav .on{
	list-style:none;
	display:block;
	padding:4px 0px;
	text-transform:uppercase;
	color:#FF9900;
	text-indent:0px;
}



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


 .clearFooter{ clear:both;}
 
 
.footerContent{
width:960px;
margin:0 auto;
padding:0;
}

.footerContent li {
	list-style:none;
	display:inline;
	padding:0 4px;
	border-right:1px dotted #333;
}

.footerContent .last {border:none}

.copyright {
	margin:0;
	font-size:10px;
	text-align:right;
	color:#91cbe1;
}
.credit{
	float:right;
	width:320px;
}

.credit p{
	text-align:right;
	line-height:normal;
	font-size: 11px;
	color:#96917f;
}

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



/*========== PAGES =========*/

/*--------------------------------------- PAGE SCROLLER -----*/

/* main vertical scroll */
#main {
	position:relative;
	overflow:hidden;
	/*height: 560px;*/
	width:500px;
	float: left;
	margin-left:5px;
	
	
}

/* root element for pages */
#pages {
	position:absolute;
	height:100%;
}

/* single PAGE  - must be as high as #main*/
.page {
	padding:0px;
	width:500px;
	height:560px;
	border:0px solid red;	
}


/* root element for horizontal scrollables */
.scrollable {
	position:relative;
	overflow:visible;
	width: 100%;
	height: 540px;
	
}



/* root element for scrollable items */
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}


/* single scrollable item */
.item {
	float:left;
	cursor:pointer;
	width:500px;
	height:530px;
	padding-left:3px;	
	border:0px solid green;
	
}

/* single scrollable item */
.item p {
	float:left;
	cursor:pointer;
	width:480px;
	padding:5px 0px 0 10px;
	font-size:11px;
	line-height:12px;
}



/* main navigator */


#main_navi {
	padding:0px !important;
	width:100%;
	float:none;
	margin:0px auto;
	padding:0px 0 0 0;
	text-align:right;
	list-style-type:none;
}

#main_navi li {
	margin:0;
	padding:5px;
	height: 21px;
	list-style:none;
	display:block;
	font-size: 18px;
	font-family: 'OFL Sorts Mill Goudy TT', Times, serif; font-weight:normal; 
	font-weight:normal;
	cursor:pointer;

}

#main_navi li:hover {
	/*color:#615644;*/
	color:#333;
	background:transparent url(images/btn_rollover.jpg) no-repeat 0 0;

}

#main_navi li.active {
	color:#333;
	background:transparent url(images/btn_on.jpg) no-repeat 0 0;
}

#main_navi li.active:hover {
	color:#9d958c;
	background:transparent url(images/btn_rollover.jpg) no-repeat 0 0;
}

#main_navi img {
	float:left;
	margin:0px;
}

#main_navi strong {
	display:block;
}

#main div.navi {
	margin:0 0 0 0px;
	cursor:pointer;
}

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

/* prev, next, prev

 and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../img/scrollable/arrow/left.png) no-repeat;
	float:left;
	margin:43px 10px;
	cursor:pointer;
	font-size:1px;
}

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

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/scrollable/arrow/right.png);
	clear:right;	
}



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


/* position and dimensions of the navigator */
div.navi {
	margin-left:30px;
	width:200px;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:12px;
	height:12px;
	float:left;
	margin:3px;
	background-color:#000000;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-color:#615644;    
}

/* active state (current page state) */
div.navi a.active {
	background-color:#fff;     
} 	





/*--------------------------------------- PAGE layout -----*/


.logo {
	width: 314px;
	height:100px;
	margin:0px auto;
	padding-top:20px;
	float:none;
	text-align:center;
	background:transparent url('') no-repeat 0 0;
	display: block;
}

.logo a{
	width: 314px;
	height:159px;
	margin:0px 4px;
	padding:0px;
	float:left;
	display: block;
}

.intro {
	width: 310px;
	float:left;
	margin:25px 5px;
	padding:0px;
}




.pageHdr {
	height:200px;
	background-color:#D2ECF5;
}

.abaca, .peter, .barb {text-align: center;}


.abaca img{
	margin-top:175px;
}
.peter img{
	margin-top:225px;
	margin-bottom:20px;
	display:block;
}
.barb img{
	margin-top:200px;
	margin-bottom:20px;
	display:block;
}




.spacer{
	width: 275px;
	height:225px;
	float:left;
	margin:0px 25px 0px 25px;
	padding:0px;
}

.contact {
	width: 300px;
	margin:0 0 0 0px;
	padding:0px;
	float:left;
	background-color:#fff;
}

.clients{
	width: 105px;
	margin:15px 25px 0 25px;
	padding:0px;
	float:left;
	border:0px dotted #000;
}
.clients li{padding: 8px 0;}


.testimony {
	width:510px;
	margin:10px 0 40px 0px;
	border-bottom:1px dotted #CCCCCC;
}

.study {
	width:510px;
	margin:10px 0 40px 0px;
	border-bottom:1px dotted #CCCCCC;
	padding-bottom: 15px;
}

.study img {
	width:460px;
	margin:10px auto;
	border:4px solid #d2ecf5;
}

.thumbs {
	margin:2px;
	padding:10px;
	border:0px solid #000;
	height: 195px;
}


.studyThumb{
	width:150px;
	float:left;
	margin:8px 15px;
	background-color:#d2ecf5;
	padding: 12px;
}

.service{
	margin:20px 0px;
	padding:0;
	border:0px solid #000;
	height:220px;
}
.service img{float:right;}
.service h4{float:left; padding-bottom:5px}
.service p {float:left; width:200px; padding:0px;}


.thanks {
	margin-top:100px;
	text-align: left;
	padding-left: 45px;
}



/*------- FORMS-------*/
form{
width:480px;
margin-left:20px;
}


input{
	background-color:#FFFFFF;
	padding: 2px 5px;
}

textarea {
	border:1px dotted #ccc;
	background-color:#FFFFFF;
	font-size:12px;
	padding:4px;
}

#submit { color:#9d958c; background-color:#333333; cursor:pointer;}





/*------TOOL TIPs---*/
element.style {
display:none;
left:747.2px;
opacity:1;
position:absolute;
top:121px;
}

.tooltip {
	display:none;
	background-color:#fff;
	border:1px solid #999;
	padding:3px;
	font-size:13px;
	-moz-box-shadow: 2px 2px 11px #666;
	-webkit-box-shadow: 2px 2px 11px #666;
	}

/* style the trigger elements */
#triggers img {
	border:0;
	cursor:pointer;
}





/*------SLIDESHOW---*/


#slideshow {
    position:relative;
	float:right;
    height:240px;
	width:500px;
	background:transparent url('images/bg_slideshow.png') no-repeat 0 0;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


.error {
	/* supply height to ensure consistent positioning for every browser */
	height:20px;
	background-color:#333333;
	font-size:11px;
	color:#fff;
	padding:0px;
	margin-left:2px;
}

.error p{
margin:0px;
padding:0px 10px 3px 10px;}