/*
what? - eqtrdesign - portfolio site for stuart trann and his freelance services
when? - xhtml + css handcoded (yes the whole thing, no cms!.. well its only one page innit?) august 2006
who? - stuart trann
where? - www.eqtrdesign.com
why? - because... i needed a portfolio site! and all this school work is making shit! (designing sites is so much more fun)
*/

/*importing additional style sheets*/
@import url(lightbox.css);

/*global rules*/
* {margin: 0; padding: 0; border: none;	font-family: Geneva, "Monotype.com", "Andale Mono", "Trebuchet MS", sans-serif;	font-size: 12px; color: #666; list-style: none; background-color: transparent;}
body {text-align: center; padding-top: 35px; color: #666; background-color: #fff;}

/*absolutely positioned bottom border
#fixed-bttm {position: fixed; bottom: 0; height: 35px; width: 100%; background: url(../img/fixed-bg-bttm.png) bottom center no-repeat;}
* html #fixed-bttm {display: none; visibility: hidden;}*/

/*skip to content*/
div a.skip:link, div a.skip:visited {display: block; width: 100%; color: #fff; position: absolute; top: 0; left: 0; height: 16px; border: none; padding: 11px 0 10px 0;}
div a.skip:hover, div a.skip:active {color: #3399cc;}

/*links*/
a {outline: none;}
a, a:link, a:visited {text-shadow: #c8c8c8 0px 1px 2px; text-decoration: none; color: #333; font-weight: normal; letter-spacing: 1px; /*border-bottom: 1px dotted #3399cc;*/}
a:hover, a:active {color: #3399cc;}
* html a:hover {/*border-bottom: 1px solid #3399cc;*/} /*IE dotted line ugliness*/

a.toplink {text-align: center; display: block; width: 100%; margin: 15px 0 25px 0; background: transparent url(../img/icon-arrow-top.png) 46% 52% no-repeat;} /*footer top link*/

/*main divs*/
#wrapper {width: 455px; margin: 0 auto; text-align: left;}
#logonav {height: 140px;}
#services, #about, #portfolio, #contact {margin: 0 0 20px 0;}
#footer {clear: both; padding: 0; margin: 0;}
#footer p {clear: both;}

/*typography & replacement*/
h1 {float: left; width: 159px; height: 117px; background: url(../img/logo.png) top left no-repeat; text-indent: -10000px;}
h2 {text-shadow: #c8c8c8 0px 1px 2px; font-size: 15px; letter-spacing: 1px; color: #3399cc; padding: 10px 0 0 5px; clear:both;}
h3 {text-shadow: #c8c8c8 0px 1px 2px; font-size: 13px; letter-spacing: 1px; padding-left: 15px; font-weight: normal; background: transparent url(../img/icon-arrow.png) left center no-repeat; clear: both;}
h4 {text-shadow: #c8c8c8 0px 1px 2px; font-size: 12px; letter-spacing: 1px; padding: 20px 0 0 15px; font-weight: normal; clear: both; color: #3399cc;}
#portfolio h3 {padding: 20px 0 10px 15px; background: transparent url(../img/icon-arrow.png) 1px 24px no-repeat;}
#services h3 {margin-bottom: 10px;}

* html #portfolio h3 {padding: 10px 0 10px 15px;} /*ie was bungling up the padding amidst the array of floats*/
* html h4 {padding: 10px 0 0 15px;}

div p {padding: 10px 10px 10px 15px; line-height: 17px;}
#services p {padding: 10px 10px 10px 15px; line-height: 17px;}
.attention {color: #3399cc;}

acronym {border-bottom: 1px dotted #3399cc; cursor: help;}
* html acronym {border: none; text-decoration: underline; cursor: help;}

/*navigation*/
ul.navtop {width: 294px; background: transparent url(../img/navtop-bg.png) no-repeat; float: left; margin-top: 30px;}
ul.navtop li {float: left;}
ul.navtop a, ul.navtop a:link, ul.navtop a:visited, ul.navtop a:active {text-shadow: #666 0px 1px 2px; border: none; display: block; line-height: 38px; text-decoration: none; float: left; padding: 0 23px; color: #fff;}
ul.navtop a:hover {color: #d2fa87;}

ul.navlist {width: 455px; background: transparent url(../img/navlist-bg.png) no-repeat; float: left; /*margin so h2 viewable when scrolled*/ margin: 0 0 15px 0;}
* html ul.navlist {margin: 0; padding: 0;}
ul.navlist li {float: left;}
ul.navlist a:link, ul.navlist a:visited, ul.navlist a:active {text-shadow: #666 0px 1px 2px; border: none; display: block; line-height: 38px; text-decoration: none; float: left; padding: 0 30px; color: #fff;}
ul.navlist a:hover {color: #d2fa87;}

ul#webnav, ul#printnav, ul#identnav, ul#shirtnav {width: 435px; background: transparent; float: left; margin: 10px 0 0 10px; border-bottom: 1px dotted #3399cc; border-top: 1px dotted #3399cc; display: inline;}
* html ul#webnav, * html ul#printnav, * html ul#identnav, * html ul#shirtnav {border-bottom: 1px solid #3399cc; border-top: 1px solid #3399cc;} /*IE dotted line ugliness*/
* html ul#printnav, * html ul#identnav, * html ul#shirtnav {margin-top: 25px;}
ul#webnav li, ul#printnav li, ul#identnav li, ul#shirtnav li {float: left;}
li.portnav-focus a, li.portnav-focus a:link, li.portnav-focus a:visited, li.portnav-focus a:active {float: left; border: none; display: block; line-height: 25px; text-decoration: none; padding: 0 5px; font-weight: bold; color: #3399cc;}
li.portnav-fade a, li.portnav-fade a:link, li.portnav-fade a:visited, li.portnav-fade a:active {float: left; border: none; display: block; line-height: 25px; text-decoration: none; padding: 0 5px; color: #bddeea;}
li.portnav-fade a:hover {color: #3399cc;}

/*portfolio images w/ caption links*/
#portfolio img {margin: 0 0 0 11px; width: 131px; height: 62px; clear: both;}
#portfolio img.secondrow {margin-top: 15px;}
#portfolio a {border: none;} /*used to be #portfolio > a*/
a.captionlink {float: left; width: 131px; margin: 0 0 0 16px;}

/*portfolio all, concepts & student work lists*/
ul.portlist {float: left; width: 400px;}
ul.portlist li {float: left;}
ul.portlist li a {text-shadow: none; display: block; line-height: 12px; float: left; color: #bddeea; background-color: #bddeea; padding: 0 1px; margin: 3px 2px; border: none;}
ul.portlist li a:hover {background-color: #3399cc; color: #3399cc; border: none;}
* html ul.portlist li a {margin: 3px 1px; width: 10px; line-height: 14px;}

ul li.portlink a {padding: 0 0 0 24px; margin: 3px 10px 3px 0; background: transparent /*url(../img/icon-dash.png) 15px 1px no-repeat*/; color: #333;}
ul li.portlink a:hover {background-color: transparent; color: #3399cc;}
* html ul li.portlink a {margin: 3px 5px 3px 0; width: auto;}

/*contact form*/
#bicara {margin-bottom: 25px;}
fieldset {border: none; margin: 10px 0; padding: 15px; background: #fff;}
legend {text-shadow: #c8c8c8 0px 1px 2px; font-weight: bold; letter-spacing: 1px; margin: 0 0 -15px 0; padding: 5px 0;}
* html legend {margin: 0 0 0 -7px;}
label {display: block; padding: 4px 0;}
input {width: 300px; border-top: 1px solid #3399cc; border-left: 1px solid #3399cc; border-bottom: 1px solid #bddeea; border-right: 1px solid #bddeea; padding: 2px;}
textarea {width: 400px; height: 150px; border-top: 1px solid #3399cc; border-left: 1px solid #3399cc; border-bottom: 1px solid #bddeea; border-right: 1px solid #bddeea; padding: 5px;}
input:focus, textarea:focus {background: #ebf6fa;}
input.submit {width: auto; margin: 15px 0 0 0; padding: 1px 6px; background-color: #fff; border: 1px solid #3399cc;}
input.submit:focus {background: #3399cc; color: #fff;}
input[type="text"], textarea {border-top: 1px solid #3399cc; border-left: 1px solid #3399cc; border-bottom: 1px solid #bddeea; border-right: 1px solid #bddeea;}

/*footer link list, validation etc*/
ul.linklist {padding: 5px 0 10px 0;}
ul.linklist li {padding: 1px 0 1px 10px;}
ul.linklist li a, ul.linklist li a:link {padding: 0 0 0 5px; line-height: 20px; display: block; background: #fafeff url(../img/icon-plus.png) 99% 50% no-repeat; color: #3399cc;}
ul.linklist li a:visited {background: #fff url(../img/icon-dash.png) 99% 50% no-repeat;}
ul.linklist li a:hover, ul.linklist li a:active {background: #ebf6fa url(../img/icon-plus2.png) 99% 50% no-repeat; color: #3399cc;}

/*extras*/
.clear {clear: both;}

/*bicara.cgi styles*/
p.bicara-credits a {font-size: 9px;}