/* CSS Document */

body {
	margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#d9d9d9; color:#333333; /* Always define 0px margin and padding, never use the Body tag to specify spaces. Body tags should only be used to specify backgrounds, font-family's (i.e. Arial, Verdana etc), a container class (i.e. line 39, .container) should be used to specify spaces. */
}

h1 {
	margin:0px; padding:0px; /* Always define 0px margin and padding to begin with on heading tags. You can then modify these as you continue building a site. */
}

    h1.htwotoparea {
	    position:absolute; top:-22px; left:13px; font-size:26px; line-height:30px; color:#c5031a !important; text-transform: capitalize;
    }
    
h2 {
	margin:0px 0px 10px 0px; padding:0px; font-size:18px; line-height:22px; color:#c5031a !important; /* */
}

    h2.homepage
    {
        margin-left:5px !important;
    }
    h2.htwotoparea {
	    position:absolute; top:-22px; left:13px; font-size:26px; line-height:30px; text-transform: capitalize;
    }
        

h3 {
	margin:0px; padding:0px; color:#0488cf; font-size:18px; font-weight:bold; line-height:22px; /* */
}

h4 {
	margin:0px 0px 10px 0px; padding:0px; font-size:12px; line-height:15px; font-weight:bold; color:#009ee0 !important; /* */
}

h5 {
	margin:0px 0px 4px 0px; padding:0px; font-size:12px; line-height:15px; font-weight:bold; color:#cd273a !important; /* */
}

h6 {
	margin:0px 0px 5px 0px; padding:0px; font-size:16px; line-height:20px; font-weight:bold; color:#c5031a !important; /* */
}

a {
	text-decoration:none; color:#707173;
}

	a:hover {
		color:#999999;
	}
	
a img {
	border:0px; /* This defines that any images placed inside a <a href> tag or a .NET 2.2 Hyperlink have no default "blue" border that Internet Explorer adds by default */
}


div, a, textarea:focus, input:focus {
	outline:none !important;
}


p {
	margin:0px; padding:0px; font-size:12px; line-height:15px; color:#333333; /* Rule:when specifying font-size, line-height should always be roughly 3px more, so, i.e. 11px font-size = 14px line-height. */
}


		
		
		
		.floatnone {
			float:none !important;	
		}
		
		
		.nobackground {
			background:none !important;	
		}




div.clear {
	clear:both; line-height:0pt; font-size:0px; height:0px; /* When a CSS class has an auto height (i.e. line 39, .container), it means that it'll grow in height according to the elements inside it. However, due to cross-browser differences, some browsers will not comply with this rule as they dont take into account floated elements so the DIV is 0px in height effectively. 'div.clear' is an "invisible" DIV which enforces this rule. */
}

/* ******************************** */
/* CSS Cross-browser clear solution */

* html div.clear {
	line-height:0px; .line-height:0px; 
}

div.clear {
	.line-height:5px; 
}

/* CSS Cross-browser clear solution */
/* ******************************** */


.outercontainer {
	position:relative; width:100%; height:auto; margin:auto; 
}

.container {
	position:relative; width:100%; height:auto; margin:0px; padding:0px; 
}

.outerheader {
	position:relative; width:100%; height:auto; margin:0px; padding:0px; background:url(../../Images/layout/headerbg.gif) repeat-x 50% 0%; 
}
	
.header {
	position:relative; width:100%; height:auto; margin:0px; padding:0px; /*background:url(../../Images/layout/bg_star.gif) no-repeat 50% 0%; */
}
	
	.innerheader {
		position:relative; width:960px; text-align:left; min-height:59px; height:auto !important; height:59px;  margin:auto; padding:0px; /*background:url(../../Images/layout/bg_star.gif) no-repeat 50% 0%;*/
	}
	
	.adbanner { float:left; width:686px; height:73px; margin:0px; padding:0px 0px 0px 0px; }
	
	.searchbar { float:right; width:264px; height:23px; margin:0px; padding:50px 0px 0px 0px; }
	
		.searchbar input.searchbox { float:left; font-family:Arial,Helvetica,sans-serif; font-size:11px; padding:2px; border:2px solid #04bdfb; width:196px; height: 15px;}
		
		.searchbar input.searchbutton { float:left; width:60px; height:23px; margin:0px; padding:0px; }
		
	
	a.logo { position:absolute; bottom:7px; left:0px; }

	
	.topnavigation { position:absolute; bottom:0px; right:0px; width:678px; height:48px; }
	
		.topnavigation ul.tabs { position:relative; top:0px; float:right; margin:0px; padding:0px; width:auto; height:48px; }
	
		.topnavigation ul.tabs li {	list-style:none; display:block; float:left; margin:0px; padding:0px; height:48px; }
	
		.topnavigation ul.tabs li a { color:#ffffff; margin:0px; padding:0px 10px 0px 10px; text-decoration:none; font-size:11px; font-family:Arial, Helvetica, sans-serif; font-weight:normal;	text-transform:uppercase; background-image:url(../../Images/layout/nav_bluebg.gif); background-repeat:repeat-x; height:48px; line-height:48px; display:block; float:left; }
	
		.topnavigation ul.tabs li a:hover {	background-image:url(../../Images/layout/nav_redbg.gif); background-repeat:repeat-x; }
	
		.topnavigation ul.tabs li a.active { color:#ffffff;	background-image:url(../../Images/layout/nav_redbg.gif); background-repeat:repeat-x; }
	


/* CONTENT CSS STARTS HERE */

.outercontent {
	position:relative; width:100%; height:auto; margin:auto; background:url(../../Images/layout/headerbg.gif) 50% -59px repeat-x #ffffff; /* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content {
	position:relative; width:100%; height:auto; margin:0px; padding:0px; /*background:url(../../Images/layout/bg_star.gif) no-repeat 50% -149px; */
}

	.innercontent {
		width:960px; min-height:500px; height:auto !important; height:500px; margin:auto; border-top:4px solid #c5031a; background-color:#FFFFFF; /* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
	}
	
		.innercontent.flipcontent {
			width:950px; padding-right:10px;	
		}
		

/* FOOTER CSS STARTS HERE */

.outerfooter {
	position:relative; width:100%; height:auto; margin:auto; /*background:url(../../Images/layout/bodybg.gif) 50% 0% repeat-x #ffffff;  */
}

.footer { position:relative; width:940px; margin:auto; padding:20px 0px 0px 0px; }
	
	.footersitelinks { float:left; text-align:left; width:530px; margin:0; padding:0; }
	
		.rightlinks { float:right; text-align:right; width: 410px; }
		
	.footersitelinks ul { float:left; margin:0px; padding:0px 0px 25px 0px; width:410px; white-space:nowrap; display:none; }
	
	.footersitelinks ul li { list-style:none; display:inline; margin:0px; padding:0px 10px; white-space:nowrap; }
	
	.footersitelinks ul li:first-child { padding-left:0px; }
	
	.footersitelinks ul li:last-child { padding-right:0px; }
	
	.footersitelinks ul li a { color:#333333; margin:0px; padding:0px; text-decoration:none; font-size:11px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
	
	.footersitelinks ul li a:hover { color:#999999; }
	
	.footersitelinks ul li a img { padding: 0px 5px 0px 5px; }
	
	p.footercopy { width:530px; color:#333333; margin:0px; padding:0px 0px 25px 0px; font-size:11px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

    .rightlinks p.footercopy { width: 410px; }
	
	p.footercopy a { color:#333333; }
	
	p.footercopy a:hover { color:#999999; }
	
	p.footercopy a.sociallinks { color:#333333; }
	
	p.footercopy a.sociallinks:hover { color:#333333; }	
	
	p.footercopy img { padding: 0px 5px 0px 10px; }



/* 2018 adverts*/

/* homepage */
.six-adverts {
    width:100%;
    float:left;
}

.six-adverts a {
    width:100%;
    display:block;
    float:left;
    clear:both;
    margin-bottom:10px;
}	

.six-adverts a img {
    width:100%;
    display:block;
    float:left;
}

/* prodpage */
.six-adverts-prod {
    text-align:left;
    width:100%;
    margin:10px auto;
}
.six-adverts-prod a {
    width:90px;
    height:90px;
    display:inline-block;
    margin:10px 20px 0 20px;
    overflow:hidden;
}
.six-adverts-prod a img {
    width:100%;
    display:block;
    float:left;
}