/** ----------------------------------------------
Filename:/css/master.css 
Project:www.davidstewart-smith.com
Created by:eyeMatz.com
Version:01 - 2007-05-01
Copyright:Please feel free to **learn** from this as I have from others.
---------------------------------------------- **/
/* IMPORT::CORE UI */
/** ----------------------------------------------
Code based on the Yahoo UI (version:2.2.2)
All changes have been made to better suit my mental workflow and existing code.
Copyright (c) 2007,Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txt
---------------------------------------------- **/
/** 1. Reset CSS 
-------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* [/1] ------------------------------------------ **/
/** 2. FONTS.CSS 
Font-size Adjustment
To change the size of a font,use a percentage value from the chart below. 
Always use percentages as the units because they render more consistently than ems,
and because unlike pixels they allow user-initiated resizing.
pixels (px) percent (%)
10 px 77 %
11 px 85 %
12 px 92 %
13 px 100 %
14 px 107 %
15 px 114 %
16 px 122 %
17 px 129 %
18 px 136 %
19 px 144 %
20 px 152 %
21 px 159 %
22 px 167 %
23 px 174 %
24 px 182 %
25 px 189 %
26 px 197 %
-------------------------------------------------- */
/*
* Percents could work for IE,but for backCompat purposes,we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table{font-size:inherit;font:100%;}
/*
* 99% for safari;100% is too large
*/
select,input,textarea{font:99% arial,helvetica,clean,sans-serif;}
/*
* Bump up !IE to get to 13px equivalent
*/
pre,code{font:115% monospace;*font-size:100%;}
/* Default line-height based on font-size rather than "computed-value" see:http://www.w3.org/TR/CSS21/visudet.html#line-height */
body *{line-height:1.22em;}
/** CORE DEFAULT SIZES:**/
h1,h2,h3,h4,h5,h6{font-weight:bold;}
h1{font-size:122%;} /* 16px */
h2{font-size:114%;} /* 15px */
h3{font-size:107%;} /* 14px */
h4{font-size:100%;} /* 13px */
h5{font-size:92%;} /* 12px */
h6{font-size:85%;}/* 11px */
/* [/2] ------------------------------------------ **/
/** 3. GRIDS.CSS 
Customizing the Page Width
It's easy to customize the page width. Divide your desired pixel width by 13;the result is your width in ems for all non-IE browsers. 
Take the em width you just calculated and multiply it by .9759 to find 
the width in ems for IE.
# tmp:regex replacements
.yui-g([abcdef]) => .core-grid-$1
-------------------------------------------------- */
/* for all templates and grids */
body{text-align:center;}
#footer{clear:both;}
/* 750 centered,and backward compatibility */ 
#core-750,#core-800,#core-950,#core-fluid,
#doc,#doc2,#doc3,/* backward compat */
.core-t0,.core-t1,.core-t2,.core-t3,
.core-t4,.core-t5,.core-t6,.core-t7{margin:auto;text-align:left;width:57.69em;*width:56.3em;/* for IE */ min-width:750px;}
/* 800 centered */
#core-800{width:61.538em;*width:60.055em;/* for IE */ min-width:800px;}
/* 950 centered */ 
#core-950,
#doc2{width:73.074em;*width:71.313em;/* for IE */ min-width:950px;}
/* 100% with 10px viewport side matting */ 
#core-fluid,
#doc3{margin:auto 10px;/* not for structure,but so content doesn't bleed to edge */ width:auto;}
/* below required for all fluid grids;adjust widths and margins above accordingly */
/* to preserve source-order independence for Gecko */
.core-block{position:relative;}
.core-block{_position:static;/* for IE < 7 */}
#core-main .core-block{position:static;}
#core-main{width:100%;}
/* TEMPLATE 0:single horizontal block 100% */
.core-t0 #core-main .core-block{display:block;margin:0 0 1em 0;}
.core-t1 #core-main,
.core-t2 #core-main,
.core-t3 #core-main{float:right;margin-left:-25em;/* IE:preserve layout at narrow widths */}
.core-t4 #core-main,
.core-t5 #core-main,
.core-t6 #core-main{float:left;margin-right:-25em;/* IE:preserve layout at narrow widths */}
/* TEMPLATE 1:left sidebar 160px wide */
.core-t1 .core-block{float:left;width:12.3207em;*width:12.0106em;}
.core-t1 #core-main .core-block{margin-left:13.3207em;*margin-left:13.0106em;}
/* TEMPLATE 2:left sidebar 180px wide */
.core-t2 .core-block{float:left;width:13.8456em;*width:13.512em;}
.core-t2 #core-main .core-block{margin-left:14.8456em;*margin-left:14.512em;}
/* TEMPLATE 3:left sidebar 300px wide */
.core-t3 .core-block{float:left;width:23.0759em;*width:22.52em;}
.core-t3 #core-main .core-block{margin-left:24.0759em;*margin-left:23.52em;}
/* TEMPLATE 4:right sidebar 180px wide */
.core-t4 .core-block{float:right;width:13.8456em;*width:13.512em;}
.core-t4 #core-main .core-block{margin-right:14.8456em;*margin-right:14.512em;}
/* TEMPLATE 5:right sidebar 240px wide */
.core-t5 .core-block{float:right;width:18.4608em;*width:18.016em;}
.core-t5 #core-main .core-block{margin-right:19.4608em;*margin-right:19.016em;}
/* TEMPLATE 6:right sidebar 300px wide */
.core-t6 .core-block{float:right;width:23.0759em;*width:22.52em;}
.core-t6 #core-main .core-block{margin-right:24.0759em;*margin-right:23.52em;}
/* TEMPLATE 7:100% wide */
.core-t7 #core-main .core-block{display:block;margin:0 0 1em 0;}
#core-main .core-block{float:none;width:auto;}
/* GRIDS (not TEMPLATES) */
.core-grid .core-unit,
.core-grid .core-grid,
.core-grid-c .core-unit,
.core-grid-c .core-grid .core-unit,
.core-grid-e .core-unit,
.core-grid-f .core-unit{float:right;display:inline;}
.core-grid div.first,
.core-grid-c div.first,
.core-grid-c div.first div.first,
.core-grid-d div.first,
.core-grid-e div.first,
.core-grid-f div.first{float:left;}
.core-grid .core-unit,
.core-grid .core-grid{width:49.1%;}
.core-grid .core-grid .core-unit,
.core-grid-c .core-grid .core-unit{width:48.1%;}
.core-grid-b .core-unit,
.core-grid-c .core-unit,
.core-grid-d .core-unit{float:left;margin-left:2%;/* margin-left:3%;*/ *margin-left:1.895%;width:32%;/* width:31%;*/}
.core-grid-b div.first,
.core-grid-c div.first,
.core-grid-d div.first{margin-left:0;}
.core-grid-c div.first,
.core-grid-d .core-unit{width:66%;}
.core-grid-d div.first{width:32%;}
.core-grid-e .core-unit{width:24%;}
.core-grid-e div.first,
.core-grid-f .core-unit{width:74.2%;}
.core-grid-f div.first{width:24%;}
.core-grid-e div.first{width:74.2%;}
.core-box{border:1px solid #999;text-align:center;}
/*#core-main .core-block .core-box,*/
#core-main .core-block .core-box-2,
#core-main .core-block .core-box-3,
#core-main .core-block .core-box-4,
#core-main .core-block .core-box-5{float:left;/* margin:0.5em;*/ width:auto;text-align:center;border:1px solid #999;}
#core-main .core-block .core-box-2{width:50%;}
#core-main .core-block .core-box-3{width:33%;}
#core-main .core-block .core-box-4{width:25%;}
#core-main .core-block .core-box-5{width:19.78%;/* width:20%;*/}
#content:after,
.core-grid:after,
.core-grid-b:after,
.core-grid-c:after,
.core-grid-d:after,
.core-grid-e:after,
.core-grid-f:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#content,
.core-grid,
.core-grid-b,
.core-grid-c,
.core-grid-d,
.core-grid-e,
.core-grid-f{zoom:1;}
/* [/3] ------------------------------------------ **/
/** 4. COMMON BITS 
-------------------------------------------------- */
/* bold formatting */
b,strong{font-weight:bold;}
/* italic formatting */
em{font-style:italic;}
#content p{margin:0.5em 0;}
.hide{display:none;}
/* TEXT FORMATTING::*/
.txt_white{color:#fff;}
.txt_black{color:#000;}
.txt_red{color:red;}
.error{color:#D50202;}
.warning{color:#FFC331;}
.info{color:#FFF;}
/* ALIGN::*/
.al-r,.al-right,.align-right{text-align:right;}
.al-l,.al-left,.align-left{text-align:left;}
.al-c,.al-center,.align-center{text-align:center;}
/* FLOATS::*/
.fl-r,.fl-right,.float-right{float:right;}
.fl-l,.fl-left,.float-left{float:left;}
.cl-b,.cl-both,.clear-both,
.clear-floats{clear:both;}
.cl-l,.cl-left,.clear-left{clear:left;}
.cl-r,.cl-right,.clear-right{clear:right;}
/* WIDTHS::*/
.w300{/* =300 pixels */ width:23.077em;*width:22.521em;}
.w310{/* =310 pixels */ width:23.846em;*width:23.271em;}
.w320{width:320px;}
.w330{width:330px;}
.w340{width:340px;}
.w350{width:350px;}
.w360{width:360px;}
.w370{width:370px;}
.w380{width:380px;}
.w390{width:390px;}
.w400{width:400px;}
.w420{width:420px;}
/* HEIGHTS::*/
.h100{height:100px;}
.h200{height:200px;}
/* Credit paragraph,bottom of page */
p#credit{font-size:85%;color:#999;padding:0.8em 1em 1em 1em;}
p#credit a:link,
p#credit a:visited{color:#222;font-weight:normal;text-decoration:none;}
p#credit a:hover{color:#CCC;font-weight:bold;text-decoration:underline;}
/* [/4] ------------------------------------------ **/
/* IMPORT::MENUBAR */
/** 1. MENUBAR::-------------------------------------------------- */
/* @group MENUBAR SECTION::*/
#menubar{padding:0;/* =40 pixels */ margin:3.077em 0 0 0;*margin:3.003em 0 0 0;height:24px;}
#menubar ul{margin:0;padding:0 0 24px 0;border-bottom:1px solid #62615A;}
#menubar ul,
#menubar li{margin:0;padding:0;display:inline;list-style-type:none;}
#menubar a:link,
#menubar a:visited{float:left;/* line-height:120%;*/ padding:4px 12px;text-transform:uppercase;font-weight:normal;font-size:107%;text-decoration:none;color:#333;border-right:1px solid #666;}
#menubar a:hover{color:#fff;background-image:url('/images/menu_bg.gif');}
/* @end MENUBAR SECTION::*/
/* @group ACTIVE PAGE LINKS::*/
#home #home_nav,
#portfolios #portfolios_nav,
#about #about_nav,
#clients #clients_nav,
#contact #contact_nav{color:#FFF;background-image:url('/images/menu_bg.gif');}
/* @end ACTIVE PAGE LINKS::*/
/* [/1] ------------------------------------------ **/
/* IMPORT::GENERAL STYLE FORMATTING */
/** 1. STYLING 
-------------------------------------------------- */
body{margin:0;padding:0;text-align:center;font-family:"Helvetica Neue",Helvetica;}
#core-800,#core-fluid,#core-950{margin-top:1em;}
/* @group HEADER SECTION::*/ 
#header{/* =65 pixels */ height:5.000em;*height:4.880em;}
#header h1{display:none;}
/* @end HEADER SECTION::*/
/* @group TITLE-BAR SECTION::*/
#title-bar{/* height:2em;*/ margin:-0.5em 0 0 0;}
#title-bar h2{padding:0.5em 0 0 1em;text-align:left;font-size:100%;}
#title-bar p{text-align:center;padding:0.5em;}
/* @end TITLE-BAR SECTION::*/
/* @group TOOLTIP SECTION::*/
#tooltip{position:absolute;background:#333;color:#fff;/* =200 pixels */ width:15.385em;*width:15.014em;padding:0.5em;border:1px solid #BDBDB0;z-index:500;}
p#tooltip-p{padding:0;margin:0;}
/* @end TOOLTIP SECTION::*/
/* @group CONTENT SECTION::*/ 
#content{padding:0;/* margin-top:-1em;*/}
#content h2{margin:1em;}
/* creates a tiny border between header and flash movie */ 
#ss-holder{border-top:1px solid #777;/* padding-top:1px;*/}
#col-left h2,
#col-left2 h2{margin:2em 1em 1em 1.5em;}
#col-left p,
#col-left2 p{margin:1em 2em 1em 2em;}
#col-left ul,
#col-left2 ul{margin:0 0 0 3.5em;list-style-type:square;}
#col-left ul li,
#col-left2 ul li{padding:0.1em;}
#about #col-right{/* text-align:center;*/}
#clients #col-right{/* text-align:left;*/}
#col-right img{}
/* @end CONTENT SECTION::*/ 
/* @group CLIENTS::LOGINBOX FORMATTING::*/
#login-box{padding:1em;margin:0em 0 0 0;}
#login-box h2{margin:1em 0 0 0;}
#login-box p.error{margin:1em;}
#form-clients-login p{}
#form-clients-login p label{font-weight:bold;}
#form-clients-login p input.txt-box{width:6em;}
.btn-submit{text-align:right;padding:0 2em 0 0;}
/* @end CLIENTS::LOGINBOX FORMATTING::*/
/* @group IMAGE FORMATTING::*/
.img-th{padding:0.6em 0.4em;margin:0 0 1em 0;display:block;}
.img-pr{padding:1em 0.7em;margin:2em 1em 1em 1em;/* display:block;*/}
#about #content p.img-caption{font-size:85%;margin:-1em 0 2em 2em;padding:0em;text-align:left;}
/* @end IMAGE FORMATTING::*/
/* @group FOLIO-TABLE TD.TD-MAIN::*/ 
#folio-table td.td-main,
#folio-table td.td-box{width:50%;vertical-align:top;padding:1em 2em 2em 1em;}
#folio-table td.td-main{padding:1em 2em 1em 1em;}
#folio-table td.td-main h2{margin:1.2em 1em 1em 0.6em;}
#folio-table td.td-main p{margin:1.2em 1em 1em 1em;}
/* @end FOLIO-TABLE TD.TD-MAIN::*/ 
/* @group FOLIO-TABLE TD.TD-BOX::*/
#folio-table td.td-box{}
#folio-table td.td-box img.img-th{margin:0em 2em 1em 0em;}
#folio-table td.td-box h2{margin:0 0 1em 0;}
#folio-table td.td-box p{}
#folio-table td.td-box img.img-th{margin:0em 2em 1em 0em;}
#folio-table td.td-box.lr{}
#folio-table td.td-box:hover{}
#folio-table td.td-box.tc{padding-top:2.3em;}
#folio-table td.td-box.tc img.img-th{margin:0.1em 2em 1em 0em;}
#folio-table td.td-box.tc h2{padding-top:-1em;}
#folio-table a p{font-weight:normal;}
/* @end FOLIO-TABLE TD.TD-BOX::*/
/* @group CONTACT INFORMATION */
#contact,
address{text-align:center;}
address.vcard{border:1px dashed #ccc;padding:1em;margin:2em 1em 2em 3em;/* =300 pixels */ width:23.077em;*width:22.521em;}
address span.fn{font-weight:bold;font-size:110%;}
address span{margin:0;}
address span span.tel span.type{visibility:hidden;}
address span span.tel span.value{font-weight:bold;}
address.vcard span a.email{font-weight:bold;text-decoration:none;}
address span.hcard_ref a{font-size:60%;font-weight:normal;text-decoration:none;}
address span.myp{display:block;margin:0.5em 0;}
/* @end CONTACT INFORMATION */ 
.url{border-bottom:1px dashed #333;}
#about #col-right p{margin:2em 2em 1em 2em;}
#ss-holder h2{text-align:left;/* color:#ccc;*/}
#ss-holder dl{/* color:#fff;*/ padding:1em;text-align:left;}
#ss-holder dl dt{font-weight:bold;}
#ss-holder dl dd{padding:0.5em 0.5em 0.5em 4em;}
#ss-holder dl dd ol{list-style-type:decimal;}
/* [/2] ------------------------------------------ **/
/* IMPORT::LINKS FORMATTING */
/* @group BASIC LINKS::*/
/* Should be in the order of Link,Visited,Hover,Active [ LVHA ] for complete browser support. Some browsers do not accept wrong order.  */
a{/* background-color:transparent;*/}
a:link,a:visited{color:#333;font-weight:bold;text-decoration:none;}
a:hover,a:active{color:#324E6A;font-weight:bold;}
/* @end BASIC LINKS::*/
/* @group LINK FORMATTING::*/
a.external span{position:absolute;left:-5000px;width:4000px;}
a.external:link,
a.external:visited{background:url(/images/icon_external.gif) no-repeat 100% 0;padding:0 1.4em 0 0;}
a.internal:link,
a.internal:visited{background:url(/images/icon_internal.gif) no-repeat 100% 0;padding:0 1.4em 0 0;}
/* @end LINK FORMATTING::*/
/* IMPORT::COLOUR SETTINGS */
/** 1. COLOURS::-------------------------------------------------- */
body{color:#333;background:#555 url('/images/bg.gif') repeat-x top left;}
#core-800{border:1px solid #27242B;background-color:#f7f5f0;}
/* @group HEADER SECTION::*/ 
#header{background:#525252 url('/images/page.header.png') repeat-x right;border:1px solid #555;}
/* @end HEADER SECTION::*/
/* @group TITLE-BAR SECTION::*/
#title-bar{background-color:#B1B1B1;border-left:2px #ADAB9F;border-right:2px #ADAB9F;border-bottom:2px solid #ADAB9F;color:#737172;}
#title-bar p.info{color:#333;}
#title-bar p.error{color:#D50202;}
#title-bar span#ssp_help{color:#333;}
/* @end TITLE-BAR SECTION::*/
/* @group CONTENT SECTION::*/ 
#content{background-color:#F4F8F5;}
#content h2{color:#3d5d7d;}
#ss-holder{background-color:#444;}
#col-left h2{color:#3d5d7d;}
#col-left p{color:#333;}
#col-left ul{color:#ccc;}
#clients #col-right{background-color:#DDD;}
/* @end CONTENT SECTION::*/ 
.img-th{background-color:#FFF;border-left:1px solid #DDDCCC;border-top:1px solid #DDDCCC;border-right:2px solid #80828C;border-bottom:2px solid #80828C;}
.img-pr{background-color:#FFF;border-left:1px solid #DDDCCC;border-top:1px solid #DDDCCC;border-right:2px solid #80828C;border-bottom:2px solid #80828C;}
/* @group FOLIO-TABLE TD.TD-MAIN::*/ 
/* @end FOLIO-TABLE TD.TD-MAIN::*/ 
/* @group FOLIO-TABLE TD.TD-BOX::*/
#folio-table td.td-box{border-top:1px dashed #ababab;background-color:#9497A1;}
#folio-table td.td-box.lr{border-right:1px dashed #ababab;}
#folio-table td.td-box:hover{background-color:#888;}
#folio-table td.td-box.tc{border-top:0px solid #ababab;background-color:#E8EADB;}
#folio-table a p{color:#333;}
/* @end FOLIO-TABLE TD.TD-BOX::*/
/* @group CONTACT INFORMATION */
address.vcard{background-color:#E8EADB;border:1px dashed #ccc;}
/* @end CONTACT INFORMATION */ 
#ss-holder h2{color:#ccc;}
#ss-holder dl{color:#ccc;}
/* [/1] ------------------------------------------ **/
.alert{background:#fff6bf url('/images/exclamation.png') center no-repeat;background-position:1em 30%;/* x-pos y-pos */ text-align:left;padding:0.8em 1.5em 0.5em 5em;border-top:2px solid #ffd324;border-bottom:2px solid #ffd324;}
/* ------------------------------------------ **/