/* 
Title:     	Web Wonder
Author:    	www.web-wonder.com
Date:		24th March 2009
Version:   	2.0

Table of Contents

1.	general styles
2.	skip nav links
3.	navigation
	3a. main nav
	3b. footer
4.	page structure
5.	headings
6.	paragraph sytles

/*

/* 1. general styles 
-------------------------------------------------- */
* {border: 0; margin: 0; padding: 0;}
html {height: 100%;font-size: 100%; /* IE hack */ }
body {text-align: center;/*IE 5, 5.5 part 1 of 2 centering hack */
background: #202d24;font: 62.5%/1.5 "Century Gothic", Arial, Helvetica, Sans-Serif;
/*background: #012145 or #021b36;*/
color: #595850;}
ul {margin: 0; padding: 0; list-style: none;}
a { outline:none;}
br{clear:both;}
acronym {cursor: help;border: none;border-bottom: 1px dotted #FF7400;}
#wrapper p.toppage {float:right;margin:20px 5px -10px 0;}
#skip_nav {background:#202d24; color:#202d24;top: -500px; }
#skip_nav a{color:#fff; }


/* 2. skip nav links
-------------------------------------------------- */
#skip_nav a, #skip_nav a:hover, #skip_nav a:visited{position: absolute;top: -500px;left:0;overflow:hidden;}
#skip_nav a:active, #skip_nav a:focus{position: absolute;top: 10px;left:10px;font-size: 1em;	color:#ffffff;}
#skip a:active, #skip a:focus{position:static;width:auto;height:auto;}

/* 3. navigation
----------------------------------------------------99bbdd 85BFFF yellow maybee 
/* default links #00FF00 #b6ba95*/
a, a:link{color: #e6f195;background:none;text-decoration: none;}
a:visited{color: #e6f195;background: none;}/*#b6ba95 */
a:hover{color: #FF7400;background: none;text-decoration: underline;}
a:active{color: #e6f195;background: none;}

/* 3a. main navigation*/
#skyline {width: 963px; height: 95px;background: url(../images/menu.gif);margin: 0 auto; position: relative;}
#skyline li {margin: 0;list-style: none;position: absolute; top: 0; text-indent: -9000px;}
#skyline li, #skyline a {height: 95px; display: block;padding: 0;}
#skyline li a:hover {visibility:visible;}

#home {left: 0px; width: 100px;}
#services {left: 130px; width: 148px;}
#portfolio {left: 322px; width: 176px;}
#about {left: 533px; width: 105px;}
#contact {left: 675px; width: 132px;}
#links {left: 844px; width: 117px;}

#skyline .homeselect a:link, #skyline .homeselect a:visited,#skyline .homeselect a:hover, #skyline .homeselect a:active {background: url(../images/menu.gif);background-position: 0 -95px;width: 130px;}
#skyline .servicesselect a:link, #skyline .servicesselect a:visited,#skyline .servicesselect a:hover, #skyline .servicesselect a:active {background: url(../images/menu.gif);background-position: -130px -95px;width: 188px;}
#skyline .portfolioselect a:link, #skyline .portfolioselect a:visited,#skyline .portfolioselect a:hover, #skyline .portfolioselect a:active {background: url(../images/menu.gif);background-position: -322px -95px;width: 206px;}
#skyline .aboutselect a:link, #skyline .aboutselect a:visited,#skyline .aboutselect a:hover, #skyline .aboutselect a:active {background: url(../images/menu.gif);background-position: -533px -95px;width: 140px;}
#skyline .contactselect a:link, #skyline .contactselect a:visited,#skyline .contactselect a:hover, #skyline .contactselect a:active {background: url(../images/menu.gif);background-position: -675px -95px;width: 162px;}
#skyline .linksselect a:link, #skyline .linksselect a:visited,#skyline .linksselect a:hover, #skyline .linksselect a:active {background: url(../images/menu.gif);background-position: -844px -95px;width: 120px;}

  
#home a:hover {background: transparent url(../images/menu.gif) 0px -95px no-repeat;width: 130px;}
#services a:hover {background: transparent url(../images/menu.gif) -130px -95px no-repeat;width: 188px;}
#portfolio a:hover {background: transparent url(../images/menu.gif) -322px -95px no-repeat;width: 206px;}
#about a:hover {background: transparent url(../images/menu.gif) -533px -95px no-repeat;width: 140px;}
#contact a:hover {background: transparent url(../images/menu.gif) -675px -95px no-repeat;width: 162px;}
#links a:hover {background: transparent url(../images/menu.gif) -844px -95px no-repeat;width: 120px;}

/* 3b. footer #b6ba95 */
#footer {clear:both;margin: 60px 0 0 13px;padding:10px 0 20px 0;
width:940px;color:#b6ba95;border-top:solid 5px #324438; height:auto;
}
#footerright {
float:right;padding: 15px 0 0 0;color:#00FF00; display:inline;
}
#footerleft {float: left;}
#footerright li, #footerleft li{
display:inline;
}







/* 4. page structure
-------------------------------------------------- */
 #wrapper {
/*font: 72%/1.5em Arial, Sans-Serif;width: 100%;*/
width: 960px;
margin-top: 34px;
margin-bottom: 0;
margin-right: auto; /*auto on both sides centers the wrapper in modern browsers*/
margin-left: auto;
text-align: left; /*IE 5, 5.5 part 2 of 2 centering hack  - resets text-align default*/
position:relative;
}

#logoBox{width:649px;height:63px;color:#fff;background: #202d24 url(../images/logo.gif) no-repeat 0 0;position: relative; top:0; left:10px;}

#postit{
position: relative; top:-110px; left:714px;width:250px;height:221px; background: #202d24 url(../images/postit.jpg) no-repeat 0 0;} 
#postit a#postitlink {width: 200px;height: 200px;position: absolute;top: 0;left: 30px;}

/* box container for three boxes on home page*/
#box {position:relative;margin:30px 0 0 0;width:960px;}
#box #right, #box #left, #box #center {background: #334539 url(../images/frame.jpg) no-repeat 0 0;width:300px;height:260px;}
#box #right{float:left;margin-left:12px;display:inline;margin-right:20px;}
#box #left{float:right;display:inline;margin-right: 8px;}
#box #center {float:left;display:inline;} 

/*image reconstruction box*/	
#box span.reconstruction img, #box span.reconstructiona img, #box span.reconstructionb img, #box span.reconstructionorigb img{position: absolute;    width: 132px;height: 97px;}
#box span.reconstruction img{top: 47px;left: 669px;}
#box span.reconstructiona img{top: 47px;left: 803px;}
#box span.reconstructionb img{top: 146px;left: 669px;}
#box span.reconstructionorigb img{top: 146px;left: 803px;}
/*client testimonial box*/	
#box p.textb{position: absolute;top: 46px;left: 354px;width: 260px;font-size:1.3em;
height:200px;overflow:auto;color:#EAF6E2;}
#box a.moreright {float:right;padding: 10px 10px 0 0;font-size:1em;color:#b6ba95;}
#box a:hover {color:#FF7400;}

/*portfolio box*/
#box span.portfolioimg{background:url(../images/boavista.jpg) no-repeat; position: absolute;top: 47px;left: 29px;width: 266px;    height: 196px;cursor:pointer;}

/* image reconstruction page */
#photocontainter {background: #334539 url(../images/booka.jpg) no-repeat 0 0;width:940px;height:640px;position:relative;margin:30px 0 0 12px;}
#photocontainter #leftcolumn {width:455px; float:left; display:inline; }
#photocontainter #rightcolumn {width:455px; float:right; display:inline; }
#photocontainter #rightcolumn img.photoorig {padding-left: 55px;padding-top:30px;margin:0;}
#photocontainter #rightcolumn img.photomodified {padding-left: 55px;padding-top:40px;margin:0;}
#photocontent {background: #334539;width:940px;height:auto;position:relative;margin:30px 0 0 12px;}
#photocontent p {padding:10px 15px 10px 15px;font-size:1.3em;color:#EAF6E2;}

/*grid portfolio*/
#boxportfolio {position:relative;margin:30px 0 0 0;width:960px;}
.portfolioborder {background: #334539;width:300px;height:230px;}
#boxportfolio #rowonea{float:left;margin-left:12px;display:inline;margin-right:20px;}
#boxportfolio #rowoneb{float:right;display:inline;margin-right: 8px;}
#boxportfolio #rowonec {float:left;display:inline;} 
#boxportfolio #rowoned{float:left;margin: 20px 20px 0 12px;display:inline;}
#boxportfolio #rowonee{float:left;display:inline;margin: 20px 0 0 0;}
#boxportfolio #rowonef{float:right;display:inline;margin: 20px 8px 0 0;}
#boxportfolio img.portfolioimga, #boxportfolio img.portfolioimgb, #boxportfolio img.portfolioimgc, #boxportfolio img.portfolioimgd, #boxportfolio img.portfolioimge, #boxportfolio img.portfolioimgf{position: absolute;width: 266px;    height: 196px;cursor:pointer;border:solid 3px #202d24;clear:both;}

#boxportfolio img.portfolioimga{top: 15px;left: 26px;}
#boxportfolio img.portfolioimgc{top: 15px;left: 346px;}
#boxportfolio img.portfolioimgb{top: 15px;left: 666px;}
#boxportfolio img.portfolioimgd{top: 265px;left: 26px;}
#boxportfolio img.portfolioimge{top: 265px;left: 346px;}
#boxportfolio img.portfolioimgf{top: 265px;left: 666px;}

/*list portfolio*/
#boxportfoliolist {position:relative;margin:30px 0 0 0;width:960px;}
.listportfolioborder {background: #334539;width:940px;height:230px;}
#boxportfoliolist #listone {float:left;margin-left:12px;display:inline;margin-right:0;}
#boxportfoliolist #listtwo,#boxportfoliolist #listthree, #boxportfoliolist #listfour, #boxportfoliolist #listfive  {float:left;display:inline;margin:20px 0 0 12px;}


#boxportfoliolist img.listitemone, #boxportfoliolist img.listitemtwo, #boxportfoliolist img.listitemthree, #boxportfoliolist img.listitemfour, #boxportfoliolist img.listitemfive {position: absolute;width: 266px;height: 196px;cursor:pointer;border:solid 3px #202d24;clear:both;}
#boxportfoliolist img.listitemone{top: 15px;left: 26px;} /*add 250 */
#boxportfoliolist img.listitemtwo{top: 265px;left: 26px;}
#boxportfoliolist img.listitemthree{top: 515px;left: 26px;}
#boxportfoliolist img.listitemfour{top: 765px;left: 26px;}
#boxportfoliolist img.listitemfive{top: 1015px;left: 26px;}

/*porfolio display options*/
#wrapper #displaygl{clear:both;float:right;margin:0 5px -10px 0;padding:0;color:#e6f195;display:inline;}
#wrapper #displaygl img{margin:0 2px -2px 0;}

/* services list */
ul#serviceslist {position:relative;margin:30px 0 0 0;width:960px;}
li.serviceslistborder {background: #334539;width:940px;height:auto;}
ul#serviceslist li#servicea {float:left;display:inline;margin:0 0 0 12px;}
ul#serviceslist li  {float:left;display:inline;margin:20px 0 0 12px;}

/* contact page */
#boxcontact {position:relative;margin:30px 0 0 0;width:960px;}
.contactborder {background: #334539;width:940px;height:auto;}
#boxcontact #contacttop {float:left;display:inline;margin:0 0 0 12px;}

/* accessibility page */
#accessibility {background: #334539;width:940px;height:auto;position:relative;margin:30px 0 0 12px;}
#accessibility ul.accessibility {font-size:1.1em;color:#EAF6E2;margin: 10px;padding: 0 10px 0 60px;list-style-type: disc;}
#accessibility ul.accessibility li.last {padding: 0 0 10px 0;}




/* 5. headings & paragraphs
-------------------------------------------------- */
h1 {position: absolute;top: -9999px;height:0px;}
h2 {padding: 10px 15px 5px 0;font-size:1.8em;color:#b6ba95;}
#postit h2{ position: absolute;top: -9999px;height:0px;}
#wrapper h3{margin: -190px 0 10px 10px;font-size: 2em; font-weight:normal; color:#e6f195; width:700px;}


#wrapper h4{margin:10px 0 10px 36px;font-size: 1.5em; font-weight:normal; color:#e6f195; }
#wrapper h5{margin:10px 0 10px 36px;font-size: 1.3em; font-weight:bold; color:#EAF6E2; }

#box h3.hometexta{position: absolute;top: 198px;left: 18px;width: 260px;font-size:1.7em;height:45px;}
#box h3.hometextb{position: absolute;top: 198px;left: 338px;width: 260px;font-size:1.7em;height:45px;}
#box h3.hometextc{position: absolute;top: 198px;left: 658px;width: 260px;font-size:1.7em;height:45px;}
#wrapper #boxportfoliolist h3 {padding:0;margin:12px 10px 0 0;float:right;font-size:1.7em; width:630px;display:inline;}
#wrapper #boxportfoliolist p {clear:both;padding:0;margin:5px 10px 0 0;float:right;font-size:1.3em; /*width:630px;*/width:630px;display:inline;color:#EAF6E2; }

#wrapper ul#serviceslist h3 {padding:0; margin:10px 0 10px 16px;font-size:1.7em;}

#wrapper ul#serviceslist p {padding:0;margin:0 25px 15px 36px;font-size:1.3em; /*width:630px;*/color:#EAF6E2; }

#photocontainter #leftcolumn h4{padding:50px 0 0 75px;font-size: 1.7em;margin:0;color:#202D24;}
#photocontainter #leftcolumn p{padding:10px 0 0 75px;font-size: 1.2em;margin:0;color:#202D24;}
#photocontainter #rightcolumn h4{padding:30px 0 0 0;font-size: 18px;margin:0;color:#202D24;text-align:center;width:390px;}
#photocontainter #leftcolumn a{color:#202D24;font-size:1.2em;}
#wrapper #accessibility h3 {padding:0; margin:12px 0 10px 16px;font-size:1.7em;}
#wrapper #accessibility p {padding:0;margin:0 25px 15px 36px;font-size:1.3em; color:#EAF6E2;}



/* 9. contact form

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



#boxcontact fieldset{margin: 20px 15px 1.5em 15px;padding: 0;border: 1px solid #e6f195;}
#boxcontact fieldset:hover{ border:1px solid #FF7400; }
#boxcontact textarea.comments:hover,#boxcontact input.text:hover 
{ border:1px solid #FF7400; }

legend{margin-left: 1em;background:#EAF6E2;color:#202D24;
	font-size: 1.5em;line-height: 1.5em;	padding: 0 8px 2px 8px;}
label{font-size: 1.4em;color:#e6f195;}
fieldset ol {float:left;display:inline;padding: 1em 1em 0 1em;list-style: none;}
fieldset ol.contactright {float:right;display:inline;padding: 1em 1em 0 1em;list-style: none;margin:0;}

fieldset li {margin:0;width: 266px;padding-bottom: 1em;}
fieldset li.messagetext {width: 480px;padding-bottom: 1em;margin: 0 15px 0 0;}

fieldset .sendEmail {color: #202D24;font-weight: bold;border: 1px solid #00FF00;
background: #EAF6E2;cursor: pointer;}

fieldset .warning{color: #00FF00;padding-left: 1em;font-weight:bold;font-size:.8em;}
fieldset .text{border: 1px solid #32552C;width:100%;color: #202D24;background:#EAF6E2;padding:0 0.5em 0 0.5em;}
fieldset .thankyou{color: #00FF00;margin: 1em 1em 0 1em; font-weight:bold;font-size:1em;}
fieldset .boxmessage{
margin:1em 1em 0 1em;color:#EAF6E2;font-size:1.3em;}

fieldset .comments{
border: 1px solid #32552C;padding:0 0.5em 0 0.5em;
overflow:auto;width:100%;height:120px;color: #202D24;background:#EAF6E2;
}