/* One Flash Web Design and Web Marketing 

Colors
light grey: #E7E5E1
bottom background: #B7AFA7

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


/* Global Styles
----------------------------------------- */
* { margin: 0; padding: 0; }
html { height: 100%; margin-bottom: 1px; }
body { text-align: center; background: url(../images/of_bg.jpg) 0 0 repeat-x #CAB983;  font-family:"Trebuchet MS", Geneva, sans-serif; font-size: 0.8em; color: #333; }
ul, li { list-style: none; }
h1 { font-family: Verdana, Arial, sans-serif; background: inherit; color: #94939C; font-size: 140%; font-weight: normal; padding-top: 0.5em; border-bottom:2px solid #AF974E; }
h2 { font-family: Verdana, Arial, sans-serif; background: inherit; color: #7595AC; font-size: 120%; font-weight: bold; padding-top: 0.5em; }
h3 { font-family: Verdana, Arial, sans-serif; background: inherit; color: #94939C; font-size: 120%; font-weight: bold; padding: 0 0 5px 0; border-bottom:2px solid #94939C; }
h4 { font-family: Verdana, Arial, sans-serif; font-size: 100%; font-weight: bold; padding:0; margin:0; }
h5 { font-family: Verdana, Arial, sans-serif; font-size: 100%; font-weight: 200; padding: 5px 0; }

p { margin: 0.5em 0 1em 0; line-height: 1.25em; }
a:link { background-color: inherit; color: #06f; }
a:visited { background-color: inherit; color: #0044a9; }
a:hover { background-color: inherit; color: #036; }
a:active { background-color: inherit; color: #c6c8ca; }


/* Divs
----------------------------------------- */
#wrapper { color: #333; background-color:#fff; margin: 20px auto; width: 950px; }
#header { margin:0 auto; width:950px; color:inherit; background: url(../images/ab_header.jpg) 0 0 no-repeat #fff; }
#navigation { margin:0 auto; width:930px; height:56px; color:inherit; background: url(../images/ab_nav_bg.jpg) 0 0 repeat-x #fff; }
#flasharea { margin:0 auto; }

/* Main Container
----------------------------------------- */
#maincontainer { }
#maincontainer p { padding-left:2px; }

#maincontainer p.quoted {width:240px; margin:-50px 0 0 55px; font-size:1.5em; color:#B6ADA5; background-color:inherit; }
#maincontainer p.sidebar {width:280px; margin:20px 0 15px 25px; font-size:1.5em; color:#7595AC; background-color:inherit; }

#maincontainer li { list-style: square; margin-left:18px; font-size:0.95em; }


/* nav specifics
----------------------------------------- */
#navigation ul { padding:0; margin:0; list-style:none; }
#navigation li { float:left; margin:0; padding:0; width:auto; }
#navigation li a { display:block; text-indent:-9999em; height:65px; }

/* nav images normal */
#navigation .n-home a { background: url(../images/of_nav_home.jpg); width:185px; }
#navigation .n-about a { background: url(../images/of_nav_about.jpg); width:164px; }
#navigation .n-services a { background: url(../images/of_nav_services.jpg); width:194px; }
#navigation .n-gallery a { background: url(../images/of_nav_gallery.jpg); width:176px; }
#navigation .n-contact a { background: url(../images/of_nav_contact.jpg); width:211px; }

/* nav hover */
#navigation li a:hover { background-position:0 -70px; }

/* nav on */
.home #navigation .n-home a,
.about #navigation .n-about a ,
.services #navigation .n-services a ,
.gallery #navigation .n-gallery a ,
.contact #navigation .n-contact a  { background-position:0 -139px; }

/* four up
----------------------------------------- */
.tier1 { float:left; width:205px; padding:10px; margin-left:20px; text-align:left; }
.tier2 { float:left; width:205px; padding:10px; text-align:left; }
.tier3 { float:left; width:205px; padding:10px; text-align:left; }
.tier4 { float:left; width:205px; padding:10px; text-align:left; }

/* two up
----------------------------------------- */
.tiera { float:left; width:450px; padding:10px; margin:0 20px; text-align:left; }
.tierb { float:left; width:360px; padding:10px; text-align:left; }

/* all the way and three-up
----------------------------------------- */
.tierall { float:left; width:840px; padding:10px; margin:0 20px; text-align:left; }
.project1 { float:left; width:260px; padding:10px; text-align:center; }
.project2 { float:left; width:260px; padding:10px; text-align:center; }
.project3 { float:left; width:260px; padding:10px; text-align:center; }

/* forms look bad flush left
----------------------------------------- */
.forms { margin-left:50px; }
.errorMessage { color:#990000; font-weight:bold; background-color:inherit; }
.required { font-weight:bold; }


/* sequitur
----------------------------------------- */
#sequitur { margin:0 auto; width:930px; height:270px; color:inherit; background:url(../images/of_sequitur.jpg) 0 0 no-repeat #fff; }
#sequitur h4 { font-size: 100%; font-weight: bold; padding-top:50px; }
#sequitur .statement {margin:0 0 0 520px; width:320px; text-align:left; }
#sequitur .statement p { margin-top:0px; line-height:1.1em; }

/* footer 
----------------------------------------- */
#footer { padding:10px 0; width:950px; color:inherit; background-color: #CAB983; text-align:center; }

#footer li { background: url(../images/bullet.gif) left center no-repeat; display:inline; padding:0 15px 0 22px; }
#footer li.first { background:none; }
#footer li a { background-color:inherit; color:#7A787E; text-decoration: underline; }
#footer a { background-color:inherit; color:#7A787E; }
#footer a:visited { background-color:inherit; color:#888; }
#footer a:hover { background-color:inherit; color:#fff; }
#footer p { font-size:0.9em; padding:10px 0 0 0; }

.designer { color:#7A787E; background-color:inherit; }
a.designer { color:#7A787E; background-color:inherit; text-decoration:none; }

/* classes
----------------------------------------- */
a.logo{ background:url(../images/of_logo.jpg) no-repeat 0 0; width:930px; height:101px; margin:10px; overflow:hidden; outline:none; float:left; z-index:1; text-indent:-9999px; }

/* images
----------------------------------------- */
img.tierbimage { border-top:1px solid #444;  border-right:10px solid #C8BC80; border-bottom:10px solid #C8BC80; border-left:1px solid #C8BC80; }
img.learnmore { width:102px; height:25px; margin-left:70px; border:0; }
img.welcome { margin:0px; border:1px solid #444; }
img.whatsnew { margin:0px; border:1px solid #444; }
img.imgcontact { margin:10px 50px; border:0; }
img.portimage {  }
img.staffphoto { height:100px; width:100px; border:1px solid #222; }


/* Self Cleared Float
----------------------------------------- */
#header:after,
#navigation:after,
#flasharea:after,
#maincontainer:after,
#footer:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

.tier4:after,
.tierb:after,
.tierall:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }