/*
	main.css
	styles specific to entire sportsgirl website
	for 20100701 (golive)
*/

@import url('blog.css');
@import url('forums.css');
@import url('freebies.css');
@import url('we-support.css');
@import url('style-snaps.css');
@import url('sgtv.css');
@import url('style-me.css');
@import url('collect-me.css');
@import url('recycle-it-pop-up-shop.css');
@import url('go-global.css');

/* Base overrides
	--------------------------------------------------- */
	html { background: repeat url('../img/bg-body.jpg') fixed top center #FFFFFF!important; color: #000000; }
	a { color: #000000; text-decoration: none; }
	a:hover { color: #FF0084; }

/* Form defaults
	--------------------------------------------------- */
	input.textinput, 
	input.passwordinput, 
	input.fileinput,
	textarea, 
	select { border: 1px solid #c2c2c2; background: #FFFFFF; }
	input.button { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; color: #FFFFFF; }
	input:disabled.button,
	input.disabled { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; cursor: auto; opacity: 0.2; filter:alpha(opacity=20)!important; }
	input.button:hover { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }

/* Background / main purpose is for embedding flash background
	--------------------------------------------------- */
	#background { background:none; } /* remove dotted background overlay */

/* Header
	--------------------------------------------------- */
	#header h1 { color: #FF0084; }
	#header ul.nav a { position: relative; display: block; color: #000000; text-transform: uppercase; font-weight: bold; /*padding: 8px 10px;*/ margin-right: 1px; }
	#header ul.nav a.last { margin-right: 0; }
	#header ul.nav a span { background: #FFFFFF; color: #000000; }
	#header ul.nav a:hover span { color: #FFFFFF; background: #FF0084; }
	#header ul.nav a.active span { color: #FFFFFF; background: #FF0084; }
	#header ul.nav li.username a { color: #FF0084; text-decoration: none; }
	#header ul.nav li.username a:hover { color: #FF0084; text-decoration: underline; }	
	
/* MyBag
	--------------------------------------------------- */		
	#mybag h3 { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; }
	/*#mybag .footer a img { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; }*/
	/*#mybag .footer a:hover img { background: url(../img/bg-button-gradient-base.gif) top left #666666!important; }	*/
	#mybag ul.contents dl dd a:hover { background: #FF0084; }			

/* Boxes Shared (Big and Small)
	--------------------------------------------------- */
	#boxes a.button { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; color: #FFFFFF; }
	#boxes a:hover.button { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }
	#boxes .shop-button { background: url(../img/bg-shop-button-gradient-hotpink.gif) top left #FF0084; color: #FFFFFF; }
	#boxes .shop-button:hover { background: url(../img/bg-shop-button-gradient-base.gif) top left #333333!important; color: #FFFFFF!important; }	
	#boxes a.button-reversed { background: url(../img/bg-button-gradient-base.gif) top left #333333; }
	#boxes a:hover.button-reversed { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084!important; color: #FFFFFF; }	
	#boxes p a:hover { background-color:#FF0084; color:#fff; }		
	
	#boxes a.inline-product-highlight { background: #FFFFFF url(../img/bg-shop-button-gradient-yellow-thin.gif) top right no-repeat; }
	#boxes a.inline-product-highlight:hover { background: #FFFFFF url(../img/bg-shop-button-gradient-base-thin.gif) top right no-repeat!important; }
	
	#boxes a.popup-product-highlight { background: #FFFFFF url(../img/bg-shop-button-gradient-yellow-thin.gif) top right no-repeat; }	
	#boxes a.popup-product-highlight:hover { background: #FFFFFF url(../img/bg-shop-button-gradient-base-thin.gif) top right no-repeat!important; }	
	
	#boxes a.imagemap-product-highlight { background: #FFFFFF url(../img/bg-shop-button-gradient-hotpink.gif) top right no-repeat; }
	#boxes a.imagemap-product-highlight:hover { background: #FFFFFF url(../img/bg-shop-button-gradient-base.gif) top right no-repeat!important; }	
	
	#boxes .box h2 { color: #FFFFFF; background: url(../img/bg-heading-gradient-hotpink.gif) top left #FF0084; }
	#boxes .box h2 a { color: #FFFFFF; }
	#boxes .box h2.hover { background: url(../img/bg-heading-gradient-base.gif) top left #333333!important; cursor: pointer; }
/*	#boxes .box h2 a:hover { background: #000000; color: #FF0084 }*/
	#boxes h3,
	#overlay-product h3 { color: #FFFFFF; background: #464646!important; }
	#boxes .standard h3 { color: #FF0084!important; }
	/*#boxes div.comments, */#boxes ul.forum { background: #ECECEC; }
	#boxes ul.forum li dl dd { color: #666666; }
	
	/* secondary navigation */
	#boxes ul.nav li a:hover, #boxes ul.nav li a.selected { background-color:#FF0084; color:#fff; }
	#boxes ul.nav li.highlight a { background-color:#fff; color:#FF0084; }
	#boxes ul.nav li.highlight a:hover, #boxes ul.nav li.highlight a.selected { background-color:#FF0084; color:#fff; }	

	/* comments */
	#boxes .comments dt, #boxes .box div.comments dd.timestamp { color: #898989; }
	#boxes .comments dd.toolbar ul li a img,
	#boxes .comments dd.toolbar ul li input { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; }
	#boxes .comments dd.toolbar ul li a:hover img,
	#boxes .comments dd.toolbar ul li input:hover { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }
	
	/* forum */
	#boxes .forum ul.posts dd.toolbar ul li a img,
	#boxes .forum ul.posts dd.toolbar ul li input { background-color: #FF0084; }
	#boxes .forum ul.posts dd.toolbar ul li a:hover img,
	#boxes .forum ul.posts dd.toolbar ul li input:hover { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }	
	
	/* gallery */
	#boxes .gallery .listing .controls a { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; color: #FFFFFF; }
	#boxes .gallery .listing .controls a:hover { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }
	#boxes .gallery .listing .controls a.disable { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }	
	
	/* action-panel */
	#boxes .action-panel a { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; }
	#boxes .action-panel a:hover,
	#boxes .action-panel a.active { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }
	#boxes .vote-overlay li.your-rating { background-color: #333333; }
	#boxes .vote-overlay li.ratings,
	#boxes .vote-overlay li.login { background-color: #666666; }	
	#boxes .poll label:hover { color: #FF0084; }	
	
	/* poll */
	#boxes .poll .result ul li span { color:#FF0084; }
	#boxes .poll div.js label img { background: #FF0084; }
	#boxes .poll div.js label img:hover { background: #333333!important; }	
	
	/* downloads */
	#boxes .downloads ul dl dd.link a img { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; }
	#boxes .downloads ul dl dd.link a:hover img { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }	
	
	/* back button */
	#boxes .back-button a:hover { background-color: #FF0084; }	

	/* example drill downs */
	/* #forum #big-boxes .box h2 { background: yellow; } */ /* targets all big box h2's on forum page */
	/* #forum #big-boxes .forum h2 { background: yellow; } */ /* targets only forum big box h2's on forum page */
	
/* Big Boxes
	--------------------------------------------------- */
	/* shop api */
	#big-boxes .carousel span.nav { background: url(../img/bg-button-gradient-vertical-hotpink.gif) top left #FF0084; }
	#big-boxes .carousel span:hover.nav { background: url(../img/bg-button-gradient-vertical-base.gif) top left #333333!important; }	
	#big-boxes .carousel span.disabled { background: url(../img/bg-button-gradient-vertical-base.gif) top left #333333!important; }

/* Footer
	--------------------------------------------------- */
	#footer a span { /*padding: 0.4em 1.8em 0.4em 0.5em;*/ margin-right: 1px; background: #FFFFFF; color: #000000; }
	#footer a:hover span { color: #FFFFFF; background: #FF0084; }
	
/* Overlays
	--------------------------------------------------- */		
	
	/* product */	
	#overlay-product div.share div.toolbar a img,
	#overlay-product div.share div.toolbar a.button { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; }
	#overlay-product div.share div.toolbar a:hover img,
	#overlay-product div.share div.toolbar a.button:hover,
	#overlay-product div.share div.toolbar a.active,
	#overlay-product div.share div.toolbar a.active img { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }	
	
	/* sizing chart */
	#overlay-product #sizing-toggle ul.nav li a { background: url(../img/bg-button-gradient-hotpink.gif) top left #FF0084; }
	#overlay-product #sizing-toggle ul.nav li a:hover { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }
	#overlay-product #sizing-toggle ul.nav li a.active { background: url(../img/bg-button-gradient-base.gif) top left #333333!important; }
	
/* Inline Shopping
   --------------------------------------------------- */
	a:hover.tooltip span { color: #FF0084!important; }
	a:hover.tooltip .image { border: 4px solid #FF0084; }
	
/* Banner
   --------------------------------------------------- */
	#banner { background: #FFFFFF; margin-bottom: 10px; }	
	#banner li.map { position: relative; }
	#banner .map a { position: absolute; top: 0; left: 0; display: block; background: #000000; color: #ffe01a; text-transform: uppercase; padding: 2px 4px 0; font-size: 1.8em; }
	#banner .map a:hover,
	#banner .map a.active { color: #FFFFFF; }

	#banner li { float: left; }
	#banner li img { display: block; }
	#banner li.map a.qld { top: 127px; left: 384px; }
	#banner li.map a.nsw { top: 296px; left: 420px; }
	#banner li.map a.nt { top: 53px; left: 280px; }
	#banner li.map a.sa { top: 319px; left: 254px; }
	#banner li.map a.tas { top: 426px; left: 347px; }
	#banner li.map a.vic { top: 367px; left: 300px; }
	#banner li.map a.wa { top: 333px; left: 42px; }
	#banner li.map a.act { top: 330px; left: 380px; }
	
	#small-boxes #banner { position: relative; }
	#small-boxes #banner .map a { padding: 1px 2px 0 3px; font-size: 1.4em; }
	#small-boxes #banner .map a.qld { top: 108px; left: 233px; }
	#small-boxes #banner .map a.nsw { top: 212px; left: 235px; }
	#small-boxes #banner .map a.nt { top: 61px; left: 156px; }
	#small-boxes #banner .map a.sa { top: 226px; left: 137px; }
	#small-boxes #banner .map a.tas { top: 287px; left: 227px; }
	#small-boxes #banner .map a.vic { top: 254px; left: 184px; }
	#small-boxes #banner .map a.wa { top: 234px; left: 22px; }	
	#small-boxes #banner .map a.act { top: 238px; left: 225px; }
	
/* Stripes */
	img#stripes-left { position:absolute; top:-120px; left:-464px; }
	img#stripes-right { position:absolute; top:-120px; right:-469px; }
	#homepage #footer { margin-bottom: 20px; }
	.showusstripes { margin-left:-10px; }
