/* =universals
  These rules are applied to all elements unless otherwise specified */
/* * { margin: 0; padding: 0; } */

html, body {
   /*cursor: url(http://www.quackit.com/pix/smile.gif),auto; */
   /* cursor: url(http://www.totallyfreecursors.com/details.cfm/id/4315/Tail%202.htm), auto; */
}

a {
   outline: none;
}

/* Scrollbar colors will only work in IE */
html {
   scrollbar-arrow-color: #FFFfff;
   scrollbar-track-color: #337777;
   scrollbar-face-color:  #115555;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #333333;
   color: white;
   text-align: center; /* this is kind of a hack for a body element */
   margin: 0;
}

a {
	text-decoration: none;
}

/* #subtitle and .dot are used only in Home Page subtitle */
#subtitle {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 19px;
   font-weight: bold;
   text-align: center;
   margin-top: 15px;
   color: #66CCFF;
}

.dot {
   color: #FF0000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   vertical-align: 35%;
}

/* to center the div, width must be defined and left/right margins==0 */
div#container {
   position: relative;
   float: none;
   width: 870px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   padding: 0;
   background-color: black;
   text-align: left;
}

/* Just a top spacer div to push all content down. */
div#topspacer {
   width: 870px;
   height: 20px;
   margin: 0;
   text-align: center;
}

div#headerimages {
   position: absolute;
   width: 600px;
   height: 95px;
   text-align: center;
   left: 135px;
   margin: 0px auto 0px auto;
   background-color: black;
}

div#navleft, div#navright {
   background-color: black;
   width: 135px;
   height: 510px;
   margin: 0; 
   padding: 0;
}

div#navleft {
   float: left;
   background-image: url(../images/bandleft.jpg);
}

div#navright {
   /* float: right; */
   position: absolute;
   left: 735px;
   top: 20px;
   background-image: url(../images/bandright.jpg);
}

.navlabel {
   font-size: 16px;
   font-weight: bold;
   color: #00EEEE;
}

#welcomemessage {
   position: absolute;
   left: 262px;
   top: 115px;
   text-align: left;
}

.cyan_p {
   font-size: 16px;
   font-weight: normal;
   color: #00EEEE;
}

.caption01 {
   font-size: 12px;
   text-align: center;
   font-weight: normal;
   color: #00EEEE;
}

.white_p, .white_ptop {
   font-size: 16px;
   color: #FFFFFF;
   text-align: left;
   margin: 10px 62px 15px 40px;
   line-height: 1.25em;
}
.white_ptop {
   margin-top: 30px;
}
.white_p a, .white_ptop a {
   color: #FFBB00;
}
.white_p a:visited, .white_ptop a:visited {
   color: #FF7700;
}
.white_p a:hover, .white_ptop a:hover {
   text-decoration: none;
   /* background: url(http://www.layoutstuff.com/userpics/dividers/sparkles.gif); */
   background: url(../images/sparkles.gif);
}

.sparkle a:hover {
   text-decoration: none;
   /* background: url(http://www.layoutstuff.com/userpics/dividers/sparkles.gif); */
   background: url(../images/sparkles.gif);
}

/* #indexdiv, #feedbackmaindiv { */
#feedbackmaindiv {
   position: absolute;
   top: 115px;
   margin-top: 0px;
   left: 135px;
   background-color: black;
   width: 550px;
   height: 415px;
   text-align: left;
   padding-left: 25px;
   padding-right: 25px;
}

#indexdiv {
   position: absolute;
   top: 115px;
   margin-top: 0px;
   width: 600px;
   height: 415px;
   left: 135px;
   background-color: black;
   text-align: center;
}

#viewfeedbackscrolldiv {
   font-size: 15px;
   height: 310px;
   overflow: scroll;
   border: solid 1px;
   border-color: #333;
   padding: 0px 10px 0px 10px;
}

#gallerydiv {
   position: absolute;
   top: 115px;
   margin-top: 0px;
   width: 600px;
   height: 415px;
   left: 135px;
   text-align: center;
}

#thumbdiv {
   position: absolute;
   width: 130px;
   left: 40px;
   top: 25px;
   height: 380px;
   overflow: auto;
   text-align: left;
}

img.thumbnail {
   border: 4px black solid;
   text-align: left
}

/* the following two styles help hover work for img
   since simple img:hover does not work well in IE.
*/
a img.thumbnail {
   border: 4px solid black;
}
a:hover img.thumbnail {
   border: 4px solid #337777;
}
a:focus img.thumbnail {
   /* border: 4px solid #337777; */
}

#previewdiv {
   position: absolute;
   width: 240px;
   height: 250px;
   left: 255px;
   top: 38px;
}

.previewimg {
   width: 240px;
}

#footer {
   position: absolute;
   background-color: black;
   width : 870px;
   height: 35px;
   top: 530px;
   left: 0px;
   margin: 0 auto 0 auto;
}

div#footer p {
   text-align: left;
   position: absolute;
   font-size: 13px;
   margin-top: .5em;
   color: #009999;
   padding-left: .9em;
}

.bctitlediv {
   background: black;
   height: 59px;
   width: 553px;
   margin: 18px auto 0px auto;  /* required to center the div */
   text-align: center;
}

.bctitleimg {
   display: block;
   background: black;
   background-image: url("../images/bottlecapshrinestitle.jpg");
   background-repeat: no-repeat;
   height: 59px;
   width: 553px;
   margin: 18px auto 0px auto;  /* required to center the div */
   text-align: center;
}

.bcrulediv {
   display: block;
   margin: 40px auto 0px auto ;
   height: 7px;
   text-align: center;
}

#ruleimgtop {
   margin: 10px auto 0px auto;  /* top-bottom, left-right or top right bot left */
}

#ruleimgbottom {
   position: relative;
   top: 275px;
   z-index: 500;
   margin: 0 auto;
}

ul.links {
   font-family: Arial, Helvetica, sans-serif;
   width: 116px;
   margin: 0px 0px 0px 0px;
   padding: 40px 0px 0px 9px;  /* top right bottom left */
   font-size: 16px;
   font-weight: bold;
}

li {
   list-style-type: none;
   padding-bottom: 13px;
}

/* For list item, choose display: block so item is hot all the way over,
   not just over the text. */
li a {
   display : block;
   color: white;
}

li a:hover {
   background : #009999 url(../images/4frame_0tween_layerprops.gif) no-repeat;
   width: 119px;
}

#imagecenter {
   position: absolute;
   left: 40px;
   top: 70px;
}

#virtualmagnet {
   height: 136px;
   width: 125px;
   text-align: center;
}

#magnet_p {
   text-align: center;
}