@charset "UTF-8";
body {
	behavior: url("csshover.htc"); 
	background: #000000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.4;
}
tr {
	font-size: 90%;
}

html, body { /* this rule keeps the page from appearing to shift when going from a long page, with scroll bar to a short page without on some browsers */
	height: 100%;
	margin-bottom: 1px;
}

#ProductDetailsImage {
	margin-right: 12px;
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
}

/* ~~~~~~~~~~~~~~~ ELEMENT SELECTORS ~~~~~~~~~~~~~~~ */
p, ul, ol, dl { /* when using percentage font sizing, be aware that any of these elements nested in each other will decrease the font-size of the nested element accordingly. The rule that follows shows how to offset that */
	font-size: 80%;	
	color: #000000;		
}
ul p, ul ul, ul ol, ol p, ol ul, ol ol { /* the descendent selectors in this rule keep nested elements from getting exponentially smaller. If you nest more deeply you may need to add a selector to it */
	font-size: 80%;	
}
a:link, a:visited { /* page wide links (unless overridden by a more specific selector) */
	color: #990000;
/*	text-decoration: underline; */
	text-decoration: none; 
	font-weight: bold;
}
a:hover, a:active, a:focus { /* must be in this order and allows the hover style to be seen for keyboard navigators as well as mouse users */
	text-decoration: none;	
}
a img { /* this rule removes the default border on any image that is linked */
	border: none;	
}


/* ~~~~~~~~~~~~~~~ CONTAINER STYLES ~~~~~~~~~~~~~~~ */
#container {
	background: #990000;
	width: 98%;  /* this is the width of the main slice minus the 9px of padding on each side */
	min-width: 1050px;
	height: auto;
	/*background: #FFF url(../images/container_back.jpg) repeat-y; /* repeat-y causes the image to repeat vertically */
	/*padding-left: 9px; /* due to the box model, this must be added to the width to create the width of the slice */
	/*padding-right: 9px; /* due to the box model, this must be added to the width to create the width of the slice */
	/*padding-bottom: 15px; /* this creates a little white space before the close of the page */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 


/* ~~~~~~~~~~~~~~~ HEADER STYLES ~~~~~~~~~~~~~~~ */
#header {
	background: #fde7a2 url(../images/header_bg.jpg) top right no-repeat; /* this color should match the color your logo gradient ends on */
	padding: 0;
	margin: 0; /* do not add any margin on this selector or the slice on the #container below it will show */
}
#action {
	width: 65%;
	height: auto;
	float: right;
	font-size: 160%;
	line-height: .8; /* this keeps the space around the call to action from pushing the navigation down when text size is increased */
	padding: 25px 9px 0 0; /* don't use margin as it can cause the doubled float margin bug in IE */
	margin-top: 0; /* this adjusts the positioning of the call to action in the header */
	text-align: right;
}	
/*#navlist {
	background: #787B6E url(../images/nav_bar.jpg) repeat-x left top;  this image begins the gradient for the nav bar, and thus, is positioned at the top of the div -- the color used is sampled from the very bottom of the gradient image -- to make a seamless transition if the text is larger than anticipated 
}*/
#header ul {
	background: #960001 url(../images/nav_bar.jpg) repeat-x left top;
	margin: 0;
	padding: 0;
	padding-left: 10px; /* creates alignment that matches the logo and navigation in the sidebar1 */
	line-height: 2.5; /* this creates the height of the nav bar */
	font-size: 95%;
	clear:both;
}
#header li {
	list-style: none;
	display: inline;
	margin: 0;
}
#header li a {
	text-decoration: none;
	padding: 7px 20px 7px 10px; /* this padding fills out the button -- change the left and right padding to space the list items more, or less, apart */
	color: #FEF8EA;
	background: url(../images/nav_divide.gif) no-repeat right center; /* the circle image here divides the buttons visually */
	font-weight: normal;
}
#header li a.last { /* this should be placed on the last item in the list so there's no cirlce image to its right */
	background: none;	
}
#header li a:hover, #header li a:active, #header li a:focus { /* must be in this order and allows the hover style to be seen for keyboard navigators as well as mouse users */
    color: #fde7a2;
	text-decoration:none;
}
.home #home a, .about #about a, .contact #contact a, .cart #cart a, .checkout #checkout a, .myaccount #myaccount a  { /* this selector will allow you to add a class to the body that matches the ID on the top menu and causes it to show a persistent page indicator (you are here) - if you change the menu, feel free to add more using the pattern here */
	font-weight: bold;
	color: #fde7a2;
}

#search_bar_header {
	float: right; 
	padding-right: 9px;
	margin: 0;
}

/* ~~~~~~~~~~~~~~~ HOUDINI LOCATIONS ~~~~~~~~~~~~~~~ */

#mgm_grand a:link, #mgm_grand a:visited {
	background: url(../images/locations/mgm_off.gif) no-repeat;
	width: 80px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#mgm_grand a:active, #mgm_grand a:hover {
	background: url(../images/locations/mgm_on.gif) no-repeat;
	width: 80px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#caesars a:link, #caesars a:visited {
	background: url(../images/locations/caesars_off.gif) no-repeat;
	width: 172px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#caesars a:active, #caesars a:hover {
	background: url(../images/locations/caesars_on.gif) no-repeat;
	width: 	172px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#venetian a:link, #venetian a:visited {
	background: url(../images/locations/venetian_off.gif) no-repeat;
	width: 84px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#venetian a:active, #venetian a:hover {
	background: url(../images/locations/venetian_on.gif);
	width: 	84px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#factory a:link, #factory a:visited {
	background: url(../images/locations/factory_off.gif) no-repeat;
	width: 139px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#factory a:active, #factory a:hover {
	background: url(../images/locations/factory_on.gif) no-repeat;
	width: 	139px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#planet_hollywood a:link, #planet_hollywood a:visited {
	background: url(../images/locations/ph_off.gif) no-repeat;
	width: 106px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#planet_hollywood a:active, #planet_hollywood a:hover {
	background: url(../images/locations/ph_on.gif) no-repeat;
	width: 	106px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#nyny a:link, #nyny a:visited {
	background: url(../images/locations/nyny_off.gif) no-repeat;
	width: 132px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#nyny a:active, #nyny a:hover {
	background: url(../images/locations/nyny_on.gif) no-repeat;
	width: 	132px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#pier_39 a:link, #pier_39 a:visited {
	background: url(../images/locations/pier39_off.gif) no-repeat;
	width: 126px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#pier_39 a:active, #pier_39 a:hover {
	background: url(../images/locations/pier39_on.gif) no-repeat;
	width: 	126px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#disney a:link, #disney a:visited {
	background: url(../images/locations/disney_off.gif) no-repeat;
	width: 64px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#disney a:active, #disney a:hover {
	background: url(../images/locations/disney_on.gif) no-repeat;
	width: 	64px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#munari a:link, #munari a:visited {
	background: url(../images/locations/munari_off.gif) no-repeat;
	width: 100px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

#munari a:active, #munari a:hover {
	background: url(../images/locations/munari_on.gif) no-repeat;
	width: 	100px;
	height: 20px;
	margin: 0;
	padding: 0;
	display:block;
	
}

/* ~~~~~~~~~~~~~~~ WRAPPER STYLES ~~~~~~~~~~~~~~~ */

#wrapper1 {
	position: relative;
	text-align: left;
	width: 100%;
	background: #FFF url("../images/right_sidebar_bg.gif") repeat-y top right;

}

#wrapper2 {
	position:relative;
	text-align:left;
	width: 100%;
	background: url("../images/left_sidebar_bg.gif") repeat-y top left;

}



/* ~~~~~~~~~~~~~~~ SIDEBAR1 STYLES ~~~~~~~~~~~~~~~ */
#sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 20px 9px 25px 9px; /* remember to add the padding on each side to the width to arrive at the space this div will take up in your layout */
	margin: 0;
	z-index: 100;
	position:relative;
	voice-family: inherit;
	voice-family: "\"}\"";

}
#sidebar1 h1 {
	color: #000;
	font-size: 110%;
}
#sidebar1 h2 {
	color: #797B6F;
	font-size: 100%;
	/*margin-top: 50px; /* this creates the space between the navigation and the H2 element below */
}

/* NOTE: sidebar1 navigation is contained in the SpryMenuBarVertical.css file */




/* ~~~~~~~~~~~~~~~ MAINCONTENT STYLES ~~~~~~~~~~~~~~~ */
#mainContent { 
	padding: 0 250px 25px 250px; /* remember that padding is the space inside the div box (and is added to the total width) and margin is the space outside the div box */
	min-width: 450px;
	min-height: 1425px;
	margin-top: -10px;
	position: relative;
} 
#mainContent h1 {
	color: #990000;
	font-size: 100%;
	padding-top: 20px;
}
#mainContent h2 {
	color: #990000;
	font-size: 130%;
}
#mainContent h3 {
	color: #990000;
	font-size: 110%;
}
#mainContent h4 {
	font-size: 100%;	
}


/* ~~~~~~~~~~~~~~~ SIDEBAR2 STYLES ~~~~~~~~~~~~~~~ */
#sidebar2 {
	float: right; /* since this element is floated, a width must be given */
	width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0 9px 25px 9px; /* remember to add the padding on each side to the width to arrive at the space this div will take up in your layout */
	margin: 0;
	z-index: 99;
	position:relative;
	voice-family: inherit;
	voice-family: "\"}\"";
}
#sidebar2 h1 {
	color: #000;
	font-size: 110%;
}
#sidebar2 h2 {
	color: #797B6F;
	font-size: 100%;
	/*margin-top: 50px; /* this creates the space between the navigation and the H2 element below */
}



/* ~~~~~~~~~~~~~~~ FOOTER STYLES ~~~~~~~~~~~~~~~ */
#footer {
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	text-align: center;
	width: 945px;
	padding: 20px 9px;
	margin: 0 auto;
	/*background: url(../images/container_bottom.jpg) no-repeat center top;*/
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	color: #FFFFFF;
	font-size: 80%;
}
#FeaturedCallout {
	margin: 0;
	width: 95%;
	/*width: 200px;*/	
	/*float: left;*/
}
#FeaturedCallout a {
	margin-left: 0;
}
#sidebarContent {
	padding-top: 0px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
}
#sidebarContent h2 {
	font-size: 14px;
	font-weight: bold;
	margin-top: -5px;
}

/* ~~~~~~~~~~~~~~~ MISCELLANEOUS CLASSES ~~~~~~~~~~~~~~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


/* ~~~~~~~~~~~~~~~~~~ Contact Form Styles ~~~~~~~~~~~~~~~~~~~~~~~ */

.contactform p{
	width: 65%;
	margin: 0;
	padding: 5px 0 8px 0;
	padding-left: 155px; /*width of left column containing the label elements*/
	border-top: 1px dotted gray;
	height: 1%;
}

.contactform label{
	font-weight: bold;
	float: left;
	margin-left: -155px; /*width of left column*/
	width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.contactform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
	width: 180px;
}

.contactform textarea{
	width: 250px;
	height: 150px;
}


#sidebarCartLinks {
	font-size: 12px;
	width: 160px;
}

.button {
display: inline-block;
padding: 7px 12px;
width: auto; /* IE 7 input button fix */
overflow: visible; /* IE7 input button fix */
font: bold 14px sans-serif;
text-decoration: none;
outline: none;
cursor: pointer;

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
behavior: url(border-radius.htc);

-webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
-moz-transition: -moz-box-shadow 0.3s ease-in-out;
-o-transition:  background-color 0.3s ease-in-out;
transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.button:active {
position: relative;
top: 1px;
}

.orange {
border: 1px solid #d19900;
color : #ffffff;
background: #f8b500 url(/svg/grad-orange.svg) 0 0 no-repeat;

text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
}

.orange:hover {
color : #ffffff;
background: #f7c331 url(/svg/grad-orange-hover.svg) 0 0 no-repeat;

background: -moz-linear-gradient(top, #fcf8ed 0%, #fcdb81 50%, #f7c331 51%, #faecc5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcf8ed), color-stop(50%,#fcdb81), color-stop(51%,#f7c331), color-stop(100%,#faecc5));
-webkit-box-shadow: 0 0 12px #f7c331;
-moz-box-shadow: 0 0 12px #f7c331;
box-shadow: 0 0 12px #f7c331;
}

.red {
border: 1px solid #000000;
color : #ffffff;
background: #000000 url(grad-red.svg) 0 0 no-repeat;

text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
background: -moz-linear-gradient(top, #870001 0%, #340000 50%, #000000 51%, #690001 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#870001), color-stop(50%,#340000), color-stop(51%,#000000), color-stop(100%,#690001));
}

.red:hover {
color : #ffffff;
background: #160000 url(grad-red-hover.svg) 0 0 no-repeat;

background: -moz-linear-gradient(top, #960001 0%, #440000 50%, #160000 51%, #780001 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#960001), color-stop(50%,#440000), color-stop(51%,#160000), color-stop(100%,#780001));
-webkit-box-shadow: 0 0 12px #160000;
-moz-box-shadow: 0 0 12px #160000;
box-shadow: 0 0 12px #160000;
}