/*
STYLE SHEET FOR TRAC
Created by Bevivid
www.xxxxxxxx.co.uk
ToC
	1.  defaults
	2.  structure
	3.  links and navigation
	4.  fonts
	5. 	forms
	6.  images
	7.  hacks
Notes
*/

/* ------- 1. defaults ------- */

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	background: url(../images/body-background.jpg);
	font-size: 12px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

/* ------- 2. structure ------- */

#container {
	margin: 0 auto;
	width: 800px;
	background: url(../images/container_bck.png) repeat-y;
	padding: 5px 20px;
}





#masthead {  /* top of site containing logo, login, and main site nav */
	background: url(../images/header_background.jpg) no-repeat;
	width:800px;
	height: 140px;
	float: left;
}



#navigation {
background: #CCCCCC; 
margin-top: 5px;
width: 798px;
height: 30px;
text-align: center;
float: left;
}



#sub_navigation {
background: #CCCCCC; 
width: 798px;
height: 32px;
text-align: center;
float: left;
}



#pages_sub_navigation {
background: #CCCCCC; 
width: 798px;
height: 32px;
text-align: center;
float: left;
}

#focus_area { /* area including decorative image */
margin-top: 5px;
}



#content_area {  /*  Main central content box  */
background: url(../images/content-background.jpg) repeat-x;
width: 798px;
}

#left { /* Links enews sign up etc */
width: 225px;
border-right: solid 15px #1d407e;
background: url(../images/left_background.jpg) repeat-y;
float: left;
margin-top: 10px;
}

* html #left {
margin-left: -10px;
}

#shop_left { /* left column for product subcats on shop.php and products.php */
width: 150px;
float: left;
}

* html #left_box {
padding: 0;
}

.left_box { /* Individual items in left div */
padding: 5px;
color: #ffffff;
margin-bottom: 10px;
}

#left_bottom {
background: url(../images/left_bottom.jpg) no-repeat bottom center;
width: 225px;
height: 22px;
}

#content {
float: right;
width: 525px;
border-right: solid 15px #1d407e;
margin-top: 10px;
}

#shop_content { /* used on shop.php and products.php because #shop_left is narrower */
float: right;
width: 630px;
border-right: solid 15px #1d407e;
margin-top: 10px;
}

* html #shop_content {
width: 590px;
}

#sections_content { /* used on shop.php and products.php because #shop_left is narrower */
float: right;
width: 630px;
border-right: solid 15px #1d407e;
margin-top: 10px;
}

* html #sections_content {
width: 590px;
}

#content_header {
width: 500px;
height: 32px;
background: url(../images/content_h1_bg.jpg) repeat-x;
margin-right: 20px;
padding: 5px;
}

#product_nav {
width: 800px;
margin: 0 auto;
}




#product_detail {
width: 615px;
float: right;
margin: 10px 15px 0 0;
background: url(../images/prod_detail_bckgrd.jpg) no-repeat bottom center;
height: 200px;
}

* html #product_detail {
margin-right: 5px;

}

#productpage_detail {
width: 600px;
float: right;
margin: 10px 15px 0 0;

height: 200px;
}

#pdf_area {
clear: left;
float: left;
width: 200px;

}

#email_form {
clear: left;
float: left;
width: 200px;

}

#slide_show { /* image slideshow for each product */
overflow: hidden;
float: left;
margin: 10px;
background-color: #ffffff;
width: 190px;
height: 140px;

}

#video {
overflow: hidden;
float: left;
margin: 10px;

width: 180px;
height: 145px;

}

.news_articles {
width: 610px;
border-bottom: dotted 1px #cccccc;

}

#sub_footer { /* Logos area */
clear: both;
height: 100px;
width: 810px;
margin: 0 auto;
}

#footer { /* general site links and credits */
width: 800px;
margin: 0 auto;
text-transform: uppercase;
}

#analytics {

}

/* .seperator {
	clear: both;
	height: 0;
} */

/* ------- 3. links and navigation ------- */

a {
	font-family: Arial, Helvetica, sans-serif;
}

a:visited {
}

a:hover {
}

a:active {
}

ul#group_nav {
width: 300px;
margin: 0 auto;
list-style-type: none;
float: right;
}

ul#group_nav li {
float:left;
width: 113px;
height: 32px;
display: inline;
text-align: center;
padding: 10px 0 0 0;

}

ul#group_nav li a {
color: #ffffff;
text-decoration: none;
margin: 0px auto;
font-weight: bold;
font-size: 10px;
padding: 10px 0px;
font-weight: 600;
}

ul#group_nav li.home {
background: url(../images/home-button.png) no-repeat top center;
}

ul#group_nav li.group {
background: url(../images/group-button.png) no-repeat top center;
}

ul#group_nav li.group a:hover {
color: #cccccc;
}

ul#group_nav li.home a:hover {
color: #000000;
}

#navigation ul {
list-style-type: none;
margin: 0 auto;
width: 792px;
}

#navigation ul li {
display: inline;
float: left;
background: url(../images/nav-button.png) no-repeat center top;
width:113px;
height: 32px;
padding: 7px 0 0 0;
}

* html #navigation ul li {
height: 23px;
}

#navigation ul li a {
color: #ffffff;
text-decoration: none;
margin: 10px auto;
font-weight: bold;

}

#navigation ul li a:hover {
color: #000000;

}

#sub_navigation ul { /* subnavigation on shop.php */
list-style-type: none;
margin: 0 auto;
width: 792px;
}

#sub_navigation ul li {
display: inline;
float: left;
background: url(../images/sub_nav_tab.png) no-repeat center top;
width:132px;
height: 32px;
padding: 0px 0px;
text-align: center;
line-height: 12px;

}

#sub_navigation ul li a {
color: #000000;
text-decoration: none;
margin: 10px auto;
font-weight: bold;
padding: 0 3px;

}

#sub_navigation ul li a:hover {
color: #ffffff;
}

#pages_sub_navigation ul { /* sub navigation on pages.php */
list-style-type: none;
margin: 0 auto;
width: 792px;
background-color: #cccccc;
}

#pages_sub_navigation ul li {
display: inline;
float: left;
background: url(../images/sub_nav_tab.png) no-repeat center top;
width:132px;
height: 32px;
padding: 0px;
text-align: center;
line-height: 12px;
}

#pages_sub_navigation ul li a {
color: #000000;
text-decoration: none;
margin: 10px auto;
font-weight: bold;
padding: 0 3px;

}

#pages_sub_navigation ul li a:hover {
color: #ffffff;
}

#left a {
text-decoration: none;
color: #ffffff;
}

#left a:hover {
color: #1d407e;
}

#left a.heading {
font-weight: 600;
}

#product_nav ul { /* sub nav across bottom of index.php and page.php */
list-style-type: none;
float: left;
margin-top: 5px;
}

#product_nav ul li {
width: 150px;
height: 159px;
float: left;
padding: 10px 10px 0px 0;

}

* html #product_nav ul li {
padding-right: 5px;
}

#product_nav ul li a {
color: #ffffff;
text-decoration:none;
text-transform: uppercase;
padding: 5px 0px;
font-weight: 600;
}

#product_nav ul li a:hover {
color: #999999;
}

#content #sub_categories ul { /* sub nav across bottom of index.php and page.php */
list-style-type: none;
float: left;
margin: 5px 0 0 0;
}

#content #sub_categories ul li.cat {
width: 150px;
height: 159px;
float: left;
padding: 10px 10px 0px 0;
list-style-type: none;
background:none;
}

#sub_categories ul li a {
color: #ffffff;
text-decoration:none;
text-transform: uppercase;
padding: 5px 15px 5px 0;
font-weight: 600;
font-size: 13px;
}

#sub_categories ul li a:hover {
color: #999999;
}

#sub_footer ul {
list-style-type: none;
margin: 15px 0 0 0;
float: right;
}

#sub_footer ul#site_nav { /* main site nav in footer */
float: left;
}

#sub_footer ul#footer_nav { /* general footer nav */
float: right;
}

#sub_footer ul li {
display: inline;
padding: 2px 0;

}

#sub_footer ul li a {
color: #FFFFCC;
text-decoration: none;
padding: 0px 10px;
border-right: solid 1px #FFFFFF;
font-weight: bold;
font-size: 8px;
text-transform: uppercase;
}

#sub_footer ul li a:hover {
text-decoration: underline;
}

#footer p a { /* Bevivid credit */
color: #FFFFCC;
text-decoration: none;
}

#footer p a:hover {
text-decoration: underline;
}

.pdf {

background: url(../images/pdf_icon.png) no-repeat left center;
padding: 25px 10px 25px 60px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
margin: 10px;
display: block;
}

.page_pdf {

background: url(../images/pdf_icon.png) no-repeat left center;
padding: 25px 10px 25px 60px;
font-weight: 600;
color: #1D407E;
text-decoration: none;
margin: 10px;
display: block;
}

.pdf_mini {

background: url(../images/pdf_mini.gif) no-repeat left center;
padding: 10px 10px 10px 25px;
font-weight: 600;
color: #1D407E;
text-decoration: none;
margin: 10px;
display: block;
}

.mov_mini {

background: url(../images/mov_mini.gif) no-repeat left center;
padding: 10px 10px 10px 25px;
font-weight: 600;
color: #1D407E;
text-decoration: none;
margin: 10px;
display: block;
}

.news_articles a {
text-decoration: none;
color: #1d407e;
}

.news_articles a:hover {
color: #0066FF;
}

.quicktime {
color: #ffffff;
text-decoration: none;
font-weight: 600;
background: url(../images/quicktime-grey.png) no-repeat left center;
padding: 20px 0 10px 35px;
margin-top: 20px;
}

a.white {
color: #ffffff;
text-decoration: none;
font-weight: 600;
padding-left: 5px;
display: block;
}

a.white:hover {
color: #000000;
}

a.blue {
color: #1d407e;
text-decoration: none;
font-weight: 600;
padding-left: 5px;
display: block;
}

a.blue:hover {
color: #cccccc;
}



/* -------4. fonts ------- */

h1, h2, h3, h4, p, ul {
	font-family: Arial, Helvetica, sans-serif;
}

#content h1, #shop_content h1, #sections_content h1 {
height: 32px;
background: url(../images/content_h1_bg.jpg) repeat-x;
margin-right: 20px;
padding: 5px;
color: #1e417f;
font-size: 18px;
margin-bottom: 10px;
}

#content h1 {
width: 500px;
}

#shop_content h1, #sections_content h1 {
width: 605px;
}


* html #content h1, #sections_content h1 {
margin-right: 10px;
}

* html #shop_content h1 {
margin-right: 0;
}

#left h2 {
background: url(../images/left_header-bg.jpg) repeat-y;
width: 215px;
height: 14px;
color: #ffffff;
font-size: 12px;
padding: 5px;
margin-bottom: 10px;
}

.news_articles h2 { /* news page article headings */
font-size: 14px;
margin: 10px 5px;
color: #1d407e;
}

.left_box h3 {
color: #ffffcc;
font-size: 12px;
margin-bottom: 5px;
}

#content h3 {
color: #1e417f;
font-size: 14px;
}

#product_detail h3 {
color: #ffffff;
background-color: #1E417F;
font-size: 12px;
height: 20px;
padding: 5px;
}

#productpage_detail h3 {
color: #1E417F; 

font-size: 12px;
height: 20px;
padding: 5px;
}



h4{
}

p.time {
font-weight: 600;
margin: 105px 0 0 10px;
}

#focus_area p {
color: #ffffcc
}

.left_box p {
color: #F2F0BF;
font-size: 11px;
margin-bottom: 5px;
}

#content p, #shop_content p, #sections_content p {
color: #2f2f2f;
margin-bottom: 20px;
margin-right: 15px;
margin-left: 5px;
line-height: 18px;
/*width: 615px; 
float: left; */
}

* html #content p {
/* width: 500px; */
margin-right: 5px;
}

* html #shop_content p {
/* width: 610px; */
margin-right: 0px;
}

#content strong, #shop_content strong, #sections_content strong {
color: #1E417F;
}

#product_nav ul li p {
color: #ffffff;
padding: 5px;
}

#content #sub_categories ul li p {
width: 130px;
color: #ffffff;
}

#content ul, #shop_content ul, #sections_content ul {
margin: 0 10px 0 20px;
list-style-type: none;
padding-bottom: 15px;
/* float: left; */

}

#content ul {

}
#content ul li, #shop_content ul li, #sections_content ul li {
background:url(../images/bullet.gif) no-repeat 1px 2px;
padding-left: 15px;
padding-bottom: 10px;
color: #2f2f2f;
}

#footer p { /* Bevivid credit */

color: #FFFFCC;
font-weight: 600;

}

#shop_content table, sections_content table {
margin: 10px;
width: 500px;
color: #2f2f2f;
}

#shop_content table th, #sections_content table th {
background-color: #1d407e;
color: #ffffff;
padding: 5px;
}

#shop_content table td, #sections_content table td {
padding: 5px;
}

ul {
}


ol {
}

hr {
}
/* ------- 5. forms ------- */

form.search {
margin: 0px 0 0 5px;
width: 200px;
float: right;
display: inline;
}

form.search .textfield {
border: solid 1px #1e417f;
margin-top: 5px;
}

.search_button {
border: none;
/* color: #1e417f;
font-weight: 600;
font-size: 12px;
*/
width: 25px;
height: 25px;
background: url(../images/search.png) no-repeat;
cursor: pointer;
}

.search_button:hover {
background: url(../images/search-hover.png) no-repeat;
}

form.left_form {
width: 190px;
margin: 0 auto;
}


.textfield {
background-color: #ffffff;
border: none;
color: #1e417f;
height: 15px;
padding: 3px 5px;
margin-bottom: 10px;
}

.left_box .textfield { /* enews sign up */
width: 180px;
}

.left_box  .textfield_error {
border: solid 1px #cc0000;
height: 15px;
width: 180px;
margin-bottom: 10px;
padding: 3px 5px;
color: #cc0000;
}

.left_box .textarea {
background-color: #ffffff;
border: none;
color: #1e417f;
height: 50px;
width: 180px;
padding: 3px 5px;
margin-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

.submitbutton {
background-color: #1676d7;
border: solid 1px #1e417f;
padding: 5px;
margin-left: 5px;
color: #ffffff;
font-weight: 600;
cursor: pointer;
float: right;
}

.submitbutton:hover {
background-color: #1e417f;
}

form.sales {
width: 400px;
margin: 0 auto;
}

form.cmm {
width: 600px;
margin: 0 auto;
}

form.sales label, form.cmm label {
float: left;
}

.sales_textfield { /* sales enquiry form */
float: right;
width: 300px;
height: 18px;
padding-top: 2px;
border: solid 1px #cccccc;
margin-bottom: 10px;
color: #333333;
}

form.cmm .sales_textfield {
width: 500px;
}

.short_textfield { /* sales enquiry form */
float: right;
width: 300px;
height: 18px;
padding-top: 2px;
border: solid 1px #cccccc;
margin-bottom: 10px;
color: #333333;
}

form.cmm .short_textfield {
width: 500px;
}

.sales_textfield:hover {
border: solid 1px #1e417f;

}

.short_textfield:hover {
border: solid 1px #1e417f;

}

.sales_textarea {
float: right;
width: 300px;
border: solid 1px #cccccc;
margin-bottom: 10px;
}

form.cmm .sales_textarea {
width: 500px;
height: 200px;
}

.sales_textarea:hover {
border: solid 1px #1e417f;
}

.sales_textfield_error {
border: solid 1px #cc0000;
float: right;
width: 300px;
margin-bottom: 10px;
}

form.cmm .sales_textfield_error {
width: 500px;
}

.sales_textarea_error {
border: solid 1px #cc0000;
float: right;
width: 300px;
margin-bottom: 10px;
}

form.cmm .sales_textarea_error {
width: 500px;
}

.required {
color: #CC0000;
font-weight: 600;
}

#content p.required {
color: #CC0000;
font-weight: 600;
}

.notice {
font-style: italic;
color: #1e417f;
float: right;
}

#product_detail .email_address { /* form to access downloadable .pdfs on product pages */
width: 180px;
margin: 20px 0 0 10px;

}

#product_detail .email_address .textfield {
width: 170px;
}

#product_detail .email_address label {
color: #ffffff;
margin-bottom: 10px;
}

#productpage_detail .email_address { /* form to access downloadable .pdfs on product pages */
width: 300px;
margin: 20px 0 0 10px;
display: inline;
}

#productpage_detail .email_address .textfield {
width: 180px;
border: solid 1px #1e417f;
margin-left: 10px;
}


#productpage_detail .email_address .textfield:hover {
border: solid 1px #cccccc;
}

#productpage_detail .email_address label {
color: #1E417F;
margin-bottom: 10px;
}

/* ------- 6. images ------- */

a img {
	border: 0;
}


.left_box img {
border: solid 1px #ffffff;
}

#shop_content img {
float: right;
margin-right: 10px;
}

* html #shop_content img {
float: right;
margin-right: 20px;
}

* html #content img {

margin-right: 15px;
}

#shop_content #slide_show {
/* margin: 0; */
border: solid 2px #666666;
}


#shop_content #video img {
/* border: solid 2px #ffffff; */
margin-bottom: 15px;
}

/* -------7. hacks ------- */

body {/*IE 5 centring bug fix */
text-align: center;
}

#container {
text-align: left;
}

* html #left { /* removes extra margin on left column in IE6 */
margin-left: 0px;

}

* html #shop_content { /* used on shop.php and products.php because #shop_left is narrower */
float: right;
width: 610px;
border-right: solid 15px #1d407e;
margin-top: 10px;
}

* html .news_headlines { 
margin: 10px 10px 0 20px;
}

* html .news_articles {
margin-right: 15px;
}

* html .focus_inner {

}


img, div, li, a, input { behavior: url(iepngfix.htc) }