/* resets and overrides 
=======================*/
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,
b, u, i, center, 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-size: 100%; vertical-align: baseline; font-style: normal; text-align: left;}
textarea{overflow: auto;}
input[type=submit],label,select,.pointer {cursor: pointer;}

xhtml {height: 100%; margin-top: 1px;} /* Forces toolbars to appear in FF to avoid horizontal dif. */
html {overflow-y: scroll;}

::selection {color: #fff; background-color: #003E74;}
::-moz-selection {color: #fff; background-color: #003E74;}

/*
lighter blue: #5B80B4
total width = 950px;
grey: #4D4D4D
border #003E74 - 1px, 218px, 1px, 10px, 1px 728px, 1px
*/

/* layout
=========*/

#container {width: 960px; margin: 20px auto; background: url(../images/layout/sites/JC/verticalBorders.gif) repeat-y 0 0; overflow: hidden; position: relative;}
#sideCol {float: left; width: 190px; padding: 0 14px 14em; margin: 0 1px; border-top: 1px solid #003E74; position: relative; font-size: 0.85em;}
#mainCol {float:left; width: 700px; padding: 43px 14px 20px; margin: 0 1px 0 11px; border-top: 1px solid #003E74; overflow: hidden;}
#footer {float: left; width: 100%; background: #fff url(../images/layout/sites/JC/bottomBorders.gif) no-repeat 0 0; padding-top: 8px;}

#logoBox {width: 220px; margin-left: -30px; position: relative; left: 15px; padding-bottom: 12px; background: url(../images/layout/sites/JC/leftColSeparator.gif) 0 100% repeat-x;}
#logoBox a.logo {display: block; height: 105px; background: url(../images/layout/sites/JC/logo.gif) no-repeat 50% 50%; text-indent: -500px; overflow: hidden;}

#searchBox {width: 100%; padding-top: 14px; overflow: hidden;}
#extraBox {width: 190px; color: #4D4D4D; float: left; margin-top: -11.5em; margin-left: 14px; display: inline; font-size: 0.7em;}
#extraBox p {padding-bottom: 1em; text-align: center;}
#extraBox a.button {display: block; padding: 6px 0; position: relative; z-index: 100; font-size: 1.1em;}

* html #mainCol, * html #sideCol, * html #productImages {display: inline;}

/* footer
=========*/
#footer {margin-top: 3px; font-size: 0.85em;}
#footer ul {float: left; width: 800px;}
#footer li {display: inline;}
#footer p {float: right; width: 160px; text-align: right;}
#footer a {text-decoration: none;}

/* links & type
===============*/
body {color:#003E74; font: 0.8em Verdana, Helvetica, Arial, sans-serif;}
a {color: #5B80B4;}
a:hover, a:active, a:focus {color: #003E74;}
a.button {background-color: #003E74; color: #fff; text-align: center; text-decoration: none; padding: 6px;}
a.button:hover, a.button:active, a.button:focus {background-color: #5B80B4; color: #fff;}
a.save-button {padding-left: 27px; background: #003E74 url(../images/layout/sites/JC/save.gif) no-repeat 6px 6px;}
a.save-button:hover, a.save-button:active, a.save-button:focus {background-position: 6px -79px;}

h1 {font-size: 1.8em; padding-bottom: 0.8em; font-weight: normal;}
h2 {font-size: 1.3em; font-weight: normal;}
h4 {font-size: 1.2em; padding-bottom: 0.8em;}

/* Forms
========*/
#searchBox fieldset {padding-bottom: 40px;}
input, textarea, select {color:#003E74; font: 1em Verdana, Helvetica, Arial, sans-serif;}
.form-field, .form-field-inline {margin-bottom: 5px;}
.form-field label {display: block; font-weight: bold; margin-bottom: 1px;}
.form-field-inline label {display: inline;}
.form-field select {width: 190px;}
.form-field input.tbx {width: 184px;}
input.button {background-color: #003E74; color: #fff; text-align: center; text-decoration: none; padding: 6px; border: 0;}
input.button:hover, input.button:active, input.button:focus {background-color: #5B80B4; color: #fff;}

/* Specifics
=========*/

#thumbnails {width: 742px; margin-left: -12px; position: relative; left: 12px; font-size: 0.8em; line-height: 1.3em;}
#thumbnails .thumbRow {float: left; margin-bottom: 10px;}
#thumbnails a.thumb {display: block; float: left; width: 77px; height: 77px; margin-right: 10px; text-decoration: none; position: relative;}
#thumbnails a.thumb img {border: 1px solid #fff; height: 77px; width: 77px;}
#thumbnails a.thumb:hover img, #thumbnails a.thumb:active img, #thumbnails a.thumb:focus img {border-color: #003E74;}

#pager {float: left; width: 700px; position: absolute; bottom: 10px; margin-bottom: 2.5em; text-align: center;}
#pager span span {padding: 0.3em 0.6em; line-height: 2em; cursor: default; margin-right: 1px; border: 1px solid #003E74; color: #003E74; background: #fff;}
#pager span.disabled {padding: 0.3em 0.6em; line-height: 2em; cursor: default; margin-right: 1px; border: 1px solid #999; color: #999; background: #ccc;}
#pager a {padding: 0.3em 0.6em; line-height: 2em; margin-right: 1px; border: 1px solid #003E74; background: #003E74; color: #fff; text-decoration: none;}
#pager a:hover, #pager a:active, #pager a:focus {background-color: #5B80B4; border-color: #5B80B4;}

div.no-results {border: 1px solid #003E74; padding: 10px; text-align: center;}

/* ALSO NEED TO MAKE CAPTION STAY VISIBLE WHEN HOVERED (TRY TO CLICK THE CAPTION ITSELF!) */

#productImages {float: left; width: 395px; margin-right: 15px;}
#productDetails {float: left; width: 290px;}
#productDetails table {margin-bottom: 10px;}
#productDetails table th, #productDetails table td {padding: 3px 5px; vertical-align: top;}

.care-code img {float: left;}
.care-code a {display: block; float: left; width: 18px; height: 18px; margin-left: 20px; background: url(../images/layout/sites/JC/infoButton.gif) no-repeat -18px 0; text-indent: -200px; overflow: hidden;}
.care-code a:hover, .care-code a:active, .care-code a:focus {background-position: 0 0;}

.mainImage {display: block; height: 395px; width: 395px;}
.mainImage img {height: 395px; width: 395px; float: left;}
.colourScroller {float: left; width: 402px; margin: 5px 0 0 -2px; border: 1px solid #fff;}
.colourScroller a {float: left; display: block; margin-right: 5px; margin-bottom: 5px; border: 1px solid #fff;}
.colourScroller a img {height: 60px; width: 60px;}
.colourScroller a.active {border-color: #003E74;}
.colourScroller a:hover, .colourScroller a:active, .colourScroller a:focus {border-color: #5B80B4;}

.topLinks {float: right; margin-top: -35px;}

/* jQuery
=========*/

#formScreen {position: absolute; top: 117px; left: 0; width: 100%; height: 335px; text-align: center; background-color: #003d70; opacity: 0.2; filter: alpha(opacity=20);}
* html #formScreen {padding: 0 14px;}

#loadProgress {position: absolute; top: 117px; left: 0; width: 100%; height: 355px; text-align: center; background-color: #003d70; opacity: 0.2; filter: alpha(opacity=20);}
#loadProgress:not(em) {height:360px;} /* anything but IE <8 */
* html #loadProgress {padding: 0 14px;}

#realTimeCounter {position: absolute; top: 430px; left: 0; width: 100%; text-align: center;}
* html #realTimeCounter {background: #F0F0F0; padding: 3px 14px;}
#realTimeCounter:not(em) {top: 430px;}
#realTimeCounter span {display:block; height: 27px; width: 27px; background: url(../images/layout/sites/JC/realTimeLoad.png) no-repeat 0 0; margin: 0 auto;}

.jQuery .colourScroller {overflow: hidden; height: 62px;}
.jQuery .colourScroller div {width: 10000px;}
.jQuery .colourScroller a {margin-bottom: 0;}
#scrollControls {float: right; font-size: 1.6em; margin-top: 1px;}
#scrollControls a {display:block; float: left; width: 28px; padding-bottom: 2px; text-align: center; background-color: #003E74; text-decoration: none; color: #fff; margin-left: 4px;}
#scrollControls a:hover, #scrollControls a:active, #scrollControls a:focus {background-color: #5B80B4;}

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(../images/layout/macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:#003E74;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 10px solid #fff;
	text-align:left;
	top:45%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window h1 {color: #003E74;}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
	border: 1px solid red;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	float:right;
	text-indent: -35000px;
	overflow: hidden;
}
#TB_closeAjaxWindow a#TB_closeWindowButton {display: block; height: 22px; width: 66px; background: url(../images/layout/sites/JC/lightbox-btn-close.gif) no-repeat;}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#fff;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}