/**
 *   This css file should only contain site wide styles.
 *   e.g. ( General Layout, Font Styling )
 */

body {
	margin: 0;
	padding: 0;
	text-align: center;
	
	font-size: 68.5%;
	line-height: 1.3em;
	font-family: Helvetica, Arial, Sans-serif;
	
	background-color: #FFF;
	color: #666;
}

body a {
	font-weight: normal;
	outline: none;
	text-decoration: none;
}

body a:link, body a:visited,
#gear .sub_gear a:link, #gear .sub_gear a:visited {
	color: #048AD1;
}
body a:hover, body a:focus, body a:active,
#gear .sub_gear a:hover, #gear .sub_gear a:focus, #gear .sub_gear a:active {
	color: #1F618F;
}


/*
 * BACKGROUND STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
#background {
	width: 740px;
	height: 900px;
	position: absolute;
	z-index: 1;
	top: 0;
	margin: 0 auto;
	left: 50%;
	margin-left: -375px;
}
#background2 {
	width: 740px;
	height: 1500px;
	position: absolute;
	z-index: 1;
	top: 0;
	margin: 0 auto;
	left: 50%;
	margin-left: -375px;
}
#background3 {
	width: 740px;
	height: 2000px;
	position: absolute;
	z-index: 1;
	top: 0;
	margin: 0 auto;
	left: 50%;
	margin-left: -375px;
}


.bg_home,
.bg_gear,
.bg_media,
.bg_dealers,
.bg_catalog,
.bg_contact,
.bg_news,
.bg_swirl	{background-image: url(../img/bg_swirl.jpg); background-color: #FFF; background-position: center; background-repeat: no-repeat;}

.bg_home	{background-image: url(../img/bg_home.jpg);}
/*
 * NOTE: bg_swirl is being used in place of these background images
.bg_gear	{background-image: url(../img/bg_gear.jpg);}
.bg_media	{background-image: url(../img/bg_media.jpg);}
.bg_dealers	{background-image: url(../img/bg_dealers.jpg);}
*/
.bg_catalog	{background-image: url(../img/bg_catalog.jpg);}


#gear_text {
	/*NOTE: Over-lapping graphic showing "over" .bg_gear or .bg_swirl*/
	background: url(../img/gear_text.gif) no-repeat center transparent;
	width: 308px;
	height: 89px;
	position: relative;
	top: 90px;
	left: 30px;
}


/*
 * GENERAL STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
#wrapper {
	margin: 0 auto;
	text-align: left;
	width: 740px;
	padding: 0;
}

#content {
	position: relative;
	z-index: 8000;
	top: 210px;
}

/*
 * NOTE: Homepage no longer has hotspot link (5/26/2009). Un-comment the
 * 2 statements directly below (and the related HTML/JSP in index.jsp)
 
#np_link {
	display: block;
	position: relative;
	left: 104px;
	top: 98px;
	height: 35px;
	width: 135px;
}

#np_link span {
	display: none;
}
*/


/*
 * HEADER STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
#header {
	position: relative;
	z-index: 9600;
	top: 40px;
}

#header h1 a {
	position: absolute;
	z-index: 9500;
	display: block;
	width: 212px;
	height: 65px;
	background: url(../img/ruggeri_logo.gif) no-repeat center transparent;
}

#header h1 a span {
	display: none;
}


/*
 * NAVIGATION STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 
#nav {
	position: absolute;
	z-index: 9450;
	margin: 0;
	padding: 0;
	padding-top: 55px;
	list-style-type: none;
}

#nav li {
	float: left;
}

#nav a {
	height: 63px;
	padding: 0;
	margin: 0;
}

#nav a span {
	display: none;
}

#nav a:hover {
	background-position: bottom left;
}

#nav .home {
	display: block;
	width: 47px;
	background: url(../img/nav_home.gif) no-repeat top left transparent;
}

#nav .gear {
	display: block;
	width: 56px;
	background: url(../img/nav_gear.gif) no-repeat top left transparent;
}

#nav .media {
	display: block;
	width: 63px;
	background: url(../img/nav_media.gif) no-repeat top left transparent;
}

#nav .dealers {
	display: block;
	width: 77px;
	background: url(../img/nav_dealers.gif) no-repeat top left transparent;
}

#nav .catalog {
	display: block;
	width: 79px;
	background: url(../img/nav_catalog.gif) no-repeat top left transparent;
}

#nav .news {
	display: block;
	width: 120px;
	background: url(../img/nav_news.gif) no-repeat top left transparent;
}
	
#nav .selected {
	background-position: bottom left;
}


/*
 * DEALER PAGE STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 
.dealers {
	list-style-type: none;
	margin: 0;
	padding: 10px 20px;
	margin-top: -3px;
	position: relative;
	width: 740px;
}

.online {
	padding: 0 40px;
}

.dealerSearch label {
	display: block;
	width: 65px;
	float: left;
	font-weight: bold;
	text-transform: uppercase;
}

.dealerSearch input {
	border: 1px solid #C4C5C8;
 	background-color: #DEDEDE;
	color: #048AD1;
	width: 100px;
}

#dealer_locator_submit {
	border: 2px solid #048AD1 !important;
}

#dealer_search_form input,
#dealer_search_form select {
	border: 1px solid #C4C5C8;
 	background-color: #DEDEDE;
	color: #048AD1;
}

.dealers li {
	float: left;
	width: 250px;
}

.dealerResults {
	margin-top: 30px;
}

.dealers h3 {
	margin: 0;
	color: #048AD1;
	font-size: 13px;
	font-weight: bold;
}

.dealers a,
.pagination_links a {
	color: #048AD1;
}

.dealers li.dealerInfo {
	width: 250px;
}

.dealers li.dealerImages {
	text-align: right;
	width: 190px;
}

.dealers a img {
	border: 0;
}


/*
 * CATALOG PAGE STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 
 /*
  * NOTE: The Catalog Request form is no longer in use (5/26/2009). Un-comment
  * the code directly below this note to revive it (and un-comment the related
  * HTML/JSP in catalog.jsp).
.catalog_request .input {margin-bottom: 8px;}
.catalog_request label {display: block; width: 65px; float: left; font-weight: bold; text-transform: uppercase;}
.catalog_request input {border: 1px solid #C4C5C8; background-color: #DEDEDE; color: #048AD1; width: 100px;}
.catalog_request input.long {width: 205px;}
.catalog_request select {border: 1px solid #C4C5C8; background-color: #DEDEDE; color: #048AD1; width: 207px;}
#catalog_submit {border: 2px solid #048AD1; margin-left: 190px; width: 79px;}
*/

#catalog_container {
	padding-top: 15px;
	width: 292px;
}

#catalog_download {
	border: 0 solid #F90;
	display: block;
	float: right;
	height: 360px;
	position: relative;
	right: 200px;
	top: -30px;
	width: 400px;
}

#catalog_download span {
	display: none;
}

/*
 * NEWS PAGE STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

#news {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#news li a, .topLink {
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}

#news li {
	margin-bottom:5px;
}

#news li a:link, #news li a:visited, .topLink:visited, .topLink:link {
	color: #444;
}
#news li a:hover, #news li a:focus, #news li a:active, .topLink:hover, .topLink:focus, .topLink:active {
	color: #048AD1;
}

.topLink {
	background:url(../img/arrow.gif) center left no-repeat;
	padding-left:15px;
}

.separator {
	text-align:right;
	clear:both;
	margin-bottom:15px;
	width: 560px;
	float:right;
}

.news div.rightCol h1 {
	line-height:23px;
	margin-top:0px;
}

.news div.rightCol h4 {
	font-size:14px;
	margin-bottom:0px;
}

.news div.rightCol img {
	display:block;
	float:right;
	margin:0px 0px 14px 19px;
	border:1px solid #000000;
	background:#cccccc;
}
	
/*
 * TYPOGRAPHIC STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 
h2 {
	margin-top: 5px;
	font-size: 20px;
}

h3 {
	font-size: 14px;
	font-weight: bold;
}

p {
	color: #666;
}

p.desc {
	color: #666;
	margin-bottom: 20px;
	margin-top: 0;
}
 
.message {
	width: 272px;
}
.validationError {
	color: #79121B; /*red*/
}

.success {
	color: #060; /*green*/
}


/*
 * LAYOUT STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 
.column {
	width: 240px;
	float: left;
}

.column1 {
	width: 300px;
}

.column3 {
	width: 150px;
}

.column a {
	display: block;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: #000;
	text-decoration: none;
}

.column a span {
	display: block;
	color: #048AD1;
	font-weight: normal;
	text-transform: lowercase;
	font-size: 0.8em;
}

.left {
	float: left;
	position: relative;
	margin-right: 20px;
}

.leftCol {
	position: relative;
	float: left;
	width: 160px;
	margin-right: 10px;
}

.rightCol {
	position: relative;
	float: right;
	width: 560px;
}

.rightCol img {
	
}

.divider {
	background: url(../img/divider.gif) no-repeat center transparent;
	height: 1px;
	clear: both;
	padding-top: 15px;
}

.divider.downloads {
	position: relative;
	right: 40px;
}

.clear {
	clear: both;
}


/*
 * GEAR PAGE STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

#gear {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#gear li a.meow {
	font-weight: bold;
	text-decoration: none;
}

#gear li a.meow:link, #gear li a.meow:visited {
	color: #444;
}
#gear li a.meow:hover, #gear li a.meow:focus, #gear li a.meow:active {
	color: #048AD1;
}

#gear .sub_gear {
	margin: 10px 0;
	padding: 0 10px;
	list-style-type: none;
}

#gear .sub_gear a {
	font-weight: normal;
}

#gear .sub_gear a.selectedProduct {
	color: #6E7072;
	cursor: default; /*You're already here, don't click it again*/
}

.side_img {
	float: right;
	margin-left: 15px;
	border: 1px solid #CCC;
}

.product_bullets {
	margin: 0;
	padding: 0 35px;
	padding-right: 0;
	min-height: 89px;
	background: url(../img/features.gif) no-repeat top left transparent;
	list-style-type: square;
	color: #666;
}

.product_bullets li {
	margin-bottom: 3px;
}

.thumbs {
	margin-top: 30px;
	margin-left: 30px;
}

.thumbs img {
	border: 0 solid #FFF;
	padding-right: 5px;
}

.productInfo {
	float: left;
	width: 260px;
}

.productImage {
	float: right;
	width: 290px;
}

.detailsLink a {
	margin-bottom: 10px;
	display: block;
	font-weight: bold;
	text-decoration: underline;
}

.part_numbers_table {
	width: 340px;
	border-collapse: collapse;
}

.part_numbers_table th {
	background-color: #444;
	color: #FFF;
}

.part_numbers_table tr {
	border-bottom: 1px solid #CCC;
	background-color: #F7F7F7;
}

.part_numbers_table td {
	padding: 2px;
}

.part_numbers_table .part_number_highlight {
	background-color: #EDEDED;
}


/*
 * MEDIA PAGE STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

.media {
	margin: 10px 0;
}

.wallpaper {
	width: 123px;
	float: left;
}

.wallpaper p {
	text-align: center;
}
.wallpaper p a {
	color: #048AD1;
	font-weight: normal;
}

.iphone {
	width: 125px;
	float: left;
}

.wp {
	margin-right: 7px;
}

.media a img {
	border: 0 solid #F33;
	color: #1DA8E0;
	outline-color: -moz-use-text-color;
	outline-style: none;
	outline-width: medium;
	text-decoration: none;
}


/*
 * CONTACT BOX STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

#contact {
	display: block;
	width: 70px;
	height: 40px;
	background: url(../img/nav_contact.gif) no-repeat center;
}

#contact span {
	display: none;
}

#contactBox {
	background-color: #EDEDED;
	border: 1px solid #CCC;
	display: none;
	padding: 0 10px;
	position: absolute;
	text-align: left;
}

#contactBox h3 {
	font-size: 12px;
	line-height: 0.25;
}

#contactBox a#closeMe {
	background: url(../img/close_16.gif) no-repeat center;
	position: absolute;
	height: 12px;
	width: 12px;
	right: 5px;
	top: 5px;
}

#contactBox a#closeMe span {
	display: none;
}


/*
 * FOOTER STYLES
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 
#footer {
	clear: both;
	float: right;
	padding: 20px 0;
	position: relative;
	right: 40px;
	top: 20px;
}

#footer_home {
	float: right;
	position: relative;
	right: 40px;
	top: 450px;
}

#footer_position {
	clear: both;
	float: right;
	position: relative;
	top: 150px;
	right: 40px;
}