@import url("reset.css");
@import url("hacks.css");

/*** COLORS ***/
.black {color:black;}
.yellow {color:#F5A644;}
.orange {color:#F5A644;}
.red {color:#f77c1b;}
.grey {color:#382e40;}
.lightGrey {color:#a89fac;color:#afaab0;}
.white {color:#fff;}

/*** MAIN STYLES ***/
body,html {font-family:Verdana,sans-serif; font-size:14px; color:#534a58; text-align:left; width:100%;background:url('../images/back.jpg') repeat-x;position:relative;z-index:1;}

/*** LISTS ***/
ul {list-style-type:none;}
ul.withSymbols {list-style-type:disc;}
ul.inside {list-style-position:inside;}
ol {list-style-position:inside; list-style-type:decimal; margin-bottom:15px;}

/*** TEXT ***/
p, h1, h2, h3, h4 {margin-bottom:15px;}
.noBotMargin {margin-bottom:0px;}
.topMargin {margin-top:5px;}
h1 {font-size:290%; color:#f77c1b; font-weight: normal; margin-top:0px; line-height:1;}
h2 {font-size:130%; color:#F5A644; color:#f77c1b; font-weight:normal;}
h3 {font-size:120%;	color:#999999; font-weight:normal;}
h4 {font-size:100%; color:#524957; color:#382e40; font-weight:bold;}
.normal {font-style:normal;}
.italic {font-style:italic;}
.strong {font-weight:600;}
.right {text-align:right;}
.left {text-align:left;}
.center {text-align:center;}

/*** LINKS ***/
a, a:link, a:visited, a:hover, a:active {text-decoration:none;outline:0;}
a:hover, a:focus {text-decoration:underline;}
a:focus {outline: none;}
a:focus img {border: 0px; outline: none; text-decoration:none;}
a.noDecoration:hover, a.noDecoration:focus {text-decoration: none;}

/*** LAYOUT ***/
#centerWrapper {position:relative; width:1000px; margin-left:auto; margin-right:auto;}
#header {position:relative; top:0px; height:200px; z-index:2; /* ie6 and ie7 fix */}
#navContainer {text-align:right; width:700px; position:relative; left:300px;}
#content {position:relative; left:0px; top:0px; width:100%;}
#panelPortfolio {float:left; position:relative; top:50px; width:300px;}
#panelQuote {float:right; width:172px; position:relative; top:30px; margin-bottom:50px; font-size:90%; height:100%;}
#centerPanel {float:left; width:818px; position:relative; top:0px; text-align:left;}
#footer {position:relative; left:0px; top:0px; width:100%; padding-top:15px; background:url(../images/back.jpg) bottom repeat-x;}
.clear {clear:both; height:1px;}
.inline {display:inline;}
.shiftRight {margin-left:1em;}

/*** HEADER ***/
#computer {z-index:2; position:absolute; top:0px; left:5px;}
#tagline {position:relative; left:350px; top:30px; }
#codeLogo {position:absolute; right:30px; top:30px;}
#codeLogo img {height:40px; display:inline; margin:5px;}
#agetQuote {position:absolute; right:0px; top:130px;}
#contactInfo {position:absolute; left:350px; top:130px; color:white;}

/*** NAVIGATION ***/
ul#menu {height:50px; margin:0; padding:0;}
ul#menu li {float:left;}
ul#menu li a {color:#524957; text-decoration:none; display:block; text-align:center; width:172px; margin-left:3px; height:50px; line-height:46px; font-size:20px; background:url(../images/navbar.gif) repeat-x;}
ul#menu li a:hover, ul#menu li a:focus {background:url(../images/navbarHover.gif) top repeat-x; color:white;}
body#homePage a#home,
body#pFolioPage a#pFolio,
body#developmentPage a#developmentLink,
body#designPage a#designLink,
body#editingPage a#editingLink,
body#aboutUsPage a#aboutUs,
body#contactUsPage a#contactUs {color:#f77c1b;}
body#homePage a#home:hover,
body#pFolioPage a#pFolio:hover,
body#developmentPage a#developmentLink:hover,
body#designPage a#designLink:hover,
body#editingPage a#editingLink:hover,
body#aboutUsPage a#aboutUs:hover,
body#contactUsPage a#contactUs:hover {color:white;}

/*** FORMS ***/
input.styled {margin-right:5px;}
.styledTextInput {border:1px solid black; width:90%;}

/*** TABLES ***/
table {border:0px; margin-left:auto; margin-right:auto;}
.withBorder {border:1px solid black;}
table#quoteRequest {margin-left:10px;}
table#quoteRequest td {vertical-align:top; padding:5px;}
td.centerVertical {vertical-align:middle;}
table#clientInfo {color:white;}

/***  PANEL QUOTE ***/
#design {border-top:1px solid grey;}
#design h2 {background-image:url(../images/navbar.gif); line-height:2em;}
#develop {border-top:1px solid grey;}
#develop h2 {background-image:url(../images/navbar.gif); line-height:2em;}
#edit {border-top:1px solid grey;}
#edit h2 {background-image:url(../images/navbar.gif); line-height:2em;}
#getQuote img {width:100%; margin-bottom:10px;}

/*** CENTER PANEL ***/
.pageText {float:right; margin-top:40px; margin-left:15px; left:300px; width:500px;}
.pageText ul li {margin-bottom:1em;}
div#quote {border:1px solid black; text-align:left; width:95%; background:url('../images/back.jpg') bottom repeat-x; margin-bottom:2em;}
table#quoteRequest {margin-bottom:2em;}
.error {color:red;}

#client {position:relative; margin-top:80px; text-align:left;}
#client img {display:block; margin-bottom:10px;}
#client table {margin-left:0px; border-collapse:separate; border-spacing:2px 2px;}
#client td {border:1px solid grey;}
#client a span {display:block; width:100%; text-align:center;}

/*** PANEL PORTFOLIO ***/
#portfolio {position:relative; top:0px; right:0px; width:100%; background-color:#524957; background-color:#969198; padding-bottom:5px;}
div.portfolioLinks {text-align:center; width:100%; margin-top:2em;}
div.portfolioLinks h2 {background:url(../images/navbar.gif); height:2em; margin-bottom:0;}
div.portfolioLinks a {color:#f77c1b;}
#slideShow {position:relative; top:5px; margin-left:auto; margin-right:auto; margin-bottom:5px; border:0px solid black;}
#portfolioLink {margin-top:25px; left:0px; width:100%; text-align:center;}
#portfolioLink a {color:black; color:#524957; font-weight:bold;}
#dreamQuote {width:90%; margin:15px auto 0 auto; text-align:justify; font-style:italic; font-size:90%;}
#dreamQuote div {display:none;}
#dreamQuote.show1 div#cite1 {display:block;}
#dreamQuote.show2 div#cite2 {display:block;}
#dreamQuote.show3 div#cite3 {display:block;}
#dreamQuote.show4 div#cite4 {display:block;}
p.author {text-align:right;}
#linkWebsite {text-align:center; padding-top:1em; padding-bottom:1em;}
#resources {color:#F5A644; padding-top:5px; margin-bottom:25px;}
#resources h2 {background-image:url(../images/navbar.gif); border-top:1px solid grey; line-height:2em;}
#resources a {color:#524957;color:##382e40; font-weight:normal;}
.greyBack {background-image:url(../images/navbar.gif); height:35px; padding-top:5px;}

/*** FOOTER ***/
#footer A {color:#3a3042;}
#links {text-align:center; padding-top:2em; padding-bottom:2em; background:url('../images/backOrange.jpg') top repeat-x;}
#links a {font-weight:bold;}
#subfooter {width:1000px; margin:0 auto; position:relative; border-right:1px solid grey;}
#headshot {position:absolute; bottom:0px; left:60%;}
div#contact {width:60%; position:relative; left:0px; background:white url('../images/back.jpg') bottom repeat-x; color:black; border: 1px solid #969198; border-top:0; z-index:2; padding-top:1em;}
#contact h1 {color:#afaab0; font-size:200%;}
#contact table {width:95%; border:0px; padding:10px; margin-bottom:3em; margin-top:1em; line-height:2em;}
#contact input, #contact textarea {padding:4px;}
#contact td.leftCol {width:30%; text-align:left; vertical-align:top; padding:0; font-weight:bold;}
#contact td.rightCol {text-align:left; vertical-align:top; padding:0}