/* ======================== */
/* == GENERAL FORMATTING == */
/* ======================== */

/* Default settings */
body {
	color: #6E6E6E;
	font-size: 12px;	
	background-color: #A7ABAC;
	}
	h1, h2, h3, h4, h5, h6 {
		color: #012A62;
		text-transform: uppercase;
		}	
	h1 {
		font-size: 18px;
		}
	h2 {
		font-size: 15px;
		}
	h3 {
		font-size: 13px;
		}
	a {		
		color: #012A62;
		background-repeat: no-repeat;		
		}
	a:hover {
		text-decoration: none;
		}	
		a span { /* Text backup to image */
			display: none;
			}				
	input, select {
		font-size: 11px;
		}
		
/* ============= */
/* == MODULES == */
/* ============= */

/* PSEUDO-SELECT MENU version 3.1 GML */
/* Use with JavaScript */
div.pseudo-select-active, div.psuedo-select-active.off {	
	position: relative;
	width: 300px;
	height: 18px;
	overflow: hidden;
	margin-bottom: 5px;
	color: #000;	
	background-color: #fff;	
	border: 1px solid #7f9db9;
	text-transform: uppercase;		
	}
div.pseudo-select-active.on {
	overflow: visible;
	border-bottom: 0;
	margin-bottom: 6px;
	}	
div.pseudo-select-active:hover {
	cursor: pointer;	
	}
	div.pseudo-select-active span {
		position: relative;
		top: -1px;
		left: 1px;
		display: block;
		min-height: 18px;		
		padding-top: 3px;
		padding-left: 3px;
		overflow: visible;
		color: #000;
		background: transparent url(../../images/pseudoselect_arrow.gif) right top no-repeat;														
		}	
	div.pseudo-select-active ul {	
		position: absolute;
		top: 19px;
		left: -1px;
		display: block;		
		list-style-type: none;
		width: 300px;
		height: 100px;
		margin: 0;			
		overflow: auto;	
		overflow-x: hidden;
		overflow-y: scroll;	
		background-color: #fff;	
		border: 1px solid #7f9db9;
		border-top: 0px;					
		}	
		div.pseudo-select-active ul a {
			display: block;
			width: 280px;					
			padding-left: 3px;
			color: #000;
			text-decoration: none;
			}
			div.pseudo-select-active ul a:hover {
				background-color: #b2b4bf;
				}

/* Pseudo drop-down menu - LEGACY SUPPORT */
div#pseudoselect {
	width: 300px;
	height: auto;	
	color: #000;	
	background-color: #fff;	
	border: 1px solid #7f9db9;
	text-transform: uppercase;	
	}
	span#pseudoselect_command {
		display: block;
		min-height: 17px;
		padding-top: 2px;
		padding-left: 3px;
		overflow: visible;
		background: #fff url(../../images/pseudoselect_arrow.gif) right top no-repeat;														
		}
	ul#pseudoselect_options {	
		display: block;			
		list-style-type: none;
		width: 300px;
		height: 100px;
		margin: 0;				
		overflow: auto;	
		overflow-x: hidden;
		overflow-y: scroll;										
		}
		ul#pseudoselect_options a {
			display: block;
			width: 280px;					
			padding-left: 3px;
			color: #000;			
			text-decoration: none;
			}
			ul#pseudoselect_options a:hover {
				background-color: #b2b4bf;
				}	

/* =========================================== */
/* == STRUCTURAL LAYOUT AND SPECIFIC DESIGN == */
/* =========================================== */

div#main {
	position: relative; /* Required for items to be absolutely positioned and still have site aligned to center */
	width: 900px;
	height: 608px;
	margin: 5px auto 0px auto; /* Align site to center */
	padding: 0px;
	border: 1px solid #8C8C8C; /* Non-Cooper color */
	}
	
	/* -------------------------- */
	/* -- ADMINISTRATION TOOLS -- */
	/* -------------------------- */
	
	div#admin {		
		width: 860px; /* EDITED IN IE 5.5 CSS */
		height: 15px; /* EDITED IN IE 5.5 CSS */
		overflow: hidden;
		margin: 10px auto 0px auto;
		padding: 10px 20px 10px 20px;
		color: #000;
		background-color: #FFF;	
		border: 1px solid #EEE;
		display: none; /* Do not dislay unless called by administration session */
		}
		div#admin p {
			margin: 0px;
			padding: 0px 0px 5px 0px;
			}
		div.type {
			float: left;
			width: 150px; /* EDITED IN IE 5.5 CSS */
			margin-right: 10px;
			padding: 5px;
			border: 1px solid #A7ABAC;
			}
		div#admin ul {
			margin: 0px;
			padding: 0px;						
			}
			div#admin ul li {				
				height: 10px;							
				margin-right: 20px;
				}
	
	/* ------------------- */
	/* -- EXTRA BUTTONS -- */
	/* ------------------- */
	
	div#extrabuttons {
		margin-top: 64px; /* Position below standard navigation */	
		}
		
		/* Skip to Navigation */
		p#skip {
			display: none; /* Hide by default - used for text-only browsers */
			}
		
		/* Back Link - Edited on Content Layout Pages */
		div#back {	
			position: relative;
			left: 744px;	
			z-index: 10; /* Allows content area to flow behind this link */
			width: 156px;
			height: 18px;
			background: transparent url(../../images/navigation/background_back_right.png) no-repeat;			
			}
			div#back a {
				display: block;
				margin-left: 17px;
				padding: 2px 5px 2px 15px;						
				color: #012A62;
				font-size: 10px;
				font-weight: bold;
				text-transform: uppercase;
				text-decoration: none;
				background: transparent url(../../images/navigation/arrow_blue_left.gif) 1px center no-repeat;				
				white-space: nowrap;
				}
				div#back a:hover {
					background-position: 0px center;
					}
	
	/* ------------- */
	/* -- CONTENT -- */
	/* ------------- */
	
	/* Content area is edited on individual content pages. */
	
	div#content {
		clear: both; /* Prevents strange issues when text size increased in Firefox */
		position: relative; /* Allows content to be positioned relative to this element */
		z-index: 1; /* Made sure content is below standard navigation and back button */
		top: -43px; /* Content area exists underneath secondary standard navigation so that it can be seen when secondary navigation is not present */
		width: 900px;
		height: 470px; /* Total = 495px - 470 (or 445 with padding) visible on pages with secondary navigation - secondary standard navigation is 25px in height - EDITED IN IE 5.5 CSS */
		overflow: hidden;
		padding-top: 25px; 
		background-color: #FFF;
		background-repeat: repeat-x;
		background-position: bottom;		
		}
		
		/* Header */
		div#header {
			}
			/* Next button with count */
			div#nextbutton {
				display: none; /* Currently disabled */
				}
		/* In main content container */			
		/* Important Link Area (optional - formerly contained in header in old design) */ 
		ul#headerlinks {
			list-style-type: none;
			margin: 0;
			padding: 0;
			font-size: 11px;				
			white-space: nowrap;
			}
			ul#headerlinks li {
				float: right;
				margin: 0;
				padding: 0;
				}
		/* Tab content */
		div.tabcontent {
			display: none; /* Hide by default - shown by server-side function call on each page */
			line-height: 150%; /* Spread out paragraphs in main content areas only */
			}
			.media {
				display: none; /* Media to be seen only by uber user in administration mode - shown dynamically */
				}
		/* Additional content (currently only on generic pages - not tire or gallery pages) */
		div.additionalcontent {
			display: none; /* Hide by default - shown by server-side function call on each page */
			}			
		/* Hide extra edit buttons that get written out in administration mode */
		div#tiredetail_nav li input, div#detail_nav li input {
			display: none;
			}
		
		/* **************************** */
		/* For administration mode ONLY */		
		/* **************************** */
		.ca_hilight_app {
			display: inline;
			color: #000;
			background-color: #EBEBFF;
			margin: 0px;
			padding: 0px;
			}
			.ca_hilight_app input {
				margin: 0px;
				padding: 0px;
				height: 17px;
				font-size: 10px;
				}
		.ca_hilight_notapp {
			display: inline; /* Edit */
			background-color: #FFDDDD;
			margin: 0px;
			padding: 0px;
			}
			.ca_hilight_notapp input {
				margin: 0px;
				padding: 0px;
				height: 17px;
				font-size: 10px;
				}			

	/* ---------------- */
	/* -- NAVIGATION -- */
	/* ---------------- */
	
	div#nav {
		}
		div#nav ul {
			list-style-type: none;
			margin-left: 0;
			margin-right: 0;
			padding: 0;		
			}
			div#nav li {
				float: left;
				margin: 0;
				padding: 0;		
				}
	
		/* ------------------------- */
		/* -- STANDARD NAVIGATION -- */
		/* ------------------------- */		
	
		div#standard {
			position: absolute;
			z-index: 10; /* Keep navigation above content */
			top: 0px;
			left: 0px;
			width: 900px; /* Width of main container element - need to set due to absolute positioning */
			overflow: hidden;
			background: #00469c url(../../images/navigation/background_standard.png) top left repeat-x; /* Top border and background gradient */
			}
			div#standard ul {			
				}	
				div#standard li {							
					background-position: right;
					background-repeat: no-repeat;		
					}
					div#standard a {
						display: block;
						margin-right: 1px; /* Leave space for line so that roll-over does not cover it */
						color: #FFF;						
						font-weight: bold;
						text-transform: uppercase;
						text-decoration: none;
						white-space: nowrap;
						background-position: center;
						background-repeat: repeat-y;	
						}					
				
			/* --------------------------------- */
			/* -- PRIMARY STANDARD NAVIGATION -- */
			/* --------------------------------- */				
					
			ul.primary {
				height: 30px; /* Height of primary navigation (26) plus height of bottom gradient (4) */ 
				overflow: hidden;
				margin: 11px 0 0 0;				
				background: transparent url(../../images/navigation/background_bottom.png) bottom left repeat-x; /* Top border and background gradient */
				}
				li.primary {					
					background-image: url(../../images/navigation/line_blue_13.gif); /* Divider line */
					}
					a.primary {						
						min-height: 21px;
						padding: 5px 20px 0 20px;						
						font-size: 12px;
						}
					a.primary:hover {
						/* EDITED IN IE 6 CSS */
						background-image: url(../../images/navigation/background_primary_on.png); /* Replace divider line with new gradient */
						}	
				/* Turn off line on last item */
				li#motorsports {
					background-image: none;
					}		
					
					/* ----------------------------------- */
					/* -- SECONDARY STANDARD NAVIGATION -- */
					/* ----------------------------------- */
					
					ul.secondary {
						display: none; /* Hidden by default */
						position: absolute;
						z-index: 11; /* Keep above primary standard navigation - to fix IE 6 bug */
						top: 36px; /* EDITED IN IE 5.5 CSS */
						left: 0px;
						width: 900px; /* Width of main container element - need to set due to absolute positioning - /* EDITED IN IE 5.5 CSS */ */						
						margin: 0;						
						border-top: 1px solid #ADC0D8;						
						}
						li.secondary {											
							background-image: url(../../images/navigation/line_blue_12.gif); /* Divider line */
							}
							a.secondary, a.secondary2 {
								min-height: 18px; /* EDITED IN IE 6 CSS */
								padding: 5px 10px 0 10px;
								font-size: 10px;
								}
							a.secondary2 { /* For Motorsports secondary navigation, which is too long to fit with standard spacing */
								padding: 5px 5px 0 5px;
								}	
							a.secondary:hover, a.secondary2:hover {								
								background-image: url(../../images/navigation/background_secondary_on.png); /* Replace divider line with new gradient */
								}
						/* Turn off line on last item */
						li#associatebrands, li#videos, li#facilities, li#mediaalerts, li#requestinformation, li#rides {
							background-image: none;
							}			
							
		/* -------------------------- */
		/* -- DASHBOARD NAVIGATION -- */
		/* -------------------------- */
		
		div#dashboard {
			position: absolute;
			top: 524px; /* Lines up with bottom of content area */		
			width: 900px;
			height: 67px; /* EDITED IN IE 5.5 CSS */			
			padding: 10px 0 7px 0;
			background: transparent url(../../images/navigation/background_dashboard.gif) 0px 34px repeat-x;
			}
			div#nav ul#toolbar {
				position: relative;			
				height: 25px;		
				overflow: visible;		
				padding-left: 7px;
				background: transparent url(../../images/navigation/background_toolbar.png) repeat-x;	
				}
				ul#toolbar li {					
					float: left;
					padding-right: 1px; /* Leave space for line so that roll-over image does not cover it */
					background: transparent url(../../images/navigation/line_blue_11.gif) right 10px no-repeat;
					}
				ul#toolbar li#contactus {
					background-image: none; /* Remove line from last item */
					}				
					ul#toolbar a {
						display: block;						
						min-height: 16px; /* EDITED IN IE 6 CSS */
						margin-top: 6px;
						padding: 3px 13px 0 13px;
						font-size: 10px;
						font-weight: bold;
						color: #FFF;
						text-transform: uppercase;
						text-decoration: none;
						}
					ul#toolbar a:hover {
						background: transparent url(../../images/navigation/background_toolbar_on.png) center no-repeat;
						}
				/* Toolbar Buttons - added late */
				ul#toolbar li.button {
					position: absolute;
					top: 37px;	
					width: 149px;				
					height: 26px;
					text-indent: -10000px;
					background-repeat: no-repeat;
					background-position: top left;
					}					
					ul#toolbar li.button a {
						width: 149px;	
						height: 26px;
						margin: 0;
						padding: 0;
						background-repeat: no-repeat;
						}
				/* Event Photo Pick Up */
				ul#toolbar li#photopickup {
					left: 575px;								
					background-image: url(../../images/navigation/button_event-photo-pick-up.gif);
					}					
					ul#toolbar li#photopickup a:hover {
						background-image: url(../../images/navigation/button_event-photo-pick-up_blue.gif);
						}
				/* Find Us On Facebook */
				ul#toolbar li#facebook {
					left: 254px;
					background-image: url(../../images/navigation/button-find-us-on-facebook.gif);
					}					
					ul#toolbar li#facebook a:hover {
						background-image: url(../../images/navigation/button-find-us-on-facebook-blue.gif);
						}
				/* Follow Us On Twitter */
				ul#toolbar li#twitter {
					left: 414px;									
					background-image: url(../../images/navigation/button-follow-us-on-twitter.gif);
					}					
					ul#toolbar li#twitter a:hover {
						background-image: url(../../images/navigation/button-follow-us-on-twitter-blue.gif);
						}
			a#homelink { /* Cooper Tire logo */					
				float: left;					
				position: relative;
				top: -2px;
				margin-left: 12px;
				}		
			div#language { /* Language selector */
				float: right;				
				position: relative;
				top: 4px;	
				left: -12px;
				border: 1px inset #C2C2C2;				
				}		
				div#language select {
					width: 150px;
					font-size: 12px;
					text-transform: uppercase;					
					}
			div#footer { /* Footer */
				clear: both;
				padding-top: 10px; /* EDITED IN IE CSS */
				text-align: center;
				color: #000;
				font-size: 9px;						
				}
				div#footer a {
					color: #FFF;
					white-space: nowrap;
					}
		
		/* ---------------------------- */	
		/* -- COOPERWORLD NAVIGATION -- */
		/* ---------------------------- */
		
		/* NOTE: Additional rules on separate style sheets */
		
		div#cooperworld {	
			position: absolute;
			top: 0px;
			left: 0px;
			width: 900px;
			height: 470px;
			background-color: transparent;	
			z-index: 5;			
			margin-top: 64px; /* Added 4/6/07 GML */
			color: #000;			
			background-repeat: no-repeat;					
			}
			div#cooperworld div.hotspot {
				position: absolute;															
				}
				div#cooperworld div.hotspot a {
					display: block; /* Allows height and width to be set on individual CSS files */
					background-repeat: no-repeat;	
					background-position: -100000px 0px; /* Hide by default, show with JavaScript for smoother animation */
					text-indent: -100000px;																								
					}												
			div#cooperworld div#invisible { /* div.hotspot */				
				top: 86px;
				left: 0px;
				width: 900px;
				height: 475px;
				visibility: hidden;
				}