/* 
  style.css contains a reset, font normalization and some base styles.
  
  credit is left where credit is due.
  additionally, much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/

/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, figure, footer, header, 
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */


/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
          Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages

There are three custom edits:
 * remove arial, helvetica from explicit font stack
 * make the line-height relative and unit-less
 * remove the pre, code styles
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }

table { font-size:inherit; font:100%; }

/*select, input, textarea { font:99% sans-serif; }*/


/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
 


/* 
 * minimal base styles 
 */


/* #333 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
body, select, input, textarea { color:#333; }

/* Headers (h1,h2,etc) have no default font-size or margin,
   you'll want to define those yourself. */ 
 
/* www.aestheticallyloyal.com/public/optimize-legibility/ */ 
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; }

/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }

 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }


ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }

small { font-size:85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align:top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  /*white-space: pre-line;*/ /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  color: #fff;
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }


/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 
   Also: hot pink. */
::-moz-selection{ background: #00659B; color:#fff; text-shadow: none; }
::selection { background:#00659B; color:#fff; text-shadow: none; } 

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #00659B; } 


/* always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }



/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display:none; visibility:hidden; } 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/ 
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden { position:absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }


/* CSS Document */
body {
	background-color: #333;
	/*background-image: url(../images/bg_sprite.png);
	background-repeat: repeat-x;*/
	font-family: Arial, Helvetica, sans-serif;
}

#container {
	width: 860px;
	margin: 0 auto;
}

/* Header */

#header {
	height: 50px;
	padding: 15px 0px 0px;
}

#logo {
  background-image: url(../images/major_sprite.png);
	background-repeat: no-repeat;
	background-position: 0px -560px;
	height: 32px;
	width: 35px;
	float: left;
	margin-top: 3px;
	text-indent: -9999px;
}

#header a {
  text-decoration: none;
}

a#header_title {
  font-size: 18px;
	color: #f9f9f9;
}

a#header_subtitle {
  font-size: 14px;
	color: #d0d0d0;
}

/* Footer */

#footer {
	text-align: left;
	font-size: 12px;
	color: #fefefe;
	margin: 30px 0px;
	padding-top: 15px;
	border-top: 1px solid #666;
}

#footer a {
  color: #ccc;
}

#footer .right {
  text-align: right;
}


/* Body */

.flash_error {
  border: 1px solid;
  margin: 5px 0px 15px;
  padding: 10px 10px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  -webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	color: #D8000C;
  background-color: #FFBABA;
}

.row {
	margin-bottom: 10px;
}

.clear {
	clear: both;
}

.column {
	float: left;
}

.right {
	float: right !important;
}

.box {
  float: left;
  padding: 15px;
  -webkit-border-radius:5px;
     -moz-border-radius:5px;
          border-radius:5px;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.075) inset;
          box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  border:1px solid #fff;
  background-image: -moz-linear-gradient(top, #F0F0F0 0%, #D5D5D5 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F0F0F0), to(#D5D5D5));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF0F0F0, endColorstr=#FFD5D5D5);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF0F0F0, endColorstr=#FFD5D5D5)";
  text-shadow:0 1px 0 #ccc;
  background-color: #F0F0F0 !important;
}

h3 {
	font-size: 18px;
	margin-bottom: 3px;
	height: 24px;
  border-bottom: 1px dashed #868686;
}

h4 {
  margin-bottom: 5px;
  font-weight: normal;
  padding: 0;
}

h4.big {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 3px;
  margin-top: 3px;
}

.tags div {
  float: left;
}

.button {
  padding: 5px 10px 5px 10px;
  -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  font-family: Verdana, Geneva, sans-serif;
	margin: 5px 14px 0px 10px;
	cursor: pointer;
	z-index: 0;
	border: 1px solid #FFBD3A;
  border-top:1px solid #FFE69E;
  border-bottom:1px solid #FFBD3A;
  background-image: -moz-linear-gradient(top, #FFE69E 0%, #FFBD3A 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFE69E), to(#FFBD3A));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFE69E, endColorstr=#FFFFBD3A);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFE69E, endColorstr=#FFFFBD3A)";
  color:#333;
  text-shadow:0 1px 0 #FFD9A3;
  background-color: #FFE69E;
}

.button:hover {
  color: #000;
  background-image: -moz-linear-gradient(top, #FFF7C0 0%, #FFBD3A 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF7C0), to(#FFBD3A));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFF7C0, endColorstr=#FFFFBD3A);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFF7C0, endColorstr=#FFFFBD3A)";
  background-color: #FFF7C0;
}

.lightgrey {
  border: 1px solid #666;
  background-image: -moz-linear-gradient(top, #B7B7B7 0%, #8D8D8D 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B7B7B7), to(#8D8D8D));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFB7B7B7, endColorstr=#FF8D8D8D);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFB7B7B7, endColorstr=#FF8D8D8D)";
  text-shadow:0 1px 0 #8D8D8D;
  background-color: #8D8D8D !important;
  color: #fff;
}

.lightgrey:hover {
  border: 1px solid #888;
  background-image: -moz-linear-gradient(top, #c7c7c7 0%, #8D8D8D 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c7c7c7), to(#8D8D8D));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFc7c7c7, endColorstr=#FF8D8D8D);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFc7c7c7, endColorstr=#FF8D8D8D)";
}

.grey {
  border:1px solid #333;
  background-image: -moz-linear-gradient(top, #676767 0%, #404040 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#676767), to(#404040));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF676767, endColorstr=#FF404040);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF676767, endColorstr=#FF404040)";
  text-shadow:0 1px 0 #404040;
  background-color: #404040 !important;
  color: #fff;
}

.grey:hover {
  border:1px solid #222;
  background-image: -moz-linear-gradient(top, #777 0%, #404040 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#404040));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF777777, endColorstr=#FF404040);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF777777, endColorstr=#FF404040)";
}

.blue {
  border: 1px solid #eee;
  background-image: -moz-linear-gradient(top, #6CC7FE 0%, #299CD9 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6CC7FE), to(#299CD9));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF6CC7FE, endColorstr=#FF299CD9);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF6CC7FE, endColorstr=#FF299CD9)";
  text-shadow:0 1px 0 #299CD9;
  background-color: #299CD9 !important;
  color: #fff !important;
  text-decoration: none;
}

.blue:hover {
  background-image: -moz-linear-gradient(top, #6BE0FF 0%, #299CD9 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6BE0FF), to(#299CD9));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF6BE0FF, endColorstr=#FF299CD9);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF6BE0FF, endColorstr=#FF299CD9)";
}

.green {
  border: solid 1px #538312;
  background-image: -moz-linear-gradient(top, #7db72f 0%, #4e7d0e 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7db72f), to(#4e7d0e));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF7db72f, endColorstr=#FF4e7d0e);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF7db72f, endColorstr=#FF4e7d0e)";
  text-shadow:0 1px 0 #64991e;
  background-color: #64991e !important;
  color: #e8f0de !important;
}

.green:hover {
  background-image: -moz-linear-gradient(top, #6b9d28 0%, #436b0c 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6b9d28), to(#436b0c));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF6b9d28, endColorstr=#FF436b0c);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF6b9d28, endColorstr=#FF436b0c)";
  background-color: #538018 !important;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*| START: SHAPE  | *******************************************************/

.selectShape {
  height: 94px;
	width: 504px;
  border:1px solid #fff;
  background-image: -moz-linear-gradient(top, #499BCA 0%, #1B5577 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#499BCA), to(#1B5577));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF499BCA, endColorstr=#FF1B5577);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF499BCA, endColorstr=#FF1B5577)";
  text-shadow:0 1px 0 #1B5577;
  background-color: #499BCA !important;
  color: #fff;
}

.selectShape h3 {
  border-bottom: 1px dashed #92c4e0;
}

.selectShape #tagShapes {
  margin-top: 10px;
	height: 54px;
	margin-top: 10px;
}

.shapes_bone, .shapes_circle, .shapes_heart, .shapes_hydrant{
	/*background-image: url(../images/shapes_sprite.png);*/
	background-image: url(../images/major_sprite.png);
	background-repeat: no-repeat;
	border: 1px solid transparent;
}
.shapes_cart_bone, .shapes_cart_circle, .shapes_cart_heart, .shapes_cart_hydrant{
	/*background-image: url(../images/shapes_sprite_cart.png);*/
	background-image: url(../images/major_sprite.png);
	background-repeat: no-repeat;
}
.shapes_bone:hover, .shapes_circle:hover, .shapes_heart:hover, .shapes_hydrant:hover{
	background-color: #4297c6;
	border: 1px solid #FFF;
	cursor: pointer;
}
.shape_selected { 
  /*background-image:url(../images/shapes_selected_sprite.png);*/
  background-image: url(../images/major_sprite.png);
  border: 1px solid transparent; 
}

.shape_selected:hover {
	background-color: transparent;
	cursor: default;
	border: 1px solid transparent;
}
.shapes_bone {
  background-position: 6px 0px; 
  width: 74px; 
  height: 54px;
}

.shapes_circle {
  background-position: -70px 0px; 
  width: 53px; 
  height: 54px;
}

.shapes_heart {
  background-position: 4px -54px; 
  width:66px; 
  height:54px;
}

.shapes_hydrant { 
  background-position: -70px -54px; 
  width:51px; 
  height:54px;
}

.shapes_cart_bone {
  background-position: 0px -441px; 
  width:66px; 
  height:54px;
}

.shapes_cart_circle {
  background-position: -66px -441px; 
  width:66px; 
  height:54px;
}

.shapes_cart_heart { 
  background-position: 0px -495px; 
  width: 66px; 
  height: 54px;
}

.shapes_cart_hydrant {
  background-position: -66px -495px; 
  width: 66px; 
  height: 54px;
}

/*| END: SHAPE  | *********************************************************/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*| START: CART | *********************************************************/

.cart {
	height: 94px;
	width: 280px;
	margin-left: 10px;
}

.cart .cart_info {
  float: left;
	height: 70px;
	width: 130px;
	text-align: right;
	margin-top: 10px;
}

.cart_info .price {
  font-size: 36px;
}

.cart_info .items {
  font-size: 12px;
}

.cart .buttons {
  margin: 0px 0px 0px 150px;
}

.buttons a {
  display: block;
  text-decoration: none;
  color: #fff;
  text-align: center;
  margin-bottom: 8px !important;
  font-size: 14px;
}

.cart .cart_button {
  width: 98px;
}


/*| END: CART   | *********************************************************/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*| START: COLORS | *******************************************************/

.selectOption {
	height: 47px;
	float: left;
	padding: 0;
}

.colors {
  width: 533px;
}

.selectOption h3 {
  padding: 0px 10px;
	float: left;
	font-size: 18px;
	line-height: 47px;
	color: #FFF;
	border: none;
	background-image: -moz-linear-gradient(top, #676767 0%, #000000 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#676767), to(#000000));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF676767, endColorstr=#FF000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF676767, endColorstr=#FF000000)";
  background-color: #000 !important;
	height: 47px;
	-moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-shadow:0 1px 0 #666;
  margin-right: 10px;
}

.colors .tags {
	height: 54px;
}

/*
.colors .selected, .colors .selected:hover {
	background-color: #fff5d9;
	border: 1px solid #a37e10;
	cursor: default;
}

.colors_black, .colors_blue, .colors_gold, .colors_pink, .colors_purple, .colors_red, .colors_silver, .colors_green, .colors_orange, .colors_maroon {
	background-image: url(../images/major_sprite.png);
	background-repeat: no-repeat;
	border: 1px solid transparent;
	width: 45px;
	height:45px;
}

.colors_black:hover, .colors_blue:hover, .colors_gold:hover, .colors_pink:hover, 
.colors_purple:hover, .colors_red:hover, .colors_silver:hover, 
.colors_green:hover, .colors_orange:hover, .colors_maroon:hover, 
.sizes_large:hover, .sizes_small:hover{
	background-color: #c1c1c1;
	border: 1px solid #FFF;
	cursor: pointer;
}
.colors_black {
  background-position: 6px -304px;
}

.colors_blue {
  background-position: -40px -304px;
}

.colors_gold {
  background-position: -85px -304px;
}

.colors_pink {
  background-position: 6px -349px;
}
.colors_purple {
  background-position: -40px -349px;
}

.colors_red {
  background-position: -85px -349px;
}

.colors_silver {
  background-position: 6px -394px;
}

.colors_green {
  background-position: 6px -394px;
}

.colors_orange {
  background-position: 6px -394px;
}

.colors_maroon {
  background-position: 6px -394px;
}
*/

.colors_black, .colors_blue, .colors_gold, .colors_pink, .colors_purple, .colors_red, .colors_silver, .colors_green, .colors_orange, .colors_wine, .colors_brown {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  margin-top: 7px;
  margin-right: 10px;
}

.colors .selected, .colors .selected:hover {
	border: 1px solid #a37e10;
	cursor: default;
}

.sizes_large:hover, .sizes_small:hover {
	background-color: #c1c1c1;
	border: 1px solid #FFF;
	cursor: pointer;
}

.colors_black:hover, .colors_blue:hover, .colors_gold:hover, .colors_pink:hover, 
.colors_purple:hover, .colors_red:hover, .colors_silver:hover, 
.colors_green:hover, .colors_orange:hover, .colors_wine:hover, .colors_brown:hover {
  border: 1px solid #FFF;
	cursor: pointer;
}

.colors_black {
  background: #000000;
  background: -moz-linear-gradient(45deg, #333 0%, #000000 100%);
  background: -webkit-linear-gradient(45deg, #333 0%,#000000 100%);
  background: linear-gradient(45deg, #333 0%,#000000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=1 );
}

.colors_blue {
  background-color: #0e61e1;
  background: -moz-linear-gradient(45deg, #4583e0 0%, #0e61e1 100%);
  background: -webkit-linear-gradient(45deg, #4583e0 0%,#0e61e1 100%);
  background: linear-gradient(45deg, #4583e0 0%,#0e61e1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4583e0', endColorstr='#0e61e1',GradientType=1 );
}

.colors_gold {
  background-color: #e1bf56;
  background: -moz-linear-gradient(45deg, #e0d862 0%, #e1bf56 100%);
  background: -webkit-linear-gradient(45deg, #e0d862 0%,#e1bf56 100%);
  background: linear-gradient(45deg, #e0d862 0%,#e1bf56 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d862', endColorstr='#e1bf56',GradientType=1 );
}

.colors_pink {
  background: #e53042;
  background: -moz-linear-gradient(45deg, #e76e7c 0%, #e53042 100%);
  background: -webkit-linear-gradient(45deg, #e76e7c 0%,#e53042 100%);
  background: linear-gradient(45deg, #e76e7c 0%,#e53042 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e76e7c', endColorstr='#e53042',GradientType=1 );
}

.colors_purple {
  background-color: #92278f;
  background: -moz-linear-gradient(45deg, #c439d3 0%, #92278f 100%);
  background: -webkit-linear-gradient(45deg, #c439d3 0%,#92278f 100%);
  background: linear-gradient(45deg, #c439d3 0%,#92278f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c439d3', endColorstr='#92278f',GradientType=1 );
}

.colors_red {
  background-color: #ab0534;
  background: -moz-linear-gradient(45deg, #af0508 0%, #ab0534 100%);
  background: -webkit-linear-gradient(45deg, #af0508 0%,#ab0534 100%);
  background: linear-gradient(45deg, #af0508 0%,#ab0534 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0508', endColorstr='#ab0534',GradientType=1 );
}

.colors_silver {
  background-color: #b6b7ba;
  background: -moz-linear-gradient(45deg, #b6b7ba 0%, #aaa 100%);
  background: -webkit-linear-gradient(45deg, #b6b7ba 0%,#aaa 100%);
  background: linear-gradient(45deg, #b6b7ba 0%,#aaa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6b7ba', endColorstr='#aaa',GradientType=1 );
}

.colors_green {
  background-color: #43B02A;
  background: -moz-linear-gradient(45deg, #68af56 0%, #43b02a 100%);
  background: -webkit-linear-gradient(45deg, #68af56 0%,#43b02a 100%);
  background: linear-gradient(45deg, #68af56 0%,#43b02a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68af56', endColorstr='#43b02a',GradientType=1 );
}

.colors_orange {
  background-color: #CB461D;
  background: -moz-linear-gradient(45deg, #fc8958 0%, #CB461D 100%);
  background: -webkit-linear-gradient(45deg, #fc8958 0%,#CB461D 100%);
  background: linear-gradient(45deg, #fc8958 0%,#CB461D 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8958', endColorstr='#CB461D',GradientType=1 );
}

.colors_wine {
  background-color: #982127;
  background: -moz-linear-gradient(45deg, #843c46 0%, #982127 100%);
  background: -webkit-linear-gradient(45deg, #843c46 0%,#982127 100%);
  background: linear-gradient(45deg, #843c46 0%,#982127 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#843c46', endColorstr='#982127',GradientType=1 );
}

.colors_brown {
  background-color: #4f2608;
  background: -moz-linear-gradient(45deg, #5c3519 0%, #4f2608 100%);
  background: -webkit-linear-gradient(45deg, #5c3519 0%,#4f2608 100%);
  background: linear-gradient(45deg, #5c3519 0%,#4f2608 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c3519', endColorstr='#4f2608',GradientType=1 );
}


/*| END: COLORS | *********************************************************/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*| START: SIZE | *********************************************************/


.sizes {
  margin-left: 10px;
  width: 311px;
}

.price2 {
  margin-left: 17px;
  padding: 0px 10px 0px 0px;
	float: left;
	font-size: 16px;
	line-height: 47px;
	height: 47px;
  text-shadow:0 1px 0 #fff;
}

.price2.first {
  margin-left: 0;
}

#tagSizes div {
 /* background-image: url(../images/misc_sprite.png);*/
  background-image: url(../images/major_sprite.png);
	background-repeat: no-repeat;
  width: 50px;
  height: 45px;
  border: 1px solid transparent;
}

.sizes_large {
	background-position: 0px -218px;
}

.sizes_small {
	background-position: -50px -219px;
}

.sizes .selected {
	border: 1px solid transparent;
}

.sizes .selected:hover {
	background-color: transparent;
	border: 1px solid transparent;
	cursor: default;
}

.sizes_large.selected {
  background-position: 0px -263px;
}

.sizes_small.selected {
  background-position: -50px -264px;
}




/*| END: SIZE | ***********************************************************/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*| START: TAG_PREVIEW | **************************************************/


#tag_preview {
  width:368px; 
  margin-right:50px;
}

.tagInformation {
	width: 826px;
	float: left;
}

.tagInformation .preview   {
	height: 350px;
	width: 360px;
	/*background-position: 0px -150px;*/
	margin-top: 14px;
	padding: 1px 1px;
  /*background-image: url(../images/misc_sprite.png);
	background-repeat: no-repeat;*/
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
          box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border: 1px solid #CDCDCD;
}

.tagInformation .enter  {
	height: 318px;
	width: 377px;
	margin-top: 10px;
}

.preview_tag {
	height: 350px;
	width: 360px;
	position: relative;
}

.preview_tag .size {
	position: absolute;
	left: 20px;
	top: 318px;
	font-size: 11px;
}

.preview_tag .side {
	position: absolute;
	left: 222px;
	top: 330px;
	font-size: 12px;
	font-weight: bold;
	width: 133px;
	text-align: right;
}

.preview .text {
	left: 105px;
	color:#FFF;
	position:absolute;
	white-space:nowrap;
	width: 139px;
	height:126px;
	top: 133px;
	overflow:hidden;
	font-size:12px;
	text-align: center;
	font-family: Comic Sans MS;
}

.preview .shadow {
	left: 106px; color:#999
}

.preview_bone_large{background-image:url(../images/preview_bone_large.png)}
.preview_bone_small{background-image:url(../images/preview_bone_small.png)}
.preview_circle_large{background-image:url(../images/preview_circle_large.png)}
.preview_circle_small{background-image:url(../images/preview_circle_small.png)}
.preview_heart_large{background-image:url(../images/preview_heart_large.png)}
.preview_heart_small{background-image:url(../images/preview_heart_small.png)}
.preview_hydrant_large{background-image:url(../images/preview_hydrant_large.png)}
.preview_hydrant_small{background-image:url(../images/preview_hydrant_small.png)}

/*| END: TAG_PREVIEW | ****************************************************/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*| START: TAG_INFO | *****************************************************/

#tag_info {
  width: 405px;
}

.enter .box {
	height: 300px;
	width: 367px;
	border: 1px solid #999;
}
.enter {
	padding-top: 35px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	position: relative;
}
.enter .details {
	height: 49px;
}
.enter .display {
	position: absolute;
	top: 0px;
	right: 15px;
	line-height: 34px;
	font-size: 12px;
	font-weight: bold;
}

.enter .inputs {
	height: 215px;
}
.enter .text {
	float: left;
	color: #FFF;
	margin-top: 8px;
}
.enter .switch {
	height: 27px;
	padding: 0px 0px 15px;
}

.tabs {
	position: absolute;
	left: 4px;
	top: 4px;
	width: 165px;
	height: 32px;
}

.tabs div {
	float:left;
	background-color: #000;
	background-image: -moz-linear-gradient(top, #676767 0%, #000000 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#676767), to(#000000));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF676767, endColorstr=#FF000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF676767, endColorstr=#FF000000)";
	height: 31px;
	width: 77px;
	cursor: pointer;
	line-height: 32px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	border: 1px solid #CDCDCD;
	border-bottom: 0px;
}
.tabs span {
	display: block;
	width:1px;
	height:32px;
	float:left;
}
.tabs .selected {
	width: 73px;
	cursor: default;
	color: #4b4b4b;
	background-color: #fff !important;
	background-image: none !important;
	filter: none;
  -ms-filter: none;
}

.box.white {
  padding-top: 0px;
  border:1px solid #CDCDCD;
  background-color: #fff !important;
  background-image: none !important;
  text-shadow: none;
  -webkit-border-radius: 5px;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius: 5px;
  -moz-border-radius-topleft: 0;
  border-radius: 5px;
  border-top-left-radius: 0;
  	-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
  filter: none;
  -ms-filter: none;
}

#tagForm {
  margin-top: 10px;
}

.display span {
	font-size: 20px;
	font-weight: bold;
}

.inputs {
  padding: 11px 8px 0px 8px;
	font-size: 12px;
}
.inputs .header {
	color: #9b9b9b;
	margin-bottom: 10px;
}
.inputs .input {
	height: 35px;
}
.input .title {
	float: left;
	width: 89px;
	text-align: right;
	font-size: 11px;
}
.input .inputLeft {
	float: left;
	width: 252px;
	font-size: 11px;
	margin-left: 8px;
}

.input strong {
	font-size: 12px;
}

.input input {
	line-height:23px;
	border-style:solid;
	border:1px solid #CDCDCD;
	height: 23px;
	width: 200px;
}

.switch .button {
	color: #efefef;
	text-align: center;
	cursor: pointer;
	font-size: 12px;
	float: left;
}

#char {
	display: block;
	float: right;
	line-height: 25px;
	height: 25px;
	margin-left:5px
}

.details {
  color: #fff;
	border: none;
  background-color: #000;
  width: 398px;
  margin-left: -15px;
  display: block;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.details .button {
	float: left;
	height: 31px;
	/*width: 130px;*/
	font-family: Verdana, Geneva, sans-serif;
	margin-top: 8px;
	margin-left: 10px;
	margin-right: 14px;
	cursor: pointer;
	border: 0;
	padding: 5px 10px 5px 10px;
  -webkit-border-radius:5px;
     -moz-border-radius:5px;
          border-radius:5px;
  font-weight:bold;
  text-align:center;
  
  border:1px solid #FFBD3A;
  border-top:1px solid #FFE69E;
  border-bottom:1px solid #FFBD3A;
  background-image: -moz-linear-gradient(top, #FFE69E 0%, #FFBD3A 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFE69E), to(#FFBD3A));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFE69E, endColorstr=#FFFFBD3A);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFE69E, endColorstr=#FFFFBD3A)";
  color:#333;
  text-shadow:0 1px 0 #FFD9A3;
  background-position: 0 !important;
  background-color: #FFE69E !important;
}

.details .button:hover {
  color:#000;
  background-image: -moz-linear-gradient(top, #FFF7C0 0%, #FFBD3A 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF7C0), to(#FFBD3A));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFF7C0, endColorstr=#FFFFBD3A);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFF7C0, endColorstr=#FFFFBD3A)";
  background-color: #FFF7C0 !important;
}

/*| END: TAG_INFO | *******************************************************/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*| START: PRODUCT_INFO | *************************************************/

.productInformation {
	width: 826px;
	float: left;
}

.productInformation .column {
	width: 398px;
}

.productInformation .info {
	font-size: 13px;
	padding-top: 10px;
}


/*| END: PRODUCT_INFO | ***************************************************/


/*| START: CART PAGE  | */

.cartView {
  width: 830px;
}

table.cartTable {
  width: 100%;
  text-shadow: none;
}

table.cartTable thead tr {
  background-color: #000; 
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  border: 1px solid #000;
}

table.cartTable thead tr th {
  padding: 5px;
}

table.cartTable tbody tr {
  background-color: #e7e7e9; 
  margin-top: 5px !important;
  border: 1px solid #ccc;
}

table.cartTable tbody tr td {
  padding: 5px 0px;
  text-align: center;
  margin-bottom: 5px !important;
}

td.shape div {
  margin: 0px auto;
}

td.text {
  padding: 2px;
}

td.text p {
  background-color: #F2F2F2;
  border: 1px solid #DDDDDD;
  font-size: 11px;
  height: 60px;
  padding: 5px;
  margin: 0px 10px;   
}

td.shape div.color {
  color:#7f7f7f;
  font-size: 12px;
	font-weight:bold;
}

td.pricing {
	background-color: #6f6f6f;
	color: #fff;
	font-size: 16px;
	font-weight:bold;
	width: 120px;
}

.input_qty {
  border: 1px solid #CDCDCD;
  padding: 2px;
}

td.pricing input {
  font-size: 12px;
}

div.total {
  width: 220px;
  float: right; 
  margin-top: 5px;
  font-size: 1em;
  height: 30px;
  margin-left: 10px;
}

.total h3 {
  width: 80px;
  text-align: center;
  font-size: 1em;
  height: 30px;
  line-height: 30px;
}

.total .price {
  font-size: 20px;
  font-weight: bold;
  line-height: 23px;
  float: right;
  padding: 5px;
}

.cart_button.blue {
  height: 21px;
  font-weight: bold;
  line-height: 20px;
  float: left;
  margin-left: 0px;
}

.cart_button.green {
  font-weight: bold;
  margin-right: 0px;
  font-size: 16px;
  margin-top: 15px;
}



/* CHECKOUT */

.carrier_logo {
	-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid #cdcdcd;
}

.checkoutBox {
  display: inline;
  float: left;
  margin-left: 0px;
  margin-right: 20px;
  width: 450px;
}

.checkoutBox.last {
  margin-right: 0px;
  width: 350px;
}


.checkoutBox label {
  font-weight: bold;
  display: inline-block;
  margin: 5px 5px 5px 0px;
  width: 139px;
  vertical-align: top;
  text-align: right;
}

.checkoutBox input, .checkoutBox textarea, .checkoutBox select {
  width: 290px;
  border: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 5px;
}

.checkoutBox input[type="checkbox"], .checkoutBox input[type="radio"] {
  width: 30px !important;
  margin-left: 0px;
  padding-left: 0px;
  border: none;
}

.checkoutBox select {
  width: 301px;
  background-color: #fff;
}

#exp_month {
  width: 60px;
  display: inline;
}

#exp_year {
  width: 100px;
  display: inline;
}

#cvv_code {
  width: 34px;
}

small {
  font-size: 0.7em;
  font-weight: normal;
}

.required.error {
  border: 1px solid #c66;
}

#tag_price_top {
  float: right;
  color: #f9f9f9;
  font-size: 12px;
  font-weight: bold;
  margin-top: -5px;
}

#tag_price_top .tag_price_unit {
  float: left;
  margin-left: 20px;
  text-align: center;
}

#tag_price_top .tag_price_unit_price {
  font-size: 32px;
  color: #fefefe;
}


#preview {
  float: left; 
  margin-right: 20px; 
  border: 1px solid #CDCDCD;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

#list {
  list-style-position: inside;
  font-size: 22px;
  line-height: 30px;
}

#top-banner {
  font-weight: bold;
  color: #fff;
  background-color: blue;
  text-align: center;
  padding: 5px 0px;
  font-size: 1.5em;
}

#payment_selection {
  margin: 0;
  padding: 10px 0;
}

#payment_selection li {
  list-style-type: none;
  padding: 10px 0;
  background-color: #f0f0f0 !important;
  background-image: -moz-linear-gradient(center top , #f0f0f0 0%, #d5d5d5 100%);
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  margin: 10px 0px;
}

#payment_selection li label {
  width: 300px;
  text-align: left;
}