﻿/*------ Corporate Colours --------
Yellow: #FFD100;
Blue: #AE0055;
---------------------------------*/

/*------ IE hasLayout Bug hack */

#IERoot *{min-height:0px;} /*IE7*/
#IERoot ul *, #IERoot ol *{min-height:auto;}

/*------ Generic Element Selectors */

*{padding:0;margin:0;}
body{padding:2px;min-width:1045px;width:auto;font-family:verdana, helvetica, sans-serif;font-size:0.7em;background-color:#FFFFFF;color:#000000;/*line-height:1.25em;*/min-height:100%;}
body form{line-height:1.25em;}
body #IERoot form{line-height:1.5em;}
/*------ IE6 min-width */
* html #IERoot{padding-left:1045px;}
* html form{margin-left:-1045px;height:1%;}

a img{border:none;}
input[type=submit].blank{color:#009878;}
a{color:#489892;}
a:link, a:visited{text-decoration:none;}
input[type=submit].blank:hover,a:hover, a:active{text-decoration:underline;}

h1{font-size:1.3em;margin-bottom:5px;}
h2{font-size:1.2em;margin-bottom:5px;}
h3{font-size:1.15em;margin-bottom:5px;}
h4{font-size:1.1em;margin-bottom:5px;}
h5{font-size:1.05em;margin-bottom:5px;}
h6{font-size:1.0em;margin-bottom:5px;}
select, input, textarea, table, tr, td, th{font-size:1em;}

p{margin:0.3em 0.1em;}

h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#009878;}
hr{margin:0.7em 0;}
input[type=radio], input[type=checkbox]{margin:0 0.5em;}
body>form input[type=radio]{vertical-align:text-top;}
#IERoot input[type=submit]{vertical-align:middle;}
#IERoot select + input[type=submit], textarea + input[type=submit]{position:relative;top:-2px;}
textarea{font-family:tahoma, verdana, arial, sans-serif;}
li textarea{width:90%;}
table, tr, td, th{background-color:#FFFFFF;color:#000000;}
table{width:98%;border-collapse:collapse;}
td, th{padding:0.1em 0.5%;border:2px solid #CCCCCC;}
th{color:#333333;text-align:center;}
select option{padding-right:10px;}
input[type=text]:focus, input[type=password]:focus, textarea:focus{background-color:#F0F0F0;border:2px solid #AE0055;}
input.wide{width:20em !important;}
label{display:inline-block;min-width:10em;}

/*------ Generic Class Selectors */

.divCentre{width:auto;margin:0 auto;} 
.cleared{overflow:auto;}
* html .cleared{display:inline-block;}
.bb4:before{content:".";visibility:hidden;display:block;}
.indent{padding-left:1em;}
.hidden{display:none;}
.right, .number{text-align:right;}
.centre{text-align:center;}
.left{text-align:left;}
.fl{float:left;}
.fr{float:right;}
.cl{clear:left;}
.cr{clear:right;}
.cb{clear:both;}
.b{font-weight:bold;}   
.i{font-style:italic;}
label.b input{font-weight:normal;}
.u{text-decoration:underline!important;}
.highlighty{color:#FFD100;}
.highlightb{color:#333333;}
.small{font-size:80%;}
.normal{font-size:100%}
.big{font-size:120%;}
.hand{cursor:pointer;}
.outline{border:2px solid #333333; margin:5px 0;padding:5px;}
.background{background-color:#333333;color:#FCD105;}
.bglight{background-color:#EBF2F7;}
.logo{float:left;}

.centre{text-align:center;}

.intro{background:#FFFFFF url(/images/layout/RealtimeLogo.gif) no-repeat scroll center right;
  padding:3px 65px 10px 5px;
  margin-bottom:1.5em;
  width:90%;
  height:auto;
  min-height:40px;
  }
 #IERoot .intro{min-height:53px;}
* html .intro{width:99%;height:56px;}
.loading{
position:absolute;
top:0;left:0;
height:100%;
width:100%;
background:transparent url(/images/layout/loading.png) repeat scroll left top;
}

.hidden{display:none;}
.threeWide li{width:30%;float:left;padding:10px;}
.loading div{background:transparent url(/images/layout/wait.gif) no-repeat center center;height:100%;height:100%;}
.quarter{width:23%;}
.half{width:46%;}
.threequarter{width:69%}
.full{width:98%;}
.red{color:#FF0000;}
.black{color:#000000;}
.leftLabel{float:left; width:11em;}
.rightItem{border-right:11em solid #FFFFFF;}
.upper{text-transform:uppercase;}
.spaced{margin:0.4em}
.snglTop{border-top:1px solid #000000 !important;}
.dblTop{border-top:3px double #000000 !important;}
.boxed{border:2px solid #333333;margin: 5px 0;float:none;overflow:auto;}
.boxed p, .boxed div{margin:0.1em 0.2em;}
#actionCol h1, .boxed h1, .boxed h2{font-size:1.2em;background-color:#333333;color:#FFFFFF;border:2px solid #333333;border-right-width:0;}
input[type=submit].blank{display:block;background:transparent;border:1px solid transparent;cursor:pointer;position:relative;top:-2px;}
#divPrint{margin:5px 0;}


br.cl{height:0;}

/*------ Layout */

.colLeft{width:48%;float:left;padding:5px;height:100%;margin-top:0;overflow:hidden;}
.colRight{margin-left:52%;padding:5px;margin-top:0;height:100%;}
/*#IERoot .colRight{margin-left:0;}*/
.colRight>.outline{margin:-5px -5px 10px 5px;}
.colLeft>.outline{margin:-5px -5px 10px -5px;}

/*------ Drop Shadow */

div.outside{background:#BBBBBB;border:1px solid #DDDDDD; position:relative; left:5px;top:5px;margin:0 1em 0.8em 0;}
div.inside{position:relative;left:-5px;top:-5px;color:#000000;width:100%;background-color:#FFFFFF;}
.heading{background:#D8D8F0 url(/images/layout/curve.gif) no-repeat scroll left top;padding:10px 20px;margin:0;}
.dets{border:2px solid #D8D8F0;border-top:2px solid #AE0055;background:#FFFFFF;padding:20px;}

/*------ Logos */
.validLogo img{height:32px;width:88px;}

/*----- Lists */

ul{list-style-type:none;}
ol{padding-left:2em;margin:0.2em 0;}
ol ul{list-style-type:disc;padding-left:1em;}
ol.lettered{list-style-type:lower-alpha;}
ol.roman{list-style-type:lower-roman;}
#IERoot ol.lettered{list-style-type:disc;}
ul.bullet{list-style-type:disc;padding-left:1em;}
ul.arrow{list-style-image: url(/images/layout/menuarrow.gif);list-style-type:disc;}
ul.arrow li{margin-left:14px;}
ul.spaced li{margin:0.1em auto;}
ul.twoCol{position:relative;width:100%;padding:0.1em;}
ul.twoCol li{float:left;width:46%;}


/*------ Header Styles */

#header{
  border-bottom:4px solid #009878;
  padding:10px 10px 10px 15px; 
  }
#header input[type=text]{width:15em;margin-top:10px;}

#headerBanner{border:1px solid #FFF;border-width:0 320px 0 237px;}
#IERoot #headerBanner{border-width:0;margin-right:320px;}


#headerBanner div{text-align:center;}

/*------ CSS Menu */

#menu,#menujs{padding:3px 0 0 15px;background-color:#333333;z-index:1;position:relative;}
body>form #menu:after, body>form #menujs:after{content:".";visibility:hidden;}
body>form #menu, body>form #menujs{line-height:150%;min-height:1.7em;}
#IERoot #menu li, #IERoot #menujs li,#IERoot #menu, #IERoot #menujs{height:1.6em;}
#menu li, #menujs li{float:left; width:14%; position:relative;color:#F0F0F0;background-color:#333333;}
#menu li.wide, #menujs li.wide{width:28%;}
#menu li.thin, #menujs li.thin{width:10%;}
#menu ul li:hover, #menujs ul li.hover{color:#FFD100;}

#menu ul ul li, #menujs ul ul li{background-color:#FFFFFF;color:#333333;float:none;width:auto;clear:left;padding:0 0 0 5px;}
body>form #menu ul ul li:hover, #menujs ul ul li.hover{color:#333333;background-color:#EEEEEE;}

#menu ul ul, #menujs ul ul{display:none;height:0;width:100%;border:2px solid #333333;}
#menu ul .thin ul, #menujs ul .thin ul{width:150%}
#menu ul ul, body>form #menujs ul ul{position:absolute;}

body>form #menu ul :hover ul, #menujs ul .hover ul{height:auto;}

#menu ul ul ul, #menujs ul ul ul{position:absolute; top:0; left:100%;width:30.5em;background-color:#F0F0F0;padding:5px 0 5px 5px;}
#menu ul ul ul li, #menujs ul ul ul li{float:left;width:15em;padding:0 0.1em;background-color:#F0F0F0;color:#333333;clear:none;}
#menu ul ul ul li a, #menujs ul ul ul li a{float:left;width:98%;}

/* style anchors */
#menu a:link,#menu a:visited,#menu a:hover,#menu a:active,
#menujs a:link,#menujs a:visited,#menujs a:hover,#menujs a:active{color:inherit;}
html #IERoot #menu li a:link, html #IERoot #menu li a:visited,
html #IERoot #menu li a:hover, html #IERoot #menu li a:active,
html #IERoot #menujs li a:link, html #IERoot #menujs li a:visited,
html #IERoot #menujs li a:hover, html #IERoot #menujs li a:active{color:#FFFFFF;}
html #IERoot #menu li:hover>a:link,html #IERoot #menu li:hover>a:visited,
html #IERoot #menu li:hover>a:hover, html #IERoot #menu li:hover>a:active,
html #IERoot #menujs li.hover>a:link,html #IERoot #menujs li.hover>a:visited,
html #IERoot #menujs li.hover>a:hover, html #IERoot #menujs li.hover>a:active{color:#FFD100;}

html #IERoot #menujs ul ul li a:link, html #IERoot #menujs ul ul li a:visited,
html #IERoot #menujs ul ul li a:hover, html #IERoot #menujs ul ul li a:active,
html #IERoot #menujs ul ul li.hover>a:link,html #IERoot #menujs ul ul li.hover>a:visited,
html #IERoot #menujs ul ul li.hover>a:hover, html #IERoot #menujs ul ul li.hover>a:active{color:#333333;}

/* hide/show menus */

body>form #menu ul :hover ul,#menujs ul .hover ul{display:block;}
body>form #menu ul :hover ul ul,#menujs ul .hover ul ul{display:none;}
body>form #menu ul :hover ul :hover ul,#menujs ul .hover ul .hover ul{display:block;}

/*------ Action Column */

#actionCol{width:19em;margin:10px;position:relative;background-color:#FFFFFF;float:left;}

* html #actionCol{margin-right:4px;}

#actionCol p{margin:3px;}
#actionCol input[type=submit]{position:static;float:right;margin:3px 13px 3px 0;}
#actionCol select{width:95%;}
* html #actionCol select{width:90%;}

/*#IERoot #actionCol input[type=submit]{position:static;left:0;float:right;margin:3px 13px 3px 0;}*/

/*------ Form Styling */

.inputList .minWidth{display:inline-block; width:80%;}
.inputList p label{float:left;width:15em;}
.inputList p input[type=text], .inputList p input[type=password], 
.inputList p input[type=checkbox], .inputList p select, .inputList p textarea{width:12em;position:relative;}
.inputList p select.short{width:4.5em;}
.inputList p{min-height:1.5em;height:auto;}
input[type=text], input[type=password]{margin:1px 0;}
/*------ Product Summary */

#tblProds td{background-color:#D8D8F0;color:#000000;}
#tblProds .alt td{background-color:#F0F0F0;color:#000000;}
#tblProds th{background-color:#333333;color:#FFFFFF;}
#tblProds td, #tblProds th{border:1px solid #EBF2F7;border-width:0 0 1px 0;}
#tblProds #colImage{width:8em;}
#tblProds #colAction{width:9em;}
#tblProds #colCompare, #tblProds #colStock{width:5em;}
#tblProds #colPrice1, #tblProds #colPrice2, #tblProds #colPrice3{width:6em;}
#tblProds .addToBask{width:7.5em;}
#tblProds .addToBask input[type=text]{width:80%;}

* html #tblProds{width:95%;}
* html #tblProds #colCompare{width:6em;}
* html #tblProds #colImage{width:6em;}
* html #tblProds #colStock{width:5em;}
* html #tblProds #colAction{width:9em;}
* html #tblProds .addToBask input{width:7em;}

.paging{padding:0.2em 0;}
.paging a, .paging span{padding:0 0.1em;}

#container{position:relative;border:5px solid #FFF;border-width:5px 10px 5px 20.5em;}
#inner{margin:0 -5px 0 -20.5em;}
#content{margin:0 5px 0 20.5em;padding:10px 0 10px 5px;min-height:600px;height:auto;}
* html #content{width:100%;}
#searchHeader{width:80%;border:1px solid #666;padding:5px;margin:0 0 10px 0;}
#searchHeader p{margin:3px 0;}
#filters a{margin-left:5px;}
#filters img{margin-right:5px;vertical-align:middle;}
#gridHead *, #gridFoot *{padding:0.2em;}

#rightCol{width:15em;height:100%;float:right;text-align:center;padding:3em 0;}
#rightCol *{text-align:left;}
#leftCol{border-right:16.5em solid #FFFFFF;padding-left:0.5em;}
h1.prodHeading{background-color:#333333;color:#FFFFFF;padding:0.2em;}
* html h1.prodHeading{height:1.1em;}

/*------ Products */
#prodSpec li{border-bottom:0.1em solid #F0F0F0;padding:0.4em 2em 0.4em 15em;overflow:auto;}
#prodSpec ul li{padding:0em;border:none;}
.attName {color:#AE0055;float:left;width:15em; height:100%;margin-left:-15em;}

/*------ Card Details */

#cardDetails{height:auto;min-height:12em;position:relative;}

/*------ Footer */

#footer{
  background-color:#000000;
  padding:0.5em 10px;
  color:#FFFFFF;
  position:relative;
  margin:0 -10px 0 -20.5em;
}

* html #footer{top:auto;}
#footer a:link,#footer a:visited,#footer a:hover,#footer a:active{color:#FFF;}
#footer li{display:inline; color:#FFF;background-color:transparent; padding:0 0.2em;white-space:nowrap;}

/*------ Table Styles */

td.tdflush, th.tdflush{border-width:0;margin-right:2px;}

#BasketDet th{width:12.5%;}
#BasketDet th#colDesc{width:37.5%;}

#RMASummary th{width:10%}
#RMASummary th#desc, #RMASummary th#action{width:24%;padding:0.1em 0.3em;}

#RMAItems th{width:20%;}
#RMAItems th#colFault{width:39%;}

#supportList li{padding:0.5em 0;width:80%;position:relative;border:1px solid #CCCCCC;border-width:1px 0;}
#supportList li img{margin-right:10px;}
#supportList li a{position:absolute; left:25em; bottom:0.5em;}

#ContactDetails p a{position:absolute;right:2em;top:auto;}
#OtherInfo select{width:165px;}

#bsktConfTotals, #bskTotals{width:100%;position:relative;}
#bsktConfTotals p,#bskTotals p{width:100%;}
#bsktConfTotals p span.fl, #bskTotals p span.fl{margin-left:50%;width:25%;padding: 0.1em 0.5%;}
#bsktConfTotals p span.fl{margin-left:60%;}
#IERoot #bskTotals p span.fl{width:24%;}

#bsktConfTotals p span.number, #bskTotals p span.number{width:12.5%;padding:0.1em 0.5%;float:left;}
#bsktConfTotals p span.number{width:13%;}
#IERoot #bskTotals p span.number{width:11.5%}
#IERoot #bsktConfTotals p span.number{width:13%}

/*------ Basket Styles */

#creditNotes, #divPayment{position:relative;}
#creditNotes label, #divPayment label{display:block;max-width:50%;}
#creditNotes label[for], #divPayment label[for]{display:inline;}

#pmntList{width:95%;}
#pmntList li{min-width:15em;width:50%;}


/*------ Homepage */

#homeProds h1, #homeNews h1{font-size:1.7em;padding-bottom:0.7em;}
#homeProds h2,#homeNews h2{font-size:1.1em;}

#homeBans div div{min-width:0;float:left;display:inline-block;}
#IERoot #homeBans div div{display:inline;float:none;}
#homeBans #bnrLrg{width:470px;}
#homeBans #bnrGrp{width:130px;vertical-align:top;}
#homeBans p{margin:0;padding:0;}
#homeBans #bnrLone{width:120px;}
#homeBans{text-align:center;width:99%;}

#IndProdLst, #IndManLst{margin: 0.5em 0;}

#application h2, #application h3{color:#000;}
/*------ Application */

.Other label{min-width:0;}
.Other input{margin:0 0.5em;}
.noLabel input[type=text]{margin-left:10em;width:50%;}
@media print
{
    .noprint,#divPrint,#actionCol{display:none !important;}
    #header *{visibility:hidden;}
    #header .tag img{visibility:visible;}
    #container{border:0;}
    #header{border-bottom:none;height:130px;width:95%;}
    #inner{margin:0;}
    #content{margin:0;padding:0;}
    td, th{border:2px solid #000000;padding-right:3px;}
    th, h1, h2, h3, h4, h5, h6, .highlighty, .highlightb{background:#FFFFFF;color:#000000;}
    .outline{border:2px solid #000000;}
    body{font-size:12pt;}
    body #IERoot{font-size:11px;}
}

/*------ IE cannot take relative sizes for scaling */
#IERoot #actionCol{width:243px;}

#IERoot #container{border-width:5px 10px 5px 262.4px;}
#IERoot #inner{margin:0 -5px 0 -262.4px;}
#IERoot #content{margin:0 5px 0 262.4px;}

