@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: #999;								/* 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: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.5em;							/* Heading 1 font size is larger than normal text, but not too large */
	padding: 0 0 15px 0;						/* Some padding underneath heading 1 */
	text-transform: uppercase;					/* Ensure heading 1 text is uppercase */
}
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 */
}
#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 */
}
/** 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;
}
.search_box {
	display: block;
	float: right;
	width: 120px;
	margin-left: 5px;
	margin-right: 2px;
}
/** TOP CONTENT STYLE (for pages such as the home page) *********************************************************/
/* These styles apply to the upper content section. */
#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_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: 170px;
	text-align: left;
}
.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 #b3b4b4 1px;
	width: 265px;
}

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

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

.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;
}

#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: 72px;	/* Just enough to accommodate the phone_numbers below, which are positioned above the footer div using negative margin */
}
.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;
}

/*********** MAIN NAVIGATION STYLE **************************************************************************/
/* These styles apply to the main navigation menu.  */
#navigation {
	width: 190px;
	padding-top: 1px;
	margin-top: -10px;
}
#navigation li {
	width: 190px;
	border-bottom: 1px #b3b4b4 dotted;
}
/* By default, do not show any menu items */
#navigation li {
	display: none;
}
/* 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.links_cat,
#temperature_page li.home_cat,
#temperature_page li.temperature_cat,
#temperature_page li.temperature_sub,
#temperature_page li.downloads_cat,
#power_page li.home_cat,
#power_page li.power_cat,
#power_page li.power_sub,
#power_page li.downloads_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,
#links_page li.home_cat,
#links_page li.links_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,
#search_page li.downloads_cat,
#search_page li.links_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 #b3b4b4 solid;
	margin: 10px 0 10px 0;					/* The -1px top margin hides the dotted bottom border of the submenu above */
	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 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;	
}
#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);
}
#navigation li a {
	font-size: 0.7em;
	padding: 5px 0 5px 10px;
	display: block;
	margin-left: 0;
}
/* 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;
}
/** 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: 10px 0 0 0;
	position: relative; 
	width: 190px;
}
#distribute_worldwide img {
	display: block;
}
#distribute_worldwide span {
	display: block; 
	position: absolute; 
	bottom: 10px; 
	right: 5px;
}
#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; 
	top: 5px; 
	right: 5px;
	text-align: right;
}
#nav_image_link h3 {			/* The text itself */
	font-size: 0.7em;
	padding: 0 0 5px 0;
}
/** CONTACT DETAILS *******************************************************************************************/
/* These styles apply to the email address, address and phone/fax numbers in the left-hand havigation menu */
.phone_numbers,
.email_address,
.calex_address {
	display: block;
	width: 190px;
}
.phone_numbers {			/* NOTE: The phone_numbers are located in the footer section */
	position: absolute;		/* Use absolute positioning to put the phone numbers above the footer. Fewer bugs in IE than using float and negative margins */
	bottom: 20px;
}
* html .phone_numbers { 	/* Make the phone numbers appear higher in IE 6 and below.  */
	bottom: 30px;
}
.email_address {
	margin-top: 20px;
}
.phone_numbers li,
.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 #b3b4b4 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 #b3b4b4 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: #999;
	padding: 10px 0 0 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;
}
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: 10px;
	text-align: left;
}
div#heading span.subtitle {
	top: auto;
	right: 1px;
	bottom: 11px;
	padding: 10px;
}
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: 5px 0 5px 0;
}
#category_page h2 {
	padding: 5px 0 5px 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 PAGE *******************************************************************************************/
#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 h2, 
#contact_us_heading h3 {	/* Positioned text itself */
	font-size: 0.7em;
}
#contact_us_heading h2 {
	font-weight: bold;
}
#contact_us_heading h3 {
	padding: 3px 0 3px 0;
}
#contact_form {
/*	border: 1px #b3b4b4 solid;
	background: #e5edf3; */
	width: 104%;
	padding: 10px 0 10px 0;
	margin-left: -21px; 
}

* html #contact_form {
	width: 530px;
	margin-left: 0px;
}

._33,
._66,
._100,
.submit {
    display: block;
    float: left;
	margin-left: 4%;
    margin-right: 0%;
}
._33 {
    width: 29%;
}
._66 {
    width: 62%;
}
._100 {
    width: 95%;
}
.submit {
	float: right;
	width: 23%;
	padding: 5px 2px 5px 0;
}
label {
    width: 100%;
	color: #000;
	font-size: 0.8em;
	display: inline;
	float: left;
}
input,
textarea,
select {
    border: 1px solid #b3b4b4;
    width: 100%;
}
.required_field {  /* Style for labels of required fields */
}
p.required_field {  /* Text that says "these are required fields" */
	font-size: 0.7em;
}
/** LINKS PAGE ************************************************************************************************************/
.links li p, 
.links li a {
	font-size: 0.7em;
}
.links li {
	width: 100%;
	overflow: auto;
	clear: both;
	margin-bottom: 10px;
	height: 45px;			/* This is required to stop scrollbars appearing in IE 8+ */
}
.links li p{
	float: left;
	width: 20%;
}
.links li a {
	float: left;
	width: 50%;
}
.links li a.full_width {
	width: 100%;
}
.links 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 a[href$='.pdf'] { /* Style for every PDF link */
	display:inline-block;
	margin-top: 10px;
	padding-left:20px;
	line-height:1.3em;
	background:transparent url(/images/pdf_icon_16x16.gif) center left no-repeat;
}
.application_links a{
	font-size: 0.7em;
}
h2.application_products {
	margin-bottom: 5px;
}
/** DOWNLOADS PAGE *******************************************************************************************/
.downloads {	/* List of products with downloads */
	width: 528px;
	margin-top: 10px;
	margin-bottom: 20px;
}
.downloads li{	/* Each new line in download list */
	clear: both;
	padding: 5px 0 5px 0;
	overflow: auto;
	width: 100%;
}
.downloads li p,
.downloads li a,
.downloads li div {
	width: 171px;
	float: left;
}
.downloads .pdf {
	padding: 1px 0 1px 0;
	width: 151px;  /* = width of item (above) less padding-left */
	padding-left:20px;
	background:transparent url(/images/pdf_icon_16x16.gif) center left no-repeat;
}
.downloads li p,
.downloads li a {
	padding-left: 5px;
	font-size: 0.7em;
	font-size: 0.7em;
}
.downloads li p{
	color: #000;
}
.downloads li a{
	color: #999;
}
.downloads li a:hover{
	color: #005288;
}
.downloads li.product_type {
	font-size: 0.8em;
	padding: 5px;
	margin-top: 10px;
	color: #000;
	background: #e5edf3;
	width: 520px;
}
.downloads li.column_heading {
	border-bottom: 1px dotted #b3b4b4;
	padding-top: 2px;
	padding-bottom: 2px;
}
.downloads div a,
.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: #b3b4b4;
	border-top: 1px #b3b4b4 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: #999999;
}
.countries_list li.full_width {
	padding-top: 10px;
	margin-top: 10px;
	padding-bottom: 10px;
	border-top: #b3b4b4 dotted 1px;
	clear: both; 
	width: 100%;
	color: #000;
	font-size: 1em;
}
.countries_list li.full_width a {
	font-size: 1em;
}