/*  Quicksite CSS Definition  */

/* global reset */
* { padding: 0; margin: 0; }

/* body definition -> subtly masterful in its columny-ness */
body {
		 color: #6b717b;
		 background-color: #ffffff;
		 font: 100.01%/normal Verdana, Verdana, sans-serif;
		 padding-bottom: 10px;
}
#root font { font-size: inherit; font-family: Verdana, Verdana, sans-serif; }

/* elements
------------------------------------------------------------------------------*/

/* main header */
#top h2 { vertical-align: bottom; font-size: 0.9em; font-weight: normal; font-family: arial, sans-serif; padding: 0; margin: 0; height: 4.4em; background: #fff; float: left; width: 100%;  } /* reserved for #top - regular text inside it is the page title etc... */
#top h2 a { margin: 0 12px; color: #6b717b; }
#top h2 a, #top h2 a:visited { color: #6b717b; text-decoration: none; }
#top h2 a:hover, #top h2 a:active { text-decoration: none; } /* optional hover state */
#top h2 img { display: inline; margin: /*12px 0*/ 0; vertical-align: bottom; } /* site logo */
#top h2 #tagline { position: absolute; right: 0; bottom: 0; letter-spacing: 1px; } /* tagline in the header */

/* headers */
#content h1 { font-size: 1.4em; font-weight: lighter; margin: 0 0; line-height: 59px; clear: both; padding: 0 0 0 195px; color: #ffffff; background: #08185a url(/utils/template-bits/sdlc/gfx/subimage9.gif) no-repeat left top; } /* page title */
#content h2 { font-size: 1.1em; text-transform: uppercase; font-family: arial, sans-serif; letter-spacing: 1px; border-top: 1px solid #e7e7e7; color: #08185a; line-height: 1em; margin: 10px 10px 10px 0; padding: 6px 0;; }
#content h3 { font-size: 1em; text-transform: uppercase; font-family: arial, sans-serif; }
#content h4 { font-size: 1em; margin: 0 0 6px; } /* rarely get lower than this */

/* per page h1 backgrounds */

#content h1.careers { background-image: url(/images/f7JVLahQirG-sQTGBASs3ABV_9A_/2Edinburgh.jpg); }
#content h1.contact-us { background-image: url(/images/OmgEjp2cOzyue38hsb5ZB_BV_9A_/2Liverpool.jpg); }
#content h1.terms-of-use { background-image: url(/images/OmgEjp2cOzyue38hsb5ZB_BV_9A_/2Liverpool.jpg); }
#content h1.about-us { background-image: url(/images/qRzhSl0t64twyCFoLKSHs_BV_9A_/2Newcastle.jpg); }
#content h1.partners { background-image: url(/images/Oh6co90Gq90Tx-qYK7aR1_BV_9A_/2London.jpg); }
#content h1.sectors { background-image: url(/images/J9CB2w7GUhbEaNp3YBRGbCBV_9A_/2Blackpool.jpg); }
#content h1.latest-jobs { background-image: url(/images/f7JVLahQirG-sQTGBASs3ABV_9A_/2Edinburgh.jpg); }
#content h1.services { background-image: url(/images/EJrL_R_-aDF5BOjEQX6RS_BV_9A_/2Manchester.jpg); }
#content h1.news { background-image: url(/images/7pxY7GIGeXuF5Ll3V-Kr-BBV_9A_/2Glasgow.jpg); }
#content h1.training { background-image: url(/images/b5d0mu7ojJcls9c3lRb95_BV_9A_/2Telford.jpg); }
#content h1.compuware { background-image: url(/images/T1LWccphf9JuhWEht4iFm_BV_9A_/Compuware-Business-Partner.jpg); }
#content h1.site-map { background-image: url(/images/OmgEjp2cOzyue38hsb5ZB_BV_9A_/2Liverpool.jpg); }
#content h1.reference { background-image: url(/images/OmgEjp2cOzyue38hsb5ZB_BV_9A_/2Liverpool.jpg); }
#content h1.hewlett-packard { background-image: url(/images/ut9TRKrVQuzKTxh-yVBNn_BV_9A_/sof_silver_2C_horz_lg.jpg); }
#content h1.privacy-policy { background-image: url(/images/OmgEjp2cOzyue38hsb5ZB_BV_9A_/2Liverpool.jpg); }

/* block */
p { margin: 6px 0 12px 0; line-height: 1.4em; }
blockquote { margin: 0 0 12px; border-left: 1px solid #e7e7e7; padding: 0 0 1px 16px; line-height: 1.3em; font-family: georgia, serif; }
blockquote p {  }
address { font-style: normal; display: inline; line-height: 1.4em; }
pre { margin: 0 0 12px; border: 1px solid #999999; line-height: 1.4em; }


/* image */
img { display: block; border: 0; }

/* lists */
ul { list-style: disc outside; margin: 12px 12px 12px 22px; line-height: 1.4em; }
ul li { }
ul ul, #content ul ol { margin: 0 0;  }
ol { list-style: decimal-leading-zero outside; margin: 0; line-height: 1.4em; }
ol li { }
ol ol, #content ol ul { margin: 0 0; }
dl { margin: 0; line-height: 1.4em; }
dl dt { }
dl dd { }

/* inline */
span { }
acronym { }
abbr { border-bottom: 0; }
q { font-style: oblique; }
q:before, q:after { content: ''; }
em { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 0.8em; }
big { }
sub { }
sup { }
code, samp { font-family: monospace; }
kbd { font-family: monospace; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }

/* basic links */
a:link { color: #08185a; text-decoration: none; }
a:visited { color: #08185a; text-decoration: none; }
a:hover { color: #ff4d00; text-decoration: underline; }
a:active { color: #ff4d00; }

/* form controls */
form { }
form br { display: none; }
form fieldset { border: 0; width: auto; }
form fieldset fieldset { margin: 16px 0; }
form fieldset legend { color: #999; } /* display like an h1 or h2 */
form fieldset p { text-align: left; }
form fieldset fieldset legend { color: #000; }
form fieldset fieldset fieldset { } /* don't nest further than this */
form fieldset fieldset fieldset legend { }
form label { vertical-align: middle; font-size: inherit; }
form label br { display: inline; }
form input { font-family: inherit; font-size: inherit; vertical-align: middle; padding: 0; }
form button { width: auto; margin: auto; font-size: inherit; } /* usually the submit button or contains a link */
form select { font-family: inherit; width: auto; font-size: inherit; padding: 0; overflow: visible; }
form label input { font-family: inherit; font-size: inherit; vertical-align: middle; padding: 0; }
form label select { font-family: inherit; width: auto; font-size: inherit; padding: 0; }
form optgroup { padding-bottom: 0.5em; font-weight: bold; }
form option { padding: 0 1em 0 2px; font-weight: normal; font-size: inherit; width: auto; overflow: visible; }
form textarea { font-family: inherit; margin: 0 auto; display: block; font-size: inherit; }
form div input { font-family: inherit; font-size: inherit; vertical-align: middle; } /* typically the submit button */

/* good browsers, use this to add hover styles etc.. */
input[type="text"] { }
input[type="checkbox"] { width: auto; margin-left: 4px; }
input[type="password"] { }
input[type="submit"] { width: auto; }
input[type="file"] { }
input[type="reset"] { width: auto; }
input[type="image"] { width: auto; border: 0; }
input[type="radio"] { width: auto; margin-left: 4px; }
input[type="hidden"] { display: none; padding: 0; }

/* tables */
table { caption-side: top; margin: 0 auto 12px; width: 100%; font-size: 0.9em; }
table caption { text-align: left; padding: 1px 4px; font-weight: bold; font-size: 1em; color: #999; }
table colgroup th { speak-header: always; }
table rowgroup th { speak-header: once; }
table td, table th {  padding: 4px; }
table thead { }
table thead tr { }
table thead th { font-weight: normal; }
table thead td { }
table tbody { font-size: 0.9em; }
table tbody tr { }
table tbody th { /* font-weight: normal; background: #efefef; */ }
table tbody td { margin: 2px; /* background: #efefef; */ }
table tbody .odd td { background: #efefef; }
table tbody .even td { background: #fff; }
table tfoot { font-size: 0.9em; }
table tfoot tr { }
table tfoot th { }
table tfoot td { }
table td.ra { text-align: right; }
table td.ca { text-align: center; }
table.images { border: 0; border-collapse: collapse; }
table.images td { text-align: center;  }
table.images td img { display: inline; margin: 0 auto; }

/* utility belt
------------------------------------------------------------------------------*/
.fl-l { float: left; margin: 0 8px 8px 0; display: inline; }
.fl-r { float: right; margin: 0 0 8px 8px; display: inline; }
.cb { clear: both; }
hr { display: none; }


/* multi-use class names that appear on multiple page types
------------------------------------------------------------------------------*/
#content .body { font-size: 0.7em; margin: 16px 16px 16px 176px; padding: 0 2px 0 18px; } /* container for FCKin editor's output */
#home #content .body { font-size: 0.7em; margin: 0; padding: 2px 2px 2px 8px; }
/* smaller text requested */
#root #content .body { font-size: 0.6em; }

.body ul { position: relative; list-style: disc outside; margin: 12px 12px 12px 22px; }
/* #content .body table * { background: none; } */

.breadcrumbs { font-size: 0.75em; position: relative; }
.breadcrumbs a { color: #999; }
.breadcrumbs a:visited { color: #999; }
.breadcrumba a:hover { color: #990000; }
.breadcrumba a:visited:hover { color: #990000; }

/* special links */
.more-link { }
.archive-link { }
.register { }

/* spotlight links */
.spotlight-links { }
.spotlight-links h3 { font-size: 0.6em; color: #08185a; margin: 2px 0 0; padding: 3px 12px; border-top: 1px solid #b5babd; letter-spacing: 1px; text-transform: uppercase; font-family: arial, sans-serif }
.spotlight-links .link { font-size: 0.7em; padding-top: 2px; border-top: 1px solid #b5babd; }
.spotlight-links .link span { display: block; margin: 8px 12px 12px; }
.spotlight-links .link a { color: #6b717b; }
.spotlight-links .link a:hover { color: #08185a; }

/* latest-jobs links */
.latest-jobs { }
.latest-jobs h3 { font-size: 0.6em; color: #08185a; margin: 2px 0 0; padding: 3px 12px; border: 1px solid #b5babd; border-width: 1px 0; letter-spacing: 1px; text-transform: uppercase; font-family: arial, sans-serif }
.latest-jobs .link { font-size: 0.7em; padding-top: 2px; }
.latest-jobs .link span { display: block; margin: 8px 12px 2px; }
.latest-jobs .link a { color: #6b717b; }
.latest-jobs .link a:hover { color: #08185a; }


/* gallery on page/product */
.gallery { clear: both; text-align: center; overflow: hidden; }
.gallery { padding: 0 8px 8px 0; }
.gallery a { margin: 8px 0 0 8px; display: inline; width: auto; }
.gallery a:hover { }
.gallery img { display: inline; margin: 0 auto; width: 100px; }
.gallery a img { }
.gallery a:hover img { }

/* the category block attached to a page/index */
.category {  }

/* definition list for product info */
.item-info { display: block; margin-bottom: 12px; } /* dl */
.item-info .price { color: #990000; } 
.item-info .value { color: #990000; font-weight: bold; font-size: 110%; }
.item-info .min-qty { color: #999; }
.item-info .min-val { color: #999; }

/* item options in the baskets */

/* definition list for account info */
.account-info { } /* dl for main account details */
.account-info dt { }
.account-info dt label { }
.account-info dt input { }
.account-info dd { }
.account-info dd label { }
.account-info dd input { }
.account-info dd select { }

/* product lists */
.product-list { clear: both; overflow: hidden; list-style: none; margin: 12px 0 0 0; padding: 0; text-align: center; }
.product-list li { float: left; width: 48%; padding: 14px 0; margin: 0 1% 12px 0; font-size: 0.8em; }
.product-list li.odd { clear: left; }
.product-list li.even { margin: 0 0 12px 1%; float: right; clear: right; }
.product-list h3 { margin: 0; padding: 0; line-height: 1em; font-size: 1.1em; height: 2.1em; }
.product-list li>h3 { min-height: 2.2em; height: auto; }
.product-list h3 a { float: none; }
.product-list a { display: inline; } /* the link surrounding the image */
.product-list a img { padding: 0; margin: 4px auto; }
.product-list .excerpt { margin: 0 0 10px 0; color: ; }
.product-list .excerpt * { margin: 0; line-height: 0.8em; }
.product-list a.more-info { display: inline; font-weight: bold; color: #000; width: 109px; height: 26px; text-decoration: none; text-align: center; vertical-align: middle; }
.product-list a.more-info img { margin: 0; display: inline; vertical-align: middle; }
.product-list a.more-info:hover { color: #000; text-decoration: none; }
.product-list .item-info { text-align: center; overflow: hidden; padding: 8px 0; }
.product-list .item-info * { display: inline; margin: 0; padding: 0; }
.product-list .item-info dt { text-align: right; padding: 0 0 0 12px; }
.product-list .item-info dd { text-align: left; padding: 0 12px 0 0; }
.product-list .item-info .price { color: #990000; } 
.product-list .item-info .value { color: #990000; font-weight: bold; font-size: 110%; }
.product-list .item-info .min-qty { color: #999; }
.product-list .item-info .min-val { color: #999; }
.product-list .item-info abbr { border-bottom: 0; text-decoration: none; }
.product-list .item-options * { vertical-align: middle; } /* options like quantity, add to basket/faves */
.product-list form { margin: 0; padding: 0; display: inline; vertical-align: middle; }
.product-list form * { vertical-align: middle; width: auto; float: none; clear: none; display: inline; }
.product-list form label { margin: 0 6px 0 0; display: inline; }
.product-list form>label { margin: 0; }
.product-list form label abbr { }
.product-list form label input { text-align: center; font-size: 0.9em; padding: 1px; }
.product-list form button { padding: 0 0 1px; margin: 0; line-height: 1em; display: inline; }
.product-list form button img { margin: 1px 1px 0; }
.product-list form button { font-size: 0.8em; }

/* related lists */
.related-items .product-list ul { list-style: none outside;  }
.related-items .product-list li { float: left; width: 49%; overflow: hidden; }
.related-items .product-list h3 { }
.related-items .product-list a, .related-items .product-list a:visited { }
.related-items .product-list a:hover, .related-items .product-list a:active { }
.related-items .product-list img { width: 100px; }
.related-items .product-list .highlight { } /* highlight a related */
.related-items .product-list p { } /* the excerpt */
.related-items .product-list .more-link { }
.related-items .product-list .item-info { clear: both; }
.related-items .product-list .item-info a { }
.related-items .product-list .item-info a:visited { }
.related-items .product-list .item-info a:hover { }
.related-items .product-list .item-info a:active { }
.related-items .product-list .item-info { }
.related-items .product-list form {  }
.related-items .product-list form label { } /* quantity label */
.related-items .product-list form input { }
.related-items .product-list form button { } /* add to basket button */

/* attached document link */
.document { } /* thinking of using a button */
.document:hover { } /* if .document is a link itself */
.document a { } /* if button contains the link */
.document a:hover { }

/* pagination */
.pagination { float: left; width: 100%; padding: 6px 0; margin: 6px 0; }
.pagination p { margin: 0; float: left; }
.pagination div { display: inline; }
.pagination .per-page { float: left; clear: left; }
.prev { float: right; margin-right: 12px; }
/*.prev a { text-decoration: underline; }
.prev a:hover { text-decoration: none; color: #900; }
.prev a:visited { color: #999; }
.prev a:visited:hover { color: #900; }*/
.next { float: right; }
/*.next a { text-decoration: underline; }
.next a:hover { text-decoration: none; color: #900; }
.next a:visited { color: #999; }
.next a:visited:hover { color: #900; }*/

/* messages */
#content .msg  { margin: 0 0 12px 0; }
#content .msg .body { margin: 0; }
#content .msg h3 { margin: 0; padding: 4px 0; }
#content .msg p { margin: 0; padding: 0; }
.success { background: url(/utils/template-bits/gfx/silky/accept.png) no-repeat right 0; }
.error { background: url(/utils/template-bits/gfx/silky/error.png) no-repeat right 0; }
.info { background: url(/utils/template-bits/gfx/silky/information.png) no-repeat right 0; }
.success h3 { color: #008000; }
.error h3 { color: #d40000; }
.info h3 { color: #0045ff; }


/* site-wide elements 
------------------------------------------------------------------------------*/
#logo { } /* this image should be in the markup */
#banner { margin: 0; clear: left; } /* this image will most likely go in the CSS as a background */
#tagline { }
#copyright { } /* in the footer */

#extra { } /* some variability across pages */

/* column layouts - ids and classes 
------------------------------------------------------------------------------*/

/* home page layout over-rides */
#home #top { }
#home #layout { background-image: none; overflow: hidden; }
#home #content-wrapper { }
#home #content { }
#home #secondary-content { padding-bottom: 30000px; margin-bottom: -30000px; }
#home #tertiary-content { }

#root { margin: 0; width: 783px; text-align: left; }
#top { width: auto; float: left; width: 614px; position: relative; }
#layout { float: left; padding-top: 0; margin-top: 0; width: 100%; clear: both; background: url(/utils/template-bits/sdlc/gfx/faux-col.gif) repeat-y; } /* faux-column, repeated background etc.. layout tool \*/
#content-wrapper { clear: both; }
#content { clear: both; padding: 0 10px 8px 8px; float: left; width: 605px; } /* used with #content to create alternative layouts \*/
#secondary-content { background: #e7e7e7; } /**/
#tertiary-content { display: none; } /* for three column layouts or footer section navigation */
#footer { width: 775px; clear: both; position: relative; }

.clear { margin: 1px; clear: both; float: left; }

/* sdlc specific */
#quick-links { float: right; width: 160px; height: 4.5em; padding: 0; background: #e7e7e7; border-bottom: 2px solid #ffffff; }
#quick-links select { margin: 6px 8px 0 8px; width: 144px; font-size: 0.6em; }

/* alternators, default to 200px width columns */
.sidebar-left #content-wrapper { width: 100%; float: right; margin-left: -180px; }
.sidebar-left #content { margin-left: 180px; }
.sidebar-left #secondary-content { clear: left; float: left; width: 180px; }
.sidebar-left #tertiary-content { clear: left; float: left; width: 180px; }

.sidebar-right #content-wrapper { width: 100%; float: left; margin-right: -160px; }
.sidebar-right #content { margin-right: 160px; }
.sidebar-right #secondary-content { clear: right; float: right; width: 160px; }
.sidebar-right #tertiary-content { clear: right; float: right; width: 160px; display: none; }

.three-column #content-wrapper { float: left; width: 100%; }
.three-column #content { margin: 0 160px 0 160px; }
.three-column #secondary-content { float: left; width: 160px; margin-left: -100%; }
.three-column #tertiary-content { float: left; width: 160px; margin-left: -160px; }

.no-sidebar { }
.no-sidebar #secondary-content { float: none; clear: both; }
.no-sidebar #tertiary-content { float: none; clear: both; }

/* This only works in good browsers so far but removes the primary page nav from the sidebar to a horizontal nav */
.tab-nav div[id="layout"] { position: relative; padding-top: 3em; }
.tab-nav ul[id="page-nav"] { position: absolute; top: 0; left: 0; width: 100%; line-height: 3em; text-align: center; }
.tab-nav ul[id="page-nav"] {  }
.tab-nav ul[id="page-nav"] .title { position: absolute; left: -999em; }
.tab-nav ul[id="page-nav"] li { float: left; display: block; white-space: normal; }
.tab-nav ul[id="page-nav"] a { float: left; display: block; }

.secondary-left #secondary-content { clear: right; float: none; width: auto; margin: 0 -200px 0 -400px; padding: 0 200px; }
.secondary-right #secondary-content { clear: left; float: none; width: auto; margin: 0 200px 0 -200px; padding: 0 0 0 200px; }

/* navigation - all uls
------------------------------------------------------------------------------*/
li.title { list-style: none outside;  } /* contains an h3 with the menu title in it */
li.title h3 { margin: 0; padding: 0; }

#top-nav { float: right; padding: 8px 0 0; margin: 0 0 -2em 160px; font-size: 0.6em; font-family: arial; text-transform: uppercase; font-weight: bold; list-style: none; position: relative; z-index: 4;  } /* links in top-menu category including home page link */
#top-nav li { float: left; margin: 0 -1px 0 0; padding: 0 0 0 16px; display: inline; }
#top-nav li strong { }
#top-nav li a { color: #b5babd; text-decoration: none; }
#top-nav li a:visited { color: #b5babd; }
#top-nav li a:hover { color: #ff4d00; }
#top-nav li a:active { color: #ff4d00; }

/* feeds */
.feeds { list-style: none; margin: 0; padding: 8px 12px; font-size: 0.6em; }
.feeds li { margin: 0; padding: 0; display: block; background: url(/utils/template-bits/icons/feed-icons/default/images/png/feed-icon-12x12.png) no-repeat left top; }
.feeds small { font-size: 0.8em; }
a.feed { color: #ff9e39; padding-left: 15px; text-transform: uppercase; font-family: arial; }
a.feed:hover { color: #ff9e39; text-decoration: underline; }

#login-box li.feed { list-style: none; margin-left: -16px; padding-bottom: 2px; background: url(/utils/template-bits/icons/feed-icons/default/images/png/feed-icon-12x12.png) no-repeat left top; }
#login-box li.feed a { color: #ffffff; padding-left: 17px; text-transform: uppercase; font-family: arial; }
#login-box li.feed a:hover { color: #ffffff; text-decoration: underline; }

/* general sub-lists styling for drop down etc..
** this is the top nav version of the template coz IE couldnt handle my awesome css techniques (.tab-nav above)) */
#main-nav { width: 605px; float:left; background: #737d84; }

#secondary-nav { float: left; width: 150px; margin: 0 0 0; border-top: 4px solid #ffffff; padding: 2px 0; background: #e7efef; } /* container for cat-nav + sub-pages in a pseudo sidebar */

#secondary-nav ul { margin: 0; padding: 0; list-style: none; font-size: 0.7em; }
#secondary-nav ul li { margin: 0 1px 1px; display: inline; float: left; width: 148px; clear: left; }
#secondary-nav ul li a { float: left; width: 142px; display: block; margin: 0; padding: 4px 3px 5px; line-height: 1.1em; background: #ffffff; color: #6b717b; }
#secondary-nav ul li.location a { background: #6b717b; color: #ffffff; }
#secondary-nav ul li a:hover, #secondary-nav ul li.location a:hover { background: #ff4d00; color: #ffffff; text-decoration: none; }
#secondary-nav li.title { margin: 0; width: 150px; }
#secondary-nav li.title h3 { padding: 3px 12px; margin: 0; border-top: 1px solid #6b717b; font-family: arial, sans-serif; letter-spacing: 1px; font-size: 0.9em; }
#secondary-nav ul ul { font-size: 1em; margin: 0; }
#secondary-nav ul ul li { margin: 1px 0 0; }
#secondary-nav ul ul li a { padding: 4px 3px 5px 12px; width: 133px; background: #ffffff; color: #6b717b; }
#secondary-nav ul ul li a:hover { background: #ff4d00; color: #ffffff; text-decoration: none; }
#secondary-nav ul ul li.location a { background: #6b717b; color: #ffffff; }
#secondary-nav li.location ul li { margin: 1px 0 0; }
#secondary-nav li.location ul li a { padding: 4px 3px 5px 12px; width: 133px; background: #ffffff; color: #6b717b; }
#secondary-nav li.location ul li a:hover { background: #ff4d00; color: #ffffff; text-decoration: none; }

#redundant-nav { float: right; list-style: none; font-size: 0.6em; width: 160px; border-top: 4px solid #6b717b; margin: -2px 0 0; padding: 12px 0 3px; } /* links in the redundant category i.e. those in the footer */
#redundant-nav li { width: 80px; }
#redundant-nav li.odd { float: left; clear: left; }
#redundant-nav li.even { float: right; clear: right; border-left: 1px solid #e7e7e7; margin-left: -1px; text-align: right; }
#redundant-nav li a { color: #b5babd; }
#redundant-nav li a:visited { color: #b5babd; }
#redundant-nav li a:hover { color: #ff4d00; text-decoration: underline; }
#redundant-nav li a:active { color: #ff4d00; }

#cat-nav { margin: 0; padding: 12px; list-style: none; font-size: 0.75em; } /* categories navigation */
#cat-nav li { border: solid #999; border-width: 0 0 1px; line-height: normal; }
#cat-nav li.title { border-width: 0 0 1px; margin: 0; padding: 0; width: 100%; }
#cat-nav li.title h3 { position: absolute; top: -999em; line-height: 0; font-size: 0; }
#cat-nav li.title h3 a { display: block; text-indent: 0; height: auto; padding: 4px; }
#cat-nav li a { display: block; width: auto; background: none; margin: 0; padding: 2px 4px; line-height: 1.3em; }
#cat-nav li a:visited { color: #666; }
#cat-nav li a:hover { background: #eee; color: #990000; }
#cat-nav li a:active { }
#cat-nav li.location a { background: #eee; }
#cat-nav ul {  } /* sub-nav lists, dropdown when not in #main-nav */
#cat-nav ul li {  }
#cat-nav ul li a { }
#cat-nav ul li a:visited { }
#cat-nav ul li a:hover { }
#cat-nav ul li a:active { }
/* fixes for the dunce */
* html #cat-nav li a { padding: 1px 4px 3px; }

#prod-nav { } /* could be useful... */

#page-nav { overflow: hidden; width: 605px; font-size: 0.6em; font-weight: bold; font-family: arial; text-transform: uppercase; margin: 0; padding: 0; text-align: center; list-style: none; } /* page navigation */
#page-nav li { float: left; padding: 0 6px; margin: 0; line-height: 24px; background: #737d84; }
#page-nav li.title { position: absolute; top: -999em; display: block; }
#page-nav li.title h3 { /*position: absolute; top: -999em; display: block;*/ }
#page-nav li a { display: block; padding: 0 6px; line-height: 24px; text-decoration: none; }
#page-nav li a:link { color: #e7e7e7; background: #737d84; }
#page-nav li a:visited { color: #e7e7e7; text-decoration: none; }
#page-nav li a:hover { color: #ffffff; background: #ff4d00; }
#page-nav li a:active { color: #ffffff; background: #ff4d00; }
#page-nav li.location a { color: #ffffff; background: #ff4d00; }
#page-nav ul { } /* sub-nav lists, dropdown when not in #main-nav */
#page-nav ul li { }
#page-nav ul li a { }
#page-nav ul li a:visited { }
#page-nav ul li a:hover { }
#page-nav ul li a:active { }

#gallery-nav { } /* list of the galleries */
#gallery-nav li { }
#gallery-nav li.title { }
#gallery-nav li a { }
#gallery-nav li a:visited { }
#gallery-nav li a:hover { }
#gallery-nav li a:active { }

/* line-height: inherit doesn't work in ie7 */
#site-map #content h2 { margin: 0 0 0 -16px; }
#site-map .sm-pages { margin: 0 18px 16px 18px; padding: 0; }
#site-map .sm-pages li.title { position: static; left: 0; }
#site-map .sm-cats { margin: 0 18px 16px 18px; padding: 0; }
#site-map .sm-cats li.title { position: static; left: 0; }
#site-map .sm-links { margin: 0 18px 16px 18px; padding: 0; }
#site-map .sm-links li.title { position: static; left: 0; }
#site-map .sm-pages ul, #site-map .sm-cats ul, #site-map .sm-links ul { padding: 3px 12px 4px; }

#tertiary-content .closed ul { position: absolute; left: -999em; } /* if we decide to write out all the sub lists hide them */
#tertiary-content .open ul { display: block; } /* display the appropriate one, useful for pages */

#content .account-links { text-align: center; font-size: 0.7em; }
#content .account-links li { display: inline; }
#content .account-links li a { padding: 2px 3px; }

#footer-nav { list-style: none; float: left; width: 605px; font-size: 0.6em; margin: 0; padding: 12px 0 3px; border-top: 2px solid #6b717b; }
#footer-nav li { float: left; padding: 0 12px 0 0; }
#footer-nav li.title { position: absolute; left: -9999px; }

/* home page specific 
------------------------------------------------------------------------------*/
#home-links { padding: 6px 0 1px; margin: 0; }
#home-links a { display: inline; margin: 0; padding: 0; } /* links in the home page category - template specific markup? */
#home-links img { margin: 0; padding: 0; display: inline; }
#home #category { } /* the category attached to the home page */
#home #top-nav { margin-left: 0; }
#home .category { float: left; width: 50%; }
#home .category li { float: none; width: auto; clear: both; }
#home .category li img { width: 80px; }
#home .articles { float: right; width: 49%; }
#home .articles li img { width: 80px; }

#home #content .category-link { float: left; width: 390px; }
#home #content .home-text { float: left; width: 390px; clear: left; margin: 1px 0; }
#home #content .home-text h1 { background: none; color: #08185a; font-size: 0.75em; font-family: arial, sans-serif; margin: 0; padding: 0 8px; line-height: normal; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; border: solid #e7e7e7; border-width: 0 0 1px; line-height: 28px; }
#home #content .news-text { margin: 1px 0 1px 399px; }
#home #content .news-text h2 { margin: 0; border: solid #e7e7e7; border-width: 0 0 1px 1px; padding: 0 22px; font-size: 0.7em; color: #6b717b; line-height: 28px; }


/* pages 
------------------------------------------------------------------------------*/
#page .body { } /* need this to float: left; if there is a gallery or category attached */

#page .gallery { padding: 0 8px 8px 0; clear: both; width: 100%; }
#page .gallery a { margin: 8px 0 0 8px; text-align: center; }
#page .gallery a:hover { }
#page .gallery img { display: inline; margin: 0 auto; }
#page .gallery a img { }
#page .gallery a:hover img { }

#page .category { float: right; clear: right; width: 49%; }
#page .category .product-list { }
#page .category .product-list li { overflow: hidden; float: none; width: auto; clear: left; }
#page .category .product-list li img { width: 80px; }
#page .document { }

#page .child-nav { } /* selected page child links only */
#page .child-nav li { }

/* category
------------------------------------------------------------------------------*/
#category .body { }

#category .sub-category-list { list-style: none outside; }
#category .sub-category-list li { }
#category .sub-category-list li h3 { }
#category .sub-category-list li p { } /* short desc */

#category .product-list { }
#category .product-list li { }
#category .product-list input { }
#category .product-list button { }

/* single products / services
------------------------------------------------------------------------------*/
#product .body {  }
#product #content img { float: right; margin: 0 0 8px 16px; }
#product .cat-link { } /* back to the list of products */

/* product details on single product page */
.product-details {  }
.product-details table { border-collapse: separate; clear: both; font-size: 0.8em; } /* the quantity discounts */
.product-details thead { }
.product-details thead tr { }
.product-details thead th { background: ; color: ; }
.product-details thead td { }
.product-details tbody { }
.product-details tbody tr { }
.product-details tbody th { }
.product-details tbody td { }
.product-details .item-info { float: left; width: 100%; margin: 0; display: block; padding: 16px 0; }
.product-details .item-info dt { float: left; width: 40%; clear: left; font-size: 0.8em; font-weight: bold; }
.product-details .item-info dd { float: left; width: 55%; font-size: 0.9em; }
.product-details .item-info .price { margin: 8px 0 0; line-height: 26px; }
.product-details .item-info .value { margin: 8px 0 0; line-height: 26px; }

#product .item-options { vertical-align: middle; text-align: center; }
#product .item-options h3 { text-align: center; font-size: 90%; }
#product .item-options form { display: inline; }
#product .item-options form * { vertical-align: middle; display: inline; }
#product .item-options form label { font-size: 0.9em; }
#product .item-options form input { text-align: center; }

#product .gallery { } /* gallery attached to product */
#product .gallery a { }
#product .gallery img { }

#product .document { }
#product img { }


/* list of news articles
------------------------------------------------------------------------------*/
.articles { clear: right; }
.articles li { clear: both; }
.headline { }
.strapline { font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
.articles .date { }
.articles img { }
.articles p { } /* excerpt */
.articles .more-link { }

/* if anything needs altering in news view*/
#news #content .body { margin: 0; }
#news .articles { margin: 0 18px 0 176px; padding: 0; }
#news .articles ul { float: none; width: auto; margin: 0; padding: 0 0 0 18px; list-style: none; } /* list of */
#news .articles li { padding: 0 0 16px; margin: 0 0 32px; clear: none; border-bottom: 1px solid #e7e7e7; }
#news .articles li .headline { font-size: 0.9em; margin: 0; font-family: Arial,sans-serif; text-transform: none; }
#news .articles li .strapline { margin: 8px 0; padding: 0 0 1px; font-size: 0.7em; letter-spacing: 1px; line-height: 1.2em; font-weight: bold; text-transform: uppercase; }
#news .articles li .date { font-size: 0.6em; }
#news .articles li img { width: 80px; }
#news #content .articles li .body { margin-left: 0; line-height: 1.4em; }

/* single news item
------------------------------------------------------------------------------*/
#content .article { margin: 16px 0 16px 176px; padding: 1px 0; }
#content .article .headline { font-size: 0.9em; margin: 0 18px; font-family: arial,sans-serif; text-transform: none; }
#content .article .strapline { margin: 8px 18px; padding: 0 0 1px; font-size: 0.7em; letter-spacing: 1px; font-weight: bold; text-transform: uppercase;}
#content .article .date { margin: 0 18px; font-size: 0.6em; }
#content .article img { float: right; display: block; margin: 0 18px 6px; }
#content .article .pagination { margin: 0 18px; }
#home .article { margin: 12px 0; border-left: 1px solid #e7e7e7; padding: 0 10px 10px; }
#home .article .headline { margin: 0 12px 8px; padding: 0 0 1px; font-size: 0.9em; text-transform: none; }
#home .article .strapline { margin: 0 12px 8px; padding: 0 0 1px; font-size: 0.7em; text-transform: uppercase; }
#home #content .article .body { margin: 0 12px 8px; padding: 0 0 1px; line-height: 1.4em; }
#home .article p { margin: 0 12px; font-size: 0.7em; } /* the further info link */

#news .back { margin-left: 176px; padding: 0 18px; font-size: 0.8em; }

/* list of galleries - w sample or just links
------------------------------------------------------------------------------*/
#gallery .gallery-list { clear: both; } /* ul, ol or if you like headaches dl */
#gallery .gallery-list ul { clear: both; overflow: hidden; }
#gallery .gallery-list li { float: left; width: 49%; text-align: center; display: block; }
#gallery .gallery-list li h2 { text-align: left; clear: left; } /* title is a link to each gallery */
#gallery .gallery-list h2 a, #gallery .gallery-list h2 a:visited { }
#gallery .gallery-list h2 a:hover, #gallery .gallery-list h2 a:active { }
#gallery .gallery-list li p { margin-bottom: 16px; text-align: left; }
#gallery .gallery-list li a { }
#gallery .gallery-list li img { display: inline; /*max-width: 140px; min-width: 80px; width: 25%;*/ width: 80px; margin: 0 auto; }


/* single gallery specific styles
------------------------------------------------------------------------------*/
#gallery .desc { } /* either in a div or <p> */

#gallery .thumbs { clear: both; text-align: center; }
#gallery .thumbs a { display: inline; padding: 0; }
#gallery .thumbs img { display: inline; width: 120px; }
#gallery .thumbs .pagination { float: left; width: 100%; clear: both; }
#gallery .thumbs .prev { }
#gallery .thumbs .next { }
#gallery .thumbs .prev a, #gallery .thumbs .prev a:visited { }
#gallery .thumbs .prev a:hover, #gallery .thumbs .prev a:active { }
#gallery .thumbs .next a, #gallery .thumbs .next a:visited { }
#gallery .thumbs .next a:hover, #gallery .thumbs .next a:active { } 

#gallery .slideshow { }
#gallery .slideshow .frame { } /* layout of the frame */
#gallery .slideshow .top { } /* outer div */
#gallery .slideshow .bottom { } /* inner div */
#gallery .slideshow .current { }
#gallery .slideshow .caption { }
#gallery .slideshow .pagination { } 
#gallery .slideshow .prev { } 
#gallery .slideshow .next { }
#gallery .slideshow .prev a, #gallery .slideshow .prev a:visited { }
#gallery .slideshow .prev a:hover, #gallery .slideshow .prev a:active { }
#gallery .slideshow .next a, #gallery .slideshow .next a:visited { }
#gallery .slideshow .next a:hover, #gallery .slideshow .next a:active { }

#gallery #view-mode { clear: both; } /* a set of links to control view mode */
#gallery #view-mode ul { }
#gallery #view-mode li { }
#gallery #view-mode .thumbs-link { } /* link to thumbnail view */
#gallery #view-mode .thumbs-link a { }
#gallery #view-mode .slideshow-link { } /* link to slideshow view */
#gallery #view-mode .slideshow-link a { }

#gallery .order-link { }
#gallery .order-link a { }

#intranet .body { float: right; margin: 0; width: 412px; padding: 1px 0; }

/* contacts-list */
.contacts-list { padding: 1px 0; }
.contacts-list .pagination { }
.contacts-list ul { float: left; width: 100%; list-style: none; margin: 8px 0; padding: 1px 0; border-bottom: 1px solid #6b717b; }
.contacts-list li { clear: both; float: left; padding: 6px 0; width: 100%; border-top: 1px solid #6b717b; overflow: hidden; } /* vcards */
.contacts-list li.alt { background: #e7e7e7; }
.contacts-list li h4 { font-size: 120%; margin: 0; padding: 0 6px; }
.contacts-list li .photo { float: right; margin: -1em 6px -80px -86px; display: inline; }
.contacts-list li .logo { float: right; margin: -1em 6px -80px -86px; display: inline; }
.contacts-list dl { padding: 0; margin: 0; overflow: hidden; line-height: 18px; }
.contacts-list dt { float: left; width: 26%; clear: both; text-align: right; font-style: italic; padding: 1px 8px; }
.contacts-list dd { float: left; width: 67%; text-align: left; padding: 1px 0 1px 2%; }

/* jobs-list */
.jobs-list .pagination { padding: 6px 0; margin: 6px 0; clear: both; }
.jobs-list ul { position: static; float: left; width: 100%; list-style: none; clear: both; margin: 8px 0; padding: 1px 0; border-bottom: 1px solid #6b717b; }
.jobs-list li { padding: 6px 0; float: left; width: 100%; border-top: 1px solid #6b717b; clear: both; text-align: left; } /* vcards */
.jobs-list li.alt { background: #e7e7e7; }
.jobs-list li h4 { font-size: 120%; margin: 0; padding: 0 6px; text-align: left; }
.jobs-list li .logo { float: right; margin: -1em 6px 1.2em -86px; display: inline; }
.job-details { padding: 0; margin: 0; overflow: hidden; line-height: 18px; }
.job-details dt { float: left; width: 26%; clear: both; text-align: right; padding: 1px 8px; font-style: italic; }
.job-details dd { float: left; width: 67%; text-align: left; padding: 1px 0 1px 2%; }
dd p { margin: 0 0 5px; padding: 0 0 1px; line-height: 18px; }

/* documents-list */
.documents-list {  }
#intranet .documents-list .pagination { font-size: 1em; padding: 6px 0; margin: 6px 0; }
.documents-list ul { list-style: none; float: left; width: 100%; margin: 8px 0; padding: 1px 0; border-bottom: 1px solid #6b717b; }
.documents-list li { padding: 6px; display: block; border-top: 1px solid #6b717b; } /* vcards */
.documents-list li.alt { background: #e7e7e7; }
.documents-list li h4 { font-size: 120%; margin: 0; padding: 0 0; }
.documents-list li .photo { float: right; margin: -1em 6px 1.2em -86px; display: inline; }

.vcard .photo { float: right; margin: -1em 6px 1.2em -86px; display: inline; }
.user-details { padding: 1px 0; margin: 0; overflow: hidden; line-height: 18px; }
.user-details dt { float: left; width: 26%; text-align: right; clear: both; font-style: italic; padding: 1px 8px; }
.user-details dd { float: left; width: 67%; text-align: left; padding: 1px 0 1px 2%; }
.manage { padding: 6px 0 2px; text-align: right; clear: both; }

/* search results
------------------------------------------------------------------------------*/
.search-results { } /* containing div */
.search-results ul { }
.search-results li { }
.search-results img { }
.search-results h3 { }
.search-results p { }
.search-results .more-link { }

/* forms - try to limit it to padding + fonts, form control styling isn't well
/* supported in IE 
------------------------------------------------------------------------------*/

.required { font-size: 1em; color: #ff4d00; float: right; display: block; margin-top: 0.8em; width: 22%; text-align: center; }
* html .required { margin-top: 0.5em; }

/* login form */
#login-box { margin: 32px 0 12px; padding: 0 0 8px; color: #6b717b; background: #b5babd; border: solid #b5babd; border-width: 1px 0; }
#login-box h3 { font-size: 0.6em; text-transform: uppercase; padding: 3px 12px; margin: 2px 0; font-weight: normal; letter-spacing: 1px; color: #08185a; border: solid #e7e7e7; border-width: 1px 0; }
#login-box ul { font-size: 0.7em; margin: 0; padding: 8px 12px; margin: 0 0 0 12px; } /* regislation and forgot links */
#login-box ul a:link { color: #ffffff; }
#login-box ul a:visited { color: #ffffff; }
#login-box ul a:hover { color: #ffffff; text-decoration: underline; }
#login-box ul a:active { color: #ffffff; }

#login-form { font-size: 0.7em; }
#login-form label { display: block; padding: 2px 12px; clear: both; }
#login-form label span { padding: 0 0 3px; text-transform: uppercase; font-size: 0.8em; display: block; }
#login-form input#username { width: 132px; padding: 1px; border: 1px solid #e7e7e7; border-top-color: #6b717b; border-left-color: #6b717b; }
#login-form input#password { width: 132px; padding: 1px; margin-bottom: 6px; border: 1px solid #e7e7e7; border-top-color: #6b717b; border-left-color: #6b717b; }
#login-form label.remember-user { clear: both; float: left; width: 104px; padding: 2px 0 2px 12px; }
#login-form label.remember-user span { display: inline; width: auto; padding: 0; margin: 0; }
#login-form label.remember-user input { border: 0; padding: 0; display: inline; width: auto; }
#login-form div { margin: -1px 12px 0 0; text-align: right; float: right; display: inline; }
#login-form div input { padding: 1px; text-transform: uppercase; }

/* login box error message */
#login-box .msg { padding: 0; margin: 0; font-size: 0.6em; }
#login-box .msg h4 { margin: 0; padding: 8px 12px 0; font-size: 1em; border: 0; color: #990000; }
#login-box .msg p { margin: 0; padding: 4px 12px 8px; }

#search { font-size: 0.6em; }
#search h3 { padding: 3px 12px; margin: 0; border-top: 1px solid #6b717b; font-family: arial, sans-serif; letter-spacing: 1px; font-size: 0.9em; }
#search label { display: block; width: auto; padding: 1px; width: 148px; text-align: center; }
#search label span { position: absolute; top: 0; left: -999em; }
#search label input { width: 140px; padding: 1px 2px; font-size: 1.1em; border: 1px solid #e7e7e7; border-top-color: #6b717b; border-left-color: #6b717b; }
#search div { text-align: center; padding: 4px 0; }
#search div input { font-size: 1em; text-transform: uppercase; padding: 1px; }
#search button { width: 32px; vertical-align: middle; }


/* contact form */
#contact-form { margin: 0 0; padding: 0 0 0 18px; }
#contact-form fieldset { padding: 0; }
#contact-form .checkboxes { }
#contact-form .checkboxes label { display: inline; }
#contact-form .checkboxes input { width: auto; }
#contact-form legend { }
#contact-form label { display: block; padding: 5px 0; }
#contact-form label input { width: 75%; padding: 1px; margin-top: 1px; font-size: 1.2em; }
#contact-form textarea { width: 98.5%; height: 8em; margin: 2px 0; padding: 1px; font-size: 1.1em; }
#contact-form .short input { }
#contact-form div { text-align: right; }
#contact-form div input { width: auto; }

* html #contact-form input { margin-top: 0; }
* html #contact-form div input { font-size: 1em; }

/* fieldset ids for contact / enquiry */
#details { }
#contact-method { } /* only contains radio butts */
#address { }
#message { }
#submit { }

#news-letter { margin: 20px 0; padding: 1px 0; } /* basic mailcannon */
#news-letter fieldset { border: 0; padding: 0 12px; }
#news-letter h3 { font-size: 0.6em; text-transform: uppercase; padding: 3px 12px; margin: 2px 0; font-weight: normal; letter-spacing: 1px; color: #08185a; }
#news-letter label { font-size: 0.7em; padding: 3px 0 12px 0; display: block; }
#news-letter label span { display: block; padding-bottom: 4px; }
#news-letter label input { width: 70%; padding: 1px; margin: 3px 0 0; border: 1px solid #e7e7e7; border-top-color: #6b717b; border-left-color: #6b717b; }
#news-letter div { width: auto; float: right; clear: left; margin-top: -1.95em; }
#news-letter div input { width: auto; font-size: 0.7em; text-transform: uppercase; padding: 1px; }

/* forgot password form */
#request-new-pwd { padding: 0; margin: 12px 0 12px 0; clear: both; }
#request-new-pwd fieldset { margin: 0 auto; }
#request-new-pwd label { float: left; width: 49%; display: inline; text-align: left; }
#request-new-pwd label.usr {  }
#request-new-pwd label.pwd { float: right; }
#request-new-pwd label span.desc { display: block; }
#request-new-pwd label input { width: 96%; padding: 0; margin: 3px 0; }
#request-new-pwd div { clear: both; text-align: center; }
#request-new-pwd div input { clear: both; padding: 2px; margin: 4px 0; }

/* account forms - heavy duty lifting
----------------------------------------------------------------------------------------*/

/* register login screen - use this for sites that work like play.com */
#existing-customer-login { }
#existing-customer-login fieldset { }
#existing-customer-login legend { }
#existing-customer-login label { }
#existing-customer-login input { }
#existing-customer-login button { }

/* new account registration */
#register-account { padding: 0; margin: 0 0; }
#register-account fieldset { padding: 0; margin: 0 0 16px; }
#register-account fieldset fieldset { padding: 4px 0; } /* grouped inputs */
#register-account fieldset fieldset h3 { border-bottom: 1px solid #e7e7e7; margin-bottom: 12px; }
#register-account fieldset fieldset fieldset { clear: both; }
#register-account fieldset fieldset fieldset legend { color: #000; font-weight: bold; }

#register-account label { clear: both; float: left; width: 100%; padding: 4px 0; }
#register-account label span.desc { float: left; width: 36%; }
#register-account label input { float: right; width: 60%; }
#register-account label select { float: right; width: 61%; position: relative; }
#register-account label .input-info { display: block; float: none; font-size: 70%; margin-bottom: -3em; }

#register-account #login-details label { float: left; width: 100%; padding: 8px 0; }
#register-account #login-details label span.desc { float: left; width: 36%; }
#register-account #login-details label input { float: right; width: 60%; } 
#register-account #login-details label select { float: right; width: 61%; }
#register-account #login-details fieldset { padding: 8px 0; margin: 8px 0; border-width: 1px 0; clear: both; overflow: hidden; }
#register-account #login-details fieldset label { width: 49%; padding: 0; }
#register-account #login-details fieldset label span.desc { width: 90%; display: block; padding-left: 2px; }
#register-account #login-details fieldset label input { width: 98%; margin: 3px 0; }
#register-account #login-details fieldset label.new-email { float: left; }
#register-account #login-details fieldset label.new-email-conf { float: right; }
#register-account #login-details fieldset label.pwd { float: left; }
#register-account #login-details fieldset label.pwd-conf { float: right; }
#register-account #personal-details { }
#register-account #personal-details label { clear: both; float: left; width: 100%; padding: 4px 0; }
#register-account #personal-details label span.desc { float: left; width: 36%; }
#register-account #personal-details label input { float: right; width: 60%; }
#register-account #personal-details label select { float: right; width: 61%; position: relative; }
#register-account #personal-details label .input-info { display: block; float: none; font-size: 70%; margin-bottom: -3em; }
#register-account #contact-details {  }
#register-account #contact-details .phone {  }
#register-account #contact-details .phone label { float: left; width: 100%; padding: 4px 0; overflow: hidden; }
#register-account #contact-details .phone label span.desc { float: left; width: 36%; }
#register-account #contact-details .phone label input { float: right; width: 60%; }
#register-account #contact-details .address { }
#register-account #contact-details label.option { } /* check-box for same-as delivery if ever needed */
#register-account #contact-details label.option input { width: auto; }
#register-account #contact-details #new-candidate-address { } /* div to contain the new delivery address if required */
#register-account #contact-details label { float: left; width: 100%; padding: 4px 0; overflow: hidden; clear: both; }
#register-account #contact-details label span.desc { float: left; width: 36%; }
#register-account #contact-details label input { float: right; width: 60%; }
#register-account #contact-details label select { float: right; width: 61%; }
#register-account #contact-details #postcode { width: 30%; margin-right: 30%; position: relative; }
#register-account #current-employment { }
#register-account #current-employment label { float: left; width: 100%; padding: 4px 0; overflow: hidden; clear: both; }
#register-account #current-employment label span.desc { float: left; width: 36%; }
#register-account #current-employment label input { float: right; width: 60%; }
#register-account #additional { }
#register-account #additional .min-max { margin: 12px 0 0; padding: 0; clear: both; }
#register-account #additional .min-max label { padding: 2px 0; }
#register-account #additional .min-max input, #register-account #additional .min-max select { float: none; width: auto; vertical-align: middle; }
#register-account #additional .min-max input { padding: 1px; margin-right: 4px; }
#register-account #additional label { float: left; width: 100%; padding: 8px 0; overflow: hidden; clear: left; }
#register-account #additional label span.desc { float: left; width: 36%; }
#register-account #additional label input { float: right; width: 60%; }
#register-account #additional label select { float: right; width: 61%; }
#register-account #additional label.text-area span { float: none; width: auto; display: block; }
#register-account #additional label textarea { width: 387px; padding: 1px; margin: 4px 0; }
#register-account #file-upload label { padding: 2px 0; vertical-align: middle; float: left; width: 100%; overflow: hidden; clear: both; }
#register-account #file-upload label span.desc { float: left; width: 36%; }
#register-account #file-upload label input { float: right; width: 60%; }
#register-account #file-upload label.file-remove span { float: none; width: auto; }
#register-account #file-upload label.file-remove input { width: auto; float: none; }
#register-account p { }
#register-account label span.desc { line-height: 16px; }
#register-account label.file input, label.file-browse input { margin-right: 4px; padding: 0; }
#register-account #referrer { }
#register-account div.create input { padding: 2px; }

#candidate-account #file-upload { padding-top: 0; margin-top: 8px; }
#candidate-account #file-upload .file-title { display: none; }
#candidate-account #file-upload label { padding-top: 0; }

#root #content #register-account .min-max .currency-field { float: right; width: 60%; text-align: left; display: block; vertical-align: middle; }
#root #content #register-account .min-max .currency-field span { float: none; display: inline; }
#root #content #register-account .date-select { float: right; width: 61%; text-align: left; display: block; }
#root #content #register-account .date-select select { width: auto; float: none; }

* html #register-account input,
* html #register-account select { font-size: 1em; }
* html #register-account #file-upload label.file-browse input { padding: 1px; }
* html #register-account #contact-details { margin-bottom: 0; }
* html #register-account #contact-details label select { width: 60.5%; }
* html #register-account #contact-details label span.desc { margin-right: -3px; }
* html #register-account label.file input { padding: 1px; }

/* account edit screen */
#edit-account { padding: 0; margin: 0 0; }
#edit-account fieldset { padding: 0; margin: 0 0 16px; }
#edit-account fieldset fieldset { padding: 4px 0; } /* grouped inputs */
#edit-account fieldset fieldset h3 { border-bottom: 1px solid #e7e7e7; margin-bottom: 12px; }
#edit-account fieldset fieldset fieldset { clear: both; }
#edit-account fieldset fieldset fieldset legend { color: #000; font-weight: bold; }
#edit-account #login-details label { float: left; width: 100%; padding: 8px 0; }
#edit-account #login-details label span.desc { float: left; width: 36%; }
#edit-account #login-details label input { float: right; width: 60%; } 
#edit-account #login-details label.checkbox input { float: none; width: auto; vertical-align: bottom; } 
#edit-account #login-details fieldset { padding: 8px 0; margin: 8px 0; border-width: 1px 0; clear: both; overflow: hidden; }
#edit-account #login-details fieldset label { width: 49%; padding: 0; }
#edit-account #login-details fieldset label span.desc { width: 90%; display: block; padding-left: 2px; }
#edit-account #login-details fieldset label input { width: 98%; margin: 3px 0; }
#edit-account #login-details fieldset label.new-email { float: left; }
#edit-account #login-details fieldset label.new-email-conf { float: right; }
#edit-account #login-details fieldset label.pwd { float: left; }
#edit-account #login-details fieldset label.pwd-conf { float: right; }
#edit-account #personal-details label { clear: both; float: left; width: 100%; padding: 4px 0; }
#edit-account #personal-details label span.desc { float: left; width: 36%; }
#edit-account #personal-details label input { float: right; width: 60%; }
#edit-account #personal-details label select { float: right; width: 61%; position: relative; }
#edit-account #personal-details label .input-info { display: block; float: none; font-size: 70%; margin-bottom: -3em; }

#edit-account #personal-details .photo img, #edit-account #personal-details .logo img { margin: 4px auto; display: block; }
#edit-account #personal-details .image-upload table { font-size: 1.2em; margin: 0; padding: 0; }
#edit-account #personal-details .image-upload img { width: 80px; height: 80px; float: left; margin: 0; padding: 0; display: inline; }
#edit-account #personal-details .image-upload label { padding: 2px 0; vertical-align: middle; float: right; clear: right; width: 300px; overflow: hidden; }
#edit-account #personal-details .image-upload label span.desc { float: left; width: 36%; }
#edit-account #personal-details .image-upload label small { line-height: 12px; display: block; }
#edit-account #personal-details .image-upload label input { float: right; width: 60%; }
#edit-account #personal-details .image-upload label.image-browse input { margin-right: 4px; }
#edit-account #personal-details .image-upload label.image-remove span,
#edit-account #personal-details .image-upload label.image-watermark span { float: none; width: auto; }
#edit-account #personal-details .image-upload label.image-remove input,
#edit-account #personal-details .image-upload label.image-watermark input { width: auto; float: none; }

#edit-account #contact-details {  }
#edit-account #contact-details .phone {  }
#edit-account #contact-details .phone label { float: left; width: 100%; padding: 4px 0; overflow: hidden; clear: both; }
#edit-account #contact-details .phone label span.desc { float: left; width: 36%; }
#edit-account #contact-details .phone label input { float: right; width: 60%; }
#edit-account #contact-details .address { }
#edit-account #contact-details label.option { } /* check-box for same-as delivery if ever needed */
#edit-account #contact-details label.option input { width: auto; }
#edit-account #contact-details #new-candidate-address { } /* div to contain the new delivery address if required */
#edit-account #contact-details label { float: left; width: 100%; padding: 4px 0; overflow: hidden; clear: both; }
#edit-account #contact-details label span.desc { float: left; width: 36%; }
#edit-account #contact-details label input { float: right; width: 60%; }
#edit-account #contact-details label select { float: right; width: 61%; }
#edit-account #contact-details #postcode { width: 30%; margin-right: 30%; position: relative; }
#edit-account #current-employment { }
#edit-account #current-employment label { float: left; width: 100%; padding: 4px 0; overflow: hidden; }
#edit-account #current-employment label span.desc { float: left; width: 36%; }
#edit-account #current-employment label input { float: right; width: 60%; }
#edit-account #additional { }
#edit-account #additional .min-max { margin: 12px 0 0; clear: both; }
#edit-account #additional .min-max label { padding: 2px 0; }
#edit-account #additional .min-max input, #edit-account #additional .min-max select { float: none; width: auto; vertical-align: middle; }
#edit-account #additional .min-max input { padding: 1px; margin-right: 4px; }
#edit-account #additional label { float: left; width: 100%; padding: 8px 0; overflow: hidden; clear: both; }
#edit-account #additional label span.desc { float: left; width: 36%; }
#edit-account #additional label select { float: right; width: 61%; }
#edit-account #additional label.text-area span { float: none; width: auto; display: block; }
#edit-account #additional label textarea { width: 387px; padding: 1px; margin: 4px 0; }
#edit-account #file-upload label { padding: 2px 0; vertical-align: middle; float: left; width: 100%; overflow: hidden; }
#edit-account #file-upload label span.desc { float: left; width: 36%; }
#edit-account #file-upload label input { float: right; width: 60%; }
#edit-account #file-upload label.file-remove span { float: none; width: auto; }
#edit-account #file-upload label.file-remove input { width: auto; float: none; }
#edit-account p { }
#edit-account label span.desc { line-height: 20px; }
#edit-account label.file input { margin-right: 4px; padding: 0; }
#edit-account #referrer { }
#edit-account div.create input { padding: 2px; }


#root #content #edit-account .min-max .currency-field { float: right; width: 60%; text-align: left; display: block; vertical-align: middle; }
#root #content #edit-account .min-max .currency-field span { float: none; display: inline; }
#root #content #edit-account .date-select { float: right; width: 61%; text-align: left; display: block; }
#root #content #edit-account .date-select select { width: auto; float: none; }

* html #edit-account #contact-details { margin-bottom: 0; }
* html #edit-account #contact-details label { background: #fff; }
* html #edit-account #contact-details label select { width: 60.5%; }
* html #edit-account #contact-details label span.desc { margin-right: -3px; }
* html #edit-account #contact-details label.country { margin-right: -3px; }
* html #edit-account label.file input { padding: 1px; }

div.image { clear: both; text-align: center; }
div.image img { margin: 0 auto; }
div.image a { color: #990000; }

#job-search { text-align: center; }
#job-search fieldset { margin: 16px 0; padding: 6px; }
#job-search legend { display: none; }
#job-search input {  vertical-align: middle; }
#job-search label input { width: 60%; font-size: inherit; }
* html #job-search input { font-size: 1em; }
#job-search div { display: inline; }
#job-search div input { padding: 0px; font-size: inherit; }


/* add-job listing */
#jobs { padding: 0; margin: 0 0; }
#jobs fieldset { padding: 0; margin: 0 0 16px; }
#jobs fieldset fieldset { padding: 4px 0; clear: both; margin-bottom: 0; } /* grouped inputs */
#jobs fieldset fieldset legend { color: #000; }
#jobs label { float: left; width: 100%; padding: 8px 0; }
#jobs label span.desc { float: left; width: 36%; }
#jobs label input { float: right; width: 60%; }
#jobs label select { float: right; width: 61%; }
#jobs #salary { clear: both; float: left; width: 100%; }
#jobs #salary label {  }
#jobs #salary .currency-field { float: right; width: 60%; text-align: left; display: block; vertical-align: middle; }
#jobs #salary .currency-field span { float: none; display: inline; }
#jobs #salary input, #jobs #salary select { float: none; width: auto; vertical-align: middle; }
#jobs #salary input { padding: 1px; margin-right: 4px; }
#jobs label.text-area { clear: left; float: none; display: block; }
#jobs label.text-area span.desc { float: none; width: auto; display: block; }
#jobs label #skills { width: 404px; padding: 1px; margin: 4px auto; }
#jobs #mce { display: block; float: none; clear: left; padding: 0 0 12px; }
#jobs #mce a { padding: 0; margin: 0; }
#jobs #mce label { padding: 4px 0; float: none; display: block; }
#jobs #mce img { display: inline; }
#jobs label.file input { margin-right: 4px; padding: 0; }
#jobs div.create input { padding: 2px; }

/* add document screen */
#new-document { padding: 0; margin: 0 0; }
#new-document fieldset { padding: 0; margin: 0 0 16px; }
#new-document label { display: block; width: 100%; padding: 8px 0; clear: left; }
#new-document label input { width: 400px; }
#new-document label span.desc { width: 90%; display: block; padding-left: 2px; line-height: 20px; }
#new-document label.text-area span.desc { float: none; width: auto; display: block; }
#new-document label textarea { width: 402px; padding: 1px; margin: 4px; }
#new-document p { }
#new-document label.file input { margin-right: 4px; padding: 0; }
#new-document div { clear: both; }
#new-document div.create input { padding: 2px; }

* html #new-document label.file input { padding: 1px; }

/* edit document screen */
#edit-document { padding: 0; margin: 0; }
#edit-document fieldset { padding: 0; margin: 0 0 16px; }
#edit-document label { display: block; width: 100%; padding: 8px 0; clear: left; }
#edit-document label input { width: 400px; }
#edit-document label span.desc { width: 90%; display: block; padding-left: 2px; line-height: 20px; }
#edit-document label.text-area span.desc { float: none; width: auto; display: block; }
#edit-document label textarea { width: 402px; padding: 1px; margin: 4px 0; }
#edit-document p { }
#edit-document label.file input { margin-right: 4px; padding: 0; }
#edit-document label.file-remove span.desc,
#edit-document label.file-remove input { display: inline; width: auto; }
#edit-document div { clear: both; }
#edit-document div.create input { padding: 2px; }

* html #edit-document label.file input { padding: 1px; }

/* checkbox fields */
#root form label.checkbox span.desc { display: inline; width: auto; }
#root form label.checkbox input {  display: inline; width: auto; }

/* calendar js popup */
.calendar { display: none; } /* overridden by js */

/* footer, layout taken care of up above
---------------------------------------------------------------------------------------*/

#footer { padding: 3px 0 0 8px; overflow: hidden; }
#footer #back-to-top { display: none; } /* temporary */
#footer #back-to-top a { padding: 0 20px; }
#footer #copyright { clear: left; font-size: 0.6em; width: 100%: }