/* default.css */

/*-----------------------------------------------------------------------------
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
	margin: 0;
	padding: 0;
}

img { behavior: url(../css/iepngfix.htc); }

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #3a3a3b;
	background-color:#FFFFFF;
	behavior:url(../css/csshover.htc);
	background-attachment: fixed;
	background-image: url(../tiflex_images/IMG_1940-5d-0-sat.jpg);
	background-repeat: repeat;
}

/* Put it back on certain elements */
p, pre, blockquote, fieldset, table {
	margin: 1em 0;
}

/* Class for clearing floats */
.clear{
	clear:both;
	line-height:0px;
}
.clear_right{
    clear:right;
    width:100%;
}
/* Class for fixing default form display */
form{
	margin:0px;
	padding:0px;
}

/*input {
 margin:0px;
 padding:0px;
 height:22px;
 font-weight:normal;
}

/* Remove border around linked images */
img {
	border: 0;
}

/* Removes styling from all list items */
ul, li {
	list-style:none;
}

h1, h2, h3, h4, h5, h6 {
	font-size:1em;
	font-weight:normal;
	padding:0;
	margin:0;
}

select{
	font-size:1.0em;
}

/*applies padding to every form label*/

label {
	padding: 5px;
}
.title {
	font-weight: bold;
	text-decoration:underline;
	color: #3a3a3b;
}
.underline{
	text-decoration: underline;
}

/*Optgroup disabled class. Optgroup used throughout in place of
option="disbaled" due to lack of support in ie.*/
optgroup.disabled {
    font-style:normal; !important;
    color:#999; !important;
    font-weight:normal; !important;
}

/* =Useful generic classes (Global)
-----------------------------------------------------------------------------*/

.float_left {
	float: left;
}

.float_right {
	float: right;
}

/* =Main Menu (Global)
-----------------------------------------------------------------------------*/
#accessibility {
	z-index:100;
	position:absolute;
	left:-1000em;
}

.nav_sub {
	/*border-top:1px solid #CCCCCC;*/
}

.nav_left {
	background-image:url(../tiflex_images/backgrounds/bg_nav.gif) !important;
	background-position:left top !important;
	background-repeat:repeat-x;
}
.nav_right {
	background-image:url(../../images/backgrounds/bg_navright.gif) !important;
	background-position:top right !important;
	background-repeat:no-repeat;
}

/* all lists */

#nav {
	width:100%;
	height: 1%;
	display:table;
	background-image:url(../tiflex_images/backgrounds/bg_nav.gif);
	background-repeat:repeat;
	background-position:right top;
	margin-left:auto;
	margin-right:auto;
	background-color: #DBE1D4;
}

#nav ul{
	width:100%;
    position:relative;
    z-index:100;
}

#nav a{
	margin-left:2px;
}

#nav a:hover {
	text-decoration:underline;
}

/* all list items */

#nav li{
	display:block;
	float:left;
	font-size:1.2em;
	font-weight:bold;
}

#nav li a{
	color:#38383a; 
	width:100%;
	display:block;
	text-decoration:none;  
	padding-top: 7px;
	padding-bottom: 7px;
	text-align:center; 
}
#nav li.xlg {
	width:16%;
	background-image:url(../../images/backgrounds/bg_navline.gif);
	background-position:left;
	background-repeat:no-repeat;
} 
#nav li.lrg {
	width:13.8%;
	background-image:url(../../images/backgrounds/bg_navline.gif);
	background-position:left;
	background-repeat:no-repeat;
} 
#nav li.med {
	width:10%;
	background-image:url(../../images/backgrounds/bg_navline.gif);
	background-position:left;
	background-repeat:no-repeat;
}  
#nav li.sml {
	width:6%;
	background-image:url(../../images/backgrounds/bg_navline.gif);
	background-position:left;
	background-repeat:no-repeat;
}

/*Read by IE 6 and below only*/
* html #nav li.lrg{ 
	width:12% !important;
} /* Fix for IE % resizing can you find a better way?*/

* html #nav li.sml{ 
	/*width:5.0% !important;*/
} /* Fix for IE % resizing can you find a better way?*/

/*
Category Distribution
=====================
Extra large (15+) x3    
Large (11-14) x1        
Medium (7-10) x2      
Small (1-6) x3          
*/

.nav_main_special a{
	color:#9f0126 !important;
	background-image:url(../../images/backgrounds/bg_navline.gif);
	background-position:left;
	background-repeat:no-repeat;
}
.nav_main_special dl dd a{
	color:#38383a !important;
	background:none;
}

/* second-level lists */  

#nav li div { 
    position: absolute;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */  
    display:none; /* added this as menu was causing long scrolling in IE, do screen readers really want to view all the options?*/     
}
  
#nav li:hover div, #nav li.sfhover div {
    border: 1px solid #d0d7c7;
	border-top: 0px;
    left:auto;
	padding-bottom:10px;
    background-color: #e9efe0;
    display:block;
}

#nav li div dl {   
    /*position: absolute;*/
    /*left: -999em;*/ /* using left instead of display to hide menus because display: none isn't read by screen readers */
	float:left;
	line-height: 1.8em;
	margin-top: 0px;
	font-size:0.85em;
	padding-top:2px;
	z-index:100;
	text-align:left;   
}
* html #nav li:hover div dl, * html #nav li.sfhover div dl{  
    /*IE5x/6 Fix*/ 
    width:150px;
}

#nav li div table{
    /*Only used by IE5x*/
    padding:0;
    margin:0; 
}
#nav li div table tr{
    /*Only used by IE5x*/
    padding:0;
    margin:0;   
}
#nav li div table td{
    /*Only used by IE5x*/
    vertical-align:top;
    padding:0 5px 0 5px;
    margin:0;  
}

#nav li div dl dd a, #nav li div dl dt a{
    text-align:left;
    width:95%;
}

#nav li div dl dt {
    font-weight:bold;
    padding:4px 6px 4px 6px;
}

#nav li div dl dd a {
    color: #5f6061;
	font-weight:normal;  
	padding:2px 4px 2px 4px;
}

#nav li div dl dd a:hover,#nav li div dl dd a.sfhover {
    color: #000000;
	background-color:#ffffff;
	border: 1px dotted #4d4d4f;
    padding:1px 3px 1px 3px;
	text-decoration:none;
}

/* lists nested under hovered list items */
#nav li.sfhover div.dd1, #nav li li.sfhover div.dd1 { 
    left:0%;    
}
#nav li.sfhover div.dd2, #nav li li.sfhover div.dd2 { 
    left:16%;    
}
#nav li.sfhover div.dd3, #nav li li.sfhover div.dd3 { 
    left:32%;    
}
#nav li.sfhover div.dd4, #nav li li.sfhover div.dd4 { 
    left:44%;    
}
#nav li.sfhover div.dd5, #nav li li.sfhover div.dd5 { 
    left:58.8%;    
}
#nav li.sfhover div.dd6, #nav li li.sfhover div.dd6 { 
    right:10%;    
}
#nav li.sfhover div.dd7, #nav li li.sfhover div.dd7 { 
    right:13%;    
}
#nav li.sfhover div.dd8, #nav li li.sfhover div.dd8 { 
    right:0%;    
}
#nav li.sfhover div.dd9, #nav li li.sfhover div.dd9 { 
    right:0%;    
}

/* =Side Nav (Global)
-----------------------------------------------------------------------------*/



/* =Headers (Global)
-----------------------------------------------------------------------------*/

.h1{
	font-size:1.4em;
	font-weight:bold;
}

.h2{
	font-size:1.2em;
	font-weight:bold;
	color:#000000;
}

.h3{
	font-size:1.1em;
	font-weight:bold;
}

.title_arrow {
	padding: 0 0 0 10px;
	font-weight:bold;
	border-bottom: 1px dashed #cccccc;
	border-top: 1px dashed #cccccc;
	padding:10px 0 10px 0;
}

.emphasis li{ /* As used in questionnaire */
	font-size: 1.3em;
	font-weight:bold;
	padding: 3px 0 0 0;
}
.emphasis{/* As very often with H2 class for titling */
	padding:10px 0 10px 0;
	margin: 0px 0 10px 0;
	border-bottom: 1px dashed #cccccc;
	border-top: 1px dashed #cccccc;
}
.emphasis_5{
	padding:5px 0 5px 0px;
	margin: 0px 0 10px 0;
	border-bottom: 1px dashed #cccccc;
	border-top: 1px dashed #cccccc;
}

.title_fullwidth {
	border-bottom: 1px dashed #cccccc;
	border-top: 1px dashed #cccccc;
	margin:0 0 10px 0;
	padding:10px 0 10px 0;
	width:100%;
	display:table;
}

#title_left { /* Need to remove once checked - address_book */
	float:left;
	width:45%;
	font-size: 1.3em;
	padding: 2px;
	padding-left:0px;	

}

/* =Links (Global)
-----------------------------------------------------------------------------*/

a:visited {
	text-decoration: none;
	color: #3a3a3b;
}
a:link {
	text-decoration: none;
	color: #3a3a3b;
}
a:active {
	text-decoration: none;
	color: #3a3a3b;
}
a:hover {
	text-decoration: underline;
	color: #87a712;
}
a:visited.title {
	text-decoration: underline;
	color: #3a3a3b;
	font-weight:bold;
}
a:link.title {
	text-decoration: underline;
	color: #3a3a3b;
	font-weight:bold;
}
a:active.title {
	text-decoration: underline;
	color: #3a3a3b;
	font-weight:bold;
}
a:hover.title {
	text-decoration: underline;
	color: #87a712;
	font-weight:bold;
}
a:visited.link {
	text-decoration: underline;
	color: #87a712;
}
a:link.link {
	text-decoration: underline;
	color: #87a712;
}
a:active.link {
	text-decoration: underline;
	color: #87a712;
}
a:hover.link {
	text-decoration: underline;
	color: #3a3a3b;
}



/* =Fonts
-----------------------------------------------------------------------------*/
.grey_strike { /*used in php includes*/
	text-decoration:line-through;
	color:#3a3a3b;
}

.text_white{/*used in php includes*/
    color: #FFFFFF;
	font-weight:bold;
}
.asterix{
    color:#ff0000;
}

.grey{
    color:#333333;
}

.text_green {
	color: #87a712;
}
.text_small {
	font-size: 0.8em;
}
.text_red{
	color: #940126;
}

.bold {
	font-weight: bold;
}
.italic {
	 font-style:italic;
	 font-size: 1em;
}
.underline {
	text-decoration:underline;
}


/* =Generic Table
-----------------------------------------------------------------------------*/
.generic_table{
	background-color:#f3f3f3;
	
}
.generic_table td{ 
	padding:5px;
	vertical-align:top;
	border:#ffffff solid 1px;
}
.generic_table_r1{
	background-color:#d1d1c1;
}
.generic_table_r2{
	background-color:#f3f3f3;
}
.truck01{
	padding:7px 0 0 3px;
}
.truck01_title{
	padding:3px 0 0 3px;
	vertical-align: text-bottom;
}


/* =Masthead & structure of container
-----------------------------------------------------------------------------*/

#HeaderSpan {
	width: 100%;
	height: 1%;
	display:table;
	background-image: url(../tiflex_images/backgrounds/header_tiflex.jpg);
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-repeat: no-repeat;

}

#HeaderContainer {
	width: 992px;
	/*min-width: 768px;*/
	height: 1%;
	display:block;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#HeaderContainerLogo {
	max-width: 992px;
	height: 250px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#MainContainer {
	width:100%;
	background-color:#FFFFFF;
	padding-bottom:20px;
	background-image: none;
	background-attachment: fixed;
	background-repeat: repeat;
	border: 1px solid #999999;
}

#mainContainerHome {
	width:100%;
	background-color:#FFFFFF;
	padding-bottom:20px;
	padding-left:20px;
	padding-right:20px;
	background-image: url(../images/treadmaster_fill.jpg);
}

#MainContainer .skate{
 background-image:url(../../images/generic/skate_back.gif);
 background:#00CCFF;
}
#BodyContainer{
	width: 992px;
	/*max-width:992px;
	min-width: 768px;
    min-width: 992px; 
	/*background-color: #FFFFFF;*/
	margin: 0px auto 0px auto;
	height: 1%;
	display: table;
}
#PopupContainer{
	width: 90%;
    padding:5%;
	margin: 0px auto 0px auto;
}

/* ie min-width, max-width emulation */ 
* html #HeaderContainerLogo,* html #HeaderContainer,* html #DynamicContainer,* html #BodyContainer,* html #HeroContainer, * html #FooterBlocksContainer {
	width: 992px; /* in case JS is off, set a fallback width. default is auto */
    /* If min/max width is to be reinstated on IE6 must move this above default settings */ 
	/*width: expression(Math.max(Math.min((document.documentElement ? document.documentElement.clientWidth :
	document.body.clientWidth) - 20, 992), 768)+'px'); */
}


/* =Toplinks
-----------------------------------------------------------------------------*/
#logo {
	margin-top: 20px;
	padding-left: 10px;
	width: 250px;
	height: 35px;
	float: left;
}
#ToplinksContainer {
	height: 150px;
	background-image:url(../../images/backgrounds/bg_search.gif);
	background-position:bottom right;
	background-repeat:no-repeat;
	margin-top: 100px;
	width: 470px;
	float: left;
}      
#ToplinksContainer ul {
	 float: right; 
	 margin:0;
     padding:5px 5px 0 0 ; 
}
#ToplinksContainer li {
	float:left;
	font-size:1.1em;
	color: #FFFFFF;
	padding-right: 7px;
}
#ToplinksContainer li a {
	color: #FFFFFF;
    padding:0 8px 0 0;
    margin:0 0 1px 0;
	background-repeat:no-repeat;
	background-position:center right;
    border-right:1px dotted #e2e7dc;
}
#ToplinksContainer li a:hover {
	color: #87a712;
}
#SearchContainer {
 	float: right;
	margin-left: 27px;
	position:relative;
	right: 17px;
}
#SearchContainer ul li {
 	width:150px; 
 	height: 25px;
 	float: right;
	position:relative;/* needed to prevent section from wrapping at 800 x 600 */
	right: 40px;
}



/* Tico Special */

.tico_text_01 {
	padding:10px;
	color:#003399;
	background-color:#FFFFFF;
	border:1px solid #666666;
	margin:0 0 10px 0;
	font-weight:bold;
	}
	
.tico_text_special {
    padding:10px;
	color:#FFFFFF;
	background-color:#FF0000;
	border:#003399 solid 1px;
	margin:0 0 10px 0;
	font-weight:bold;
	font-size:x-large;
	}

body,td,th {
	color: #333333;
	background-image: none;
	background-repeat: no-repeat;
	background-position: right;
	width: 992px;
	}
.style6 {font-weight: bold}

body {
	background-image: url(images/backgrounds/bd.jpg);
	background-repeat: repeat;
	background-position: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #000000;
}
.style7 {color: #000033}
.style8 {color: #FFFFFF}
.style9 {
	font-size: 16pt
}
.style5 {font-size: x-small}

