/* clear away the body margins and scrollbars from the body to get a clean canvas*/
body {
    margin:0px;
    overflow:hidden;
	height:100%;
        
    /* look and feel */
    background-color: #FFFAF0;
}

/* cause any rtf text to maintain the overall corp design and not kindie!, they now inherit from their immediate parent container */
/* oh well, customer has requested that we dont prevent them doing this anymore - so much for corporate identity*/
/* font{
    color:inherit;
    font-size:inherit;
    font-family:inherit;
} */

/* if the html editor inserts p into the content remove margins so customer doesn't create unwanted gaps */
p {
    margin-top:0px;
}

/* remind ie to stretch table cells to the height of the row they are in */
td {
	height: expression("100%");
}

.block{
    display:block;
}

.hidden{
	display:none;
}

.nowrap{
	white-space: nowrap;
}

.clearFloat{
    clear:both;
}

.floatLeft{
    float:left;
}

.floatRight{
    float:right;
}

.vertSpaceSmall{
	padding-top: 6px;
	padding-bottom: 6px;
}

.padAbove{
	padding-top: 10px;
}

.padLeft{
    padding-left:15px;
}

.padLeftMedium{
	padding-left:7px;
}

.padLeftTiny{
    padding-left:3px;
}

.padRight{
    padding-right:15px;
}

.padRightTiny{
    padding-right:3px;
}

.gapLeft{
    margin-left:15px;
}

.gapRight{
    margin-right:15px;
}

.gapAfter{
	margin-bottom: 15px;
}

.alignCentre{
	text-align: center;
}

.alignRight{
	text-align: right;
}

/* center the canvas in gecko */
#templ8a_canvasCenter{
	position:relative;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	max-width:1000px;
}

#tmpl8a_fixedHeightHeader{
	position:absolute; /* remove from normal flow layout */
	z-index:9;
	top:0px; /* position at top of viewport */
	left:0px; /* initially stretch to full width of viewport for gecko */
    right:0px;
	max-width:1000px; /* restrain the max width the site should stretch to for gecko .d 1000px */
    min-width:520px;   /* restrain the min width the site should stretch to for gecko (unless fixed width content forces greater min width) .d 520px */
	/* an inline javascript to calculate for the min width and max width the site should stretch for ie (fixed content also can force greater min width) .d 520px <-> 1000px */
	width:expression(document.body.clientWidth < 520 ? 520 : document.body.clientWidth > 1000 ? 1000 : document.body.clientWidth);
    
    height:130px; /* height of header strip for mac ie only (of our tested browsers)*/
    
	overflow:hidden; /* anything that doesnt fit in the header will be clipped */
	left:expression(this.offsetWidth > document.body.clientWidth ? 0 : (document.body.clientWidth-this.offsetWidth)/2); /* center max width in ie */

	/* appearance of header row */
    background-color: #FFFFFF;
}

/* mac ie obeys !important \ but gets the box model wrong so tell moz and ie win here the height of the header*/
#tmpl8a_fixedHeightHeader{
    height:128px !important;
    height:130px;
}
/* end of mac ie frig */

#tmpl8a_fixedHeightFooter{
	position:absolute; /* remove from normal flow layout */
	bottom:0px; /* position at bottom of viewport */
	left:0px; /* initially stretch to full width of viewport for gecko */
    right:0px;
	max-width:1000px; /* restrain the max width the site should stretch to for gecko .d 1000px */
    min-width:520px;   /* restrain the min width the site should stretch to for gecko (unless fixed width content forces greater min width) .d 520px */
	/* an inline javascript to calculate for the min width and max width the site should stretch for ie (fixed content also can force greater min width) .d 520px <-> 1000px */
	width:expression(document.body.clientWidth < 520 ? 520 : document.body.clientWidth > 1000 ? 1000 : document.body.clientWidth);
    height:20px; /* height of footer strip */
	overflow:hidden; /* anything that doesnt fit in the header will be clipped */
	left:expression(this.offsetWidth > document.body.clientWidth ? 0 : (document.body.clientWidth-this.offsetWidth)/2); /* center max width in ie */
	
	/* appearance of footer row */
    background-color: #FFFFFF;
    text-decoration:none;
    padding-left:10px;
	line-height: 20px; /* only allow 1 line of text */
	color: #555555;
}

#templ8a_canvasDiv{
	position:absolute; /* remove from normal flow layout */
    top:130px; /* height of header strip so that the canvas starts beneath the header*/
    bottom:20px; /* stretch down in gecko leaving room for the height of the footer strip */
	/* calcualte the height to use for ie in line javascript making adjustment for height of header and footer */
    height:expression(document.body.clientHeight - document.getElementById("tmpl8a_fixedHeightHeader").clientHeight - document.getElementById("tmpl8a_fixedHeightFooter").clientHeight);
    left:0px; /* initially stretch to full width of viewport for gecko */
    right:0px;
    max-width:1000px; /* restrain the max width the site should stretch to for gecko .d 1000px */
    min-width:520px; /* restrain the min width the site should stretch to for gecko (unless fixed width content forces greater min width) .d 520px */
    width:expression(document.body.clientWidth < 520 ? 520 : document.body.clientWidth > 1000 ? 1000 : document.body.clientWidth);
	font-size:0px; /* help prevent ie whitespace font-size messes with height bug */
	overflow:scroll; /* this div scrolls when its contents dimensions exceed its maximum stretch */
	left:expression(this.offsetWidth > document.body.clientWidth ? 0 : (document.body.clientWidth-this.offsetWidth)/2); /* center max width in ie */
    
	/* appearance of canvas div */
    
}

/* mac ie doesn;t do overflow \ auto so this accomodates */
#templ8a_canvasDiv{
    overflow:auto;
}
/* end of mac ie frig - this allows the overflow to be reset for all browsers but ie mac !! do not touch the comment layout it is actually code */

#templ8a_canvasTable {
	/* gecko will use relative positioning to display the table full height and width of the canvas div */
    position:relative !important;
    width:100%;
    height:100%;

	/* ie can get the same effect by absolutly positioning the table at the same position as the canvas div */
	/* and setting it to the same dimensions as the div */
    position:absolute;
    top:0px;
	left:0px;
    height:expression( document.getElementById("templ8a_canvasDiv").clientHeight );
    width:expression( document.getElementById("templ8a_canvasDiv").clientWidth );
    	
	/* appearance of canvas table */
}

#templ8a_lhs_container{
    /*  w3c box model accommodation as outer container is 100% height */
    padding-top:10px;
    background-color: #FFF1D0;
}

#templ8a_lhs{
	width:170px; /* dimensions of lhs */ 
	/* appearance of lhs */
}

#templ8a_ctr_container{
    width:100%; /* center area feels the flex */
	height:100%;
	padding-bottom:10px; /* prevents scrollbars cutting off bottom of content */

	/* appearance of center */
	background-color:#FFFFFF;
	color:#000000;
}
#tmpl8a_ctr_topbar{
    height:30px !important;
    height:31px;

    overflow:hidden;
    
    /* appearance of ctr topbar */
    background-color: #FFF1D0;
    color:#000000;
}

.langselector{
    float:left;
    height:100%;
    white-space:nowrap;
    padding-top:7px;
    margin-left:10px;
    margin-right:20px;
    padding-right:20px;
}

.langselector a{
    font-size:12px;
    text-decoration:none;
    padding-left:10px;
    color:#000000;
}
.langselector a:hover{
    text-decoration:underline;
}

.mainContent{
	padding-left:25px;
	padding-right:25px;
	padding-top:17px;
}

#templ8a_ctr{
    clear:both;
}

#templ8a_rhs_container{
	background-color: #FFFFFF;
}

#templ8a_rhs{
	width:200px; /* dimensions of rhs */
	
	/* appearance of rhs */
	color:black;
}
#templ8a_rhs_alt{
    padding-left:10px;
    padding-right:10px;
    padding-top:15px;
    background-color: #FFF1D0;
    width:180px;
    color:black;
    height:100%;
    border-left:none;
}

/* news preview and accreditation stamps*/
.AppletContainer{
	padding-left:12px;
	padding-right:12px;
	padding-top:6px;
	padding-bottom:10px;
}
.AppletTitle{
	font-size: 14px;
    color:#555555;
	font-weight: bold;
	padding-bottom:10px;
}
.AppletEntry{
	clear:both;
	padding-top:10px;
}
.HotProdAppletEntry{
	clear:both;
	padding-top:10px;
	text-align:center;
}

/* the site search applet*/
.searchContainer{
	margin-top: 6px;
}
.siteInput{
    font-size: 11px;
	line-height:12px;
	width:145px;
	padding:2px;
}
.SearchButton{
	font-size: 11px;
    color:#555555;
	font-weight: bold;
	text-decoration:none;
	margin-left:5px;
}
.SearchButton:hover{
	text-decoration:underline;
}

/* cart styles */
.cartInput{
    font-size: 11px;
	line-height:12px;
	width:30px;
	padding:2px;
	margin-top:2px;
	margin-left:10px;
	text-align: right;
}

.cartLocation{
	position: relative;
	height: 20px;
}

.locationExpandingDescription{
	overflow:hidden;
	position: absolute;
	height:17px;
	height:expression("19px");
	text-decoration:none;
	color:#555555;
	padding-top: 2px;
	z-index:5;
}

.locationExpandingDescription:hover{
	/* height: auto;
	z-index:20; */
}

.locationExpandingDescription span{
	display:block;
	background-color: #FFF1D0;
	padding-bottom: 4px;
}

/* pading of general, default and home page */
.generalPaging{
	padding-top: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* set the default fonts to use in the site */
div,td {
    /* in the per language css*/
}

/* common cms content styles */
.pageHeader{
    padding-bottom:3px;
    font-size: 18px;
    color:#555555;
}

.pageSubHeader{
    padding-bottom:3px;
    padding-top:1px;
    font-variant:small-caps;
    margin-bottom:8px;
    font-size: 13px;
}

.sectionHeader{
    padding-bottom:3px;
    margin-top:10px;
    margin-bottom:4px;
    font-size: 17px;
    color: #444444;
}

.sectionSubHeader{
    padding-bottom:3px;
    color: #777777;
    font-variant:small-caps;
    margin-bottom:4px;
    font-size: 11px;
}

.sectionContent{
    word-spacing:2px;
    line-height:18px;
    color:#555555;
}

/* not allowed to change colour - incase they want to in kindie styles */
.sectionContent b, .sectionContent strong{
    /* color:#777777; */
}

/* appearance of footer links */
.footerlink {
   float:left;
   padding-left:50px;
}

.footerlinkRight{
	float:right;
	padding-right:50px;
}

.moreprominent{
	border: solid 2px #D99F4E;
	display:block;
	margin-top:10px;
	text-align:center;
	padding-bottom:3px;
}