/*

Title: BA3Skate
Author: Raw Marketing
Date: 2010

www.ba3skate.com

*/


/* CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: 14px;
  font-family: Calibri, Helvetica Narrow, sans-serif;
  vertical-align: baseline;
  }

/* General Elements  */
body { background-color: #31a1df; background-image: url(../image/body_bg.jpg); background-repeat: repeat; }

.clear { clear: both; }
.float_left { float: left; }
.float_right { float: right; }
.textbox { height: 30px;  }
.button { border: 1px solid #989898; background-color: White; padding: 3px 5px; color: #1e1e1e; cursor: pointer; margin: 5px 0; }
.button:hover { background-color: #989898; color: White; }
.bold { font-weight: bold; margin-right: 5px; float: left; clear: both; margin-bottom: 10px; }

a { color: white; font-size: inherit; text-decoration: none; }
a:hover { color: #1b2732; }

p { color: white; }
h1 { font-size: 36px; color: #1e1e1e; }
h2 { font-size: 14px; color: #1e1e1e; }
h3 { font-size: 18px; color: #1e1e1e; }

.line { height: 1px; background-color: #e5e4e4; border-bottom: 1px solid white; margin: 5px 0 10px; }
.button 	
{
	background-image: url(../image/button_nav.jpg);
	display: inline-block;
	padding: 4px 8px 4px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 1px #222;
	border: 1px solid #2080ca;
	position: relative;
	cursor: pointer;
	margin: 10px 0 0;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.button:hover, .button:focus 
{
	background-position: 0 100%; 
	background-repeat: repeat-x; 
	color: #ffffff; 
	cursor: pointer; 
}
.textbox { height: 25px; font-size: 14px; color: #898989; padding: 4px 3px 0 6px; border: 1px solid #C9CACA; margin-bottom: 5px; }
.dropdown {height: 25px; font-size: 14px; width: 250px; color: #898989; padding: 1px 3px 0 6px; border: 1px solid #C9CACA; margin: 0 0 10px; }
.pop_up  
{	background-color: white; 
	border: 1px solid #989898; 
	-moz-box-shadow: 0 0 20px #dcdcdc;
	-webkit-box-shadow: 0 0 20px #dcdcdc;
	background-image: url(../image/pop_up_logo.jpg); 
	background-repeat: no-repeat;
	background-position: 310px 20px;
	padding: 20px; 
	color: white; 
	width: 400px; 
	margin: 40px auto;
}
	
.checkbox { margin: 10px 10px 0 0; }
.checkbox label { color: #1f1f1f; margin-left: 5px; }
.wide { width: 240px; }

.header_highlight { color: #51c8ec; }
.highlight_red { color: #e33737; }

.clear { clear: both; }
.clear_left { clear: left; }
.clear_right { clear: right; margin-top: 5px; }  
.float_left { float: left; }
.float_right { float: right; }

.login { margin: 0; }
iframe { margin: 0 0 20px; }

/*-----------------------------------------------------------------------------------------------*/
/* MASTER PAGE */

/* Layout */
#header { background-image: url(../image/header_bg.jpg); background-repeat: repeat-x; height: 37px; padding-top: 15px; }
#outer_wrapper { background-image: url(../image/outer_wrapper_bg.jpg); background-repeat: no-repeat; width: 1260px; margin: 0 auto; }
.wrapper { width: 960px; margin: 0px auto 20px; position: relative; }
#sidebar { width: 220px; float: left; }
#bodycontent { float: right; width: 705px; }
#innerWrapper { background-color: White; padding: 10px; margin-top: 5px; border: 1px solid #1a89b6; }

/* Topbar */
.social_network { margin: -7px 0 0 5px; background-position: 0% 100%; }
a#facebook { text-indent: -9999px; overflow: hidden; width: 35px; height: 36px; background-image: url(../image/facebook_link_img.jpg); background-repeat: no-repeat; }
a#twitter { text-indent: -9999px; overflow: hidden; width: 35px; height: 36px; background-image: url(../image/twitter_link_img.jpg); background-repeat: no-repeat; }
a#ebay { text-indent: -9999px; overflow: hidden; width: 35px; height: 36px; background-image: url(../image/ebay_link_img.jpg); background-repeat: no-repeat; }
.social_network:hover, .social_network:focus { background-position: 0% 0%; }

/* Logo */
h1#logo { background-image: url(../image/logo.png); background-repeat: no-repeat; height: 120px; width: 320px; left: -20px; text-indent: -9999px; overflow: hidden; position: absolute;  }
h2#tagline { width: 360px; position: absolute; left: 300px; top: 12px; font-size: 18px; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,1); color: White;   }

/* Navigation */
.navigation { height: 28px; background-color: #201f1f; border-bottom: 1px solid white; color: White; margin: 0 0 10px; }
.navigation_item { float: left; margin: 5px 5px; padding: 0 20px 0 10px; color: #fefefe; border-right: 1px solid white;  }

ul#nav { float: right; clear: right; width: 540px; height: 16px; padding: 17px; background-image: url(../image/nav_bg.jpg); background-repeat: repeat-x; margin: 30px 1px 0 0; text-align: center;
		-moz-border-radius-topleft: 5px;  
		-webkit-border-top-left-radius: 5px;
		-moz-border-radius-topright: 5px;  
		-webkit-border-top-right-radius: 5px;
		-moz-box-shadow: 0 0px 2px #6dc4f0;
		-webkit-box-shadow: 0 0px 2px #6dc4f0; 
}
ul#nav li { display: inline; padding: 15px 15px; }
ul#nav li a  
{
			padding: 5px 9px 5px; 
			color: #1b2732; 
			text-transform: uppercase;
			text-decoration: none;
			font-weight: bold;
			position: relative; 
}
ul#nav li a:hover, ul#nav li a:focus  
{
	background-image: url(../image/button_nav.jpg);
	padding: 4px 8px 4px;
    border: 1px solid #2080ca;
	color: #fff;
	cursor: pointer;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 1px #222;
}

/* Tags Side Bar */
.tags { margin: 0 0 10px;  }
.tags a { clear: both; font-size: 16px; text-transform: uppercase; color: White; display: block; margin-bottom: 2px; }
.tags a:hover { color: #1b2732; text-decoration: underline; } 
.tags ul li ul li { background-image: none; padding: 3px 0 0px; }
.tags ul li { list-style-type: none; background-image: url(../image/tag_sidebar_bg.jpg); background-repeat: no-repeat; padding: 0px 10px 0px; }
.tags ul li ul li a { color: #1b2732; }
.tags ul li ul li a:hover, .tags ul li ul li a:focus { color: #51c8ec; }

/* Bodycontent */
#bodycontent h1 {  }
#bodycontent h2 { font-size: 20px; color: #31b9e5; }
#bodycontent p { color: #1b2732; line-height: 22px; text-align: justify; }
#bodycontent a { text-decoration: underline; color: #51c8ec; }
#bodycontent a:hover, #bodycontent a:focus { color: #1b2732; } 

/* Shipping */
.shipping_sidebar { margin: 8px 0 0 0; }

/* Masthead */
#masthead { background-color: #1b2732; height: 280px; border: 1px solid #6dc4f0; margin-bottom: 5px; padding: 10px; }
#masthead h2 { color: white; font-size: 20px; }
#masthead a { color: #51c8ec; margin-top: 5px; text-decoration: underline; }
#masthead a:hover, #masthead a:focus  { color: white; cursor: pointer; }

.ft-title { width: 920px; height: 25px; padding: 10px; }

#slideshowHolder a { padding-right: 20px; background-image: url(../image/slideshowHolder_link.png); background-repeat: no-repeat; background-position: 100% 50%; }


/* Breadcrumbs */
#breadcrumbs div { color: #ffffff; text-align: left; }
#breadcrumbs div a { color: #ffffff; margin: 0 10px 0 10px; text-decoration: underline; }
#breadcrumbs div a:hover { color: #51c8ec; text-decoration: underline; }

/* Shopping Basket */
.shopping_basket { float: right; width: 200px;  text-align: right; margin: 10px 0 0 0;  }
.shopping_highlight { color: #1b2732; }
.shopping_basket h2 {  }
.shopping_basket_items { margin-bottom: 5px; }
.product_details { margin: 10px 0 10px; }

/* Search */
.search { width: 180px; padding: 5px 0 0; }
.search h2 { background-image: url(../image/tag_sidebar_bg.jpg); background-repeat: no-repeat; font-size: 16px; text-transform: uppercase; color: White; display: block; padding: 0px 10px 6px; width: 221px; }
.search .textbox { width: 210px; margin: 0 0; }


/* Content */
.content { float: left; min-width: 510px; max-width: 760px; background-color: #ffffff; padding: 10px; }

/* Footer */
#footer { margin: 5px 0 40px; clear: both; }
#footer p { color: #1b2732; }
#footer a { color: white; }
#footer a:hover, #footer a:focus { color: #1b2732; } 


/*-----------------------------------------------------------------------------------------------*/
/* PRODUCT LIST PAGE */

.product_list { position: relative; }
.product_list h1 span { font-size: 32px; color: #373737; margin: 0 0 20px;  }
.product_list_items { position: relative; }

.product { width: 230px; float: left; margin: 0px 5px 0 0;   }
.product_image { overflow: hidden; width: 230px; height : 200px; margin: 0 0 5px 0;  }
.product_image img { width: 230px; height : auto; }

.product_title_link { font-size: 16px; }
.product_description { display: none; }
.product_price { }

.pagination_navigation { clear: both; float: right; }

/*-----------------------------------------------------------------------------------------------*/
/* PRODUCT PAGE */

.product_page { position: relative; }
.product_page_image {  }
#product_listing_details { width: 360px; float: right; }
#product_listing_details h2 span { font-size: 22px; color: #1e1e1e; line-height: 26px;}

/*-----------------------------------------------------------------------------------------------*/
/* SHOPPING BASKET PAGE */

.shopping_basket_summary { width: 200px; }
.shopping_basket_title a { font-size: 22px; }
.shopping_basket_item { position: relative; min-height: 170px; margin: 0 0 10px; border-bottom: 1px solid #C9CACA; clear: both; }
.shopping_basket_image { float: right;  }
.shopping_basket_image img { width: auto; height : 160px; }

/*-----------------------------------------------------------------------------------------------*/
/* CHECKOUT PAGE */

.checkout { position: relative; width: 600px; }
.checkout h2 { font-size: 22px; color: #1e1e1e; line-height: 26px; margin: 0 0 5px; }
.checkout_error_label { color: #d63939; font-size: inherit; float:right; margin-right: 5px; }
.checkout p { clear: both; padding-top: 5px; }
.checkout .textbox { width: 200px; }

/*-----------------------------------------------------------------------------------------------*/
/* ORDER FAIL */
#order_outcome { width: 400px; height: 320px; padding: 20px; margin: 40px; line-height:24px; }

/*-----------------------------------------------------------------------------------------------*/
/* PIKACHOOSE */
.pikachoose { width: 340px; float: left; }

/* This is the ul you have all your images in */
.pikachoose ul { padding-left:0; width: 340px; margin: 5px 0 0 0px; overflow: hidden; float: left; }
.pikachoose ul li { float: left; padding: 2px; margin:1px 5px 4px 0; position:relative; overflow:hidden; }
.pikachoose ul li div img { position: relative; cursor: pointer; }

/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main { width: 330px; height: auto; display: block; position: relative; float: left; }

/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img { position: absolute; top: 2px; left: 2px; width: 324px; height: auto; }
.pika_back_img { position: relative; top: 0px; width: 324px; height: auto; }
.pika_subdiv { position: relative; padding: 2px 2px 0 2px; }
.pika_subdiv img, .pika_subdiv a img{border:none;}

.pika_navigation a {font-size: 12px; text-decoration: none; }
.pika_navigation a:hover { text-decoration: underline; cursor:pointer; }
.pika_navigation { display: none; padding-top:10px; width: 330px; clear:both; text-align:center; }

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover { position: absolute; top: 5px; left: 5px; height: 1px; width: 1px; background: url(../image/rewind.png) top left no-repeat; }
.pika_next_hover { position: absolute; top: 5px; right: 5px; height: 1px; width: 1px; background: url(../image/fastf.png) top right no-repeat; }