/* CSS test code ================================ */
/* version 3 ... starting from scratch ========== */
/* This will be edited down for actual deployment */
/* right now it's pretty wasteful and inelegant   */
/* ============================================================ */
/* ====== FIRST THING - clear all the odd browser defaults      */
/* this should be edited down to just what is actually used     */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
input, p, blockquote, table, th, td, embed, object {
  padding: 0;
  margin: 0; 
}
table { 
  border-collapse: collapse;
  border-spacing: 0;
}
img, abbr { border: 0; }
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var {
  font-weight: normal;
  font-style: normal;
}
ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 1.0em; }
q:before, q:after { content: ''; }
a, ins { text-decoration: none; }

/* ============================================================ */
/* ============================================================ */
/* ====== now, the stuff to make the fixed header & footer work */
/* ====== it has to be this close to the top                    */
/* ============================================================ */
html {
  height:100%; max-height:100%;  /* height and IE fix */ 
  padding:0; margin:0; border:0; /* reset */
}

body {
  height:100%; max-height:100%;   /* height and IE fix */
  padding:0; margin:0; border:0;  /* reset */
  font-size:16px; 
  font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif; 
  color: #FF0000; /* whoops! text color */
  background: #303030 url(images/bkg2.jpg) 0px 70px; /* whoops! background color */
  background-attachment: fixed; 
  /* hide overflow:hidden from IE5/Mac */ 
  /* \*/ 
  overflow: hidden; 
  /* */ 
}

#wrapper {
  display:block;
  position:relative;
  z-index:3; /* near bottom */
  height:100%; max-height:100%;  /* height and IE fix */ 
  overflow:auto; /* want scroll bars */
}

#header {
  display:block; 
  margin:0; width:100%; /* resets - must come before position */
  position:fixed; top:0; right:18px; /* clear scroll bar */ 
  z-index:5; /* above wrapper */
  overflow: hidden; /* no scroll, no overflow */
  background:#111; /* must have background to cover content */
  border-bottom:2px solid #000;
  height:70px; /* changes for short */
}

#padtop { display:block; height:70px; } /* clear the header */



     /* IE6 fixes for the positioning */
     /* not as pretty, but legible */
* html #header {position:absolute;}

/* ==================================================================== */
/* ====== now, the extra formatting bits above and beyond the basics == */
.title_box {
  position: fixed;
  top:0; 
  left:112px; /* moves as logo resizes */
  z-index:20; } 
.title_box img { height:65px; } /* max 85px */

#logo 
{ position:absolute; 
  margin:0; 
  top:0; left:0; 
  display:inline;
  width:100px; /* max 163 */
  padding: 3px;
  z-index:20; }

/* turn off the logo by default */
#logo .rwplogoviz { display: none; }

#ordericon 
{ position:absolute; 
  margin:0; 
  bottom:2px; 
  left:2px; 
  display:inline;
  text-decoration: none; 
  z-index:6; }

#ordertext 
{ position:absolute; 
  margin:0; 
  bottom:2px; 
  left:110px; 
  display:inline; 
  z-index:7;
  text-decoration: none; 
  font-size:14pt; }

/* ==================================================================== */
/* ========== end of header / footer / content setup ================== */
/* ==================================================================== */

/* set some defaults for the page */
a
  { color:#E0D67C; }
a:hover, a:focus
  { color:yellow; }
P { 
  color: white;
  text-align:justify; 
  text-indent:2.5em; 
  line-height:1.3em;
  padding:.5em 1em; } /* top-bottom right-left */

/* formatting for horizontal bar */
.widebar {
  width:100%; }

div.center {
  width:96%;
  margin-right:auto;
  margin-left:auto;
}

#contentWrapper {
  position: relative;
  clear: both;
  width: 100%; /* layout fix - IE */
}

/* ============================================================ */
/* ================= Catalog Navigation Menu ================== */
/* ============================================================ */
#nav_menu { 
  position:absolute; 
  left:20px; 
  top:102px; /* changes as logo resizes */
  width:150px;
  margin: 0;
  z-index:26;
}

#nav_menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
}
#nav_menu li {
  margin: 2px 0 0;
  text-indent:6px;
  width:132px;
  overflow: hidden;
}
#nav_menu ul ul li {
  font-style:italic;
  margin-left: 26px;
  width:106px;
}
#nav_menu div {
  background: black;
  padding: 1px 1px 1px 10px;
  border: 1px solid #263030;
  color: #80868C;
}
#nav_menu a {
  display: block;
  background: #501010;
  padding: 1px 1px 1px 10px;
  border: 1px solid DarkSlateGray;
  text-decoration: none;
  color: #E0D67C;
}
#nav_menu a:hover,  #nav_menu a:focus{
  border: 1px solid yellow;
  background: #FFD700;
  padding: 1px 1px 1px 10px; /* need to repeat for FF "bouncing" */
  color: black;
}


/* IE 6 hack to make entire button clickable */
* html #nav_menu a { width: 1px; }


/* ============================================================ */
#footer {
  margin:0; width:100%; /* resets - must come before position */
  background:#111; 
  border-top:2px solid #000;
}
#company, #copyright {
  color:gray; 
  font-size:1.2em; 
  text-align:center; 
  text-indent:0; 
  margin-top:2px }
#copyright {
  font-size:.8em; }

/* ============================================================ */
/* ================= main content formatting ================== */
/* ============================================================ */

#content {
  margin-left: 168px; /* make room for sidebar -- resizes */
  margin-right: 4px; /* some room on right */
  padding: 0 15px 15px 10px;
  font-size: 1.2em;
}

#content h1 {
  font-size: 2em;
  font-weight: normal;
  font-style:italic;
  text-align: center;
  letter-spacing:1px;
  word-spacing:.3em;
  margin-bottom: 5px;
  color: white;
}

#content h2 {
  background: url(images/bangpaw46.gif) no-repeat left 0px;;
  padding: 0 0 0 56px;
  min-height:50px;
  font-size: 1.25em;
  font-weight: normal;
  font-style:italic;
  text-align:justify;
  margin: .5em 1em ;
  color: gold;
}

#content h2:first-letter { font-size:52px; }

#content p.answer {
  margin-left: 2.5em;
}

#content .notice { 
  width:80%;
  margin-right:auto;
  margin-left:auto;
  font-size:180%; 
  font-weight:bolder; 
  text-indent:0;
  letter-spacing:1px;
  word-spacing:2px;
  background-color:black;
  border: medium solid silver; 
  color:yellow; 
  text-align:center;
  margin-top:12px; 
  margin-bottom:6px; 
  padding:8px;
}

/* ====================================================== */
/* ====== Item CSS ====================================== */
/* ====================================================== */

/* ====  The following three items are for the shading behind items */
/* ====  Works in Firefox and Chrome, doesn't in IE8 */
div.item_container {
  position:relative; 
  /* min-width: 440px; */
  max-width: 980px;
  margin: 0 0 1.5em 0;
}
div.item_content {
  position:relative;
}
div.item_background {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:Black;
  /* These three lines are for transparency in all browsers. */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity:.5;
}
/* =========================== */
/* now the item "header" CSS */
.item_header { 
  font-size:1.6em;
  font-weight:bolder;
  letter-spacing:1px;
  color:white;
  line-height:1.3em;
  background-color:#501010;
  border-top: medium solid silver; 
  border-left: medium solid silver;
  margin-top:12px; 
  margin-bottom:12px;
  padding-bottom:5px;
  padding-left:1em;
}
/* fix for chrome bug */
.item_header li:first-child {
  color:white
}
.item_header li+li {
  font-size:1.2em;
  margin-right:2em;
  display:inline;
}
.item_header li+li+li {
  font-size:1em;
  font-style:italic;
}
.item_header li+li+li+li {
  margin-left:0;
  display:block;
}
/* =========================== */
.item_desc {
  max-width:40em;
}
.item_sculpt {
  font-size:.8em;
  font-style:italic;
  font-weight: lighter;
  text-align:left; 
  text-indent:4em;
}
img.left { float:left; margin: 16px 16px 8px 0; }
img.right { float:right; margin: 16px 0 8px 16px; }
/* combined with a width=000px style on each block */
/* this will produce a centerd max-width image */
.item_content .center {
  margin-left:auto; 
  margin-right:auto; 
  max-width:100%;
}



/* ====================================================== */
/* ==== The folowing is for screen size changes */
/* ==== note that all size effects *must* come last */
/* ==== as CSS will use the last definition */
/* Except, of course, in IE, which is broke */
/* class for the "what state am I in" display */
/* this bit is used for testing only */
.status_is { float:right; font-size:10pt; color:gray; }
.status_is span { display: none; }
span.unk_size { display: inline-block; }


/* test for small */
@media screen and (max-width: 680px) {
  span.viewsmall { display: inline-block; color:orange;}
  span.unk_size { display: none; }

  body { font-size:12px; }
  #header, #padtop { height:80px; }
  .title_box { left:134px; }
  .title_box img { height:65px; }
  #logo { width:120px; }
  #logo .rwplogoviz  { display: inline-block; }
  #nav_menu { left:12px; top:168px; }
  #nav_menu li { width:108px; }
  #nav_menu ul ul li { margin-left: 22px; width:86px; }
  #content { margin-left: 132px; }
}

/* test for large */
@media screen and (min-width: 1000px) {
  span.viewlarge { display: inline-block; color:blue;}
  span.unk_size { display: none; }

  body { font-size:18px; }
  #header, #padtop { height:80px; }
  .title_box { left:180px; }
  .title_box img { height:85px; }
  #logo { width:163px; }
  #logo .rwplogoviz  { display: inline-block; }
  #nav_menu { left:22px; top:228px; }
  #nav_menu li { width:142px; }
  #nav_menu ul ul li { margin-left: 26px; width:116px; }
  #content { margin-left: 180px; }
}

/* test for medium */
/* default CSS3 design! */
@media screen and (min-width: 681px) and (max-width: 999px) {
  span.viewmedium { display: inline-block; color:yellow;}
  span.unk_size { display: none; }
  
  #header, #padtop { height:80px; }
  .title_box { left:156px; }
  .title_box img { height:75px; }
  #logo { width:144px; }
  #logo .rwplogoviz  { display: inline-block; }
  #nav_menu { left:20px; top:200px; }
  #nav_menu li { width:132px; }
  #nav_menu ul ul li { margin-left: 26px; width:106px; }
  #content { margin-left: 168px; } 
}

/* test for short */
/* also default non-CSS3 design */
/* we're just resetting values as needed */
@media screen and (max-height: 460px) {
  span.viewshort { display: inline-block; color:orange;}

  #header, #padtop { height:70px; }
  .title_box { left:112px; }
  .title_box img { height:65px; }
  #logo .rwplogoviz  { display: none; }
  #logo { width:100px; }
  #nav_menu { top:102px; }
}

/* test for iPhone -- turned off for now */
/* @media screen and (max-device-width: 480px) {
  .iphone {
    background: #ccc;
  }
} */
210 180