/*
		Styles by gavjof
		www.gavjof.com
		
	\\ SCREEN.CSS (for Front End Styles) //
*/

body { 
/*
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #000;
	background-color: #555;
	margin: 0;
*/	
	background-color: #FFFFFF;
	background-image: url(images/bg2.gif);
	background-repeat: repeat-x;
	font-family: "Verdana", "Helvetica", sans-serif;
	font-size: 11px;
	color: #000000;	
line-height: 1.25em;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Customise the standard HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


html *{
	margin: 0;
	padding: 0;
}




a:link, a:active {
	color: #003366;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

a:visited{color: #6699cc;}




hr {
	margin: 5px 0px 5px 0px;
	color: #603;
	border: 0;
	border-top: 1px solid #603;
	height: 1px;
}

h1, h2, h3, h4, h5, h6 {color: #999999;font-weight:bold;font-family: "Helvetica", sans-serif; margin-bottom: 0.5em; 
	margin-top: 2em; 
	text-align: left;
line-height: 1em;
}
h1  	{font-size:2.0em; margin-top: 0em;}
h2  	{font-size:1.5em;}
h3, h4, h5, h6 {font-size:1.3em;}
h4 {font-weight: bold; color: #999999; font-size: 12px;} /* dark silver */
h5 {font-weight: bold; color: #003366; font-size: 12px;} /* dark blue */
h6 {font-weight: bold; color: #6699cc; font-size: 12px;} /* dark red */

p { text-align: left; }

p + p {margin-top: 1em;}

/*ul, ol{margin: 0 0 16px 20px; padding: 0;} */
ul, ol{margin: 1em 0 16px 20px; padding: 0;}
ul {list-style-image: url('images/pointer.off.png'); text-align: left; }

li {margin: 0; padding: 2px 0 0 0;}
ul ul, ol ol {margin: 0 0 0 16px; padding: 0;}
ol ol {list-style: lower-alpha;}

img.floatLeft {float: left;  margin:0; border:0; padding:0; margin-right: 15px; margin-bottom: 15px; vertical-align: text-top; }
img.floatRight {float: right;  margin:0; border:0; padding:0; margin-left: 15px; margin-bottom: 15px;}


a img {border: 0; margin-top: 1em; margin-bottom: 1em;}
a img:hover,
a:hover img{ 
	opacity: 0.7; 
	}

form {margin: 0;}

blockquote 	{
font-family: "Verdana", "Helvetica", sans-serif;
	font-style:italic;
	color: #999999;
	border-left: 2px solid #999999;
	padding-left: 10px;
	font-size: 1.0em;
	margin-bottom: 1em;
}



abbr {}
acroynm {}
cite {}
address {}
strong {}
em {}

/* --- Amend the standard styles --- */

#topNavShortcut *,
#topNavShortcut p{ 
	font-family: "Verdana", "Helvetica", sans-serif;
	font-size: 10px;
	color: white;
	text-transform: uppercase;
	font-stretch: extra-condensed;
	font-weight: 700;	 
}
#topNavShortcut a:link,
#topNavShortcut a:active,
#topNavShortcut a:visited{color: white; text-decoration: none;}
#topNavShortcut a:hover{text-decoration: none;}



/* Breadcrumbs */
#breadcrumbs a:link,
#breadcrumbs a:active,
#breadcrumbs a:visited{color: black;}
#breadcrumbs a:hover{text-decoration: none;}


/* National home page */




#sideColumn *{ 	
	font-size: 0.95em;}

#sideColumn h1, 
#sideColumn h2, 
#sideColumn h3, 
#sideColumn h4, 
#sideColumn h5, 
#sideColumn h6 {
	width: 230px;
	margin-top: 0;
position: relative;
left: -25px;
	padding-left: 25px;
	padding-top: 4px;
	padding-bottom: 4px;

	background-image: url('images/heading1bg.png');
	background-position: left center;
	background-repeat: repeat-y;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	vertical-align: middle;
	font-size: 12px;
	font-weight: 100;
	color: white;	


padding-top: 0px;
padding-bottom: 0px;
height: 19px;
line-height: 19px;
vertical-align: middle;

}



#sideColumn h2, 
#sideColumn h3, 
#sideColumn h4, 
#sideColumn h5, 
#sideColumn h6 {
/*
	padding-top: 2px;
	padding-bottom: 2px;
*/
	background-image: url('images/heading1bg.png');
	background-position: left center;
	background-repeat: repeat-y;
	font-size: 11px;
padding-top: 0px;
padding-bottom: 0px;
height: 15px;
line-height: 15px;
vertical-align: middle;	
}

/*
#sideColumn p,
#sideColumn ul {
	padding-left: 1em;
}
*/
#sideColumn ul,
#sideColumn ol{margin-left: 0;}

#sideColumn li { 
	margin: 0em; 
	padding: 0em;
	margin-left: 15px; 
}


#sideColumn li a{
	color: inherit;
	color: #5687b9;
	text-decoration: none;
	font-weight: bold;
}

#sideColumn a:hover{
	text-decoration: none;
	color: #003366;
}

a.splashContact,
a.splashContact:link,
a.splashContact:visited,
a.splashContact:hover,
a.splashContact:active {color: black;}



/* Normal side column */
.sideNormal h1,
.sideNormal h2,
.sideNormal h3,
.sideNormal h4,
.sideNormal h5,
.sideNormal h6{
/*
	width: 198px;
*/
	padding: 0;
	margin: 0;	
	padding-left: 10px;
	border-bottom: 1px solid #cccccc;
	background: none;
/*	
	background-image: url('images/title.gif');
	background-position: left center;
	background-repeat: no-repeat;
*/
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	color: #333333;
	text-transform: uppercase;
margin-bottom: 1em;
/*
height: 19px;
*/
line-height: 19px;
vertical-align:top;
background-color: #efefef;
}


#sideNav ul{padding-left: 5px;}


#sideNav ul li.menu-parent,
#sideNav ul li.menu-current{
	list-style-image: url('images/pointer.on.png');
}

#sideNav ul li a:link,
#sideNav ul li a:visited{ /* Dark blue */
	font: bold 10px/1.1 "verdana", sans-serif;
	color: #003366;
	text-decoration: none
}

#sideNav ul li.menu-current a,
#sideNav ul li.menu-current a:hover {color: #6699cc;} /* Light blue */
#sideNav ul li.menu-current ul li a{color: #003366;} /* Dark blue */
#sideNav ul li a:hover{ color: #999999; text-decoration: none } /* Dark grey */


.threePanels *{ color: white;}
.threePanels a{ color: white;}

.threePanels h1,
.threePanels h2,
.threePanels h3,
.threePanels h4,
.threePanels h5,
.threePanels h6{ 
	color: rgb(215,215,215);
background-color: #003366;	 
	width:232px; 
	position: relative; 
	left: -15px; 
	padding-left: 15px; 
	padding-right: 15px; 
	padding-top: 3px;
	padding-bottom: 3px;
	display: block;
	margin-top: 0;
	text-transform: uppercase;
	font-weight: 600;
vertical-align: text-bottom;

font-weight: 400;
	}



.threePanelsMiddle h1,
.threePanelsMiddle h2,
.threePanelsMiddle h3,
.threePanelsMiddle h4,
.threePanelsMiddle h5,
.threePanelsMiddle h6 {width: 230px;}

#midContentContainer img{ width: 100%; display: block; margin-top: 1em;}


/* Bottom panel */
#bottomContentContainer *{ color: white;}
#bottomContentContainer h1{ color: #cccccc;}
#bottomContentContainer h2{ color: #cccccc;}
#bottomContentContainer h3{ color: #cccccc;}
#bottomContentContainer h4{ color: #999999;} /* dark silver */
#bottomContentContainer h5{ color: #003366;} /* dark blue */
#bottomContentContainer h6{ color: #6699cc;} /* dark red */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main { /* Holds the page items in place */
	width: 786px;
	margin: 5px auto 0 auto;
	padding: 0;
	background: #fff;
border: 1px solid #003366;	
}
#extras {  /* objects outside main page (powered by etc) */
	width:786px ;
	margin: 0 auto;
	padding-bottom:10px;
	font-family: "Verdana", "Helvetica", sans-serif;
	font-size: 0.7em;
	color: red;
	padding:0;
	color: #999999;
padding-bottom:10px;
}
#banner {
	padding: 0;
	text-align: left;
	background: #666;
	font-weight: bold;
	border: 0px solid #000;
	background-color: white;
	/*
	put a nice background in here
	background: transparent url('my-image.jpg') top left no-repeat;
	*/
position: relative;	
height: 98px;
z-index: 100; /* Need this to make navigation infront of main content */
}


* html #banner {clear:both;height:70px;} /* ie6 misbehaves again */



#bannerContentSpacer{width: 100%; height: 25px;}

#contentContainer{
	position: relative;
}

#content { /* main content from the WYSIWYG goes in here */
	margin: 0;
	padding: 0;
	text-align: justify;
clear: left;
width: 493px;
float: left;

padding-top: 0;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;

}


#sideColumn { 
	width: 222px;
	margin: 0;
	padding: 0;
float: left;
border-left: 1px solid #cccccc;
padding-top: 0;
padding-right: 15px;
padding-bottom: 1px;
padding-left: 25px;
min-height: 410px;
}

#sideColumnNormal { 
	width: 198px; /* 232px */
	margin: 0;
	padding: 0;
float: right;
border-left: none;
padding-top: 0;
padding-right: 15px;
padding-bottom: 1px;
padding-left: 15px;
min-height: 410px;
}

.sideNormal{
	width:auto;
	border: 1px solid #999999;
	background-color: aqua;
	width: 198px;
	background-image: url('images/sideNormal.bg.gif');
	background-position: left top;
	background-repeat: repeat-x;
	background-color: #efefef;	
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;

	
margin-top: 15px;

padding-right: 0;
}

table.rightColContact img {margin:0; padding:0;}
table.rightColContact {
	border-collapse: collapse;
}

table.rightColContact td {
	padding: 4px;
	vertical-align: middle;
	padding-bottom: 10px;
}














.sideNormalLine{
	width: 100%;
	height: 6px;
	margin: 0;
	margin-top: 15px;
	padding: 0;
	display: block;
	border-top: 1px solid #999999;
}



#midContentContainer{
	clear: both;	
	background-color: #5687b9;
	border-top: 1px solid #cccccc;
background-image: url('images/three_panel_bg.png');
	background-position: top right;
	background-repeat: repeat;
overflow: hidden;
}

.threePanels{
	width: 232px;
	margin: 0;
	padding: 0;
	padding-right:15px;
	padding-bottom:15px;
	padding-left:15px;	
	float: left;
position: relative;
display: inline;

height: 350px;
max-height: 350px;
}

.threePanelsMiddle{
	width: 230px;

border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;

height: 350px;
max-height: 350px;
}



#bottomContentContainer{
	border-top: 1px solid #cccccc;
	background-color: #5687b9;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;	
}


/* * html #contentContainer #content {text-align:left;} */ /* ie6 misbehaves */
/* * html #contentContainer #content table {width: 90%;} */ /* ie6 fix to stop tables being pushed below floats */

#footer { 
	font-family: "Verdana", "Helvetica", sans-serif;
	font-size: 0.8em;
	color: #999999;
	border-top: 1px solid #555;
	padding: 5px 5px 5px 5px;
	clear: both;
	background: #003366;
text-align: center;
}

#footer a{color: #999999; border: 1px }




#baker_footer	{font-style:oblique;} /* Pulls information from PAGE_FOOTER */
#powered_by, #coding 	{text-align:right; color:#003366;}
#powered_by a, #coding a {color:#003366; text-decoration: underline;}
#powered_by a:hover, #coding a:hover {color:#003366; text-decoration: none;}

#copyright{ font-family: "Verdana", "Helvetica", sans-serif; color: #999999; text-align: center; font-size: 1.3em; padding: 1.5em 0 2em 0; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Banner top-left */
#bannerTopLeft{
	left: 0;
	top: 0;
	width: 199px;
	height: 28px;
	background-image: url('images/logo-topLeft.jpg');
}


/* Search Box in banner */

#search-box {
	height: 28px;
	width: 587px;
	padding-top: 3px;
	font-family: "Verdana", "Helvetica", sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: right;
	color: #999;
	background-image: url(images/logo-topRight-bg.jpg);
	background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;	
}

input.search {
	height: 12px;
	font-size: 10px;
	border-style: solid;
	border-top-color: #a0a0a0;
	border-left-color: #a0a0a0;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF
}

input.search-submit {
	font: bold 10px/1.0 "verdana", sans-serif;
	color: #336699
}

#bannerBottomLeft{
position: absolute;
	left: 0px;
	top: 28px;
	width: 199px;
	height: 70px;
	background-image: url('images/logo-bottomLeft-common.jpg');
}

#bannerTopLeft span,
#bannerTopLeft a,
#bannerBottomLeft span,
#bannerBottomLeft a{width: 199px; height: 70px; display: block; text-decoration: none;}

#grey-bar {
	position: absolute;
	right: 0;
	top: 57px;
	height: 6px;
	width: 500px;
	background-color: #cccccc;
	overflow:hidden;
}

#topNavShortcut{
	position: absolute;
	right: 0;
	top: 63px;
	height: 25px;
	width: auto;
	padding-left: 15px;
	padding-right: 15px;
	line-height: 25px;
	vertical-align: middle;
	background-color: #6699cc;
	overflow:hidden;
}

#breadcrumbs{
	position: absolute;
	right: 0;
	top: 90px;
	height: 15px;	
	width: 500px;
	background-color: white;
	overflow:hidden;
	font-size: 0.8em;
	text-align: right;
	padding-right: 15px;
}



/* Customise the Login Box */
#login-box { background: #eee; text-align: center;	line-height: 140%; margin: 1em 0 0.3em 0; border: 1px solid #ddd;}
#login-box fieldset {border:0;text-align:center;}
#login-box legend		{
	font-size: 90%;
	text-transform: uppercase;
	font-family:"Times New Roman", Times, serif;
	color: #333;
	font-weight: normal;
	letter-spacing: 0.15em;
}
.username {color: #009;} /* Color of name when logged in*/
.topboxbody {font-size:0.8em;padding:2px;}

#login-box input {
	text-transform: uppercase;
	font-size: 10px;
	margin: 5px 0px 1px 0px;
	width: 100px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	Custom Classes (Re-useables)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
/*  Float containers fix: */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*  \*/
* html #clearfix {
	height: 1%;
}
/*  */

.stealth {visibility:hidden; display:none;} /* hides from normal css enabled browsers */



/* Inline font Styles */
/* Pretty styles for changing text in the WYSIWYG editor */

.important	{font-weight:bold;color:#f00;}
.code				{font-family: "Courier New", Courier, mono; color:#093;letter-spacing: 1px;}

.info-box		{border: 1px solid #cc3; background-color:#F9F8E2;padding:4px;}





/* Trying to get nice titles running... */
div.nicetitle {
    position: absolute;
    padding: 4px;
    top: 0px;
    left: 0px;
    color: white;
    font-size: 10px;
    font-family: "Verdana", "Helvetica", sans-serif;
    width: 35em;
width: auto;
height: auto; 
max-width: 25em;
    background: url(images/ntbg.png);
    
    -moz-border-radius: 6px;
    border-radius: 6px;
}
div.nicetitle p {
    margin: 0; padding: 0 3px;
}
div.nicetitle p.destination {
    font-size: 9px;
    text-align: left;
    padding-top: 3px;
}

/* News */

.post_top td{border-top: 1px solid #003366; background-color: #cccccc; padding-bottom: 4px; }

.post_date{ text-align: right;}

.post_top,
.post_title a,
.post_date {color: #003366; font-size: 1.1em; text-decoration: none; }

td.post_short { padding-bottom: 25px; }

/* --- Search results --- */

.searchResultLoopHeader{background-color: #cccccc;}


/* --- Dixon companies page --- */
#companies h2{padding-left: 100px; margin-top:0;}
#companies img{float:left}
#companies{position: relative; }
#companies p + h2 {margin-top:30px;}
#companies img + p{padding-left: 100px;}
#companies img{margin-top: -20px;}


/* --- Products page (product contents) --- */
#products h2{padding-left: 130px; margin-top:2.5em;}
#products img{float:left}

#products{position: relative; }
#products p + h2,
#products li + ul + h2 {margin-top:60px;}
#products p{padding-left: 130px;}
#products ul {padding-left: 130px; display: block;}
#products img{margin-top: -20px;}

#products ul {margin-bottom: 0.5em;}
#products ul p {margin-top: 0;}

#products h2 + p { padding-left: 0; } /* New rule to account for WB insisting on wrapping <img> in <p>. */

/* --- Products items  --- */
#productItems {margin-top: 3em;}
#productItems img {float: left; margin-bottom: 1em; margin-right: 1em;}
#productItems p {
	background-image: url('/media/pdf_20x20.gif'); 
	background-repeat: no-repeat;
	background-position: top right;
	padding-right:50px;
	vertical-align: top;
	margin-top: 1em;
	clear:both;
	min-height:25px;
	display: block;
text-align: left;
}
#productItems p a{display: block; margin-right: 0px;}
#productItems + p {clear: left; padding-top:2em;}


/* --- Dixon Markets page --- */
#markets img {float: right;}
#markets h3 { text-align: left;}


/* --- Dixon Literature --- */
p + #literature {margin-top: 2em;}
#literature h2{padding-left: 70px; margin-top:0;}
#literature img{float:left}
#literature{position: relative; }
#literature p + h2 {margin-top:50px;}
#literature img + p{padding-left: 70px;}
#literature img{margin-top: -25px;}

/* --- Dixon Product Literature --- */
p + #productLiterature {margin-top: 2em;}
#productLiterature h2{padding-left: 70px; margin-top:0;}
#productLiterature img{float:left}
#productLiterature{position: relative; }
#productLiterature p + h2 {margin-top:50px;}
#productLiterature img + p{padding-left: 70px;}
#productLiterature img{margin-top: -25px;}


/* --- Technical information --- */
#technicalInfo a img{margin: 0; padding: 0;}
#technicalInfo p + p{margin-top: 3em;}



/* --- Other Literature --- */
p + #otherLiterature {margin-top:2em;}
#otherLiterature h2{padding-left: 70px; margin-top:0;}
#otherLiterature img{float:left}
#otherLiterature{position: relative; }
#otherLiterature p + h2 {margin-top:50px;}
#otherLiterature img + p{padding-left: 70px;}
#otherLiterature img{margin-top: -25px;}


/* --- Contact Us --- */
#contactMap {float: right; margin-top: 30px; margin-left: 1em;}
#contactMap + h3 {margin-top: 40px; padding-top:0;}