/**
* Author:	Dylan Harrington
* Project:	Josh Wink dot com
-------------------------------------**/

/** Base
-------------------------------------**/
html {
  overflow-y: scroll;
  _overflow-x: hidden;
}
body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: #65c127;
	margin: 0;
  font-size: 12px;
  line-height: 1.5;
  font-family: verdana, tahoma, arial, sans-serif;
}
ul,
ol {
	padding-left: 0;
	list-style-type: none;
}
dd,
dt {
  margin-left: 0;
}

/** Repair Browsers LTE IE7
-------------------------------------**/
h1 {
	*margin-top: .67em;
	*margin-bottom: .67em;
	*font-size: 2em;
}
h2 {
	*margin-top: .83em;
	*margin-bottom: .83em;
	*font-size: 1.5em;
}
h3,h4,h5,h6,p,ul,ol {
	*margin-top: 1em;
	*margin-bottom: 1em;
}
ul,ol {
	*margin-left: 0;
}

/* links */
a {
  color: #3899f3;
  text-decoration: none;
}
a:hover,
a:active,
a:focus	{
	text-decoration: underline;
}
a img {
  border: 0;
}

/* utility */
.offscreen {
	position: absolute;
	top: -9999999px;
}


/* layout */
#container {
  width: 960px;
  margin: 0 auto;
}

#footer {
	padding-bottom: 20px;
	margin: 20px auto 0;	
	zoom: 1;
	padding: 20px 0;
	text-align: center;
	background-color: #fff;
}
#footer p {
  
  display: inline;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid yellow;
	padding: 4px 10px;
}

#header {
	zoom: 1;
	position: relative;
	padding: 20px 10px;
}
#header span {
  position: absolute;
  right: 15px;
  bottom: 20px;
  padding-right: 20px;
}
#header .cart {
	padding-right: 0;
	bottom: 0;
	right: 0;
	width: 16px;
	height: 16px;
	zoom: 1;
	display: block;
	background: url(../img/cart-icon.png) 0 0 no-repeat;
}
#header span a {
  color: yellow;
  font-weight: bold;
  text-decoration: none;
}
.grid {
  margin-right: -15px;
  overflow: hidden;
  zoom: 1;
}
.col {
  float: left;
  margin-right: 10px;
  width: 315px;
  overflow: hidden;
  zoom: 1;
}
.col2 {
  width: 640px;
}


.col2 .box .photo {
  float: right;
  margin-left: 15px;
  margin: 0 0 -15px 15px;
}

/* boxes */
.box {
  margin-bottom: 10px;
  padding: 15px;
  background-color: #fff;
  overflow: hidden;
  zoom: 1;
  position: relative;
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.alt-box {
  background-color: #000;
}

h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
	color: #65c127;
}
.alt-box h1,
.alt-box h2,
.alt-box h3,
.alt-box h4,
.alt-box h5,
.alt-box h6 {
  color: #fff;
}
.alt-box {
  color: #fff;
}
h1 {
  font-size: 22px;
}
h2 {
  margin-bottom: 8px;
  font-size: 18px;
}

.store-list {
  margin: 0 -30px 0 0;
  overflow: hidden;
  zoom: 1;
}

.store-list li {
  float: left;
  margin: 5px 30px 5px 0;
  padding: 0;
}

.date-list {
  margin: 0 -15px;
}

.date-list li {
  padding: 6px 24px 5px 19px;
}
.date-list li a {
  word-wrap: break-word;
  display: block;
}

.date-list .odd {
  background-color: #262626;
}

.date-list .even {
  color: #ccc;
}

.date-list li.more {
  padding: 6px 11px 5px 19px;
}




.tweet_list li.tweet_odd {
	background-color: #ccc;
}
.tweet_list {
  margin: 0 -15px;
}
.tweet_text {
  display: block;
  word-wrap: break-word;
}

.tweet_list li {
  zoom: 1;
	color: #666;
	padding: 10px 20px;
}

.tweet_list li a {
	color: #000;
}

.more {
  font-weight: bold;
  text-align: right;
  margin: 0;
}

a.toggler {
  font-size: 14px;
}
a.toggler:hover {
  text-decoration: none;
}

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay {
  background: url(../img/colorbox/overlay.png) 0 0 repeat;
}

#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight {
  width:21px; height:21px;
  background: url(../img/colorbox/controls.png) no-repeat;
}
#cboxTopLeft {
  background-position: -100px 0;
}
#cboxTopRight{
  background-position: -129px 0;
}
#cboxBottomLeft{
  background-position: -100px -29px;
  }
#cboxBottomRight {
  background-position: -129px -29px;
}
    #cboxMiddleLeft{width:21px; background:url(../img/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(../img/colorbox/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/colorbox/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(../img/colorbox/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/colorbox/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}

/*
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/themes/joshwink/img/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 289px;
	height:289px;
	/* custom decorations */
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width: 200000em;
	position:absolute;
	overflow: hidden;
	height:289px;
}

/* single scrollable item */

.scrollable img {
	cursor:pointer;
	width: 289px;
	height: 289px;
	overflow: hidden;
}

/* active item */


/*buttons*/
/* this makes it possible to add next button beside scrollable */


/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../img/scrollable/arrow/hori_large.png) no-repeat;
	display:none;
	width:30px;
	height:30px;
	cursor:pointer;
	font-size:1px;
	position: absolute;
	z-index: 9998;
	top: 50%;
}

/* right */
a.right 				{ background-position: 0 -30px; left: 259px;; }
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ left: 0;} 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 


/* promo tab */

#freemp3 {
	position: fixed;
	_position: absolute;
	top: 100px;
	right: -317px;
	z-index: 10;
}

#freemp3-btn {
	border: solid yellow;
	border-width: 2px 0 2px 2px;
	padding: 10px;
	background-color: yellow;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	font-weight: bold;
	font-size: 20px;
	float: left;
	zoom: 1;
	outline: 0;
}
#freemp3-form strong {
	color: #fff;
	font-size: 18px;
}
#freemp3-form {
	width: 290px;
	border: solid yellow;
	border-width: 2px 0 2px 2px;
	padding: 10px;
	background-color: #000;
	float: left;
	zoom: 1;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	
}
#freemp3-form strong {
	margin-bottom: 1em;
}

#freemp3 input, #freemp3 p {
	margin-bottom: 15px;
}
#emailMp3 {
	width: 225px;
	font-size: 17px;
}