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

Title : Clients Area

Author : Chris Munn / chris.munn@gforces.co.uk / G-Forces Web Management Ltd
(Based on Initial Styles by John Davies - john.davies@gforces.co.uk)

Type: Screen, Projection

Description : Screen and projection stylesheet for Clients Area site

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

/* COMMON AND GLOBAL */
html { width: 100%; height: 100%; }
body { font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#01143f; color:#000000; text-align:center; width: 100%; height: 100%; position: relative; }
/*  This font sizing is for standards based browsers (firefox, opera, mozilla) that can re-size text.
Declaring the font size in pixels makes it more consistent across browsers. */
td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; }
html>body td, html>body textarea, html>body input, html>body select { font-size:11px; }
/* some browsers don't inherit the font into tables or textareas! */

/* ----- IDS ----- */
#container { width:940px; margin:0 auto; text-align:left; font-size:110%; line-height: normal; background: #fff; line-height: normal; }
#printHeader { display:none;}

#header { height: 55px; position: relative; background: #00143f; width: 940px; padding-top:12px; }
#header #logo { position: absolute; top: 11px; left: 0px; }
#header #gforces { position: absolute; top: 12px; right: 0px; }

/* ----- TOP NAVIGATION ----- */
#primaryNav { background: url(../images/layup/primaryNavBg.gif) top left no-repeat; height: 34px; width: 924px; padding: 0px 8px 0px 8px; }
#primaryNav ul { list-style: none; margin: 0; padding: 0; }
#primaryNav li { float: left; background:url(../images/layup/primaryNavDivider.gif) top right no-repeat; }
#primaryNav li a { display: block; float: left; padding: 10px 14px; text-decoration: none; color: #fff; }
#primaryNav li#siteSelect { text-decoration: none; color: #fff; font-weight: bold; width: 280px; }
#primaryNav li#siteSelect label { display: block; padding: 10px 14px; width: 65px; }
#primaryNav li#siteSelect select { margin: 8px 14px 0px 0px; }
#primaryNav li a:hover { background: url(../images/layup/primaryNavArrow.gif) bottom center no-repeat; }
#primaryNav li .active { background: url(../images/layup/primaryNavArrow.gif) bottom center no-repeat; }
#primaryNav li.logOut { background: none; float: right; }
#primaryNav li span.lock { background: url(../images/layup/iconLock.gif) right -1px no-repeat; display: block; padding: 0px 20px 0px 0px; }
#primaryNav li.accountSelector { float: right; background: none; padding: 6px 22px; width: 120px; }
#primaryNav li.accountSelector select { background: #116c97; width: 120px; height: 20px; color: #fff; font-size: 1.0em; }
#primaryNav li.accountSelector code { color: #fff; font-weight: bold; font-size:11px; line-height:20px; }

/* ----- TITLE BAR ----- */
#titleBar { background:url(../images/layup/titleBar.gif) top left repeat-x; margin: 0px 1px 0px 1px; width: 938px; height: 28px; position: relative; z-index: 999; }
#titleBar .pageIcon { position: absolute; top: 0px; left: 16px; }
#titleBar .title { float: left; }

#titleBar #team { float: right; position: relative; z-index: 999; }
#titleBar #btnTeam.teamOpen a { display: block; width: 97px; height: 28px; background: url(../images/layup/btnContact.gif) top left no-repeat; }
#titleBar #btnTeam.teamClose a { display: block; width: 97px; height: 28px; background: url(../images/layup/btnContact.gif) top left no-repeat; }
#titleBar #slideTeam { position: absolute; top: 28px; right: 2px; width: 204px; background: #fff; border: 1px solid #afafaf; }
#titleBar #slideTeam table {}
#titleBar #slideTeam table tr { background: #e0e0e0; }
#titleBar #slideTeam table tr td { padding: 7px 0px 7px 10px; }
#titleBar #slideTeam table tr.trAlt { background: #e7f4fa url(../images/layup/iconArrow.gif) 10px 9px no-repeat; }
#titleBar #slideTeam table tr.trAlt td { padding: 7px 0px 7px 21px; }

#titleBar .filter { float: right; position: relative; z-index: 999; }
#titleBar .filter a { display: block; width: 88px; height: 28px; background: url(../images/layup/btnFilter.gif) 0px 0px no-repeat; }
#titleBar #slideFilter { position: absolute; top: 28px; right: 2px; width: 279px; background: #fff; border: 1px solid #afafaf; }
#titleBar #slideFilter table {}
#titleBar #slideFilter table tr { background: #e0e0e0; }
#titleBar #slideFilter table tr.trAlt { background: #e7f4fa; }
#titleBar #slideFilter table td { padding: 7px 0px 7px 10px; }

#titleBar .date { float: right; position: relative; z-index: 999; }
#titleBar .date #btnDate a { display: block; width: 132px; height: 28px; background: url(../images/layup/btnDate.gif) 0px 0px no-repeat; }
#titleBar .date #slideDate { position: absolute; top: 28px; right: 2px; width: 620px; background: #fff; border: 1px solid #afafaf; }
#titleBar .date #slideDate .inner { background: #fff; padding: 1px; }
#titleBar .date #slideDate .heading { background: url(layup/titleChooseDateRangeBg.gif) top left repeat-x; width: 100%; margin-bottom: 5px; }
#titleBar .date #slideDate .navRange { width: 103px; margin-right: 8px; }
#titleBar .date #slideDate .navRange ul { margin: 0; padding: 0; list-style: none; }
#titleBar .date #slideDate .navRange ul li {}
#titleBar .date #slideDate .navRange ul li.last a { background: none; }
#titleBar .date #slideDate .navRange ul li.last a:hover { display: block; color: #fff; background: url(../images/layup/dropDownNavBg.gif) top left no-repeat; }
#titleBar .date #slideDate .navRange a { display: block; padding: 6px 0px 6px 21px; width: 82px; text-decoration: none; background: url(../images/layup/dropDownNavDivider.gif) bottom left no-repeat; }
#titleBar .date #slideDate .navRange a:hover, #titleBar .date .dropDown .navRange a.clicked { display: block; color: #fff; background: url(../images/layup/dropDownNavBg.gif) top left no-repeat; }
#titleBar .date #slideDate h1 { border: none !important; }

/* ----- ADVERTS ----- */
#advertisements { width:124px; background: url(../images/layup/advertsBg.gif) no-repeat; min-height: 475px; float: right; }
#advertisements .title { font-weight: bold; font-size: 11px; color: #000; padding: 5px 0px 6px 10px; }
#advertisements img { margin: 8px; width: 108px; }

#mainContent { width: 752px; float: left; }

#welcomeMsg { min-height: 100px; padding: 20px}

/* PROJECT STATUS CHART */
#mainContent #projectStatusChart { background: url(../images/layup/chartBg.jpg) 0px 25px no-repeat; height: 94px; }
#mainContent #projectStatusChart .boxTitleBg #statusKey { background: url(../images/layup/chartKey.gif) no-repeat; width: 327px; height: 23px; float: right; margin-top:1px; }
#mainContent #projectStatusChart .boxContent .status { width: 18px; height: 19px; }
#mainContent #projectStatusChart .boxContent .status.green { background: url(../images/layup/processGreen.gif) no-repeat; }
#mainContent #projectStatusChart .boxContent .status.red { background: url(../images/layup/processRed.gif) no-repeat; }
#mainContent #projectStatusChart .boxContent .status.blue { background: url(../images/layup/processBlue.gif) no-repeat; }
#mainContent #projectStatusChart .boxContent #process1 { height: 90px; width: 111px; float: left; position: relative; }
#mainContent #projectStatusChart .boxContent #process2 { height: 90px; width: 99px; float: left; position: relative; }
#mainContent #projectStatusChart .boxContent #process3 { height: 90px; width: 109px; float: left; position: relative; }
#mainContent #projectStatusChart .boxContent #process4 { height: 90px; width: 103px; float: left; position: relative; }
#mainContent #projectStatusChart .boxContent #process5 { height: 90px; width: 115px; float: left; position: relative; }
#mainContent #projectStatusChart .boxContent #process6 { height: 90px; width: 100px; float: left; position: relative; }
#mainContent #projectStatusChart .boxContent #process7 { height: 90px; width: 115px; float: left; position: relative; }
#mainContent #projectStatusChart .boxContent #process1 .status { position: absolute; top: 39px; left: 49px; }
#mainContent #projectStatusChart .boxContent #process2 .status { position: absolute; top: 39px; left: 37px; }
#mainContent #projectStatusChart .boxContent #process3 .status { position: absolute; top: 39px; left: 45px; }
#mainContent #projectStatusChart .boxContent #process4 .status { position: absolute; top: 39px; left: 43px; }
#mainContent #projectStatusChart .boxContent #process5 .status { position: absolute; top: 39px; left: 48px; }
#mainContent #projectStatusChart .boxContent #process6 .status { position: absolute; top: 39px; left: 43px; }
#mainContent #projectStatusChart .boxContent #process7 .status { position: absolute; top: 39px; left: 42px; }
#mainContent #projectStatusChart .boxContent #process1 .date { position: absolute; top: 64px; left: 0px; text-align: center; width: 111px; font-weight: bold; color: #384b51; }
#mainContent #projectStatusChart .boxContent #process2 .date { position: absolute; top: 64px; left: 0px; text-align: center; width: 99px; font-weight: bold; color: #384b51; }
#mainContent #projectStatusChart .boxContent #process3 .date { position: absolute; top: 64px; left: 0px; text-align: center; width: 109px; font-weight: bold; color: #384b51; }
#mainContent #projectStatusChart .boxContent #process4 .date { position: absolute; top: 64px; left: 0px; text-align: center; width: 103px; font-weight: bold; color: #384b51; }
#mainContent #projectStatusChart .boxContent #process5 .date { position: absolute; top: 64px; left: 0px; text-align: center; width: 115px; font-weight: bold; color: #384b51; }
#mainContent #projectStatusChart .boxContent #process6 .date { position: absolute; top: 64px; left: 0px; text-align: center; width: 100px; font-weight: bold; color: #384b51; }
#mainContent #projectStatusChart .boxContent #process7 .date { position: absolute; top: 64px; left: 0px; text-align: center; width: 115px; font-weight: bold; color: #384b51; }

/* MAINCONTENT BOXES */
#mainContent .boxTitleBg { clear:both; height: 25px; background: url(../images/layup/boxTitleBg.gif) repeat-x; border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; padding-left: 10px; }
#mainContent .boxTitleBg .boxTitle { font-weight: bold; background: #fff; float: left; padding: 5px 7px 5px 7px; border: 1px solid #bfbfbf; border-bottom: none; }
#mainContent .boxTitleBg .boxTitle.titleLink { background: none; border: none; font-weight: bold; float: left; padding: 6px 8px 5px 8px;  }
#mainContent .boxTitleBg .boxTitle.titleLink a { text-decoration: none; color: #7e7e7e; }
.titleSignOff { float: right; padding: 0px 15px 0px 0px; }
#controls { width: 200px; }

.box240 { width: 240px; float: left; margin-right: 15px; }
.box240.lastItem { margin-right: 0px; }
.box240 .boxContent { background: url(../images/layup/box240Bg.gif) no-repeat; min-height: 120px; }
.box752 { width: 752px; margin: 0px 0px 15px 0px; }
.box752 .boxContent p.titleHeading { background: #C8E4F4; padding: 5px; }
.box752 .boxContent { background: url(../images/layup/box752Bg.gif) no-repeat; min-height: 120px; padding: 15px; }
.box752 .boxContent.noPadding { padding: 0px; }
.box752 .boxContent.sidePadding { padding: 15px 35px; }
.box752 .boxContent .boxItem { padding: 15px; }
.box752 .boxContent .boxItem.altRow { padding: 15px; background: #deebf5; }
.box752 .boxContent .notesAltRow { border-top:3px solid #666666; margin-top:20px; padding-top:20px; }
.box752 .boxContent .notesAltRow p,
.box752 .boxContent .notesAltRow .reply { position: relative; }
.box752 .reply { padding:5px; padding-left:25px; }
.box752 .altGrey { background: #DDEDF7; }
.box495 { width: 495px; margin-right: 15px; float: left; }
.box495 .boxContent { background: url(../images/layup/box495Bg.gif) no-repeat; min-height: 115px; padding: 10px; }
.boxContent .listItem { border-bottom: 1px solid #c9cfd2; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; }

.box495 .boxContent div.testing { width:233px; }
.box495 .boxContent .testingExplanation { padding: 10px; }

/* ----- UL ICONS ----- */
ul.icons { list-style: none; padding: 15px; margin: 0px; }
ul.icons li { padding: 0px 0px 15px 30px; }
ul.icons li a { text-decoration: none; }
ul.icons li.iconCross { background: url(../images/layup/iconCross.gif) 0px 2px no-repeat; }
ul.icons li.iconTick { background: url(../images/layup/iconTick.gif) 0px 2px no-repeat; }
ul.icons li.iconWord { background: url(../images/layup/iconWord.gif) no-repeat; }
ul.icons li.iconMovie { background: url(../images/layup/iconMovie.gif) no-repeat; }
ul.icons li.iconAcrobat { background: url(../images/layup/iconAcrobat.gif) no-repeat; }
ul.icons li.iconDocument { background: url(../images/layup/iconDocument.gif) no-repeat; }
ul.icons li.iconMail { background: url(../images/layup/iconMail.gif) no-repeat; }

/* ----- LOGIN ----- */
#login { width: 904px; margin: 0px 1px 0px 1px; background: #eee url(../images/layup/loginBg.gif) bottom left repeat-x; min-height: 240px; padding: 8px 17px 8px 17px; }
#loginForm {}
#loginForm label { background: none; font-weight: bold; width: 200px; }
#loginForm fieldset div { margin: 0px 0px 10px 0px; }
#loginForm input { width: 180px; height: 17px; padding: 0; }
#loginForm #login-wrap { width: 388px; height:26px; }
#loginMessage .messageBoxRed { padding: 4px 10px 4px 10px; background: #ff8383; border: 1px solid #ac0808; color: #fff; font-size: 1.1em; font-weight: bold; margin-bottom: 14px; }
#loginMessage .messageBoxRed span { font-size: 1.4em; }
#loginMessage .messageBoxGreen { padding: 4px 10px 4px 10px; background: #6bcd60; border: 1px solid #118e04; color: #fff; font-size: 1.1em; font-weight: bold; margin-bottom: 14px; }
#loginMessage .messageBoxGreen span { font-size: 1.4em; }
#loginMessage .float_left { float: left; margin-right: 10px; }

/* ----- DASHBOARD ----- */
#homeContainer.home { overflow:hidden; width:900px; }
#fullCol { width: 900px; margin: 0px 1px 0px 1px; min-height: 240px; background: url(../images/layup/rightColBg.gif) top left repeat-x; padding: 12px 19px 13px 19px; }
.dashboardMonth { width: 295px; float: left; margin-right: 7px; position:relative; }
.dashboardMonth.last { margin-right: 0px; }
.dashboardMonth .title { background:url(../images/layup/dashboardMonth.gif) top left no-repeat; text-align: center; font-weight: bold; font-size: 1.4em; color: #fff; padding: 5px 8px 4px 8px; }
.dashboardMonth table { border: 1px solid #d6d6d6;}
.dashboardMonth td { font-size: 1.0em; font-weight: bold; padding: 6px 11px 6px 11px; }
.dashboardMonth tr { background: #e1e1e1; }
.dashboardMonth tr.trAlt { background: #ededed; }
.dashboardMonth tr.heading { background: #c7e0ed; }
.dashboardMonth tr.heading td { color: #04446d; font-size: 1.2em; }
.dashboardMonth tr.heading td a { background: url(../images/layup/iconDetails.gif) top right no-repeat; color: #04446d; display: block; padding: 2px 0px 2px 0px; font-size: 0.7em; text-decoration: none; }
.dashboardMonth .active  { background:url(../images/layup/dashboardMonthActive.gif) top left no-repeat; }

.leftRightArrow { width:17px; height:17px; margin:1px; }

/* ----- LEFT COLUMN ----- */
#leftCol { float: left; width: 175px; background:url(../images/layup/leftColBg.gif) top left repeat-y; }
#leftCol img { margin-top:-1px; }

/* ----- SECONDARY NAVIGATION ----- */
#secondaryNav { background:url(../images/layup/leftColGrad.gif) top left no-repeat; min-height: 312px; padding-top: 14px; }
#secondaryNav ul { list-style: none; margin: 0px 0px 1px 0px; padding: 0; }
#secondaryNav ul li { width: 175px; }
#secondaryNav ul li ul li.navTitle { background: url(../images/layup/secondaryNavTitle.png) top left no-repeat; width: 153px; height: 21px; color: #fff; padding: 10px 0px 0px 22px; font-weight: bold; font-size: 1.1em; text-transform: uppercase; }
#secondaryNav ul li ul li.navLink { background:url(../images/layup/secondaryNavBg.png) top left repeat-y; width: 175px; }
#secondaryNav ul li ul li.navLink a { display: block; text-decoration: none; background: url(../images/layup/secondaryNavDivider.gif) bottom left no-repeat; padding: 6px 0px 6px 30px; width: 145px; }
#secondaryNav ul li ul li.navLink a:hover { background: url(../images/layup/secondaryNavHover.gif) bottom left no-repeat; color: #fff; }
#secondaryNav ul li ul li.navLink .active { background: url(../images/layup/secondaryNavHover.gif) bottom left no-repeat; color: #fff; }
#secondaryNav ul li ul li.navLinkLast { background:url(../images/layup/secondaryNavLast.png) top left repeat-y; width: 175px; height: 30px; }
#secondaryNav ul li ul li.navLinkLast a { display: block; text-decoration: none; background: none; padding: 6px 0px 6px 30px; width: 142px; }
#secondaryNav ul li ul li.navLinkLast a:hover { background: url(../images/layup/secondaryNavLastHover.png) bottom left no-repeat; color: #fff; }
#secondaryNav ul li ul li.navLinkLast .active { background: url(../images/layup/secondaryNavLastHover.png) bottom left no-repeat; color: #fff; }

/* ----- RIGHT COLUMN ----- */
#rightCol { float: right; width: 739px; background: url(../images/layup/rightColBg.gif) top left repeat-x; margin-right: 1px; display: inline; min-height: 308px; padding: 8px 17px 20px 8px; }
#btnsTop { float: right; }
#btnsTop div { float: left; padding-right: 5px; }
.chart { float: left; margin-bottom: 10px; }

/* ----- TABS ----- */
#tabs { width: 752px; padding: 0 !important; border: none !important; font-size: 1.0em; }
#tabs ul.tabSet { padding: 0; margin: 0; list-style: none; background:url(../images/layup/tabBg.gif) top left no-repeat; width: 730px; height: 25px; padding: 0px 11px 0px 11px; border: none !important; }
#tabs ul.tabSet li { float: left; display: block; margin: 0; border: none; padding: 0; }
#tabs ul.tabSet li a { display: block; float: left; padding: 5px 14px 5px 14px; line-height: normal; color:#6c6c6c; text-decoration: none; border-right: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; }
#tabs ul.tabSet li a:hover { background: #fff; border-right: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; color: #000; }
#tabs ul.tabSet li.active a { background: #fff; border-right: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; color: #000; }
#tabs .ui-tabs-hide { display: none; }
#tabs .borderTop { border-top: 1px solid #d6d6d6; }
#tabs .tabContent { padding: 0px 1px 1px 1px; background: #fff url(../images/layup/tabContentBg.gif) top left no-repeat;}
#tabs .tabContent table thead th { background: url(../images/layup/theadBg.gif) center left repeat-x !important; padding: 6px 8px 6px 8px; font-weight: bold; }
#tabs .tabContent table thead tr { background: none !important; }
#tabs .tabContent tbody td { padding: 6px 8px 6px 8px; font-weight: bold; }
#tabs .tabContent tbody td.userManagement { padding: 0px 8px 0px 8px; vertical-align:middle; font-weight: bold; }

/* ----- REPORT BOX ----- */
#generateReports .reportBox { float: left; width: 215px; background: #fff; margin-top: 10px; }
#generateReports .reportBox .title { background: #fff url(../images/layup/generateReport.gif) top left no-repeat; text-align: center; font-weight: bold; font-size: 1.4em; color: #fff; padding: 5px 8px 4px 8px; }
#generateReports .reportBox .padding { padding: 6px; } 
#generateReports  select { width:200px !important; height:90px !important; }
#generateReports .selectDateRange .padding { margin: 6px; padding: 8px 6px 6px 6px; border: 1px solid #dbdbdb; background: #eee; color: #033251; text-align: center; font-size: 1.7em; font-weight: bold; }
#generateReports .selectDateRange .btn { margin: 3px auto 0 auto; width: 166px; }
#generateReports .btnApply { width: 79px; margin: 10px auto 15px auto; }
#generateReports .btnActions { background:url(../images/layup/btnActionsBg.gif) top left no-repeat; padding: 16px 0px 0px 0px;  }
#generateReports .btnActions .btn { width: 124px; margin: 0 auto;  }

#workList { text-align:left; }

/* ----- DESIGN LIST ----- */
#designList { margin: 0px 0px 40px 0px; }
#designList .listItem { position: relative; width: 155px; float: left; border-bottom: none; margin: 0px 5px 5px 0px; padding: 0px; }
#designList .listItem.lastItem { margin-right: 0px; }
#designList .listItem a { text-decoration: none; display: block; outline: none; }
#designList .listItem img { padding: 3px; border: 1px solid #d2d2d2; }
#designList .listItem img.unSigned { background: #bf1717; }
#designList .listItem img.btn { padding: 0px; border: none; }
#designList .listItem span { display: block; padding: 5px 10px 5px 10px; }
#designList .listItem span.hasNotes{ position:absolute; padding: 0; right:0px; top: 95px;}
#designList .listItem span.hasNotes img { border: 0; padding: 0;}

/* ----- ARCHIVE DESIGN LIST ----- */
#archiveDesignList { margin: 0px 0px 40px 0px; }
#archiveDesignList .listItem { position: relative; width: 155px; float: left; border-bottom: none; margin: 0px 20px 5px 0px; padding: 0px; }
#archiveDesignList .listItem.lastItem { margin-right: 0px; }
#archiveDesignList .listItem a { text-decoration: none; display: block; outline: none; }
#archiveDesignList .listItem img { padding: 3px; border: 1px solid #d2d2d2; }
#archiveDesignList .listItem img.unSigned { background: #bf1717; }
#archiveDesignList .listItem img.btn { padding: 0px; border: none; }
#archiveDesignList .listItem span { display: block; padding: 5px 10px 5px 10px; }
#archiveDesignList .listItem span.hasNotes{ position:absolute; padding: 0; right:0px; top: 95px;}
#archiveDesignList .listItem span.hasNotes img { border: 0; padding: 0;}

/* ----- DESIGN DETAIL ----- */
#mainImage { padding: 10px 0px 15px 0px; position: relative; }
#mainImage .viewDesignMessage { position: absolute; top: 232px; width: 100%; left: 0px; background: url(../images/layup/overlay.png); padding: 30px 0px; text-align: center; color: #fff; font-size: 2.2em; font-weight: bold; }

/* ----- GLOBAL CLASSES ----- */
.clear { clear:both; display: block; }
.clearSmall { clear: both; display: block; height: 0; line-height: 0; font-size: 0; }
.hide { display:none; }
.show { display:block; }
.printShow { display:none; }
.printHide { display:block; }
.float_left { float:left !important; }
.float_right { float:right !important; }
.align_left { text-align:left !important; }
.align_center { text-align:center !important; }
.align_right { text-align:right !important; }
.align_justify { text-align:justify !important; }
.align_bottom { vertical-align:bottom !important; }
.image_right { float:right; margin:0 0 15px 15px; }
.image_left { float:left; margin:0 15px 15px 0; }
.image_center { margin:0 auto; }
.hand { cursor:pointer; }
.seo {text-decoration:none;font-weight:normal;}
.ieLinkFix { background: url(../images/layup/ie6LinkFix.gif); }
.width200 { width: 200px; }

/* ----- HEADINGS & PARAGRAPHS ----- */
h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 8px 0; font-size:100%; font-weight:bold; }
h1 { font-size: 1.3em; padding-top: 9px; border-bottom: 1px solid #cdcdcd; margin-bottom: 12px; }

/* ----- FOOTER ----- */
#footer { background:url(../images/layup/footerBg.gif) top left no-repeat; height: 24px; width: 896px; color: #fff; font-weight: bold; padding: 9px 22px 0px 22px; }
#footer p { padding: 0; }
#footer a { font-weight:normal; text-decoration:none; }
#footer a:hover { text-decoration:underline; }

/* ----- SITE MAP ----- */
#sitemap { list-style:none; margin:0 0 0 5px; padding:0;}
#sitemap ul { list-style:none;  margin:10px 0 0px 15px; padding:0;}
#sitemap li { background:url(../images/layup/bulletSitemap.gif) 0px 11px no-repeat; padding:6px 0 5px 15px;}

/* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */
#breadcrumbs {}
#pagination { float: right; }
#pagination a { padding: 0px 4px 0px 4px; text-decoration: none; }
#pagination a:hover { text-decoration: none; background:#000000; color:#FFFFFF; }
#pagination .active { text-decoration: none; background:#000000; color:#FFFFFF; }
#pagination span { display: block; float: left; padding: 0px 2px 0px 2px; }

/* ----- GLOBAL ----- */
img { display:block; border:0; }
p { padding:0 0 15px 0; margin:0; }
address { font-style:normal;}

/* ----- LINKS ----- */
a { color:#000000; font-weight:bold; text-decoration:underline;cursor:pointer; }
a:hover { text-decoration:none; }

/* ----- FORMS ----- */
form { padding:0; margin:0; }
fieldset { padding:0; margin:0; border:0px none; }
legend { padding:0; margin:0; display:none; }
label { display:block; width:260px; float:left; }
input, textarea { width:200px; font-size:11px !important;}
.required { color:#0033FF;}
.checkRadio { width:20px; position:relative; left:-7px;}
#frmContact { margin-bottom:15px;}
#frmContact p { padding:7px 0;}
#frmContact select { width:204px;}
#frmContact div { margin-bottom:10px;}
#submit { width:55px; height:18px; border:none;}

/* ----- Prototype Validation ----- */
input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; }
input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #4544e4; color : #FF3300; }
input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; }
.validation-advice { margin: 5px 0; width:452px; padding: 5px; background-color: #4544e4; color : #FFF; font-weight: bold; }

/* ----- TABLES ----- */
table{ width:100%; border-collapse:separate; margin:0; }
th { background:#eaeaea; padding: 10px 12px; }
td { text-align:left; padding: 10px 12px 10px 12px; vertical-align:top; }
tr { background: #e1e1e1; }
tr.trAlt { background: #ededed; }
tr.trInt { background: #c7e0ed !important; }
tr.trIntAlt { background: #ddedf4; }
.align_top { vertical-align:top !important; }
.paginationList a { margin:0 3px; padding:2px 5px 2px 5px; background:#fd0; text-decoration: none; }
tr.highlight { background:#fce38c; }
.table-actions span.text { float:right; font-weight:bold; padding:6px 6px 0 0; }
img.th { float:right; cursor:pointer; margin:0 2px; }
td.actions { padding:4px; }
.blueTable tr { background: #cce4ef; }
.blueTable tr.trAlt { background: #e0eef5; }

/* ----- DOMTABS ----- */
.domTabs { clear:both; background: url(../images/layup/boxTitleBg.gif) repeat-x; }
.domContent { background: url(../images/layup/box752Bg.gif) no-repeat; min-height: 120px; padding: 0px 15px 15px 15px; }
.dt1 { display: block; }

ul.domHeadings { padding: 0px; margin: 0px; list-style: none; padding-left: 10px; border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; height: 25px; }
ul.domHeadings li { float: left;}
ul.domHeadings li a { display: block; font-weight: bold; float: left; padding: 6px 8px 5px 8px; text-decoration: none; outline: none; color: #606060; background: url(../images/layup/tabSeperator.gif) top right no-repeat; }
ul.domHeadings li a:hover, ul.domHeadings li.active a { background: #fff; border: 1px solid #bfbfbf; border-bottom: none; padding: 5px 7px 5px 7px; color: #000; }

tr.noBg{ background:none; }

.domContent ul.icons { float: left; background: url(../images/layup/stripFade.gif) top right no-repeat; padding: 15px 20px 0px 20px; width: 200px; }
.domContent ul.icons.lastItem { background: none; }
.domContent .padding { padding: 15px 0px 0px 0px; }

#popupContainer {text-align: left;}
#popupContainer label { width: 100px; }

/* ----- NEW PROGRESS SECTION SEP 2010 ----- */
#progressInfo { background:#01143f; }
#progressBar { height:54px; width:100%; background:url(../images/layup/stripeBg.gif) left top repeat-x; }
#progressBar .padding { padding:9px 0 0 22px; }
#progressBar #progressTitle   { margin-top:13px; float:left; width:140px; }
#progressBar #timeLine { width:676px; float:left; height:35px; background:url(../images/layup/timeLineBg.gif) left top no-repeat; margin-left:19px; position:relative; }
#progressBar #timeLine .date {color:#59bafb; font-size:9px;}
#progressBar #timeLine .date.planning { position:absolute; top:28px; left:0px;}
#progressBar #timeLine .date.kickOff { position:absolute; top:28px; left:142px;}
#progressBar #timeLine .date.development { position:absolute; top:28px; left:283px;}
#progressBar #timeLine .date.siteLaunch { position:absolute; top:28px; left:425px;}
#progressBar #timeLine .date.postImplementation { position:absolute; top:28px; left:563px;}

#progressBar #timeLine .barContain { height:16px; width:38%; position:relative; top:13px; left:2px; }
#progressBar #timeLine .barContain .greenBar { position:relative;  width:1px; height:5px;  overflow:hidden; background:url(../images/layup/greenBarBg.gif) repeat-x; }
#progressBar #timeLine .barContain .greenBar .end { position:absolute; top:-6px; width:43px; height:16px; }
#progressBar #timeLine .barContain .end { position:absolute; right:-7px; top:-6px; width:43px; height:16px; }
#progressBar #timeLine .barContain .redBar {  height:5px;  overflow:hidden; background:url(../images/layup/redBarBg.gif) repeat-x; }
#progressBar #timeLine .barContain .redBar .end { position:absolute; right:-7px; top:-6px; width:43px; height:16px; }
#progressBar #launch { float:left; margin-left:10px; color:#59bafb; font-size:9px; margin-top:5px; line-height:5px;}

#progressBreakdown { width:100%; background:none; }
#progressBreakdown th { background:none; padding:0px; }
#progressBreakdown th planning { width:188px; }
#progressBreakdown th kickOff { width:187px; } 
#progressBreakdown th development { width:188px; }
#progressBreakdown th siteLaunch { width:187px; }
#progressBreakdown th postImplementation { width:191px; }
#progressBreakdown td { height:188px; }
#progressBreakdown td.width190 { width:190px; background:url(../images/layup/tdWidth191Bg.gif) left top no-repeat #00143f; }
#progressBreakdown td.width187 { width:187px; background:url(../images/layup/tdWidth187Bg.gif) left top no-repeat #00143f; }
#progressBreakdown td.width188 { width:188px; background:url(../images/layup/tdWidth188Bg.gif) left top no-repeat #00143f; }
#progressBreakdown td ul { margin:0px; padding:0px; }
#progressBreakdown td li { font-size:11px; color:#fff; list-style:none; padding: 8px 0 8px 15px;  }
#progressBreakdown td li .docTick { display:block; float:right; background:url(../images/layup/docTick.gif) left top no-repeat; width:16px; height:16px; }
#progressBreakdown td li .docCross { display:block; float:right; background:url(../images/layup/docCross.gif) left top no-repeat; width:16px; height:16px; }
#progressBreakdown td li.arrows { position:relative; }
#progressBreakdown td li.arrows .arrowImg { position:absolute; left:40px; top:-5px; }
#progressBreakdown td li.red { background:url(../images/layup/circleRed.gif) left 9px no-repeat;}
#progressBreakdown td li.green { background:url(../images/layup/circleGreen.gif) left 9px no-repeat;}
#progressBreakdown td li.blue { background:url(../images/layup/circleBlue.gif) left 9px no-repeat;}

#tabShowBreakdown { height:25px; border-top:1px solid #1c4b7b; border-left:1px solid #1c4b7b; border-right:1px solid #1c4b7b; background:#00143f; }
#tabShowBreakdown .padding { padding: 0 21px; }
#tabShowBreakdown #projectStatus { float:left; padding-top:5px; color:#fff; font-weight:bold; }

#tabs.dashboard { width: 609px !important;  }
#tabs.dashboard ul.tabSet {  width: 585px !important;  }
#tabs.dashboard ul.tabSet li { float: left; display: block; margin: 0; border: none; padding: 0; }
#tabs.dashboard ul.tabSet li a { display: block; float: left; padding: 5px 14px 5px 14px; line-height: normal; color:#6c6c6c; text-decoration: none; border-right: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; }
#tabs.dashboard ul.tabSet li a:hover { background: #fff; border-right: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; color: #000; }
#tabs.dashboard ul.tabSet li.active a { background: #fff; border-right: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; color: #000; }
#tabs.dashboard .ui-tabs-hide { display: none; }
#tabs.dashboard .borderTop { border-top: 1px solid #d6d6d6; }
#tabs.dashboard .tabContent { padding: 0px 1px 1px 1px; background: #fff url(../images/layup/tabContentBg.gif) top left no-repeat;}
#tabs.dashboard .tabContent table thead th { background: url(../images/layup/theadBg.gif) center left repeat-x !important; padding: 6px 8px 6px 8px; font-weight: bold; }
#tabs.dashboard .tabContent table thead tr { background: none !important; }
#tabs.dashboard .tabContent tbody td { padding: 6px 8px 6px 8px; font-weight: bold; }
#tabs.dashboard .tabContent tbody td.userManagement { padding: 0px 8px 0px 8px; vertical-align:middle; font-weight: bold; }


/* ---- FORM POP UP ---- */

#overlay { width:100%; height:100%; z-index:999; background:url(../images/layup/overlay.png) repeat; position:absolute; top:0px; left:0px; }
#popupContainer { position: relative; z-index: 9999; width:780px;  margin: 0 auto; font-family: Arial, Helvetica, sans-serif; }
#popupContainer #popUpForm { z-index:999999; width:780px; position:absolute; top:221px; left:0px; background:url(../images/layup/formBg.gif) repeat-y left top; border-bottom:1px solid #cdcdcd; }
#popupContainer #popUpForm .headerBar { width:780px; height:31px; background:url(../images/layup/headerBg.gif) no-repeat left top; }
#popupContainer #popUpForm .headerBar ul { float:left; margin:0; padding:0px; }
#popupContainer #popUpForm .headerBar .closeIcon { float:right; margin:5px 6px 0 0; }
#popupContainer #popUpForm .headerBar ul li { float:left; list-style:none; margin:0px; padding:0px 30px; background:url(../images/layup/popUpArrow.gif) no-repeat right top; }
#popupContainer #popUpForm .headerBar ul li.last { background:none; padding-right:0px; }
#popupContainer #popUpForm .headerBar ul li a { display:block; text-transform:uppercase; color:#83a5be; text-decoration:none; font-size:11px; margin-top:4px; }
#popupContainer #popUpForm .headerBar ul li a span { display:block; padding-left:12px; background:url(../images/layup/popUpCross.gif) no-repeat left 6px; }
#popupContainer #popUpForm .headerBar ul li a.tick span { background:url(../images/layup/popUpTick.gif) no-repeat left 6px; display:block; }
#popupContainer #popUpForm .headerBar ul li a.active { color:#FFF; background:url(../images/layup/popUpActiveArrow.gif) no-repeat bottom center; padding-bottom:9px; }
#popupContainer #popUpForm .content { padding:10px 30px; }
#popupContainer #popUpForm .content p { font-family:Arial, Helvetica, sans-serif; color:#2b2b2b; padding-bottom:8px; }
#popupContainer #popUpForm .form { margin:0 2px; background:#ededed; width:776px; }
#popupContainer #popUpForm .form ul { background:url(../images/layup/headerBgGrey.gif) repeat-x left top; width:769px; padding:0 0 0 7px; margin:0px; height:25px; }
#popupContainer #popUpForm .form ul li { margin:0px; padding:3px 10px 0px; height:22px; font-size:11px; color:#000; list-style:none; float:left; }
#popupContainer #popUpForm .form ul li.active { font-weight:bold; border:1px solid #bfbfbf; border-width:1px 1px 0px; background:#FFF; }
#popupContainer #popUpForm .form form { padding:25px 0 0 25px; }
#popupContainer #popUpForm .form .item { padding:0 0 8px; }
#popupContainer #popUpForm .form label { width:265px; float:left; color:#2b2b2b; font-size:11px; font-family:Arial, Helvetica, sans-serif; }
#popupContainer #popUpForm .btns { padding:8px 10px 9px 27px; }
#popupContainer #popUpForm .btns .info { float:left; width:330px; }
#popupContainer #popUpForm .btns a { float:right; display:block; margin-top:5px; }
#popupContainer #popUpForm .btns .btnSend { display:block; width:95px; height:25px; background:url(../images/layup/btnSend.gif) no-repeat 0 -25px; margin-left:10px; }
#popupContainer #popUpForm .btns .inactive { background-position:0 0; }


.dateSmall { font-size:78%; color:#FFFFFF;}