/* To make fonts work consistently on IE:
1) Convert the TTF to WOFF and EOT using font2web.com or http://www.fontsquirrel.com/tools/webfont-generator
2) upload those fonts and include them in the SRC statement.
*/
@font-face {
        font-family: 'Arial Black'; /* IE wants the exact font name here */
        src:    url('/common/fonts/ariblk.ttf') format('truetype'),
                url('/common/fonts/ariblk.eot') format('embedded-opentype'),
                url('/common/fonts/ariblk.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'Miso Regular'; /* IE wants the exact font name here */
        src:    url('/common/fonts/miso-regular.ttf') format('truetype'),
                url('/common/fonts/miso-regular.eot') format('embedded-opentype'),
                url('/common/fonts/miso-regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}

* {
	font-family : Arial, Helvetica, sans-serif;
	font-size : 11pt;
	color: #3A0808;
}

html, body {
	margin: 0;
	padding: 0;
        /* These next two get rid of that small grey border around the page in IE */
        border: 0;
        outline: 0;
        height: 100%;
	scrollbar-base-color: #dddddd;
}
html {
	background-color: #858585;
	background-image: url(images/site-background.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
.page_body {
        position: relative;
        width: 1000px;
        height: 100%;
        margin: 0px auto; /* Center the div horizontally */
        padding: 0;
        background-color: transparent;
        /* Shadow around center page?
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.4);
        -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.4);
	*/
}
 
.text_body {
	padding-top: 15px;
	padding-bottom: 30px;
	padding-left: 25px;
	padding-right: 20px;
	background-color: #FFFFFF;
}

.header {
        height: 90px;
	padding-top: 10px;
	padding-left: 18px;
	padding-bottom: 5px;
	padding-right: 0px;
	/* Create a gradient from black on the left to transparent on the right */
	background: #909090;
	background: rgba(0,0,0,1);
	background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(144,144,144,0) 98%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,1)), color-stop(98%, rgba(144,144,144,0)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(144,144,144,0) 98%);
	background: -o-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(144,144,144,0) 98%);
	background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(144,144,144,0) 98%);
	background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(144,144,144,0) 98%);
}

.header_blurb {
	position: absolute;
	top: 0;
	right: 0;
	font-size : 10pt;
	color: #FFFFFF;
	text-align: right;
	padding-top: 30px;
	padding-right: 2px;
}

.bottomrow {
        padding-top: 25px;
        padding-bottom: 30px;
        padding-left: 25px;
        padding-right: 20px;
        background-color: #fbf3e4;
}

.footer {
        font-family: 'Miso Regular', Arial, Helvetica, sans-serif;
        color: #000000;
        font-size: 11pt;
        height: 30px;
        padding-left: 20px;
        padding-right: 15px;
        background-color: #FFFFFF;
}
.footer_text {
        font-family: 'Miso Regular', Arial, Helvetica, sans-serif;
        color: #000000;
        font-size: 11pt;
}
.spacing_row {
	height: 12px;
}

/* Links */ 
a:link, a:visited {
	color: #e87d0f;
	color: #b87a00;
	text-decoration: none;
}
a:hover, a:active {
	text-decoration: underline;
}

/* ================================================================
   Styles for Nav bar 
*/
.nav_block1 {
        display: block;
        position: relative;
        padding-top: 5px;
        padding-bottom: 5px;
}
.nav_block2 {
        display: block;
        position: relative;
        padding-top: 6px;
        padding-bottom: 6px;
}
/* Link styling for nav_block1 */
a.nav1 {
	color: #FFFFFF;
	text-decoration: none;	
	display: inline-block;
        margin-top: 2px;
        margin-bottom: 2px;
        margin-left: 2px;
        margin-right: 7px; /* Controls the horizontal spacing of the nav links in the nav bar */
	transition: all 0.3s ease-in-out;
}
a:hover.nav1, a:active.nav1 {
	color: #f78e22;
}
/* Link styling for nav_block2 */
a.nav2 {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size: 10pt;
	text-transform: uppercase;
	letter-spacing: -0.07em;
	color: #FFFFFF;
	background-color: #e87d0f;
	transition: all 0.3s ease-in-out;
	text-decoration: none;	
	display: inline-block;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 7px; /* Controls the horizontal spacing of the nav links in the nav bar */
}
a:hover.nav2, a:active.nav2 {
	background-color: #000000;
}

/* Style text and images in the pulldown menus */
a:link.menu_item, a:visited.menu_item {
	color: #3A0808;
}
a:hover.menu_item, a:active.menu_item {
	text-decoration: none;
}
a:hover.menu_item img, a:active.menu_item img {
	border: 1px solid #f78e22;
}
.menu_item img {
	height: 100px;	
	border: 1px solid transparent;
	transition: border 0.3s ease-in-out;
}
.menu_popup {
        position: absolute;
        visibility: hidden;
	top: 31px;
        padding: 10px;
        z-index: 200; /* Make this larger than z-index for anything else */
        border-radius: 4px;
	border: 2px solid #000000;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
        background: #FFFFFF;
	/* No gradient background
	background-image: -moz-linear-gradient(top,#945306,#603503);
	background-image: -webkit-linear-gradient(top,#945306,#603503);
	background-image: -o-linear-gradient(top,#945306,#603503);
	background-image: linear-gradient(top,#945306,#603503);
	*/
}

/* Creates the Up Triangle. http://css-tricks.com/examples/ShapesOfCSS/
   http://www.red-team-design.com/css3-dropdown-menu 
.menu_popup:after {
	content: '';
	position: absolute;
	left: 20px;
	top: -11px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 12px solid #945306;
}
*/

/* ================================================================
   End Styles for Nav bar 
*/


/* Links for scrolling through photos */
a:link.photonav, a:visited.photonav {
    font-size : 8pt;
    text-decoration: none;	
}
a:hover.photonav, a:active.photonav {
    text-decoration: underline;
}

SMALL, .small, .blog_date  {
	font-size : 8pt;
	color: #6A3838;
	/*line-height: 0.80; Doesn't seem to affect the line height */
}
.small_dark {
	font-size : 8pt;
	color: #AE8449;	
}

H2, .heading2, .blog_name  {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size : 26pt;
	margin-top: 0px;
	text-transform: uppercase;
	letter-spacing: -0.08em;
	color : #444444;
}
H2, H3, H4, H5 {
	margin-bottom: 10px;
}
.blog_name {
	display: inline-block;
}

H3, .heading3, .blog_title, .heading_blog  {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size: 19pt;
	margin-top: 0px;
	text-transform: uppercase;
	letter-spacing: -0.08em;
	line-height: 0.95;
	color: #444444;
}
.heading3light  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19pt;
	text-transform: uppercase;
	letter-spacing: -0.08em;
	line-height: 0.95;
	color: #f78e22;
}

H4, .heading4, a.heading4  {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size: 13pt;
	margin-top: 0px;
	text-transform: uppercase;
	letter-spacing: -0.07em;
	line-height: 0.90;
	color: #444444;
}

H5, .heading5, a.heading5  {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size: 12pt;
	margin-top: 0px;
	text-transform: uppercase;
	letter-spacing: -0.06em;
	line-height: 12pt;
	color: #444444;
}
.white {
	color: #FFFFFF;
}

.heading3b  {
	font-size : 13pt;
	font-weight: normal;
	font-style : italic;	
	color : black;
}

.press_cover {
	width: 260px;
}

.pullquote  {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size: 14pt;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	line-height: 0.95;
	/*color: #5A2828;*/
	color: #e1be9c;
}

.callout_box {
	background-color: #EEEEEE;
	padding:10px;	
	font-size : 10pt;
}
.callout_box > b, callout_box > strong {
	font-size : 10pt;
}

.price  {
    font-weight: bold;
    font-style : italic;	
    color : #CEA469;
}

.customer_list, .customer_list a {
	font-weight: bold;
	/*color: #f78e22;*/
	color: #9d7a58;
}

select, input, textarea {
	background-color: #fbf3e4;
	padding: 4px;
	border: 1px solid #874B05;
}

.button, a.button {
	-webkit-appearance: none; /* Remove Safari's style overrides for buttons */
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
        font-size: 10pt;
	border: none;
        text-transform: uppercase;
        letter-spacing: -0.07em;
        color: #FFFFFF;
        background-color: #e87d0f;
        text-decoration: none;
        display: inline-block;
	padding: 4px;
        padding-left: 10px;
        padding-right: 10px;
	cursor: hand;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}
*:hover.button, *:active.button {
	background-color: #000000;
}

.see_all {
	float: right;
	margin-left: 1em;
}

/* This is for displaying checkboxes and radio buttons, which look
bad when formatted using the above style */
input.box {
        background-color: black;
        border: none;
}
select.box {
        background-color: black;
        border: none;
}

hr {
	border: none;
	color: #874B05;
	background-color: #874B05;
	height: 1px;
}
hr.blog_rule {
	clear: both;
}

.photo_border {
	border: 2px solid #aaaaaa;
}
.photo_corners {
	border-radius: 4px;
}

.align_left {
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	float: left;
}

.align_left_border {
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	float: left;
	border: 2px solid #874B05;
}

.align_right {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 15px;
	float: right;
}

.align_right_border {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 15px;
	float: right;
	border: 2px solid #874B05;
}
.notop {
	margin-top: 0px;
}

.dealer_table {
	border: 0;
}
.dealer_table tr, .dealer_table td {
	border: 1px solid #874B05;
	border-collapse: collapse;
	background-color: #3A0808;
        padding: 8px;
}
.dealer_normal tr, .dealer_normal td {
	border: 0;
        padding: 0;
}
.dealer_header tr, .dealer_header td {
	border: 0;
	padding: 0;
	background-color: black;
}
.dealer_sep tr, .dealer_sep td {
	border: 0;
        padding: 0;
	background-color: #E1B772;
	background-image: url(images/table_header_center.jpg);
}

/* for Ordering table */
.ordertable { border: 1px solid #874B05; border-collapse: collapse; }
.ordertable td { border: 1px solid #874B05; }
.ordertable th { border: 1px solid #874B05; background-color: #cccccc; }
.ordernormal, .ordernormal td { border: 0; }

ul.noindent {
	margin-top: 5px;
	margin-left: 17px;
	padding-left: 0px;
	margin-bottom: 5px;
}
ul.compact, ol.compact {
	margin-top: -0.8em;
}

/* Styles for the home page slider */
.slideContent {
	position: relative;
	height: 400px; /* Height of slider - border */
        width: 1000px; /* Width of slider - border */
	color: #FCEDC2;
	background-color: #FFFFFF;
}
.slider_text {
	position: absolute;
	top: 50px;
	right: 20px;
	/* Vertically center it 
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
         /Vertically center the div */
	background-color: rgba(0,0,0,0.5);
	padding: 10px;
	border-radius: 10px;
}
.slider_heading {
	color: #FFFFFF;
}
img.slider_instock {
	height: 320px;
}
/* /Styles for the home page slider */

/* Styles for the home page boxes */
.home_box {
	/*float: left;*/
	position: relative;
	background: #FFFFFF;
}
.home_box img {
	height: 224px; /* This controls the height of all boxes */
        border: 1px solid #000000;
}
.home_box_spacer {
	/*float: left;*/
	height: 15px;
	width: 15px;
}
.home_box_title {
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	/*padding-left: 5px;  Somehow, adding this extends the right side of the box also, so don't do it. */
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size: 12pt;
	text-transform: uppercase;
	letter-spacing: -0.07em;
	color: #FFFFFF;
}
img.home_blog {
        border: none;
        /*max-height: 200px;*/
        max-width: 200px;
}
.home_blog_text {
        padding: 10px;
	padding-top: 30px;
}
/* /Styles for the home page boxes */

/* Styles for the instrument home page boxes */
td.instrument_home_box {
        border: 1px solid #cccccc;
	padding: 5px;
}
td.instrument_home_box_black {
        border: 1px solid #cccccc;
	padding: 5px;
	background-color: #000000;
}

/* Styles for the instrument pages. */

.instrument_large img {
	max-width: 800px;	
}
.instrument_large {
	position: relative;
}
.instrument_thumbnail img {
	width: 120px;	
        border: 1px solid #cccccc;
	margin-bottom: 2px;
	transition: border 0.3s ease-in-out;
}
.instrument_thumbnail a:hover img, .instrument_thumbnail a:active img {
	border: 1px solid #f78e22;
}
.instrument_thumbnail_images {
	width: 142px; /* Match the img width + Borders + Scroll bar width (20px) */
	height: 280px;
	overflow: auto; /* Scroll when there are more images than can fit in this space */
}
.instrument_caption {
	text-align: center;
	position: absolute;
	bottom: 2em;
	right: 1em;
	font-size: 0.8em;
	color: #888888;
}
.instrument_thumbnail .instrument_caption {
	display: none;
}

/* For pop-up messages */
#opaque {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        z-index: 100;
        visibility:hidden;
        background-color: black;
        filter: alpha(opacity=60);
        opacity: 0.6;
}

/* For styling video popup windows */
.video_popup {
        position: fixed; 
	/* Don't use visibility:hidden for showing YouTube iFrames.  A div with "visibility:hidden" loads the div when the page loads. On certain browsers like mobile Safari this causes the Youtube iFrame to load visibly on the page ignoring the containing div that is set to "visibility:hidden". So all the iFrames on the page load at page load -- bad. To fix this set the containing div to "display:none". This tells the browser to not load the content at all. Change it to display:block when you want to make it visible. */
	display: none;
        top: 100px;
	text-align: center;
        left: 50%;
        margin-left: -260px; /* set to negative number 1/2 the div width */
        background-color: #fbf3e4;
        padding: 5px;
        border: 2px solid #000000;
	border-radius: 4px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
        z-index: 200; /* Make this larger than z-index for opaque */
}
/* X in a circle in the top of a div. 
   Invoke using: <a class="close_x" href="something">X</a>
   within the pop-up div.
*/
a.close_x {
        position:absolute;
	right: -13px;
	top: -15px;
	width: 16px;
	height: 16px;
        color: white;
        background-color: #e87d0f;
        border: 2px solid #FFFFFF;
	border-radius: 10px;
        padding-top: 1px; 
        padding-left: 1px; 
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
        box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
}
a.close_x:hover {
        background-color : #000000;
}

.construction {
        position: absolute;
        visibility: hidden;
	width: 250px;
}
/* Adding display:block to the images seems to remove the 5PX bottom padding */
/* that we get on images in <td>s with HTML5 doctype                         */
/* But only do this for images within <td>s.                                 */
img {
        display: block;
}

/* Enclose the addThis buttons so I can position them */
.addthis_position {
	float: right;
	padding-top: 5px;
	padding-right: 4px;
}

.question {
	color: red;	
	font-weight: bold;
}
.custom_spacing {
	display: inline-block;
	margin-top: 40px;
}

.players_photo {
	border: 1px solid #000000;
	max-height: 200px;
	display: inline;
}

.wood_photo {
	max-width: 300px;
	max-height: 300px;
}
.wood_photo_large {
	max-width: 600px;
	max-height: 600px;
}

#infoWindow {
	color: black;
	width: 200px;
	height: 140px;
}
#infoWindow b {
	font-size: 14pt;
	font-weight: normal;
	font-style: italic;		
	color: black;
}
#infoWindow a, #infoWindow a:hover {
	color: red;
	background-color: transparent;
}