/* Main Screen CSS Document */

/* ----------------- COLOURS -----------------
2C Grey: #525051
*/




/* ----------------- DEFAULT FONT STYLES ----------------- */
body, td, div, h1, h2, h3, h4, h5, p, li, label { font-family: Arial, Helvetica, sans-serif; }

h2 { font-size: 100%; margin: .5em 0 .5em 0; color: #525051; font-weight: bold; }
h3 { font-size: 80%; margin: .5em 0 .5em 0; color: #525051; font-weight: bold; }
p { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.3em; color: #525051; }
li { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.3em; color: #525051; }
ul { margin-top: 0; margin-bottom: 0; }
a:link { color: #525051; }
a:visited { color: #525051;}
a:active, a:hover { color: #ff6633; }
a { outline: none; }
.tiny { font-size: 70%; }

/* ----------------- DEFAULT FORM STYLES ----------------- */
form { display: inline}
input, textarea, select { font-family: Arial, Helvetica, sans-serif; }

/* ----------------- DEFAULT RULE STYLE ----------------- */
hr { border:0; border-top: 1px solid #e9e9e9; height: 1px; }

/* ----------------- CLEAR STYLES ----------------- */
.clear { clear: both; }

/* ----------------- ERROR STYLES ----------------- */
/* -- Error Text -- */
.error { color: #c00 !important; }
/* -- Error Box -- */
.error-box { border: 1px solid #c00; padding: 1px; }
.error-box .error-title { padding: 3px 5px; background-color: #c00; color: #fff; font-size: 80%; font-weight: bold; }
.error-box .error-text { padding: 3px 5px; }
.error-box .error-text p { color: #c00; margin: 0; }

/* ----------------- MARGIN STYLES ----------------- */
/* -- 1 side -- */
.margin9-r { margin-right: 9px; }
.margin9-b { margin-bottom: 9px; }
.margin10-t { margin-top: 10px; }
.margin10-r { margin-right: 10px; }
.margin10-b { margin-bottom: 10px; }
.margin10-l { margin-left: 10px; }
.margin12-b { margin-bottom: 12px; }
.margin20-t { margin-top: 20px; }
.margin20-b { margin-bottom: 20px; }
.margin30-t { margin-top: 30px; }
/* -- 2 sides -- */
.margin9-r-b { margin-right: 9px; margin-bottom: 9px; }
.margin10-t-r { margin-top: 10px; margin-right: 10px; }
.margin10-t-b { margin-top: 10px; margin-bottom: 10px; }
.margin10-t-l { margin-top: 10px; margin-left: 10px; }
.margin10-r-l { margin-right: 10px; margin-left: 10px }
.margin10-r-b { margin-right: 10px; margin-bottom: 10px; }
.margin10-b-l { margin-bottom: 10px; margin-left: 10px; }
/* -- 3 sides -- */
.margin10-t-r-b { margin-top: 10px; margin-right: 10px; margin-bottom: 10px; }
.margin10-t-r-l { margin-top: 10px; margin-right: 10px; margin-left: 10px; }
.margin10-t-b-l { margin-top: 10px; margin-bottom: 10px; margin-left: 10px; }
.margin10-r-b-l { margin-right: 10px;  margin-bottom: 10px; margin-left: 10px; }
/* -- 4 sides -- */
.margin10 { margin: 10px; }

/* ----------------- TEXT ALIGNMENT STYLES ----------------- */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

/* ----------------- DIVIDERS ----------------- */
.divider { border-top: 1px solid #e9e9e9; height: 0; margin:10px 0; padding:0; overflow: hidden; }
.divider hr { display: none; visibility: hidden; }

.divider-dotted-beige { background: url(../../images/divider_dotted_beige.gif) top left repeat-x; height: 1px; margin:10px 0; padding:0; overflow: hidden; }
.divider-dotted-beige hr { display: none; visibility: hidden; }

/* ----------------- PAGE STYLES ----------------- */
body { margin: 15px 0 10px 0; background: url(../../images/page_background.gif) #f0e6cd top left repeat-x; }

/* ----------------- COLUMNS ----------------- */
.column-180 { width: 180px; float: left; }
.column-275 { width: 275px; float: left; }
.column-370 { width: 370px; float: left; }
.column-465 { width: 465px; float: left; }
.column-560 { width: 560px; float: left; }
.column-655 { width: 655px; float: left; }
.column-750 { width: 750px; float: left; }

.column-322 { width: 322px; float: left; } /* 50/50 split with 10px margin for the 655 column - leaves 1px spare */

.column-255 { width: 255px; float: left; } /* split with 10px margin for the 655 column - e.g. project pane of portfolio */
.column-370 { width: 370px; float: left; }

/* -- CONTAINER -- */
#frame { width: 970px; margin: 0 auto 0 auto; }

/* -- HEADER -- */
#header { width: 970px; height: 108px; padding: 0; margin-bottom: 5px; background: url(../../images/header_background.gif) top left no-repeat; }
#header-logo { width: 150px; height: 106px; float: left; }
#header-logo img { display: none; visibility: hidden; }
#header-content { width: 820px; float: left; }
#header-strapline { width: 820px; height: 70px; }
#header-strapline .strapline { width: 330px; height: 25px; float: right; margin: 31px 19px 0 0; background: url(../../images/header_strapline.gif) top left no-repeat; }
#header-strapline .strapline h1 { display: none; visibility:hidden; }
#header-navigation { width: 804px; height: 38px; padding-right: 16px; }

/* -- NAVIGATION -- */

/*-- Main Navigation --*/
#nav-main { width: 421px; height: 33px; float: right; }
#nav-main div { height: 33px; float: left; background-position: 0 0; background-repeat: no-repeat; }
#nav-main a { height: 33px; display: block; outline: none; }
#nav-main a:hover { background-position: 0 -33px; background-repeat: no-repeat; }
#nav-main span { display: none; visibility: hidden; }
#nav-main .selected, #nav-main .selected a:hover { background-position: 0 -66px; }
/*-- Buttons --*/
#nav-main .home, #nav-main .home a:hover { width: 35px; background-image: url(../../images/nav_main_home.gif); }
#nav-main .websites, #nav-main .websites a:hover { width: 83px; background-image: url(../../images/nav_main_websites.gif); }
#nav-main .designandartwork, #nav-main .designandartwork a:hover { width: 141px; background-image: url(../../images/nav_main_designandartwork.gif); }
#nav-main .print, #nav-main .print a:hover { width: 55px; background-image: url(../../images/nav_main_print.gif); }
#nav-main .portfolio, #nav-main .portfolio a:hover { width: 82px; background-image: url(../../images/nav_main_portfolio.gif); }
#nav-main .contact, #nav-main .contact a:hover { width: 80px; background-image: url(../../images/nav_main_contact.gif); }

/* -- BODY -- */
#body { width: 970px; margin-bottom: 5px; background: url(../../images/body_background.gif) top left repeat-y; }
#body-content { width: 940px; padding: 8px 15px 0 15px; background: url(../../images/body_content_background.gif) top left no-repeat; }
#body-footer { width: 970px; height: 15px; background: url(../../images/body_footer_background.gif) top left no-repeat; overflow: hidden; }

/* -- FOOTER -- */
#footer { width: 970px; height: 34px; margin-bottom: 5px; background: url(../../images/footer_background.gif) top left no-repeat; }
#footer-callus { width: 240px; height: 34px; float: left; background: url(../../images/footer_callus.gif) 20px 6px no-repeat; }
#footer-callus p { display: none; visibility: hidden; }
#footer-links { width: 710px; height: 34px; float: left; padding-right: 20px; }
#footer-links p { font-size: 70%; margin: 7px 0 0 0; }
#footer-links a:link, #footer-links a:visited { text-decoration: none; color: #525051; } 
#footer-links a:hover, #footer-links a:active { text-decoration: none; color: #fff}

/* -- COPYRIGHT -- */
#copyright { width: 970px; }
#copyright p { font-size: 70%; color: #a49c8c; text-align: center; margin: 0;  }



/* -- PANELS -- */
.panel-275-lightbeige {}
.panel-275-lightbeige .panel-top { width: 275px; height: 9px; background: url(../../images/panel_275_lightbeige_top.gif) #f1eee5 top left no-repeat; overflow: hidden; }
.panel-275-lightbeige .panel-body { width: 255px; padding: 1px 10px 1px 10px; background-color: #f1eee5; }
.panel-275-lightbeige .panel-bottom { width: 275px; height: 9px; background: url(../../images/panel_275_lightbeige_bottom.gif) #f1eee5 top left no-repeat; overflow: hidden; }

.panel-370-lightbeige {}
.panel-370-lightbeige .panel-top { width: 370px; height: 9px; background: url(../../images/panel_370_lightbeige_top.gif) #f1eee5 top left no-repeat; overflow: hidden; }
.panel-370-lightbeige .panel-body { width: 350px; padding: 1px 10px 1px 10px; background-color: #f1eee5; }
.panel-370-lightbeige .panel-bottom { width: 370px; height: 9px; background: url(../../images/panel_370_lightbeige_bottom.gif) #f1eee5 top left no-repeat; overflow: hidden; }

.panel-560-lightbeige {}
.panel-560-lightbeige .panel-top { width: 560px; height: 9px; background: url(../../images/panel_560_lightbeige_top.gif) #f1eee5 top left no-repeat; overflow: hidden; }
.panel-560-lightbeige .panel-body { width: 540px; padding: 1px 10px 1px 10px; background-color: #f1eee5; }
.panel-560-lightbeige .panel-bottom { width: 560px; height: 9px; background: url(../../images/panel_560_lightbeige_bottom.gif) #f1eee5 top left no-repeat; overflow: hidden; }

.panel-560-beige {}
.panel-560-beige .panel-top { width: 560px; height: 9px; background: url(../../images/panel_560_beige_top.gif) #e5decd top left no-repeat; overflow: hidden; }
.panel-560-beige .panel-body { width: 540px; padding: 1px 10px 1px 10px; background-color: #e5decd; }
.panel-560-beige .panel-bottom { width: 560px; height: 9px; background: url(../../images/panel_560_beige_bottom.gif) #e5decd top left no-repeat; overflow: hidden; }

.panel-655-lightbeige {}
.panel-655-lightbeige .panel-top { width: 655px; height: 9px; background: url(../../images/panel_655_lightbeige_top.gif) #f1eee5 top left no-repeat; overflow: hidden; }
.panel-655-lightbeige .panel-body { width: 635px; padding: 1px 10px 1px 10px; background-color: #f1eee5; }
.panel-655-lightbeige .panel-bottom { width: 655px; height: 9px; background: url(../../images/panel_655_lightbeige_bottom.gif) #f1eee5 top left no-repeat; overflow: hidden; }


.panel-header { width:auto; height: 25px; }
.panel-header div { width:auto; height: 25px; background-position: top left; background-repeat: no-repeat; }
.panel-header h3 { display: none; visibility: hidden; }

.panel-header .latestprojects { background-image: url(../../images/content/home_panel_latestprojects.gif); }


.panel-title { width:auto; height: 23px; margin-bottom: 10px; }
.panel-title div { width:auto; height: 23px; background-position: top left; background-repeat: no-repeat; }
.panel-title h3 { display: none; visibility: hidden; }

.panel-title .welcome { background-image: url(../../images/content/home_panel_welcome.gif); }