/*
PREMIER LEAGUE EXTRANET
Screen Stylesheet
*/
/* BASE STYLES
*/ * { margin: 0; padding: 0; font-size: 1em; }
html { font: 100%/120% Arial, Verdana, sans-serif;}
body { font-size: 0.75em; background: #c0c2c4 url(/images/bg_body.gif) left top repeat-y; color: #333; }
/* REDEFINE HTML
*/ p, blockquote, pre, ul, ol, dl, form, table { margin: 0 0 1em; }
p img { margin: 0.5em 0 0; }
table { margin: 0.5em 0 1em; }
caption { display: none; }
h1, h2, h3, h4 { margin: 0 0 0.7em; }
h1 { text-transform: uppercase; font: normal 1.6em/1em Arial; color: #10175f; margin: 0 0 0.7em; }
h2 { text-transform: uppercase; font: italic 1.6em/1em Arial, Tahoma; color: #10175f; margin: 0 0 0.25em; font-weight: bold; }
#welcome h2 { text-transform: uppercase; font: italic 2.5em/1em Arial, Tahoma; color: #fff; margin: 0 0 0.25em; font-weight: bold; }
#welcome h4 { font: italic 1.5em/1em Arial, Tahoma; color: #fff; margin: 0 0 0.25em; font-weight: normal; }
h3 { margin: 0; color: #999999; text-transform: uppercase; font: normal 1em/1em Tahoma; }
ul, ol, dl { margin-left: 2em; }
ul li, dd, dt { list-style: disc outside; }
ol li { list-style-position: inside; }
img { border: none; }
em { color:#FF0000; font-style:normal; font-size: 0.9em; line-height: 1.2em !important; display:block; }
a:link, a:visited { color: #ED1C24; text-decoration: none; }
a:hover, a:active { color: #00A4E8; text-decoration: none; }
table th, table td { padding: 0 4px; }
table th { background: #11165E; height: 24px; line-height: 10px; font-size: 1em; color: #FFF; font-weight: normal; white-space: nowrap; }
/* COMMON CLASSES
*/ .left { float: left; }
.right { float: right; }
.none { display: none; }
.ir { overflow: hidden; text-indent: -10000px; }
.white { color: #fff; }
.blue { color: #10175f; }
.brown { color: #A68462; }
.lightblue { color: #569FD3; }
.green { color: #007E7A; }
.yellowgreen { color: #94A545; }
.red { color: #EF3E42; }
.clear { clear: both; }
.center { width: 80%; margin: 0 auto; }
table.center { width: 100%; margin: 1em auto; }
.hierarchy { height: 790px; width: 214px; background: url(../images/hierarchy.gif) 0 0 no-repeat; position: absolute; bottom: 0; left: 0; }
.goto { border: 1px solid #CCC; padding: 5px; width: 160px; position: absolute; right: 25px; top: 323px; font-weight: bold; }
.goto p { margin: 0 0 5px; }
a.current { color: #00A4E8 !important; }
.headings, .headings li { margin-left: 0; margin-right: 0; padding: 0; list-style-type: none; }
.headings li h2, .headings li h3 { margin-left: -1em; padding-left: 1em; background: url(/images/red-bullet.gif) 0.5em 0.3em no-repeat; }
/* CLASSED HTML
*/ ul.arrow { margin-left: 0; }
ul.arrow li { margin: 0; height: 1.5em; list-style: none outside; padding:0; background: url(/images/red-arrow.gif) left center no-repeat; padding-left: 13px; }
ul.arrow li a { padding: 0; margin: 0; height: 1.5em; line-height: 1.5em; background: url(/images/bg_redarrow_li.gif) center bottom repeat-x; text-decoration: none !important; color: #10175f !important; display: block; }
ul.arrow li a:hover { color: #00A4E8 !important; }
table.nostyle td { background: none !important; border: 0 !important; padding: 0 !important; }
table#logo { font-size: 0.9em; color: #191b5d; }
table#logo .grey { background-color: #a6a8aa; }
table#logo th, table#logo td { text-align: left; }
table#logo td { vertical-align: top; }
table#logo a { color: #191b5d; }
td.atop, th.atop { background: url(/gfx/arrow_top.gif) right 0 no-repeat; padding-right: 30px; }
td.amid, th.amid { background: url(/gfx/arrow_mid.gif) right 0 no-repeat; padding-right: 30px; }
td.abottom, th.abottom { background: url(/gfx/arrow_bottom.gif) right 0 no-repeat; padding-right: 30px; }
td.a, th.a { background: url(/gfx/arrow.gif) right 0 no-repeat; padding-right: 30px; }
td.ahead, th.ahead { background: url(/gfx/arrow_head.gif) right 0 no-repeat; padding-right: 30px; }
/* LAYOUT
*/ #wrapper, #welcomepage { width: 967px; }
/* IMAGE SEARCH
*/ #search { width: 174px; float: right; }
#search h3 { width: 174px; height: 29px; background: url(/images/image-search.gif) 0 0 no-repeat; }
#search form label { display: none; }
#search form { position: relative; }
#search form input.text { margin: 10px 0 0; display: block; border: 1px solid #CCC; padding: 2px 1px; width: 130px; font: 1em/1em Verdana; }
#search form button { cursor: pointer; position: absolute; right: 0; top: -1px; width: 32px; height: 22px; border: none; background: #FFF url(/images/button_go.gif) left top no-repeat; overflow: hidden; text-indent: -1000px; }
#search form button:hover, #search button:active, #search button:focus { background-position: left bottom; }
#search ul.arrow { background: url(/images/red-arrow-ul.gif) right top no-repeat; padding: 1px 0 0; font-size: 0.9em; }
.edit label { float: left; width: 140px; color: #10175f; font-size: 0.9em; margin: 5px 0 0; }
.edit input.text { float: left; border: 1px solid #CCC; padding: 2px 1px; width: 250px; font: 1em/1em Verdana;}
.edit br { clear: both; }
.edit button { cursor: pointer; margin-top: 10px; width: 59px; height: 22px; border: none; background: #FFF url(/images/button_submit.gif) left top no-repeat; overflow: hidden; text-indent: -1000px; }
.edit button:hover, .edit button:active, .edit button:focus { background-position: left bottom; }
.edit button#submit { background-image: url(/images/button_submit.gif); }
.edit button#delete { background-image: url(/images/button_delete.gif); }
/* PAGING
*/ .pages { position: relative; height: 29px; padding: 0 0 7px; background: url(/images/bg_pages.gif) center center repeat-x; text-align: center; }
.pages a { color: #666; text-decoration: none !important; }
.pages p { position: absolute; left: 0; top: 0.7em; color: #666; }
.pages form { height: 29px; padding-left: 20px; overflow: hidden; display: inline; position: relative; padding-right: 32px; }
.pages form input.text { margin: 10px 0 0; display: inline; border: 1px solid #CCC; padding: 2px 1px; font: 1em/1em Verdana; }
.pages form button { margin-left: 8px; cursor: pointer; width: 32px; height: 22px; border: none; background: #FFF url(/images/button_go.gif) left top no-repeat; overflow: hidden; text-indent: -1000px; }
.pages form button:hover, .pages button:active, .pages button:focus { background-position: left bottom; }
/* HEADER
*/ #header { position: relative; overflow: hidden; width: 996px; background: url(/images/bg_header.gif) center bottom no-repeat; }
#loginpage #header { background: url(/images/bg_login_top.gif) left bottom no-repeat; }
#welcomepage #header { background: url(/images/bg_header.gif) left bottom no-repeat; }
#header h1 { float: left; height: 90px; margin: 20px 0 0 20px; width: 275px; background: url(/images/bg_logo.gif) left top no-repeat; }
#header h1 a { display: block; width: 100%; height: 100%; }
#header h2 { float: left; width: 424px; height: 44px; margin: 35px 0 0 37px; background /**/: url(/gfx/bg_brandsite.png) 0 0 no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/gfx/bg_brandsite.png',sizingMethod='crop'); }
#header h2.login { background /**/: url(/gfx/bg_brandsite_login.png) 0 0 no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/gfx/bg_brandsite_login.png',sizingMethod='crop'); }
#header hr { display: none; }
#topnav { font-size: 0.9em; line-height: 1em; height: 30px; float: left; display: block; position: absolute; right: 250px; top: 0; margin: 0; }
#topnav li { float: left; color: #fff; list-style: none inside; background: url(/images/nav_bar.gif) left top no-repeat; }
#topnav li.first { background: none; }
#topnav li.logout a { color: #abaebe; }
#topnav li a { float: left; color: #fff; text-decoration: none; padding: 5px 8px 5px; }
#topnav li.logout a { padding-right: 0; }
#topnav li a:hover, #topnav li a:focus { color: #ced0e2; }
#nav { position: absolute; left: 186px; bottom: 0; margin: 0 0 0px;; line-height: 31px; }
#nav li { float: left; color: #10175f; list-style: none inside; }
#nav li a { float: left; overflow: hidden; text-indent: -10000px; height: 31px; background-repeat: none; background-image: url(/images/bg_tab.gif); }
#nav li a#ourbrand { width: 163px; background-position: 0 0; }
#nav li a#ourbrand:hover { background-position: 0 -31px; }
#nav li a#ourbrand.current { background-position: 0 -62px !important; }
#nav li a#coreelements { width: 204px; background-position: -163px 0; }
#nav li a#coreelements:hover {background-position: -163px -31px; }
#nav li a#coreelements.current {background-position: -163px -62px !important; }
#nav li a#applications { width: 183px; background-position: -367px 0; }
#nav li a#applications:hover { background-position: -367px -31px; }
#nav li a#applications.current { background-position: -367px -62px !important; }
#nav li a#downloads { width: 173px; background-position: -550px 0; }
#nav li a#downloads:hover { background-position: -550px -31px; }
#nav li a#downloads.current { background-position: -550px -62px !important; }
#nav li a#carling { width: 135px; background-position: 0 0; }
#nav li a#carling:hover { background-position: 0 -31px; }
#nav li a#carling.current { background-position: 0 -62px !important; }
#nav li a#coke { width: 162px; background-position: -135px 0; }
#nav li a#coke:hover {background-position: -135px -31px; }
#nav li a#coke.current {background-position: -135px -62px !important; }
#nav li a#johnstones { width: 236px; background-position: -297px 0; }
#nav li a#johnstones:hover { background-position: -297px -31px; }
#nav li a#johnstones.current { background-position: -297px -62px !important; }
#nav2 { position: absolute; left: 18px; bottom: 0; margin: 0 0 0px;; line-height: 31px; }
#nav2 li { float: left; overflow: hidden; text-indent: -10000px; height: 31px; width: 220px; background-repeat: none; background-image: url(/images/bg_tab_login.gif); }
#header ul li.backtotop a { background: url(/images/arrow_backtotop.gif) 0 8px no-repeat; margin-left: 10px; }
#header ul li.backtotop a:hover { background-position: 0 -12px; }
/* FOOTER
*/ #footer { padding-top: 18px; position: relative; overflow: hidden; width: 967px; background: url(/images/bg_footer.gif) left top no-repeat; }
#loginpage #footer { background: url(/images/bg_login_bottom.gif) left top no-repeat; }
#welcomepage #footer { background: url(/images/bg_welcome_bottom.gif) left top no-repeat; }
#footer ul { font-size: 0.9em; display: block; margin: 0 0 0 5px; padding-left: 20px;}
#footer ul li { float: left; color: #10175f; line-height: 1em; list-style: none inside;background: url(/images/nav_bar_bottom.gif) left top no-repeat; }
#footer ul li.first, #footer ul li.backtotop { background: none; }
#footer ul li a { float: left; color: #10175f; text-decoration: none; padding: 6px 10px 5px 15px; }
#footer ul li.first a, #footer ul li.backtotop a { padding-left: 0; }
#footer ul li a:hover, #footer li a:focus { color: #000; }
#footer ul li.backtotop { float: right; }
#footer ul li.backtotop a { background: url(/images/arrow_backtotop.gif) 0 8px no-repeat; padding-left: 10px; }
#footer ul li.backtotop a:hover { background-position: 0 -12px; }
/* LOGIN
*/ #login { position: relative; background: #FFF url(/images/bg_content_login.gif) 100% 100% no-repeat; padding: 35px 145px 45px 55px; width: 455px;}
#login h3 { color: #10175f; font-weight: bold; font-size: 1.5em; }
#login form { display: block !important; position: relative; width: 100%; height: auto; margin-top: 1.5em;}
#login button { cursor: pointer; position: absolute; right: 45px; top: 1.55em; width: 75px; height: 22px; border: none; background: #FFF url(/images/login.gif) left top no-repeat; overflow: hidden; text-indent: -1000px; }
#login button:hover, #login button:active, #login button:focus { background-position: left bottom; }
#login label { float: left; display: block; width: 150px; color: #002A68; margin-bottom: 2px; }
#login label input.text { display: block; border: 1px solid #CCC; padding: 2px 1px; width: 130px; font: 1em/1em Verdana; }
#login label input.text:focus { border-color: #AAA; background-color: #F9F9F9; }
#login label#rememberme { clear: both; float: none; width: 100%; padding: 0.5em 0 0; margin: 0 0 0; }
#login label#rememberme input { display: inline; padding: 0; width: auto; }
#login p.error { clear: both; margin: 0.5em 0 0; }
#login p.error strong { color: #CC0000; }
#login label.error input { border-color: #CC0000; background-color: #FFECEC; }
#login label.error input:focus { border-color: #FF6600; background-color: #FFECDF; }
.errors {color:#CC0000;}
/* ACTIVATE
*/ #activate { position: relative; width: 100%; }
#activate label { float: left; display: block; width: 150px; color: #666; }
#activate input { display: block; border: 1px solid #CCC; padding: 2px 1px; width: 130px; font: 1em/1em Verdana; }
#activate input:focus { border-color: #AAA; background-color: #F9F9F9; }
#activate button { margin-top: 1.5em; cursor: pointer; width: 63px; height: 22px; border: none; background: #FFF url(/images/login.gif) left top no-repeat; overflow: hidden; text-indent: -1000px; }
#activate input.checkbox { display: inline; border: none; width: 14px;}
/* WELCOME
*/ #welcome { position: relative; background: #002A68 url(/images/bg_welcome.gif) 0 0 no-repeat; padding: 25px 0 0 25px; margin-top: 28px; overflow: hidden; width: 925px; }
#welcome #intro { width: 330px; height: 156px; background: url(/images/index-welcome.gif) 0 0 no-repeat; float: left; }
#welcome_box { margin: 0 0 0 auto; position: relative; width: 75% !important; height: 88px; // height: 86px;}
#welcome_box2 { margin: 0 0 0 auto; position: relative; width: 75% !important; height: 88px; // height: 86px;}
#welcome a { color: #ABAEBE; }
#welcome a:hover { color: #CED0E2; }
#cols { overflow: auto; clear:both; width: 75%; float: right; color: #fff; padding-bottom: 25px; background: url(/images/bg_content_welcome.gif) 100% 100% no-repeat; }
#cols .col { width: 125px !important; overflow: hidden !important; margin-right: 11px; float: left; }
#cols img { margin: 10px 0; }
#cols h3 { margin: 0 0 10px 0; }
#cols p { font-size: 0.95em; line-height: 140%;}
/* BREADCRUMBS
*/ #breadcrumbs { background: url(/images/bg_content_hr.gif) 0 0 no-repeat; height: 28px; width: 967px; position: relative;
}
#breadcrumbs p { margin: 0; color: #FFF; position: absolute; left: 212px; top: 4px; }
#breadcrumbs a { color: #FFF; }
/* CONTENT
*/ #content { position: relative; overflow: hidden; background: #FFF url(/images/bg_content.gif) 0 0 repeat-y; width: 950px; }
#content #subnav { width: 214px; margin: 0 5px 0 0; float: left; position: relative; padding: 15px 0 50px 0; }
#subnav h4 { margin-left: 15px; }
#subnav ul { line-height: 1.2em; margin: 0 0 0 20px; }
#subnav li { display: block; list-style: none outside; margin: 0; padding: 0; width: 100%; }
#subnav li.sub { background: url(/images/arrow.gif) 5px 0.5em no-repeat; }
#subnav li a { padding: 0 0 0 20px; line-height: 28px; display: block; color: #9ba2c4; text-decoration: none; width: 89%; }
#subnav li li { background: none; }
#subnav li li a { padding: 0 0 0 10px; }
#subnav li a:hover { color: #CED0E2;}
#subnav li a.current { font-weight: bold; border: none; color: #FFFFFF !important; }
#subnav li ul { margin: -28px 0 0; padding: 28px 0 0 15px; background: url(/images/arrow-down.gif) 0 0.4em no-repeat; }
#content #main { background: url(/images/bg_main_tl.gif) 0 0 no-repeat; padding: 25px 25px; float: right; width: 660px; color: #002a68; font-size: 1.1em; position: relative; }
#content #main div.text { width: 460px;}
#content #main div.left { width: 400px; padding-bottom: 45px; text-align: center;}
#content #main div.right { width: 230px; margin-bottom: 45px;}
#content #main div.left_downloads {width: 215px; float: left;}
#content #main img { border: none; }
div.item ol { margin:0; }
/* DOWNLOADS
*/ div.item { overflow: auto; width: 100%; padding:4px 0; }
div.item.under { border-bottom: solid 1px #002A68; margin-bottom: 20px;}
div.item.under div.left { margin-bottom: 20px !important; }
div.item.under div.right { margin-bottom: 20px !important; }
/*
*/ .bdr { border: 1px solid #CCC !important; padding: 4px; margin: 0 0 5px; }
.item table { width: 360px; }
.item table td { background: url(/images/bg_redarrow_li.gif) center bottom repeat-x; }
.item table td.file { background: url(/images/icon_file.gif) left center no-repeat; padding: 0; }
.item table a { padding: 0; margin: 0; height: 1.5em; line-height: 1.5em; text-decoration: none !important; color: #10175f !important; display: block; }
.item table a:hover { color: #00A4E8 !important; }
/* FORMS
*/ form input, form textarea { font: 0.9em/1.5em Verdana; color: #333; padding: 2px; }
/* CMS
*/ .cms { background: #fff; padding: 25px 25px; width: 890px; position: relative; overflow: hidden; }
.cms table th { text-align: left; }
.cms table td { border-bottom: 1px solid #CCC; vertical-align: top; }
.cms table tr.alt td { background: #fafafa; }
.cms .body { width: 500px !important; overflow: hidden; height: 60px !important; position: relative; }
.cms form { margin: 1em 0 0; }
.cms fieldset { border: none; }
.cms ul, .cms li { display: block; list-style: none outside; margin: 0; padding: 0; }
.cms li { margin-bottom: 10px; overflow: hidden; clear: both; width: 100%; }
.cms label { display: block; float: left; width: 10em; }
.cms input, .cms textarea { float: left; border: 1px solid #CCC; font: 1em/1.5em Verdana; color: #333; padding: 5px; }
.cms input.radio { border: none;}
/* --------------------------------------------------------------
Buttons.css
* Gives you some great buttons for many purposes.
Created by Kevin Hale [particletree.com]
* particletree.com/features/rediscovering-the-button-element
W3C: "Buttons created with the BUTTON element function
just like buttons created with the INPUT element,
but they offer richer rendering possibilities."
Usage:
Change Password
Cancel
-------------------------------------------------------------- */
.cms a.button, .cms button {
display:block;
float:left;
margin:0 0.583em 0.667em 0;
padding:5px 10px 6px 7px; /* Links */
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
background-color:#f5f5f5;
font-family: Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
}
.cms button {
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.cms button[type] {
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html .cms button[type] {
padding:4px 10px 3px 7px; /* IE7 */
}
.cms button img, .cms a.button img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
/* Button colors
-------------------------------------------------------------- */
/* Standard */
.cms button:hover, .cms a.button:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.cms a.button:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* Positive */
.cms .positive {
color:#529214 !important;
}
.cms a.positive:hover, .cms button.positive:hover {
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.cms a.positive:active {
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* Negative */
.cms .negative {
color:#d12f19 !important;
}
.cms a.negative:hover, .cms button.negative:hover {
background:#fbe3e4;
border:1px solid #fbc2c4;
color: #CC3333;
}
.cms a.negative:active {
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}