/*
	Site-wide Stylesheet
	Muir Surf and Sport
	by Marc Leglise
	
	This stylesheet encompasses the overall site layout.  All non-color
	specific attributes should be defined here.
	
	We are designing for a page width of 960px (assuming a monitor of
		1024x768 or greater) that can fluidly scale up from there.
	Things that should take up half the screen should be 472px wide.
	
	Primary Site Colors:
	  Green: #009C51	Store
	  Red: #DE2C13		Skate
	  Blue: #22B6CF		Surf
	  Purple: #803680	Apparel
	  Brown: #605040	Blog
	
	Secondary Site Colors:
	  Light Gray: #E8E8E8
	  Medium-light Gray: #B5B5B5
	  Medium Gray: #7A7A7A
	  Dark Gray: #666666
	  Super-dark Gray: #2D2D2D
*/

/******************************************************************************
			SITEWIDE LAYOUT POSITIONING
******************************************************************************/

body {
	margin: 0px;
}

.css-table {
	display: table;
	width: 100%;
}

.css-row {
	display: table-row;
}

.css-cell {
	display: table-cell;
}

.hide {
	display: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
    clear: both;
}

.center_margins {
    margin-left: auto;
    margin-right: auto;
}

/* Used on pages that are set to restrict the width of the content.
   default */
#wrapper_closed {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

/* Used on pages whose content needs to scale horizontally.
   Activated by calling 'dont_restrict_width' in the controller. */
#wrapper_open {
	margin: 15px;
	min-width: 960px;
}





/******************************************************************************
			FONTS, HEADERS & LINKS
******************************************************************************/

body{
	font-family: arial, helvetica, verdana, sans-serif;
	/* font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif; */
	font-size: small;
	text-rendering: optimizeLegibility;
}

a {
    color: #000;
	text-decoration: none;
	outline: none;
}

a.no_border {
	border: none;
}

a img {
	border: 0px;
}

hr {
	border: 0;
	height: 2px;
}

h1, h2, h3, .big_text {
	font-family: arial, Trebuchet MS, arial black;
	font-weight: bold;
}

h1 { font-size: 21pt; }

h2 {
	font-size: 16pt;
	padding-top: 10px;
	border-bottom: 4px solid #E8E8E8;
}

h3 { font-size: 14pt; }

.big_text {
	font-family: Trebuchet MS, arial black;
	font-weight: bold;
	font-size: 1.3em;
}

.little_text {
	font-size: 0.9em;
}

li {
    list-style-type: disc;
    list-style-position: inside;
}

.fb_share_link {
    padding:2px 0 0 20px;
    height:16px;
    background:url(/images/facebook_16x.gif) no-repeat top left;
}

.note {
	border: 4px solid #E8E8E8;
	padding: 5px 5px 5px 25px;
	background: url(/images/notice_gray.png) no-repeat 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.message {
	color: #7A7A7A;
	padding: 5px 0px 0px 20px;
	background: url(/images/notice_gray.png) no-repeat left center;
}

.notice {
	color: #7A7A7A;
	padding: 0px 0px 0px 25px;
	background: url(/images/notice_yellow.png) no-repeat 5px;
}
.notice span {
	font-weight: bold;
}

.content {
	color: #7A7A7A;
}

.required {
	color: #FF0000;
}

.red {
	color: #CB2C13;
}

.errorExplanation {
	color: #CB2C13;
}

.errorExplanation ul {
	background: #FFEEEE;
	border: 4px solid #CB2C13;
	padding: 10px;
}

.errorExplanation ul li {
	list-style-image: url(/images/notice_red.png);
}

.errorExplanation p {
	padding: 10px;
}

fieldset.hasborder {
	border: 2px groove #EBEEEF;
	padding: 10px;
	margin: 5px 0 10px 0;
}

fieldset.hasborder legend {
	font-size: 1.3em;
	font-weight: bold;
}





/******************************************************************************
			FORM INPUT
******************************************************************************/

input[type="text"] {
	border: 1px solid #383838;
	font-size: 11pt;
	padding: 3px;
}

input[type="submit"] {
	padding: 2px;
	color: #fff;
	font-size: 10pt;
	font-weight: bold;
	font-family: Trebuchet MS, arial;
	background-color: #383838;
	border: 1px outset #383838;
}

textarea {
	border: 1px solid #383838;
	font-size: 11pt;
	padding: 3px;
}

input#qty {
	text-align: center;
	width: 30px;
}

.field_with_errors { display: inline; }
.field_with_errors input { border: 2px solid #CB2C13; }





/******************************************************************************
			ADMIN NAVIGATION BAR
******************************************************************************/

#admin_nav {
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
	background: #B5B5B5;
	font-size: 12pt;
	color: #fff;
}

#admin_nav div {
	float: left;
	padding: 10px;
}

#admin_nav div a {
	color: #fff;
}

#admin_nav ul {
    margin: 0px;
    padding: 0px;
    width: 960px;
	float: right;
}

#admin_nav ul li {
    display: inline;
}

#admin_nav ul li a {
    float: right;
    border: none;
	color: #fff;
	padding: 10px;
	border-left: 1px solid #E8E8E8;
}

#admin_nav ul li a:hover {
	background: #7A7A7A;
}





/******************************************************************************
			2 and 3 COLUMN LAYOUT
******************************************************************************/

.colmask {
    clear: both;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

/* 2 Column w/ left menu */

.leftmenu {
    background: #E8E8E8 url(/images/menu_muirlogo.png) no-repeat bottom left;
}

.leftmenu .colright {
    background: #fff;
    float: left;
    left: 180px;
    position: relative;
    width: 200%;
}

.leftmenu .col1wrap {
    float: right;
    padding-bottom: 1em;
    position: relative;
    right: 200px;
    width: 50%;
}

.leftmenu .col1 {
    margin: 0 0 0 215px;
    overflow: hidden;
    position: relative;
    right: 100%;
}

.leftmenu .col2 {
    float: left;
    position: relative;
    right: 180px;
    width: 180px;
}

/* 3 Column */

.holygrail {
    background: #E8E8E8;
}

.holygrail .colmid {
    background: #fff;
    float: left;
    margin-left: -180px;
    position: relative;
    right: 100%;
    width: 200%;
}

.holygrail .colleft {
    background: #E8E8E8 url(/images/menu_muirlogo.png) no-repeat bottom left;
    float: left;
    left: 360px;
    margin-left: -50%;
    position: relative;
    width: 100%;
}

.holygrail .col1wrap {
    float: left;
    padding-bottom: 1em;
    position: relative;
    right: 180px;
    width: 50%;
}

.holygrail .col1 {
    left: 200%;
    margin: 0pt 195px;
    overflow: hidden;
    position: relative;
}

.holygrail .col2 {
    float: right;
    position: relative;
    width: 180px;
}

.holygrail .col3 {
    float: right;
    left: 50%;
    position: relative;
    width: 180px;
}





/******************************************************************************
			HEADER LAYOUT PROPERTIES
******************************************************************************/

#header_top_closed,
#header_top_open {
    margin-top: 0px;
    padding-bottom: 32px;
}

#header_top_closed {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

#header_top_open {
	margin-left: 15px;
	margin-right: 15px;
}

.header_box,
#cart_account {
	float: right;
	height: 38px;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	padding: 0 10px 0 10px;
	line-height: 38px;
}

.header_box {
	border-right: 15px solid #fff;
	background: #E8E8E8;
	color: #7A7A7A;
}

.header_box a {
    border: none;
}

#cart_account {
	color: #fff;
}
#cart_account a#cart_link {
    border: none;
	padding-left: 33px;
}
#cart_account a {
	color: #fff;
	vertical-align: middle;
}

#header_bottom_out {
	position: relative;
	width: 100%;
	background-color: #E8E8E8;
}

#header_bottom_open {
	width: 100%;
	margin-right: 15px;
}

#header_bottom_closed {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    z-index: 99;
    position: relative;
}

#header_left_color {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 366px;
	height: 38px;
}

#logo_space {
    float: left;
    height: 38px;
	width: 366px;
	background-color: #fff;
	overflow: hidden;
}

#search_open,
#search_closed {
    float: right;
	background: #E8E8E8;
	text-align: right;
}

#search_open { margin-right: 15px; }

#search_open form,
#search_closed form {
    height: 38px;
    line-height: 38px;
    vertical-align: middle;
}





/******************************************************************************
			HEADER CATEGORY NAVIGATION PROPERTIES
******************************************************************************/

#category_nav {
    width: 100%;
    height: 38px;
    margin-bottom: 15px;
}

#category_nav ul {
    margin: 0px;
    padding: 0px;
    width: 960px;
}

#category_nav ul li {
    display: inline;
}

#category_nav ul li a {
    float: left;
    height: 0px;
    overflow: hidden;
    padding-top: 38px;
    border: none;
    background-image: url(/images/category_nav.png);
    background-repeat: no-repeat;
}

#category_nav ul li#cn-home a,
#category_nav ul li#cn-skate a,
#category_nav ul li#cn-surf a,
#category_nav ul li#cn-apparel a { width: 195px; }
#category_nav ul li#cn-blog a { width: 180px; }

#category_nav ul li#cn-home a { background-position: 0px 0px; }
#category_nav ul li#cn-skate a { background-position: -195px 0px; }
#category_nav ul li#cn-surf a { background-position: -390px 0px; }
#category_nav ul li#cn-apparel a { background-position: -585px 0px; }
#category_nav ul li#cn-blog a { background-position: -780px 0px; }

#category_nav ul li#cn-home a:hover { background-position: 0px -38px; }
#category_nav ul li#cn-skate a:hover { background-position: -195px -38px; }
#category_nav ul li#cn-surf a:hover { background-position: -390px -38px; }
#category_nav ul li#cn-apparel a:hover { background-position: -585px -38px; }
#category_nav ul li#cn-blog a:hover { background-position: -780px -38px; }





/******************************************************************************
			FOOTER LAYOUT PROPERTIES
******************************************************************************/

#footer_out {
	width: 100%;
	border-top: 1px solid #B5B5B5;
	background: #E8E8E8 url(/images/footer_gradient.png) repeat-x left top;
	padding-top: 10px;
	padding-bottom: 10px;
	clear: both;
}

#footer_in {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.footer-cell {
	float: left;
	padding-right: 10px;
}

.footer-cell span {
	font-weight: bold;
}

.footer-cell hr {
	border: 0;
	height: 2px;
}

.footer-cell ul {
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
}

.footer-cell ul li {
	list-style: none none outside;
}

.footer-cell a {
	color: #666666;
	border: none;
}

#footer-navigation { width: 130px; }
#footer-website { width: 130px; }
#footer-customer { width: 290px; }
#footer-networks { width: 130px; }
#footer-email { width: 240px; padding-right: 0px; }

#footer-customer ul.left {
    width: 140px;
}

#footer-bottom_out {
	width: 100%;
	background: #B5B5B5;
}

#footer-bottom_in {
	width: 960px;
	height: 34px;
	margin-left: auto;
	margin-right: auto;
	color: #FFFFFF;
}

#footer-bottom_in a { border: none; }

#footer-bottom_in span,
#footer-bottom_in span img {
    line-height: 34px;
	vertical-align: middle;
}





/******************************************************************************
			FRONTPAGE CONTROLLER
******************************************************************************/

#big_categories {
	/* Floats to the right and encompasses the buttons for:
		Skate, Surf, Apparel */
	float: right;
}

#big_btn_skate,
#big_btn_surf,
#big_btn_apparel {
	display: block;
	height: 175px;
	width: 472px;
	border: none;
}

#big_btn_skate {
	background-color: #DF1E26;
	margin-bottom: 15px;
}

#big_btn_surf {
	background-color: #0FBFE2;
	margin-bottom: 15px;
}

#big_btn_apparel {
	background-color: #8E278C;
}

#blog_n_btns {
	/* Positioned underneath the slideshow */
	width: 472px;
}

#big_btn_blog {
	display: block;
	float: right;
	height: 175px;
	width: 371px;
	border: none;
	background: url(/images/frontpage_blog.jpg) no-repeat scroll;
}

#big_btn_blog .blog_post {
	padding: 10px 10px 1px 35px;
}

#big_btn_blog .blog_post .date {
	color: #666666;
	font-size: 0.8em;
}

#small_btn1,
#small_btn2 {
	display: block;
	height: 80px;
	width: 86px;
	border: none;
	background-color: #666666;
}

#small_btn1 { margin-bottom: 15px; }

#small_btn2 {}





/******************************************************************************
			ALL SLIDESHOWS
******************************************************************************/

.slideshow, .scroller {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.slideshow .slide {
	position: absolute;
	top: 0px;
	left: 0px;
}

.slideshow .slide a {
	color: #ffffff;
	font-size: 92%;
	text-decoration: none;
	border: none;
}

.slide_title {
	float: left;
	color: #ffffff;
	margin: 5px 0px 0px 10px;
}


/* Styling for the Slideshow Content buttons */
.slideshow ul {
	display: block;
	position: absolute;
	margin: 0px;
	z-index: 20;
}

.slideshow ul li {
	display: block;
	text-align: center;
	list-style: none none outside;
}

.slideshow ul li a {
	background: #7A7A7A;
	display: block;
	border: none;
	font-size: 1.2em;
	font-weight: bold;
	font-family: arial, Trebuchet MS;
}

.slideshow ul li.store a:hover,
.slideshow ul li.store a.active {
	background: #00A351;
}

.slideshow ul li.skate a:hover,
.slideshow ul li.skate a.active {
	background: #DF1E26;
}

.slideshow ul li.surf a:hover,
.slideshow ul li.surf a.active {
	background: #0FBFE2;
}

.slideshow ul li.apparel a:hover,
.slideshow ul li.apparel a.active {
	background: #8E278C;
}


/* Styling for the Slideshow Play/Pause buttons */
.slideshow .play,
.slideshow .pause,
.slideshow .forward,
.slideshow .backward {
	display: block;
	position: absolute;
	border: none;
	z-index: 20;
}

.slideshow .play span,
.slideshow .pause span,
.slideshow .forward span,
.slideshow .backward span,
.slideshow ul li a span {
	display: none;
}





/******************************************************************************
			FRONTPAGE SLIDESHOW
******************************************************************************/

#frontpage_slideshow {
	background-color: #2D2D2D;
	margin-bottom: 15px;
}

#frontpage_slideshow, #frontpage_scroller {
	height: 365px;
	width: 472px;
}

#frontpage_slideshow .slide {
	height: 365px;
	width: 472px;
	background-color: #2D2D2D;
}


/* Styling for the Slideshow Content buttons */
#frontpage_slideshow ul {
	bottom: 0px;
	right: 25px;
}

#frontpage_slideshow ul li {
	float: left;
	margin: 0px 0px 0px 5px;
	width: 20px;
}

#frontpage_slideshow ul li a {
	height: 16px;
	width: 17px;
}


/* Styling for the Slideshow Play/Pause buttons */
#frontpage_slideshow .play { background: transparent url(/images/play_sm.png) no-repeat scroll left top; }
#frontpage_slideshow .pause { background: transparent url(/images/pause_sm.png) no-repeat scroll left top; }
#frontpage_slideshow .forward { background: transparent url(/images/forward.gif) no-repeat scroll left top; }
#frontpage_slideshow .backward { background: transparent url(/images/backward.gif) no-repeat scroll left top; }

#frontpage_slideshow .play,
#frontpage_slideshow .pause,
#frontpage_slideshow .forward,
#frontpage_slideshow .backward {
	height: 10px;
	width: 10px;
	bottom: 4px;
	right: 10px;
}





/******************************************************************************
			THEME SLIDESHOW (Skate, Surf)
******************************************************************************/

#theme_slideshow {
	background-color: #2D2D2D;
	margin-bottom: 15px;
}

#theme_slideshow, #theme_scroller {
	height: 327px;
	width: 419px;
}

#theme_slideshow .slide {
	height: 327px;
	width: 419px;
	background-color: #2D2D2D;
}


/* Styling for the Slideshow Content buttons */
#theme_slideshow ul {
	bottom: 0px;
	right: 25px;
}

#theme_slideshow ul li {
	float: left;
	margin: 0px 0px 0px 5px;
	width: 20px;
}

#theme_slideshow ul li a {
	height: 16px;
	width: 17px;
}


/* Styling for the Slideshow Play/Pause buttons */
#theme_slideshow .play { background: transparent url(/images/play_sm.png) no-repeat scroll left top; }
#theme_slideshow .pause { background: transparent url(/images/pause_sm.png) no-repeat scroll left top; }
#theme_slideshow .forward { background: transparent url(/images/forward.gif) no-repeat scroll left top; }
#theme_slideshow .backward { background: transparent url(/images/backward.gif) no-repeat scroll left top; }

#theme_slideshow .play,
#theme_slideshow .pause,
#theme_slideshow .forward,
#theme_slideshow .backward {
	height: 10px;
	width: 10px;
	bottom: 4px;
	right: 10px;
}





/******************************************************************************
			PRODUCT IMAGE SLIDESHOW
******************************************************************************/

#product_slideshow {
    float: left;
    margin-right: 15px;
	margin-bottom: 15px;
	background: #ffffff;
	border: 4px solid #E8E8E8;
}

#product_slideshow, #product_scroller {
	height: 410px;
	width: 410px;
}

#product_slideshow .slide {
	height: 400px;
	width: 400px;
	padding: 5px;
	text-align: center;
	background: #fff; /* So that images with transparency still look good */
}


/* Styling for the Slideshow Content buttons */
#product_slideshow ul {
	bottom: 0px;
	right: 38px;
}

#product_slideshow ul li {
	float: left;
	margin: 0px 0px 0px 5px;
	width: 33px;
}

#product_slideshow ul li a {
	background: #E8E8E8;
	color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 20px;
	width: 33px;
}

#product_slideshow ul li a:hover {
	background: #000;
}


/* Styling for the Slideshow Play/Pause buttons */
#product_slideshow .play { background: #E8E8E8 url(/images/play_gray.png) no-repeat scroll center center; }
#product_slideshow .pause { background: #E8E8E8 url(/images/pause_gray.png) no-repeat scroll center center; }
#product_slideshow .forward { background: #E8E8E8 url(/images/forward.gif) no-repeat scroll center center; }
#product_slideshow .backward { background: #E8E8E8 url(/images/backward.gif) no-repeat scroll center center; }

#product_slideshow .play:hover { background: #000 url(/images/play_gray.png) no-repeat scroll center center; }
#product_slideshow .pause:hover { background: #000 url(/images/pause_gray.png) no-repeat scroll center center; }
#product_slideshow .forward:hover { background: #000 url(/images/forward.gif) no-repeat scroll center center; }
#product_slideshow .backward:hover { background: #000 url(/images/backward.gif) no-repeat scroll center center; }

#product_slideshow .play,
#product_slideshow .pause,
#product_slideshow .forward,
#product_slideshow .backward {
	border: none;
	height: 30px;
	width: 33px;
	bottom: 0px;
	right: 0px;
}





/******************************************************************************
			BROWSE CONTROLLER
******************************************************************************/

#product_navigation,
#brand_navigation {
	width: 180px;
	background-color: #E8E8E8;
}

#product_navigation {
	font-size: 11pt;
	font-weight: bold;
}

#brand_navigation {
}

#product_navigation .header,
#brand_navigation .header {
	width: 100%;
	height: 38px;
	line-height: 38px;
}

#product_navigation .header img,
#brand_navigation .header img {
    padding-left: 15px;
    vertical-align: bottom;
}

#product_navigation li,
#brand_navigation li {
    background-color: #7A7A7A;
    color: #fff;
    border-top: 1px solid #E8E8E8;
	list-style: none none outside;
}

#product_navigation li.active,
#brand_navigation li.active {
    background-color: #000;
}

#product_navigation li a,
#brand_navigation li a {
	display: block;
    color: #fff;
	border: none;
}

#product_navigation li a img,
#brand_navigation li a img {
	vertical-align: top;
}

#product_navigation li a span,
#brand_navigation li a span {
	display: block;
    width: 100%;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#product_filter {
	background: #E8E8E8;
	color: #7A7A7A;
	font-weight: bold;
	width: 100%;
	height: 38px;
	line-height: 38px;
	padding-left: 15px;
	padding-right: 15px;
}

#products {
    margin-top: 15px;
}

.product {
	position: relative;
	float:left;
	font-size:11px;
	height:200px;
	margin-right: 15px;
	padding:0;
	width:136px;
}

.product a {
    color: #000;
    border: none;
}

.product a .name {
    margin-bottom: 1px;
}

.product .image_col {
	border: 3px solid #E8E8E8;
	text-align: center;
	padding: 1px;
	width: 130px;
	height: 130px;
	line-height: 130px; /* Used to center the images */
	background: #fff;
}

.product .image_col img {
	vertical-align: middle;
}

.product a:hover .image_col {
	background: #E8E8E8;
}

.product .next_btn {
    color: #E8E8E8;
	border: 3px solid #E8E8E8;
	text-align: center;
	padding: 1px;
	width: 130px;
	height: 130px;
	line-height: 130px; /* Used to center the images */
	font-size: 20pt;
	font-weight: bold;
}

.product a:hover .next_btn {
	background: #E8E8E8;
	color: #fff;
}

.flag {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 20;
}

.product_detail_wrapper {
	float: left;
	width: 315px;
}

#product_details {
    margin-bottom: 15px;
}

#product_details h1 {
	font-size: 14pt;
}

#product_details .price {
    font-size: 14pt;
    font-weight: bold;
	padding-top: 10px;
}

#product_specs {
    color: #7A7A7A;
    padding-top: 8px;
}

#product_cart {
    float: left;
    width: 312px;
    padding: 10px;
    background: #E8E8E8;
	margin-bottom: 15px;
}

#product_cart form#cart_add {
    float: left;
}

p.choose {
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 5px;
}

#product_cart form#go_build {
    clear: both;
    margin-top: 8px;
}

#product_cart label {
    line-height: 15px;
}

#product_cart label * {
    vertical-align: middle;
}

/*****************
	TEMPORARY
	Removing the shopping notice and Facebook link so that the
	layout looks clean.
*/
#product_cart #shopping_notice,
#product_cart .facebook_share {
	display: none;
}

#product_cart #shopping_notice {
    float: left;
    padding-left: 15px;
    font-size: 9pt;
}

#product_cart #shopping_notice a {
    color: #7A7A7A;
    font-size: 9pt;
}

#product_cart .facebook_share {
    float: left;
    padding-left: 15px;
    margin-top: 10px;
}

.outofstock {
    color: #7A7A7A;
}

.retail_price {
	font-weight: normal;
	font-size: 12pt;
	text-decoration: line-through;
}

.page_entries_info {
    color: #7A7A7A;
}

.pagination a {
    border: none;
}

.pagination .prev_page,
.pagination .next_page {
}

.pagination .disabled {
    color: #7A7A7A;
}

.pagination .current {
    font-weight: bold;
}





/******************************************************************************
			THEME PAGES (BROWSE CONTROLLER)
******************************************************************************/

.theme-box {
	padding-bottom: 5px;
	margin-bottom: 15px;
	background: #F4F4F4;
	border-top: 3px solid #000;
	border-bottom: 3px solid #E8E8E8;
}

.theme-box .header {
	font-size: 1.4em;
	font-weight: bold;
	margin: 2px 0 2px 0;
}

#new-products {
	float: right;
	width: 136px;
	padding-bottom: 0px;
	border-bottom: none;
}

#new-products .header { margin: 2px 0 0 0; }

#new-products a#newest_link { border: none; }

#new-products a#newest_link span {
	position: relative;
	bottom: 5px;
	color: #B5B5B5;
	font-size: 0.8em;
}

#new-products .product { height: 136px; }

#new-products .first {
	bottom: 5px;
	margin-bottom: 10px;
}

#crazy-hookup {
	width: 255px;
}

#crazy-hookup .price {
	float: right;
	color: #DE2C13;
	font-size: 1.4em;
	font-weight: bold;
}

#crazy-hookup a {
    border: none;
}

#crazy-hookup a .name {
    margin-top: 3px;
}

#crazy-hookup .image_col {
	border: 4px solid #E8E8E8;
	text-align: center;
	width: 249px;
	height: 249px;
	line-height: 249px; /* Used to center the images */
	background: #fff;
}

#crazy-hookup .image_col img {
	vertical-align: middle;
}

#crazy-hookup a:hover .image_col {
	background: #E8E8E8;
}

#new-video {
	float: right;
	width: 300px;
}

#featured-products {
	
}

#surf-report {
	text-align: center;
}





/******************************************************************************
			PRODUCT REVIEWS
******************************************************************************/

#reviews h3 {
	margin-bottom: 10px;
}

.small_ratings {
    float: right;
}

.small_ratings_bar {
	float: left;
	width: 50px;
    padding-top: 2px;
	background: transparent url(/images/small_rating_star_empty.png) repeat-x scroll 0pt 2px;
}
.small_ratings_bar div {
	height: 10px;
	background: transparent url(/images/small_rating_star_full.png) repeat-x scroll 0pt;
}


.review {
	margin-bottom: 15px;
}

.ratings {
	position: relative;
	line-height: 24px;
}

.ratings span {
    vertical-align: middle;
}

.ratings_bar {
	float: left;
	width: 116px;
	background: transparent url(/images/rating_star_empty.png) repeat-x scroll 0pt;
	margin-right: 5px;
}
.ratings_bar div {
	height: 24px;
	background: transparent url(/images/rating_star_full.png) repeat-x scroll 0pt;
}

.ratings .rating_number {
	font-weight: bold;
	font-size: 13pt;
	color: #B5B5B5;
	padding-right: 5px;
}

.review .title {
	font-weight: bold;
	font-size: 13pt;
}

.review .author {
	font-style: italic;
	font-size: 11pt;
}

.review .description {
    clear: left;
}

.review .description p {
	margin: 0px;
}

.review .date {
    font-style: italic;
    color: #B5B5B5;
}





/******************************************************************************
			PRODUCT EDITING
******************************************************************************/

#image-reorder {
	float: right;
}

#image-list {
	
}

#image-list li {
	background: #E8E8E8;
	border-bottom: 5px solid #fff;
	list-style: none none outside;
}





/******************************************************************************
			SHOPPING CART
******************************************************************************/

.even, .odd {
	border-top: 4px solid #E8E8E8;
}

.even td, .odd td {
	padding: 10px 0 10px 0;
}

.even { background-color: #F4F4F4; }
.odd { background-color: #FFF; }

.cart {}

.remove {
	border: none;
	margin-left: 15px;
}

th.price, td.price { text-align: right; }

/*table[rules=rows] tr { border-top: 2px solid #B5B5B5; }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden } */

#cart_notice {
	font-weight: bold;
}

#shopping_cart {
	clear: both;
}

#shopping_cart table {
	border-bottom: 3px solid #B5B5B5;
}

#shopping_cart th {
	color: #7A7A7A;
	font-weight: bold;
}

#shopping_cart th,
#shopping_cart td {
	padding: 10px 0 10px 0;
}

#shopping_cart .child-items {
	color: #7A7A7A;
}

#shopping_cart tr.total {
	background: #F3FFEB;
	height: 38px;
}

#shopping_cart .total {
	font-weight: bold;
}

#shopping_cart .header {
	font-size: 12pt;
	font-weight: bold;
}

#shopping_cart label { line-height: 1.5em; }

#shopping_cart label * { vertical-align: middle; }

#cart_form_shipping {
	background: #EEF7FF;
}

#shopping_cart tr.total,
#cart_form_shipping,
#cart_form_gift,
#cart_form_promo {
	border-top: 3px solid #B5B5B5;
}

#rate_form {
	margin: 10px 0px 0px 4.5em;
}





/******************************************************************************
			CHECKOUT
******************************************************************************/

#checkout {}

#checkout p {
	margin-bottom: 10px;
}

#checkout .shipping,
#checkout .billing,
#checkout .payment,
#checkout .contact,
#checkout .gift,
#checkout .finish {
	width: 470px;
	border-top: 1px solid #A4A4A4;
	border-bottom: 1px solid #A4A4A4;
	margin-bottom: 15px;
}

#checkout .header {
	font-size: 12pt;
	font-weight: bold;
	padding: 10px 0px 0px 0px;
}

#checkout .header label {
	font-size: 10pt;
	font-weight: normal;
	padding-left: 10px;
}

#checkout .header label * { vertical-align: middle; }

#checkout fieldset {
	padding: 10px 15px 15px 15px;
	width: 375px;
	text-align: right;
}

#checkout .shipping,
#checkout .contact { float: left; }

#checkout .billing,
#checkout .payment,
#checkout .gift,
#checkout .finish { float: right; }

#checkout .shipping,
#checkout .billing {
	background: #EEF7FF;
}

#checkout #order_ship_to_state,
#checkout #order_bill_to_state {
	width: 18.5em;
}

#checkout .payment {
	background: #F3FFEB;
}

#checkout #order_card_type { width: 13em; }
#checkout img#card_exp-spacer { width: 2.6em; height: 1px; }
#checkout img#cvv-spacer { width: 3em; height: 1px; }

#checkout #cvv-label { line-height: 32px; }
#checkout #cvv-label * { vertical-align: middle; }

#checkout .contact,
#checkout .gift {
	background: #F4F4F4;
}

#checkout .gift fieldset { text-align: left; }

#checkout .finish {
	background: url(/images/notice_yellow.png) no-repeat left center;
	padding: 15px 0 15px 0;
	color: #7A7A7A;
}

#checkout .finish .left {
	padding-left: 25px;
}

.sslseal, .AuthorizeNetSeal { float: left; border-right: 15px solid #fff; }
.sslseal a, .AuthorizeNetSeal a { border: none; }

#process_box_internal {
	text-align: center;
}





/******************************************************************************
			ORDER DETAILS
******************************************************************************/

#order {
	width: 700px;
}

#order-details,
#order-staff,
#shipping-info,
#billing-info,
#order-summary {
	background: #F7F7F7;
	border: 4px solid #E8E8E8;
	padding: 10px 15px 13px 15px;
	margin-top: 5px;
	margin-bottom: 15px;
}

#order-details .header,
#order-staff .header,
#shipping-info .header,
#billing-info .header,
#order-summary .header,
#order-summary th,
#order-summary .total {
	font-size: 12pt;
	font-weight: bold;
}

#shipping-info,
#billing-info {
	float: left;
	width: 305px;
}

#billing-info {
	margin-left: 14px;
}

#order-summary .child-items {
	font-size: 8pt;
	color: #7A7A7A;
}

#order-summary tr.total td {
	padding-bottom: 0px;
}

#process_order label {
	font-weight: bold;
}





/******************************************************************************
			JQUERY TABS
			Copied in and modified from flora.tabs.css
******************************************************************************/

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}

/* Skin */
.ui-tabs-nav {
	font-size: 11pt;
	font-weight: bold;
}
.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin: 0 5px 0 0;
    font-weight: bold;
	list-style: none none outside;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
    background: #B5B5B5;
    border: none;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:hover span {
    background: #000;
}
.ui-tabs-nav a {
    margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    text-decoration: none;
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */    
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
    color: #fff;
}
.ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    top: 0px;
    z-index: 2;
}
.ui-tabs-nav a span {
    padding-top: 0px;
    padding-right: 0;
    height: 27px;
    line-height: 27px;
}
.ui-tabs-nav .ui-tabs-selected a span {
    padding-top: 0;
    height: 27px;
    line-height: 27px;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active {
	/* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
    color: #000;
}
.ui-tabs-panel {
    padding: 10px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
/*.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}*/

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  {
	/* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}





/******************************************************************************
			BUILD CONTROLLER
******************************************************************************/

.different_deck {
	display: block;
	border: 4px solid #E8E8E8;
	padding: 5px 5px 5px 30px;
	background: #fff url(/images/btn_remove.png) no-repeat 5px;
	margin-bottom: 10px;
	color: #7A7A7A;
}

.different_deck:hover {
	border: 4px solid #DE2C13;
	background: #fff url(/images/btn_remove.png) no-repeat 5px;
}

.different_deck span {
	color: #000;
	font-size: 1.1em;
	font-weight: bold;
}

#build-summary:after,
#build-summary form:after,
#build-tabs .ui-tabs-panel:after,
.product-mini:after,
.product-choices:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}

#build_indicator {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	line-height: 200px;
	width: 100%;
	background: #fff;
	opacity: .75;
	text-align: center;
}
#build_indicator img { vertical-align: middle; opacity: 1; }

#build-summary {
	border: 4px solid #B5B5B5;
	margin-bottom: 15px;
	font-size: 11px;
	position: relative;
	min-width: 960px;
}

#build-summary form {
	position: relative;
}

#build-summary .box {
	position: relative;
	float: left;
	height: 200px;
	width: 150px;
	border-right: 4px solid #B5B5B5;
}

#build-summary a.product-box:link, #build-summary a.product-box:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
#build-summary a.product-box:hover, #build-summary a.product-box:focus, #build-summary a.product-box:active {
	/* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}

#build-summary .box .header {
	padding: 0 5px 0 5px;
	color: #fff;
	background: #B5B5B5;
	height: 27px;
	line-height: 27px;
	font-size: 11pt;
	font-weight: bold;
}

#build-summary .box .header img { vertical-align: middle; }

#build-summary .whyupgrade_link {
	position: absolute;
	right: 2px;
}

#build-summary .whyupgrade_link a { color: #DE2C13; }
#build-summary .whyupgrade_link a:hover { border: none; }

#build-summary .product-box {
	display: block;
	padding: 5px;
	border: none;
}

#build-summary .image_col {
	text-align: center;
	width: 140px;
	height: 130px;
	line-height: 130px; /* Used to center the images */
}

#build-summary .image_col img {
	vertical-align: middle;
}

#build-summary .hardware-box {
	padding: 5px;
	border-bottom: 4px solid #B5B5B5;
}

#build-summary .finish-box {
	padding: 5px;
	text-align: right;
	font-size: 12pt;
}

#build-summary .finish-box .name {
	
}

#build-summary .finish-box .price {
	font-weight: bold;
}



#build-tabs {
}

#build-tabs .ui-tabs-nav {
	float: left;
	width: 150px;
}

#build-tabs .ui-tabs-nav li {
	float: none;
	width: 100%;
	margin: 0 0 0 0;
}

#build-tabs .ui-tabs-nav a {
	padding: 0 0;
	margin: 0 0 10px 0;
	display: block;
	float: none;
}

#build-tabs .ui-tabs-nav img { vertical-align: middle; }

#build-tabs .ui-tabs-nav span {
	float: none;
	line-height: 35px;
	padding: 0 6px;
}

#build-panels {
	margin-left: 150px;
}

.product-mini {
	
}

.product-choices {
	background: #F4F4F4;
	margin-bottom: 15px;
	padding: 0;
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
}

.product-choices .header {
	font-size: 14pt;
	font-weight: bold;
	margin-bottom: 10px;
}

.product-option {
	position: relative;
	float:left;
	font-size:11px;
	height:200px;
	margin-right: 15px;
	padding:0;
	width:136px;
}

.product-option a {
    color: #000;
    border: none;
}

.product-option a:link, .product-option a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.product-option a:hover, .product-option a:focus, .product-option a:active {
	/* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}

.product-option a .name {
    margin-bottom: 1px;
}

.product-option .image_col {
	background: #fff;
	border: 3px solid #E8E8E8;
	text-align: center;
	padding: 1px;
	width: 130px;
	height: 130px;
	line-height: 130px; /* Used to center the images */
}

.product-option .image_col img {
	vertical-align: middle;
}

.product-option a:hover .image_col {
	background: #E8E8E8;
}

.why_upgrade {
}

.why_upgrade p {
	margin-bottom: 1em;
}





/******************************************************************************
			VIDEO PLAYER
******************************************************************************/

#vid-player-large {
    text-align: center;
}

.vid-thumb {
	float:left;
	font-size:11px;
	border: 3px solid #E8E8E8;
	height:150px;
	margin-right: 15px;
	padding: 3px;
	width:136px;
}

.vid-thumb a {
    color: #000;
    border: none;
}

.vid-thumb a .name {
    margin-bottom: 1px;
}

.vid-thumb .image_col {
	text-align: center;
	height: 97px;
	padding-top: 2px;
}

.vid-thumb a:link, .vid-thumb a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.vid-thumb a:hover, .vid-thumb a:focus, .vid-thumb a:active {
	/* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}





/******************************************************************************
			TESTIMONIALS
******************************************************************************/

.testimonial {
	padding-top: 10px;
}

.testimonial .title {
	padding-bottom: 5px;
}

.testimonial .title .author {
	font-size: 12pt;
	font-weight: bold;
}

.testimonial .title a {
	border: none;
}

.testimonial .description {
	color: #7A7A7A;
}





/******************************************************************************
			FREQUENTLY ASKED QUESTIONS
******************************************************************************/

ul.faqs li {
    list-style: none none inside;
}

ul.faqs li a {
    font-weight: bold;
    border: none;
}

.faq {
	padding-top: 15px;
}

.faq .question {
	font-weight: bold;
	padding-bottom: 5px;
}

.faq .question a {
    border: none;
}

.faq .answer {
    color: #7A7A7A;
}





/******************************************************************************
			STORE LOCATIONS & HOURS
******************************************************************************/

.directions {
    color: #7A7A7A;
    padding-top: 15px;
}

.directions div,
.directions a {
    color: #000;
    font-weight: bold;
}

.hours {
    padding-top: 15px;
    width: 255px;
}

.map_block {
    float: right;
    padding-top: 15px;
}

.hours .header,
.map_block .header {
    font-size: 12pt;
    font-weight: bold;
}

.hours .header span {
    color: #7A7A7A;
    font-size: small;
    font-weight: normal;
}

.hours .day {
    position: relative;
    padding-top: 5px;
    border-bottom: 1px solid #7A7A7A;
    font-size: 10pt;
	height: 16px;
}

#map {
	margin-top: 8px;
	width: 470px;
	height: 336px;
	background: #7A7A7A;
}





/******************************************************************************
			EVENTS
******************************************************************************/

.event {
	margin-top: 15px;
}

.event .image {
	float: left;
	width: 335px;
	height: 242px;
	background: #E8E8E8;
	margin-right: 15px;
}

.event .name {
	font-size: 12pt;
	font-weight: bold;
}

.event .attribute {
	font-weight: bold;
}