/* @override http://designersleeves.addinteractivity.com/includes/templates/designersleeves_template/css/stylesheet.css */

@import url(reset-fonts-grids.css);

/* @group global */
body {
	font-family: arial;
	line-height: 1.5;
	color: #222522;
		background-image: url(../images/bg_pattern.png);
}

/* For IE6 PNG transparency */
img, div, hr { behavior: url(iepngfix.htc) }

body#popup {
	background-image: none;
	background-color: #fff;
}
#doc-custom { 
    margin:auto; text-align:left; /* leave unchanged */ 
    width:58.84em;/* non-IE */ 
    *width:57.43em;/* IE */
    min-width:765px;/* optional but recommended */
}
div.whiteBG {
	background-color: #ffffff;
	width: 100%;
	margin-top: -10px;
	padding-top: 10px;
	min-height: 600px;
}
div.yui-b {
	margin-bottom: 20px;
}
div.yui-g, div.yui-gb {
	margin-bottom: 15px;
}
a {
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: #9C0000;
}

h1 { font-size: 138.5%; }
h2 { font-size: 123.1%;}
h3, strong { font-weight: bold; }
p, ul, ol { margin-bottom: 10px;}

div#hd { margin-top: 10px;}
div#bd { clear: both; }

.red { color: #882531;}
.pear { color: #6A7429;}
.blue { color: #1E4A73;}

ul {
	margin-left: 20px;
}
ul li {
	list-style-type: disc;
	list-style-position: outside;
}
ol li {
	list-style-type: decimal;
	list-style-position: inside;
}

.debugLocation {
	color: #bcbfbc;
	border: 1px dotted #bcbfbc;
	padding: 5px;
	margin-bottom: 5px;
}
hr, div.hr {
	background: url(../images/hr_fading.jpg) no-repeat center center;
	border-style: hidden;
	height: 10px;
	margin-top: 30px;
	margin-bottom: 10px;
	border-width: 0;
	display: block;
}
.hidden {
	display: none;
}
.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
/* @end */

/* @group header */
div.logo {
	float: left;
}
div#headerSmallMenu {
	text-align: right;
	margin-bottom: 5px;
}
div#headerMenu {
	background: url(../images/header_menu_both.jpg) no-repeat;
	height: 42px;
	float: right;
}
div#headerMenu i {
	display: none;
}
#ds_servicemark {
	margin-left: -308px;
	width: 148px;
	float: left;
	position: relative;
}

a#products {
	float: left;
	position: relative;
	width: 105px;
	height: 42px;
}
a#products:hover {
	background: url(../images/header_menu_both.jpg) no-repeat 0 -42px;
}
a#corporate {
	float: left;
	position: relative;
	width: 162px;
	height: 42px;
}
a#corporate:hover {
	background: url(../images/header_menu_both.jpg) no-repeat -105px -42px;
}
a#cart {
	float: left;
	position: relative;
	width: 104px;
	height: 42px;
}
a#cart:hover {
	background: url(../images/header_menu_both.jpg) no-repeat -267px -42px;
}
a#help {
	float: left;
	position: relative;
	width: 68px;
	height: 42px;
}
a#help:hover {
	background: url(../images/header_menu_both.jpg) no-repeat -371px -42px;
}
/* @end */

/* @group content */
div.topGradientBackground {
	min-height: 300px;
	background: url(../images/bg_topGradient.jpg) no-repeat;
}
div.topGradientBackground .yui-u {
	background: url(../images/bg_verticalLine.png) no-repeat left top;
	* background: none;
	padding-top: 10px;
}
div.products_main {
	
}
div.innerMargins {
	
	margin: 10px 20px;
	position: relative;
}
div.topGradientBackground .first {
	background: none;
}
div.topGradientBackground img, div.buttons img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
div.buttons img {
	padding-left: 20px;
}
div.itemListing {
	width: 33%;
	float: left;
}
div.newRow {
	clear: both;
}
div#imageAndThumbs {
	float: right;
	width: 300px;
	text-align: center;
	margin-bottom: 20px;
}
div#alsoPurchased {
	clear: left;
}
div#alsoPurchased h2 {
	padding-top: 10px;
}
div.centerBoxContentsAlsoPurch {
	float: left;
}
div.centerBoxContentsAlsoPurch img {
	margin-left: none;
	margin-right: none;
}
#whatsNew .centerBoxContentsNew {
	float: left;
	position: relative;
	margin-bottom: 20px;
	width: 24%;
}
#whatsNew h2.centerBoxHeading{
	display: none;
}
p.price {
	margin-bottom: 0px;
}
div.topGoogle {
	text-align: center;
}
div.topGoogle div, div#PPECbutton img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
}

div#cartSubTotal {
	margin-top: 10px;
}

div#productAttributes {
	margin-bottom: -30px;
	margin-top: 10px;
}
div#productAttributes input {
	margin-right: 20px;
}
div#cartAdd.buttonRow.forward {
	float: left;
}
div#delicious_options.wrapperAttribsOptions {
	margin-left: -10px;
	padding-left: 10px;
	padding-top: 10px;
	margin-bottom: 10px;
}
div#productAdditionalImages {
	text-align: center;
	color: #767a7b;
}
div#productAdditionalImages a{
	position: relative;
	float: right;
}
div.fileSpecifications{
	width: 640px;
	margin-left: 50px;
}
div.legalese {
	width: 655px;
	margin-left: 35px;
	height: 200px;
	overflow-y: scroll;
	border: 1px solid black;
	padding: 15px;
	margin-bottom: 20px;;
}
.caps {
	text-transform: uppercase;
}
/* @end */

/* @group footer */
#uberFooter {
	color: #818581;
	text-align: center;
}
#topFooterBG {
	background: url(../images/bg_footerTop.png) repeat-x 0 top;
	* background: none;
}
#uberFooter #wrapper {
	margin-left: auto; 
	margin-right: auto;
	text-align: left;
    width:58.84em;/* non-IE */ 
    *width:57.43em;/* IE */
    width:765px;
	height: 175px;
}
#uberFooter a {
	color: #b1b3b1;
}
#uberFooter a.stronger {
	color: #fff;
	font-weight: bold;
}
#copyright {
	position: relative;
	float: left;
	margin-top: 10px;
}
#footerLinks {
	float: right;
	text-align: right;
	margin-top: 10px;
}

/* @end */

/* @group front */
div.yui-g.top {
	margin-bottom: 30px;
}
div.grayBG {
	background: url(../images/bg_middleFront.jpg) repeat-x 0 bottom;
	* margin-bottom: 0px;
}
div.yui-g.frontGray {
	margin-top: 10px;
	padding-top: 10px;
	margin-bottom: 3px;
	* margin-bottom: -25px;
}
div.grayBG a.firstTwo {
	margin-right: 20px;
}

/* @end */

/* @group sidebar */
span.catCount {
	float: right;
}
a.cartNumber {
	font-size: 138.5%;
	padding-top: 3px;
}
.group {
	border-bottom: 1px solid #b9bfbc;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
div.sizingChart {
	border-top: 1px solid #b9bfbc;
	padding-top: 10px;
}
div#categoriesContent {
	border: none;
/* 	height: 115px; */
}
.sizingChart img {
	vertical-align: middle;
}
.sizingChart a {
	vertical-align: middle;
	padding-left: 10px;
}
div#sizingchartsidebox {
	display: none;
}
h3#categoriesHeading {
	display: none;
}
h3#shoppingcartHeading {
	font-size: 123.1%;
	padding-bottom: 5px;
	margin-top: 10px;
}
div.sidebar div#shoppingcart {
	margin-top: 3.5em;
}
div#cartBoxListWrapper {
	margin-bottom: -15px;
}
div.sidebar .cartBoxTotal {
	text-align: right;
	font-size: 123.1%;
	padding-right: 10px;
}
/* @end */
/* @group Tables */
.tabTable {
	border-spacing: 1px;
	background-color: #fff;
	width: 100%;
}
th {
	font-weight: bold;
	padding: 3px;
	text-align: center;
	background-color: #e6e6e6;
}
th a {
	color: #59595b;
}
tbody tr {
	background-color: #fff; 
	text-align:center;
	border-bottom: 2px solid #d0d0d0;
}
tbody tr.productListing-odd {
	background: #FFF;

}
tr td {
	border: 1px solid #fdfefc;
	margin: 2px;
	padding: 3px;
}
td.productListing-data {
	text-align: center;
}
.listingDescription {
	text-align: left;
}
#cartProdTitle {
	float: left;
	margin-top: 10px;
	padding-left: 5px;
}
#cartImage img {
	float: left;
}
table#prevOrders span.cssButton {
	margin-left:  20px;
}

div.cartAttribsList li {
	list-style-type: none;
}
/* @end */

/* @group Forms */
fieldset {
	border: 1px solid #ede8de;
	padding: 5px;
	margin-bottom: 9px;
}
legend {
	background: #fff;
	padding: 6px;
	margin-top: 10px;
	font-weight: bold;
	color: #474a47;
}
label.inputLabel {
	float: left;
	clear: both;
	
}
.inputSingle, input#disc-ot_coupon, div.ccinfo input {
	float: right;
	right: 5px;
	width: 50%;
	display: inline;
	position: relative;
	background-color: #fcfcfc;
	padding: 5px;
	border: 1px solid #d8dad9;
	color: #000;
}
select#cc-cc-expires-month, select#cc-cc-expires-year {
	width: 24%;
	margin-left: 15px;
}
.inputMulti, textarea {
	float: right;
	width: 50%;
	right: 5px;
	display: inline;
	position: relative;
	background-color: #fcfcfc;
	padding: 5px;
	border: 1px solid #d8dad9;
	color: #000;
}
.inputPulldown, .formRow select {
	float: right;
	width: 50%;
}
.formRow {
	margin-bottom: 9px;
	min-height: 25px;
}
.formGroup {
	min-height: 200px;
}
.buttonRow {
	clear: right;
}
.radioButtonLabel {
	padding-right: 20px;
}
input#gender-male, input#newsletter-checkbox, input#email-format-html, .radioFirst {
	margin-left: 300px;
}
input#gender-male, input#gender-female, input#email-format-html, input#email-format-text, input#newsletter-checkbox, .radio, input#pmt-cc, input#pmt-paypal, input#pmt-googlecheckout, input#pmt-paypalwpp {
	margin-right: 10px;
}

.alert, .inputrequirement {
	color: #696a6a;
}
.advisory {
	clear: both;
}
label.checkboxLabel {
	padding-left: 15px;
}
input#name-2, input#name-4  {
	float: left;
	margin-right: 15px;
}
address {
	margin-bottom: 10px;
}
div.totalBox {
	float: right;
	margin-right: 100px;
}
/* @end */

/* @group Designer */

div.designer{

}
div#Container {
	position: relative;
	width: 750px;
}
div.prop {
    height:620px;
    float:right;
    width:1px;
  }

/* @group Legend */

div.legend {
	margin-top: 10px;
	margin-left: 5px;	
}
div.legend div {
	float: left;
	width: 350px;
	margin-right: 20px;
}
div.legend div img {
	float: left;
	margin-right: 10px;
	display: inline;
	width: 68px;
	height: 22px;
}

div.legend span.blue {
	color: #3d3db1;
	border-bottom: 2px #3d3db1 solid;
	font-variant: small-caps;
	font-style: italic;
	padding: 0 6px 0 5px;
}
div.legend span.green {
	color: #1b9c10;
	border-bottom: 2px #1b9c10 solid;
	font-style: italic;
	font-variant: small-caps;
	padding: 0 7px 0 5px;
}
/* @end */

/* @group Tabs */

/**
 *	Ensure that all tabs are hidden to start with
 *
 *	DO NOT use "visibility: hidden;" to style non-visible tabs.
 *	Safari 3 seems to not correctly report the width and height of the container 
 *	to ActionScript when it is hidden. This causes the designer to draw itself 
 *	incorrectly where it relies on these values.  
 *
 *	Instead use "display: none;".  Then when the tab is first chosen use
 *	javascript to set "display: block;".  
 *
 *	We cannot, however, use "display: none;" to hide currently visible tabs  
 *	during runtime because toggling display from block, to none, and back to block
 *	causes the flash content to reload, erasing all the users work.
 *
 *	Thus, upon page init, use display to show/hide tabbed content as needed.  
 *	Then, as the user interacts with the page only use "visibility: hidden;" & 
 *	"visibility: visible;" to show/hide tabbed content.
 *
 *	See javascript function 'swapIt(target)' in this example for more details.
 */
#tab01, #tab02, #tab03 {
	position: absolute;
	overflow: hidden;
	width: 750px;
	height: 680px;
	display: none;
}

#startButton {
	padding-top: 10px;
	padding-bottom: 10px;
	float: left;
	display: block;
	position: relative;
	

}

/*
#startButton a {
	color: #19a80a;
	font-size: 2em;
	padding: 10px;
	border: 2px solid #e5e5e5;
}

#startButton a:hover {
	color: #179009;
	font-size: 2em;
	background-color: #f1f1f1;
	padding: 10px;
	border: 2px solid #cbcbcb;
}
*/

/**
 * Added to support a progress wheel upon saving the 3 custom bags
 *
 * @since September 2, 2008
 * @author jon beebe
 */
#tabContentBackground div#centerMessage {
	text-align: center;
	width: 50%;
	height: 40%;
	left: 25%;
	position: relative;
	top: 20%;
}

/**
 * Added to support a progress wheel upon saving the 3 custom bags
 *
 * @since September 2, 2008
 * @author jon beebe
 */
#saveProgressWheel {
	width: 126px;
	height: 22px;
	display: block;
	left: 33%;
	top: 10px;
	background-image: url(../images/progress_bar_126x22.gif);
	float: left;
	position: relative;
}

/**
 *	Display only initial content. This will show the background div
 *	containing the insructions for the designer
 */
#tabContentBackground {
	display: block;
}

div.tabContent {
	height: 560px;
}
/* @end */

/* @group Navigation */

/**
 *	@since 20 May 2008
 */
#designerNavigation {
	position: relative;
	height: 42px;
	width: 750px;
	margin-bottom: 10px;
	visibility: hidden;
}

#Navigation {
	position: absolute;
	height: 42px;
	width: 600px;
	margin-bottom: 10px;
	top: 0; /* @since 20 May 2008 */
	left: 0; /* @since 20 May 2008 */
}
#Navigation i {
	float: right;
	font-weight: normal;
	font-style: normal;
	margin-top: 10px;
	margin-right: 12px;
}
#Navigation span{
	text-align: left;
	background: url(../images/buttons_3whole.png) no-repeat left top;
	float: left;
	height: 42px;
	padding: 0px;
	margin: 0px;
	width: 15px;
}
#Navigation a {
	margin-right: 1px;
	text-decoration: none;
	float: left;
	text-align: center;
	width: 25%;
	background: url(../images/buttons_3whole.png) no-repeat right top;
	color: #fff;
}
#Navigation img {
	margin-right: 10px;
	float: right;
	margin-top: 4px;
	width: 32px;
}
#Navigation a:hover, #Navigation a.normalJS:hover {
	margin-top: 0px;
	background: url(../images/buttons_3whole.png) no-repeat right -84px;
}
#Navigation a:hover span {
	margin-top: 0px;
	background: url(../images/buttons_3whole.png) no-repeat left -84px;
	width: 15px;
}

#Navigation a.current {
	margin-top: 0px;
	width: 40%;
	color: #fff;
	background: url(../images/buttons_3whole.png) no-repeat right -42px;
}
#Navigation a.current span, #Navigation a.currentJS span {
	background: url(../images/buttons_3whole.png) no-repeat left -42px;
}

#Navigation a.currentJS {
	margin-top: 0px;
	color: #fff;
	background: url(../images/buttons_3whole.png) no-repeat right -42px;
}
#Navigation a.normalJS {
	margin-right: 1px;
	text-decoration: none;
	float: left;
	text-align: center;
	background: url(../images/buttons_3whole.png) no-repeat right top;
	color: #fff;
}

/* @end */



/* @group Purchase Button */

/**
 * @since 20 May 2008 
 * 
 * Styles the purchase button on the right of the designer page
 */
 
#purchaseButton {
	position: relative;
	height: 42px;
	width: 140px;
	margin-bottom: 10px;
	left: 0;
	right: 0;
	display: inline;
	float: right;
}
#purchaseButton i {
	float: right;
	font-weight: normal;
	font-style: normal;
	margin-top: 10px;
	margin-right: 12px;
}
#purchaseButton span {
	text-align: left;
	background: url(../images/buttons_3whole.png) no-repeat left top;
	float: left;
	height: 42px;
	padding: 0px;
	margin: 0px;
	width: 15px;
}
#purchaseButton a {
	margin-right: 1px;
	text-decoration: none;
	float: left;
	text-align: center;
	width: 100%;
	background: url(../images/buttons_3whole.png) no-repeat right top;
	color: #fff;
}
#purchaseButton img {
	margin-right: 10px;
	float: right;
	margin-top: 9px;
	width: 24px;
}
#purchaseButton a:hover {
	margin-top: 0px;
	background: url(../images/buttons_3whole.png) no-repeat right -84px;
}
#purchaseButton a:hover span {
	margin-top: 0px;
	background: url(../images/buttons_3whole.png) no-repeat left -84px;
	width: 15px;
}

/* @end */

/* @end */

/* @group Bag Preview pop up */

DIV.popUp_content {
	border-width: 1px;
	top: 40px;
	position: relative;
/*
	border-color: #3a3a3a;
	border-style: dotted;
*/
	width: 800px;
	height: 450px;
	margin-right: auto;
	margin-left: auto;
}

DIV.popUp_clearer {
	clear: both;
}

DIV.popUp_front_panel {
	height: 204px;
	width: 251px;
	position: relative;
/*
	border-color: red;
	border-width: 1px;
	border-style: dotted;
*/
	float:left;
	display:inline;
}
DIV.popUp_inside_panel {
	float:left;
	display:inline;
	height: 204px;
	width: 251px;
	position: relative;
	padding-left:10px;
/*
	border-color: red;
	border-width: 1px;
	border-style: dotted;
*/
}
DIV.popUp_back_panel {
	float:left;
	display:inline;
	height: 204px;
	width: 251px;
	position: relative;
	padding-left:10px;
/*
	border-color: red;
	border-width: 1px;
	border-style: dotted;
*/
}
DIV.popUp_bag_label {
	top: 50px;
	position: relative;
	display:block;
	width: 100%;
}

#printButton {
	padding-top: 10px;
	padding-bottom: 10px;
	float: right;
	display: block;
	position: relative;
}

/* @end */