@charset "utf-8";
/* CSS Document */
/** RESET STYLE *******************************************************************************************/
/* This set of styles increases cross-browser compatibility by ensuring that the styles of all elements start off as we expect them to, whichever browser is used. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 1em;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
ol, ul {
	list-style: none; 	/* Remove style from lists */
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/** END RESET STYLE *************************************************************************************/

/** GENERAL STYLES *******************************************************************************************/
/* These styles apply to elements used across the whole site. */
body {
	font-family: Helvetica, Arial, sans-serif;	/* Helvetica first if possible, like the data sheets */
	text-align: center;							/* IE6 only: centres the wrapper div in the viewport */
	background-color: #FFF;						/* Background colour to appear to the sides of the main content */
	min-width: 770px; 							/* Stops content disappearing from sides in Gecko-based browsers */
	line-height: 1;								/* Standardise line height */
	color: #000;								/* Standardise body text colour */
}
p {
	font-size: 0.8em;							/* Make the main content text slightly smaller than usual.  */
	color: #666;								/* Default (i.e. main content) text body colour */
	line-height: 1.3;							/* Increase line spacing for paragraphs*/ 
}
a {												/* Code to apply to all links */
	font-size: 0.8em;							/* Reduce text size from default*/
	font-weight: normal;						/* Make links not-bold */
	text-decoration: none;						/* Do not underline links */
	padding: 0;									/* Remove padding from links */
	line-height: 1.3;							/* Increase line spacing for links*/ 
}
a.inparagraph{
	display: inline;
	font-size: 1em;
}
a:link {color: #000;}							/* Normally, links are this colour */
a:visited {color: #000;}						/* Visited links are this colour */
a:hover {color: #005288;}						/* On mouse over, links are this colour */
a:active {color: #005288;}						/* Active links are this colour */
a.paragraph{									/* CLASS - Apply this class to links in paragraphs where the font size is to be the same as the paragraph text */
	font-size: 1em;
}
h1 {											/* Use for page title, application page heading image overlay title */ 
	color: #005288;								/* Heading 1 style. In this case it's Calex blue */
	font-size: 1.2em;							/* Heading 1 font size is larger than normal text, but not too large */
	padding: 0 0 15px 0;						/* Some padding underneath heading 1 */
}
h2 {											/* Use for page subtitle, index page feature image overlay title, application page heading image overlay subtitle */ 
	color: #000;								/* Heading 2 style. In this case it's black */
	font-size: 0.8em;							/* Heading 2 font size is smaller than normal text */
	font-weight: bold;
	line-height: 1.3;
}
h3 {											
	color: #000;
	font-size: 0.7em;
	font-weight: normal;
	line-height: 1.3;
}
img {
	border-style: none;
}
.inline_arrow {
	padding: 0 5px 0 5px; 
	margin: 0 0 -2px 0;
}
.full_width {
	width: 100%;
}
div.spacer {
	font-size: 10px;
	clear: both;
}
/** DIV STYLES *******************************************************************************************/
/* These styles apply to layout div elements used across the whole site. */
#wrapper {
	text-align: left; 							/* Make all elements in the wrapper align left as normal (as body has text-align: center) */
	margin-left: auto;							/* Center the wrapper in non-IE6 browsers */
	margin-right: auto; 
	margin-top: 20px;
	width: 770px;								/* Fix the width of the wrapper. */
	background: #FFF;							/* Background of the wrapper in general */
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */    

/** HEADER STYLE *******************************************************************************************/
#header_logo {									/* This div contains the company logo */
	float: left;								/* Float it to the left of the parent div (the header) */
	width: auto;								/* Only make it as wide as its contents */
	text-align: left;							/* Align contents to the left */
	margin-bottom: 10px;
}
#header_text {									/* This div contains the header stuff on the right-hand side */
	float: right;								/* Float it to the right of the parent div (the header) */
	width: auto;								/* Only make it as wide as its contents */
	text-align: right;							/* Align the contents to the right */
}
#header_text h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 1.2em;
	color: #999999;
	margin-bottom:10px;
}
#header_text p {
	margin: 0 3px 9px 0;
	font-size: 0.9em;
	color: #000000;
}


/** TOP NAVIGATION STYLE *******************************************************************************************/
/* These styles apply to the navigation bar on each page */
#navigation_top {								/* This div contains the navigation links at the top of the page */
	clear: both;								/* Previous element was floated */
	width: 100%;
	background-color: #e5edf3;
	overflow: auto;
}
html>body #navigation_top {						/* Hack for IE7 only - prevents scrollbar showing in top nav menu */
	*overflow: hidden;
}
#navigation_top ul li {							/* This class is for each of the navigation links at the top of the page */
	display: inline;
	float: left;								/* Place them one after the other, from the left */
	width: 185px;								/* There are four divs, so make each a quarter of the page width */
	background-color: #e5edf3;					/* Background colour of each link box */
	text-align: center;							/* Position each link in the middle of its container */ 
}
#temperature_page li.link_temp,
#application_page li.link_temp,
#power_page li.link_power,
#contact_page li.link_contact,
#search_page li.search {
	background-color: #d1dee8;
}
#navigation_top ul li.search {
	width: 215px;
	text-align: right;							
}
#navigation_top ul li a,
#navigation_top ul li p {
	color: #000;
	padding: 5px 0 5px 0;
}
#navigation_top ul li a {
	display: block;
}
#navigation_top ul li p {
	display: block;
	float: right;
}
.search img {
	display: block;
	float: right;
	width: auto;
	margin-top: 5px;
}
.search_form {
	display: block;
	width: 130px;	
	float: right;
	margin-top: 3px;
}


/** TOP CONTENT STYLE (for pages such as the home page) *********************************************************/
/* These styles apply to the upper content section and the homepage showcases */
#content_top {									/* This div contains the elements for the content at the top of the homepage */
	clear: both;								/* Previous elements were floated */
	padding: 20px 0 0 0;
	overflow: auto;
}
.showcase{								/* This is the container for the main image, e.g. showing a new product */
	position: relative;
	float: left;
	width: 495px;
	margin: 0;
}
.showcase.newsarea {
	width: 530px;
	margin-bottom: 20px;
}
.showcase_overlay {						/* This contains the text and "find out more", overlaid on the image above */
	display: block;
	border: none;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 240px;
	text-align: left;
}
.showcase_overlay.news_top{
	right: auto;
	left: 80px;
}
.showcase_overlay.news_bottom{
	right: auto;
	top: 75px;
	left: 15px;
	width: 190px;
}

.showcase_button {
	display: block;
	border: none;
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 113px;
	/*text-align: left;*/
}
.showcase_button.newsarea {
	right: 0;
}

.showcase_overlay h2,
.showcase_overlay p {
	color: #000;
	font-size: 1em;
	padding: 0 0 5px 0;
}
.showcase_overlay p {
}
#content_top_right_wrapper{
	float: left;
	width: auto; 
	margin: 0 0 0 6px;
}
#content_top .box_a,
#content_top .box_b {
	clear: both;
	margin: 4px 0 4px 0;
	position: relative;
	border: solid #b4b4b4 1px;
	width: 265px;
}

#content_top .box_a {
	margin-top: 0;
}

#content_top .box_b {
	margin-bottom: 0;
}

.box_overlay {
	display: block;
	border: none;
	position: absolute;
	top: 50px;
	right: 0;
	text-align: right;
}
.box_overlay a {
	font-size: 0.7em;
	font-weight: bold;
	padding: 0 0 5px 0;
}
.box_overlay_link {
	display: block;
	float: right; 
	font-size: 0.9em;
	text-align: center;
}
.box_overlay_link p{
	font-size: 0.9em;
	display: inline;
}

.box_overlay_separator{
	display:block;
	float:right;
	font-size:0.9em;
}
	
.box_overlay_band {
/*	filter: alpha(opacity=50); /* internet explorer */
/*	-khtml-opacity: 0.5;      /* khtml, old safari */
/*	-moz-opacity: 0.5;       /* mozilla, netscape */
/*	opacity: 0.5;           /* fx, safari, opera */
/*	background-color: #d1dee8; */
	display:block;
	border:none;
	position:absolute;
	bottom:0;
	width: 100%;
	height: 16px;
	
}

#content_top img {
	display: block; /* Removes unwanted white space from below images */
}
#content_top span img {
	display: inline; /* Puts inline images back inline */
}
	
/** MID SECTION STYLE - including content and main navigation *********************************************************/
/* These styles apply to the middle section of each page, which contains the main navigation menu and the page content */

.column_wrapper {
	clear: both;
	padding: 20px 0 0 0;
	width: 100%;
}
.column_left {
	width: 190px;
	float: left;
	padding-bottom: 20px;	/* Space under the nav column above the footer */
}
.column_right {
	width: 530px;
	float: right;
	margin-bottom: 10px;
}
#news {
	margin: 0 0 0 -20px;
	width: 550px;
}
#news li{
	float: left;
	width: 255px;
	padding: 0 0 0 20px;
}
#news h1{
	display: inline;
	font-size: 0.7em;
}
#news a{
	display: inline;
	font-size: 0.7em;
}
#news li.full_width{
	width: 100%;
}
* html #news {
	margin: 0;
	width: 530px;
}
* html #news li {
	width: 245px;
	padding: 0 20px 0 0;
}
.news_feature{							/* This is the container for the main news feature image */
	position: relative;
	clear: both;
	width: 495px;
	margin: 0;
}
.news_feature_overlay {                /* This contains the text and "find out more", overlaid on the image above */
	display: block;
	border: none;
	position: absolute;
	top: 5px;
	right: -25px;
	width: 400px;
	text-align: right;
}
.news_feature_overlay a {
	font-size: 0.7em;
	font-weight: bold;
}
.news_feature_overlay img {
	padding: 5px 0 0 0;
}
#index_content {
	margin-bottom: 30px;
}
#index_content h1 {
	margin-bottom: 10px;
}
#index_content p {
	line-height:1.5em;
	margin-bottom:15px;
}


/*********** MAIN NAVIGATION STYLE **************************************************************************/
/* These styles apply to the main navigation menu.  */
#navigation {
	width: 190px;
	padding-top: 1px;
	margin-top: -10px;
	margin-bottom: 20px;
}
#navigation li {
	width: 190px;
	border-bottom: 1px #b4b4b4 dotted;
	display: none;     /* By default, do not show any menu items */
}
#navigation li a {
	font-size: 0.7em;
	padding: 5px 0 5px 10px;
	display: block;
	margin-left: 0;
}

/* Now make only the menu items we want to appear on certain pages, appear on those pages. */
/* e.g. here, the downloads category link will appear on all pages with body id="home_page" */
#home_page li.downloads_cat,
#home_page li.news_cat,
#temperature_page li.home_cat,
#temperature_page li.temperature_cat,
#temperature_page li.temperature_sub,
#temperature_page li.downloads_cat,
/*#temperature_page li.contact_cat,*/
#temperature_page.fixed li.fixed_sub,
#temperature_page.handheld li.handheld_sub,
#temperature_page.controller li.controller_sub,
#power_page li.home_cat,
#power_page li.power_cat,
#power_page li.power_sub,
#power_page li.downloads_cat,
/*#power_page li.contact_cat,*/
#contact_page li.home_cat,
/*#contact_page li.contact_cat,*/
#contact_page li.contact_sub,
#downloads_page li.home_cat,
#downloads_page li.downloads_cat,
#downloads_page li.downloads_sub,
/*#downloads_page li.contact_cat,*/
#news_page li.home_cat,
/*#news_page li.news_cat,*/
#news_page li.temperature_cat,
#news_page li.power_cat,
/*#news_page li.contact_cat,*/
#application_page li.home_cat,
#application_page li.temperature_cat,
#application_page li.application_cat,
#application_page li.application_sub,
#application_page li.downloads_cat,
/*#application_page li.contact_cat,*/
#search_page li.downloads_cat,
#search_page li.news_cat,
#search_page li.home_cat,
#search_page li.temperature_cat,
#search_page li.power_cat,
#search_page li.contact_cat,
#landing_page li.contact_cat
{
	display: block;
}
#navigation li.category {					/* Style to be applied to all "category" links i.e. those to be boxed */
	width: 188px;							/* Account for size of border by making content area 2px narrower */
	border: 1px #b4b4b4 solid;
	margin: 10px 0 10px 0;					
	font-size: 1em;
	background-image: url(/images/right_arrow.gif);
	background-repeat: no-repeat;
	background-position: 167px 6px;
}
#navigation li.category a {					/* Style to be applied to link text in all category menu items */
	font-size: 0.8em;
}
#navigation li.category a:hover { 			/* IE5 does not support inherits. Use this code to make background images work on hover */
	background-image: url(/images/right_arrow.gif);
	background-repeat: no-repeat;
	background-position: 167px 6px;	
}
#navigation li.l3 {
	border: none;
}

#navigation li.l3 a{
	padding-left: 30px;
}
#navigation li.last {
	border: none;
}
#navigation li.l3.last {
	border-bottom: 1px #b4b4b4 dotted;
}


#temperature_page li.temperature_cat,		/* For "active" pages, apply this style to their respective menu category link */
#power_page li.power_cat,
#contact_page li.contact_cat,
#downloads_page li.downloads_cat,
#application_page li.application_cat
{
	background-image: url(/images/down_arrow.gif); /* Show the down arrow for the active category */
}
/* Nav menu left padding is too large in IE5. Use a hack to make it smaller. */
* html #navigation {			/* Hack - IE6 and below only */
	margin: 0;
	padding: 0;
}
* html #navigation li {			/* Hack - IE6 and below only */
	margin-left: 0;
}

* html #navigation li a {		/* Hack - IE6 and below only */
	margin-left: 0;
	display: block;
	width: 100%;
}
#navigation li a:hover {		/* IE5 does not support inherits. Use this code to make background images work on hover */
	background-color: #e5edf3;
	background-repeat: no-repeat;
}
#temperature_page li.temperature_cat a:hover,	/* IE does not "inherit" - go the long way around to ensure the background image works on hover */
#power_page li.power_cat a:hover,
#contact_page li.contact_cat a:hover,
#downloads_page li.downloads_cat a:hover,
#application_page li.application_cat a:hover 
{
	background-image: url(/images/down_arrow.gif);
	background-repeat: no-repeat;
	background-position: 167px 6px;
}

/** PRODUCT_LINKS STYLE *******************************************************************************************/
/* These styles apply to the links for specific products, for example data sheets and manuals on the video pages */

#product_links {
	width: 190px;
	padding-top: 0;
	margin-top: 0;
}
#product_links li {
	width: 190px;
	border-bottom: 1px #b4b4b4 dotted;
	display: block;
	background-image: url(/images/pdf_icon_16x16.gif);
	background-repeat: no-repeat;
	background-position: 167px 4px;
}
#product_links li a {
	font-size: 0.7em;
	padding: 5px 0 5px 10px;
	display: block; /* is this required? */
	margin-left: 0;
}
#product_links li a:hover { 			/* IE5 does not support inherits. Use this code to make background images work on hover */
	background-image: url(/images/pdf_icon_16x16.gif);
	background-repeat: no-repeat;
	background-position: 167px 4px;	
	background-color: #e5edf3;
}
/* Nav menu left padding is too large in IE5. Use a hack to make it smaller. */
* html #product_links {			/* Hack - IE6 and below only */
	margin: 0;
	padding: 0;
}
* html #product_links li {			/* Hack - IE6 and below only */
	margin-left: 0;
}

* html #product_links li a {		/* Hack - IE6 and below only */
	margin-left: 0;
	display: block;
	width: 100%;
}

/** Heading STYLE *******************************************************************************************/
/* Styles for the headings */

#productpage h1{
	display: inline;
	text-transform: none;
	padding: 0 10px 0 0;					/* it's inline so give the next inline thing some space */
}

#productpage h2{
	display: inline;							/* put it on the same line as the main title */
	padding: 0;							
	text-transform: none;
	color: #666;								/* make it grey */
	font-size: 0.8em;							/* smaller than normal text */
	font-weight: normal;
	line-height: 1;
}
#productpage h3 {
	display: block; 
	padding: 0; 
	margin: 0 0 10px 0;
	color: #666;
	font-size: 0.8em;							/* smaller than normal text */
	font-weight: normal;
	line-height: 1;
	
}


/** TABS STYLE *******************************************************************************************/
/* Styles for the tabs on the individual product pages */

.tabcontainer {
	padding: 0; /* reset padding for tab container */
}
div.tabs {
    width:100%;
    display:inline-block;
    padding-top: 20px; 
}

/*----- Tab Links -----*/ 
/* clearfix: class "clearfix" applied to parent div of ul.tab-links */
    
ul.tab-links li { 
    margin: 0;
    float:left;
    list-style:none;
} 
ul.tab-links a {
    padding:9px 10px;
    display:inline-block;
    background:#fff;
    font-size:0.8em;           
    font-weight: normal;
    color:#4c4c4c;
	position: relative;            
	top: 1px;   			         
}
ul.tab-links a:hover {
    background:#d1dee8;
    text-decoration:none;
}       
li.active {
	border: 1px solid #b4b4b4;
	border-bottom: 0;	
}
li.active a, li.active a:hover {
	position: relative; 
	top: 1px;  
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
div.tab-content {
    padding:15px;
	border: 1px solid #b4b4b4;
    background:#fff;
}
* html tab-content{
	margin-top:30px;
}
div.tab-content p {
	margin: 0 0 10px 0;
	font-size: 0.8em;
}
.tab {
    display:none;
}
.tab.active {
    display:block;
}
div.section{
	margin: 0 0 10px 0;
}        
div.section_b{
	margin-bottom: 20px;
}        

div.mainspecs,
div.productphoto {
	float: left;
	width: 50%;
}
.ie6 div.mainspecs {
	width: 220px;
}
ul.specpoints{
	margin: 0 0 20px 0;
}
ul.specpoints li{
	display: block;
	font-size:0.8em;
	line-height: 1.3em;
	margin: 0 0 5px 10px;
	text-indent: -0.7em;
	padding-right: 10px;
}
ul.speclist {	/* Simple list of product specifications */
	width: 498px;
	margin: 0 0 10px 0;
}
.ie6 ul.speclist { /* IE6 FIX */
	width: 100%;
}
ul.speclist li{	/* Each new line in specifications list */
	clear: both;
	padding: 0 0 10px 0;
	margin: 0;
	overflow: auto;
	width: 498px;
}
ul.speclist li p,
ul.speclist li div {
	width: 298px;
	float: left;
}
ul.speclist li p {
	padding-left: 5px;
	font-size: 0.7em;
	color: #666;
	margin: 0;
}
ul.speclist li p.spectype {
	width: 170px;
	color: #000;
}
ul.speclist li.specheader {
	font-size: 0.8em;
	padding: 5px;
	margin: 0 0 10px 0;
	color: #000;
	background: #e5edf3;
	width: 490px;
}
div.mainspecs ul.speclist li.specheader{
	width: 239px;
}
.ie6 div.mainspecs ul.speclist li.specheader{ /* IE6 FIX */
	width: 100%;
}
ul.speclist li.specheader.accessory{
	width: 300px;
}
ul.speclist div p {
	display: block;
}
a.speclink{
	color: #666;
}
div.dimsimage{
	margin: 0 0 20px 0;
}
div.fovdiags{
	margin: 0;
	overflow: auto;
}
ul.fov {
	margin: 10px 0 0 -18px;
	overflow: auto;	
}
ul.fov li {
	display: block; 
	float: left;
	margin: 0 0 30px 18px;
}
.ie6 ul.fov li {
	margin: 0;
	padding: 0 4px 0 4px;
}
ul.accslist {
	width: 498px;
	margin: 0 0 0 0;
}
ul.accslist li {
	clear: both; 
	padding: 5px 0 5px 0;
	margin: 0;
	overflow: auto;
	width: 498px;
	color: #666;
}
.ie7 ul.accslist li {
	overflow: visible;
}
ul.accslist li p.accstype {
	color: #000;
}
ul.accslist li div {
	float: left;
	width: 310px;
	padding: 0 15px 0 0;
}
ul.applicationlist {
	width: 507px;
	margin: 0 0 10px -10px;
}
ul.applicationlist li{
	clear: both; 
	overflow: auto;
	width: 100%;
	margin: 0 0 5px 0;
}
ul.applicationlist li p,
ul.applicationlist li a{
	display: block;
	float: left;
	width: 317px;
	margin-left: 10px;
}
.ie6 ul.applicationlist li p,
.ie6 ul.applicationlist li a{
	width: 300px;	
}

ul.applicationlist li p.firstcol,
ul.applicationlist li a.firstcol {
	color: #000;
	width: 170px;
}
ul.productdownloads {
	margin: 0 0 20px 0;
}
ul.productdownloads li{
	display: block;
	margin: 0 0 10px 0;
}
ul.productdownloads li a.pdf{
	padding: 1px 0 1px 23px;
	width: 148px;  /* = width of item (above) less padding-left */
	background:transparent url(/images/pdf_icon_16x16.gif) 3px 50% no-repeat;
}
ul.videolist {
	margin: 0 0 10px -18px;
}
.ie6 ul.videolist, 
.ie7 ul.videolist {
	margin: 0 0 10px 0;
	padding: 0;
}
ul.videolist li {
	display: block;
	float: left;
	margin: 0 0 15px 18px;
}
.ie6 ul.videolist li,
.ie7 ul.videolist li{
	margin: 0;
	padding: 0 5px 0 0;
}
ul.videolist li a {
	display: block;
	margin: 0 0 5px 0;
}
iframe.videoframe {
	margin: 0 0 15px 0;
}


/** ENQUIRY BUTTON *******************************************************************************************/

a.enquirybutton,
a.plainbutton {
	display: block;
	float: right;
	width: 180px;
	margin: 0;	
	border: 1px #b4b4b4 solid;
	background-color: #e5edf3;
	background-image: url(/images/right_arrow.gif);
	background-repeat: no-repeat;
	background-position: 163px 10px;
	padding: 10px 0 10px 10px;
}
a.plainbutton {
	width: auto;
	background-color: #ffffff;
	float: left;
	padding-right: 10px;
}
#index_content a.enquirybutton{
	width: 520px;
	padding: 20px 0 20px 10px;
	background-position: 503px 20px;	
}

a.enquirybutton:hover,
a.plainbutton:hover { 			/* IE5 does not support inherits. Use this code to make background images work on hover */
	background-image: url(/images/right_arrow.gif);
	background-repeat: no-repeat;
	background-position: 163px 10px;	
	background-color: #d1dee8;
}

/** ENQUIRY_BUTTON_LEFT STYLE *******************************************************************************************/
/* an enquiry button in the navigation bar */

#enquiry_button_left {
	margin-top: 10px;
}

#enquiry_button_left a.enquirybutton {
	width: 178px;
	padding: 45px 0 45px 10px;
	background-position: 161px 45px;		
}

/** SPEC TABLE STYLES *******************************************************************************************/

.tempfov {
	margin: 0 0 10px 0;
	padding: 0;
	width:100%;
	border:1px solid #b4b4b4;
}
.tempfov table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
}
.tempfov tr{ 
	background-color:#fff; 
}
.tempfov td{						/* for every cell: */
	vertical-align:middle;
	border:1px solid #b4b4b4;
	border-width: 0 1px 1px 0; 	/* set right and bottom borders */
	text-align:left;
	padding:7px;
	font-size:0.7em;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.tempfov tr:last-child td{			/* for every cell in the bottom row: */
	border-width: 0 1px 0 0; 	/* remove all borders except right  */
}.tempfov tr td:last-child{			/* for every cell in the last column: */
	border-width: 0 0 1px 0; 	/* remove all borders except bottom */
}.tempfov tr:last-child td:last-child{ /* for the bottom right cell: */
	border-width: 0 0 0 0; 	/* remove all borders */
}
.tempfov tr:first-child td{			/* for every cell in the top row: */
	background-color:#d1dee8;
	border: 0 solid #b4b4b4;
	text-align:left;
	border-width: 0 0 1px 1px; /* set only the bottom and left borders */
	font-size:0.7em;
	font-family:Arial;
	font-weight:bold;
	color:#000000;
}
.tempfov tr:first-child td:first-child{ /* for the top left cell: */
	border-width: 0 0 1px 0; 	/* remove borders except bottom */
}
.tempfov tr:first-child td:last-child{ /* for the top right cell:  */
	border-width: 0 0 1px 1px; 	/* remove borders except bottom left*/
}
.tempfov td.emptycellrightcol {
	border-bottom: 0;
}

/** DISTRIBUTE_WORLDWIDE STYLE *******************************************************************************************/
/* These styles apply to the small box containing the link to the list of countries Calex represents */

#distribute_worldwide {
	font-size: 1em;
	margin: 0 0 20px 0;
	position: relative; 
	width: 190px;
}
#distribute_worldwide img {
	display: block;
}
#distribute_worldwide span {
	display: block; 
	position: absolute; 
	bottom: 10px; 
	right: 5px;
}
#distribute_worldwide a {
	font-size: 1em;
}
#distribute_worldwide h2 {
	font-size: 0.7em;
	padding: 0 0 5px 0;
}
#distribute_worldwide h3 {
	font-size: 0.7em;
	padding: 0 0 5px 0;
}



/** NAV_IMAGE_LINK STYLE *******************************************************************************************/
/* an image in the navigation bar, acting as a link, with overlaid text */

#nav_image_link { 			/* The container div*/
	font-size: 1em;
	margin: 10px 0 0 0;
	position: relative; 
	width: 190px;
}
#nav_image_link a{
	font-size: 1em;			/* Reset the font size from the global */
}
#nav_image_link img {		/* The image */
	display: block;
}
#nav_image_link span {		/* The span containing the text overlaid on the image */
	display: block; 
	position: absolute; 
	bottom: 5px; 
	left: 5px;
	text-align: left;
}

#nav_image_link h3 {			/* The text itself */
	font-size: 0.7em;
}
#nav_image_link h3.bold {			/* The text for dark backgrounds (e.g. a photo of asphalt) */
	color: #fff;

}
#nav_image_link h3.whitetext {			/* The text for dark backgrounds (e.g. a photo of asphalt) */
	color: #fff;
}



/** CONTACT DETAILS *******************************************************************************************/
/* These styles apply to the email address, address and phone/fax numbers in the left-hand havigation menu */
.email_address,
.calex_address {
	display: block;
	width: 190px;
}
.email_address {
	margin-top: 20px;
}
.email_address li {
	margin: 10px 0 0 0;
	font-size: 1em;
	color: #000;
}
.calex_address {
	margin: 20px 0 20px 0;
}
.calex_address p {
	font-size: 0.8em;
}
/** PRODUCTS PAGES *******************************************************************************************/
#products {
	margin: -10px 0 0 -30px;
	border: none;
	width: 560px;
}
#products a{
	font-size: 1em;
}
#products img{
	margin-bottom: 10px;
}
#products li{
	width: 250px;
	display: block;
	float: left;
	position: relative;
	margin: 10px 0 0 0;
	padding-left: 30px;			/* Use padding, not margin, so IE displays this correctly */
}

#products li span{				/*Style for text overlaid on product image */
	position: absolute;
	right: 5px;
	top: 7px;
	width: 125px;
}
#products li.product_image a.feature{ /*Style for links (e.g. to data sheets) on product pages */
	display: block;
	width: 100%;
	padding: 6px 0 5px 0;
	margin: -1px 0 0 0;
	border-bottom: 1px #b4b4b4 dotted; /* All list items have a dotted border on the bottom only */
	font-size: 0.7em;
	background-image: url(/images/right_arrow.gif);
	background-repeat: no-repeat;
	background-position: 230px 4px;
}
#products li a.first {				
	border-top: 1px #b4b4b4 dotted; /* First list item for each product has a dotted border at the top */
	padding-top: 5px; /* Make 1px room for the top border */
}
#products p,
#products a p {
	color: #000;
	font-size: 0.7em;
	line-height: 1.3;
}
#products p.description {
	color: #666;
	padding: 10px 0 10px 0;
}

#products p.description a{
	color: #000;
	padding: 0 0 0 0;
	font-size: 1em;
}
#products a.description {
	display: inline;
	font-size: 1em;
	padding: 0;
	border: none;
	background: none;
	width: auto;
}
#products p.ie_spacer {		/* IE bug fix - this div makes up the blank space where right item has fewer links than left item, which forces floated item onto next "row" */
	display: block;
	font-size: 1em;
	line-height: 1.5;
}
p.full_width_text {
	clear: both;
	display: block;
	width: 530px;
	color: #000;
	font-size: 0.75em;
	padding: 10px 0 0 0;	
}
* html p.full_width_text {
	padding-left: 0;
}
#products p.product_name,
#products a p.product_name {
	font-weight: bold;
	font-size: 0.8em;
}
#products p.bold {
	font-weight:bold;
}
p.product_intro {  /* Text to introduce each product page e.g. "Calex offers a range of thermocouple probes..." */
	font-size: 0.8em;
	padding-bottom: 15px;
}
a.product_intro {
	font-size: 1em;
}
	
/** HEADING IMAGES with overlaid text **************************************************************************/
div#heading {
	clear: both;
	position: relative;
	width: 100%;
}
div#heading span {
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	text-align: right;
}
div#heading span.title {
	right: auto;
	left: 1px;
	top: 1px;
	padding: 20px;
	text-align: left;
}
div#heading span.subtitle {
	top: auto;
	right: 1px;
	bottom: 11px;
	padding: 20px;
}
div#heading h1,
div#heading h2 {
	margin: 0;
	padding: 0;
}
div#heading h1.light,
div#heading h2.light {
	color: #FFF
}
div#heading img {
	margin: 0 0 10px 0;
}
/** PRODUCT CATEGORY PAGES *******************************************************************************************/
#category_page p {
	padding: 0 0 20px 0;
}
#category_page h1,
#category_page h2 {
	padding: 5px 0 20px 0;
}
ul.application_links {
	margin: -5px 0 0 -40px;
	border: none;
	width: 570px;
	overflow: auto;
}
ul.application_links li {
	display: block;
	float: left;
	margin: 5px 0 5px 0;
	padding: 0 0 0 40px;
	width: 150px;
}
/** CONTACT US AND CONTACT FORM *******************************************************************************************/
#contact_us_heading {		/* Div containing image and positioned text */
	position: relative;
	margin-bottom: 10px;
	width: 100%;
}
#contact_us_heading span{ 	/* Element containing positioned text */
	display: block;
	position: absolute;
	top: 40%;
	right: 8%;
}
#contact_us_heading span a{
	font-size: 1em;
}
#contact_us_heading h2, 
#contact_us_heading h3 {	/* Positioned text itself */
	font-size: 0.8em;
}
#contact_us_heading h2 {
	font-weight: bold;
	padding: 0 0 3px 0;	
}
#contact_us_heading h3 {
	padding: 3px 0 3px 0;
}
#contact_form {
	width: 104%;
	padding: 10px 0 10px 0;
	margin-left: -21px; 
}
* html #contact_form {
	width: 530px;
	margin-left: 0;
}

#left_contact_form {
	width: 100%;
	padding: 10px 0 0 0;	
	margin-left: 0;
}
* html #left_contact_form {
	width: 190px;
	margin-left: 0;
}

input,
textarea,
select {
    border: 1px solid #b4b4b4;
    width: 100%;
}
textarea {
	padding: 5px 5px 5px 5px;
}


._33,
._66,
._100 {
    display: block;
    float: left;
	margin-left: 4%;
    margin-right: 0%;
}
._33 {
    width: 29%;
}
._66 {
    width: 62%;
}
._100 {
    width: 95%;
}
#left_contact_form ._100 {
	margin-left: 0;
	width: 158px;
}
#left_contact_form textarea {
	width: 158px;
}
.submit {
	display:block;
	float: right;
	width: 29%;
	padding: 5px 2px 5px 0;
	margin: 5px 0 5px 0;
}
#left_contact_form .submit{
	float: left;
	width: 170px;
}
input[type=submit] {
	height: 3em;
    background-color: #c5ddf0;
	font-size: 1em;	
}
input[type=submit],
#left_contact_form input[type=submit] {
	background: #005288; 
	color: #ffffff;
	border: 1px #ffffff solid;
}

input[type=submit]:hover,
#left_contact_form input[type=submit]:hover {
	background: #2072A8; 
}

input[type=text] {
	height: 1.6em;
	padding-left: 5px;
	padding-right: 5px;
}
input.search_box{
	height: 1.2em;
	display: block;
	float: right;
	width: 110px;
	margin-left: 15px;
	margin-right: 2px;
}
label {
    width: 100%;
	color: #000;
	font-size: 1em;
	display: inline;
	float: left;
	margin: 5px 0 0 0;
}
.required_field {  /* Style for labels of required fields */
}
p.required_field {  /* Text that says "these are required fields" */
	font-size: 0.7em;
}

/** LANDING and APPNOTE PAGES *********************************************************************************************/

/** TOP **/
#landing_page div#landing_top_line {
	clear:both;
	background-color:#005288;
	height: 2px;
}
#landing_page div#navigation_top {
	display:none;
}

/** LEFT **/
#landing_page a.link_left {
	display: block; 
	border: 1px #b4b4b4 solid;
	width: 140px;
	padding: 10px 10px 10px 40px;
	background-image: url(/images/pdf_icon_16x16.gif);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}
#landing_page a.link_left:hover { 			/* IE5 does not support inherits. Use this code to make background images work on hover */
	background-image: url(/images/pdf_icon_16x16.gif);
	background-repeat: no-repeat;
	background-position: 10px 10px;	
	background-color: #e5edf3;
}

/** MAIN **/
#landing_page h2,
#appnote h2 {
	font-size:1.2em;
	margin-bottom: 10px;
}
#appnote h3 {
	font-size: 1em;
	margin-bottom:10px;
}
#landing_page p,
#appnote p {
	margin-bottom:20px;
}
div#appnote ul#products p{
	margin-bottom: 10px;
}
#appnote div.bullets p{
	color: #000000;
}
div.landing_contact_box,
div.left_contact_box,
div.appnote_box {
	background-color: #e5edf3;
	padding: 20px 20px 20px 20px;
	margin-bottom: 10px;
}
div.landing_contact_box {
	padding-bottom: 0;
}
div.left_contact_box {
	padding: 10px 10px 0 10px;
}
div.left_contact_box h2{
	font-weight:normal;
}

div.appnote_item {
	display: block;
}
div.appnote_item span {
	display: block;
	float: left;
	width: 340px;
	padding-right: 20px;	
}
div.appnote_item.in_box span{
	width: 300px;
}
div.appnote_item img {
	display: block;
	float: left;
	margin-bottom: 10px;	
}



/** NEWS PAGE ************************************************************************************************************/
ul.newslist li {
	width: 100%;
	overflow: auto;
	clear: both;
	margin-bottom: 20px;
	border: 1px #b4b4b4 solid;
/*	height: 45px;			/* This is required to stop scrollbars appearing in IE 8+ */
}
ul.newslist li div.news_title_bar {
	background-color: #e5edf3;
}
ul.newslist li div.news_title_bar h2, 
ul.newslist li div.news_title_bar h3 {
	display: block;
	font-size: 1em;
	padding: 10px 10px 10px 10px;
}
ul.newslist li div.news_title_bar h2{
	float: left;
}
ul.newslist li div.news_title_bar h3{
	float: right;
	font-size: 0.8em;
}
ul.newslist li div.news_content p {
	display: block;
	width: 320px;
	float: right;
}
ul.newslist li div.news_content img,
ul.newslist li div.news_content p {
	margin: 10px 10px 10px 10px;	
}
ul.newslist li div.news_content img {
	float: left;
}
ul.newslist li div.news_links {
	clear:both;
} 
ul.newslist li div.news_links a {
	margin: 10px 10px 10px 10px;
} 

ul.newslist li img {	
	overflow: hidden;		/* IE8 and above displays a scroll bar on images on the Links page. Stop such nonsense like this. */
}
/** TECHNICAL ADVICE LINKS ***********************************************************************************************/
.technical_links li {
	clear: both;
}
.technical_links p.col_a,
.technical_links a.col_b,
.technical_links p.col_c {
	font-size: 0.8em;
	display: block;
	float: left;
	padding: 5px 10px 5px 0;
	margin: 5px 0 5px 0;
}
.technical_links p.col_a {
	width: 40px;
	padding-left:20px;
	background:transparent url(/images/pdf_icon_16x16.gif) center left no-repeat;
}
.technical_links a.col_b {
	width: 220px;
}
.technical_links p.col_c {
	width: 220px;
}

/** APPLICATION GUIDANCE PAGES *******************************************************************************************/
.application_notes {
	margin-top: 10px;
	margin-bottom: 10px;
}
.application_notes a {
	display: block;
	margin: 10px 0 0 0;
}
.application_notes p, 
.application_notes h2,
h2.application_products {
	margin: 0 0 15px 0;
}

.application_notes a.contact{
	display: inline;
	margin: 0;
	font-size: 1em;
}

.application_notes a[href$='.pdf'] { /* Style for every PDF link */
	display:inline-block;
	margin: 0 0 10px 0;
	padding-left:25px;
	line-height:1.3em;
	background:transparent url(/images/pdf_icon_16x16.gif) center left no-repeat;	
}

.application_links a{
	font-size: 0.7em;
}
/** DOWNLOADS PAGE *******************************************************************************************/
h2.downloadsheader{
	margin-bottom: 10px;
}
ul.downloads {	/* List of products with downloads */
	width: 100%;
	margin-bottom: 20px;
}
ul.downloads li{	/* Each new line in download list */
	clear: both;
	padding: 5px 0 5px 0;
	overflow: auto;
	width: 100%;
}
ul.downloads li p,
ul.downloads li a,
ul.downloads li div {
	width: 166px;
	float: left;
}
div.tab ul.downloads li p,
div.tab ul.downloads li a,
div.tab ul.downloads li div{
	width: 157px;
}

ul.downloads .pdf {
	padding: 1px 0 1px 23px;
	width: 148px;  /* = width of item (above) less padding-left */
	background:transparent url(/images/pdf_icon_16x16.gif) 3px 50% no-repeat;
}

div.tab ul.downloads .pdf {
	width: 139px;  /* = width of item (above) less padding-left (above) */
}

ul.downloads li p,
ul.downloads li a {
	padding-left: 5px;
	font-size: 0.7em;
}
ul.downloads li p{
	color: #000;
}
ul.downloads li a{
	color: #666;
}
ul.downloads li a:hover{
	color: #005288;
}
ul.downloads li.product_type {
	font-size: 0.8em;
	padding: 5px;
	color: #000;
	background: #e5edf3;
	width: 520px;
}
div.tab ul.downloads li.product_type {
	width: 488px;
}
ul.downloads li.column_heading {
	border-bottom: 1px dotted #b4b4b4;
	padding-top: 5px;
	padding-bottom: 5px;
}
ul.downloads div a,
ul.downloads div p {
	display: block;
}
/** FOOTER ************************************************************************************************************/
/* These styles apply to the footer section at the bottom of each page */
#footer {
	clear: both;
	padding: 10px 0 0 0;
	color: #b4b4b4;
	border-top: 1px #b4b4b4 dotted;
	width: 100%;
	position: relative;
}
#footer span {
	font-size: 0.5em;
	width: 530px; 
	float: right;
}	

/**WORLDWIDE PAGE **************************************/
/* These styles apply to the page containing the list of countries Calex represents. */
.countries_list {
	width: 530px;
}
.countries_list li {
	display: block;
	float: left;
	width: 176px;
	font-size: 0.8em;
	line-height: 1.3;
	color: #666666;
}
.countries_list li.full_width {
	padding-top: 10px;
	margin-top: 10px;
	padding-bottom: 10px;
	border-top: #b4b4b4 dotted 1px;
	clear: both; 
	width: 100%;
	color: #000;
	font-size: 1em;
}
.countries_list li.full_width a {
	font-size: 1em;
}