/* ======== GENERAL RULES ======== */
html {height: 101%; margin-bottom: 1px;}

body {background: #ffffff url(../images/background.jpg) repeat-x; color: #000000;
font: normal 0.85em Verdana, Verdana, Geneva, sans-serif; padding: 0; margin: 0;}

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

hr {background-color: #505050; color: #505050; border: none; height: 1px;}

table {padding: 0; border-collapse: collapse; font-size: 100%; width: 100%;}

ul {list-style-type: none; margin: 10px 0 20px 10px; padding: 0;}
ul li {background: url(../images/bullet1.png) no-repeat 0 5px; padding: 1px 0 0 12px;}
ul li a {color: #d0a63f; text-decoration: none; font-weight: bold; padding: 0;}
ul li a:hover {color: #707070; text-decoration: underline;}

blockquote {background-color: #ededed; margin: 3% 5%; border: 1px solid #b0b0b0; line-height: 1.3em; padding: 5px 10px;}

fieldset {border: 1px #b0b0b0 solid; margin: 10px 0; text-align: center; line-height: 1.4em;}
fieldset img {background-color: #ffffff; margin: 5px 10px; border: 1px #919191 solid;}
fieldset p {font-size: 0.85em; text-align: left; padding: 15px 15px 5px 15px;}

legend {background-color: transparent; padding: 0 10px; color: #505050; letter-spacing: 1px;
font: small-caps bold 18px "Century Gothic", Verdana, Helvetica, sans-serif;}

/* ======== TYPOGRAPHY ======== */
a {color: #d0a63f; text-decoration: underline; outline: none; font-weight: bold;}
a:hover {color: #707070; text-decoration: underline; font-weight: bold;}

h1 {font: normal 30px "Century Gothic", Verdana, Helvetica, sans-serif; color: #aa6906; margin: .5em 0; text-shadow: 2px 2px 2px #bbb;}
h2 {font: normal 26px 'Kreon', "Century Gothic", Verdana, Helvetica, sans-serif; color: #505050; margin: .5em 0;}
h3 {font: normal 24px 'Kreon', "Century Gothic", Verdana, Helvetica, sans-serif; color: #aa6906; margin: .5em 0;}
h4 {font: normal 22px 'Kreon', "Century Gothic", Verdana, Helvetica, sans-serif; color: #aa6906; margin: .5em 0;}
h5 {font: bold 18px "Century Gothic", Verdana, Helvetica, sans-serif; color: #505050; margin: .5em 0;}
h6 {font: bold 14px "Century Gothic", Verdana, Helvetica, sans-serif; color: #aa6906; margin: .5em 0;}

/* ======== LAYOUT RULES ======== */
#wrapper {background-color: transparent; color: #000000; width: 980px; margin: 0 auto; text-align: left;}

/* ======== HEADER AREA ======== */
header {background: #ffffff url(../images/header.jpg) no-repeat; position: relative; width: 980px; height: 270px;}

/* ======== LOGO/SITE NAME AREA ======== */
#logo {position: absolute; top: 50px; left: 0; width: 400px; height: 150px;}

/* ======== GLOBAL LINKS ======== */
#global {
position: absolute;
top: 0;
left: 0;
color: #ffffff;
width: 400px;
height: 30px;
line-height: 30px;
padding: 0;
font-size: 0.90em;
text-align: left;}

#global ul {list-style-type: none; margin: 0; padding: 0;}
#global ul li {background: none; display: inline; padding: 0 20px 0 5px;}
#global ul li a {color: #fff; text-decoration: none; font-weight: normal; padding: 0; text-transform: uppercase;}
#global ul li a {color: #fff; text-decoration: none; font-weight: normal; padding: 0; text-transform: uppercase;}
#global ul li a:hover {color: #ffffff; font-weight: normal; text-decoration: underline;}

/*            MAIN NAVIGATION AREA 
=================================== */
#mainnav {position: absolute; top: 210px; left: 0; color: #000000; width: 650px; text-align: left; margin: 0;}

#mainnav ul {margin: 0; padding: 0; list-style-type: none;}
#mainnav ul li {background: none; display: inline; padding: 0; line-height: 40px;}
#mainnav ul li a {color: #ffffff; font-weight: normal; text-decoration: none; margin: 0 7px; padding: 0 0 5px 0; text-transform: uppercase; }
#mainnav ul li a:hover {color: #ffffff; font-weight: normal; text-decoration: none; border-bottom: 5px #aa6906 solid;}
#mainnav ul li.active a {color: #ffffff; font-weight: normal; text-decoration: none; border-bottom: 5px #505050 solid;}

/* ======== HEADER IMAGES ======== */
.circle1 {position: absolute; top: 10px; left: 750px; width: 220px; height: 220px; z-index: 3;
background: url('../images/mainimage1.jpg') no-repeat; border-radius: 110px; -moz-border-radius: 110px;
-webkit-border-radius: 110px; -o-border-radius: 110px; border: 3px #ffffff solid; -moz-box-shadow: 0 0 10px #333;
-webkit-box-shadow: 0 0 10px #333; box-shadow: 0 0 10px #333;}

.circle2 {position: absolute; top: 20px; left: 580px; width: 200px; height: 200px; z-index: 1;
background: url('../images/mainimage2.jpg') no-repeat; border-radius: 100px; -moz-border-radius: 100px;
-webkit-border-radius: 100px; -o-border-radius: 100px; border: 3px #ffffff solid; -moz-box-shadow: 0 0 10px #333;
-webkit-box-shadow: 0 0 10px #333; box-shadow: 0 0 10px #333;}

.circle3 {position: absolute; top: 0; left: 430px; width: 180px; height: 180px; z-index: 2;
background: url('../images/mainimage3.jpg') no-repeat; border-radius: 90px; -moz-border-radius: 90px;
-webkit-border-radius: 90px; -o-border-radius: 90px; border: 3px #ffffff solid; -moz-box-shadow: 0 0 10px #333;
-webkit-box-shadow: 0 0 10px #333; box-shadow: 0 0 10px #333;}

.circle3 img {opacity: 0; filter: alpha(opacity=0);}

.circle2 img {opacity: 0; filter: alpha(opacity=0);}

.circle1 img {opacity: 0; filter: alpha(opacity=0);}

/* ======== SIDEBAR AREAS ======== */
#sidebarLeft {float: left; width: 220px; text-align: left; font-size: 0.90em; line-height: 1.4em; padding: 10px 10px 0 10px; margin: 0 5px 0 0;}
#sidebarRight {float: right; width: 220px; text-align: left; font-size: 0.90em; line-height: 1.4em; padding: 10px 10px 0 10px; margin: 0 0 0 5px;}

/* ======== CONTENT AREA ======== */
#contentRight {float: right; width: 715px; padding: 10px 10px 0 10px; line-height: 1.5em; overflow: hidden;}
#contentLeft {float: left; width: 715px; padding: 10px 10px 0 10px; line-height: 1.5em; overflow: hidden;}
#contentMiddle {float: left; width: 470px; padding: 10px 10px 0 10px; line-height: 1.5em; overflow: hidden;}
#contentFull {width: 960px; padding: 10px 10px 0 10px; line-height: 1.5em; overflow: hidden;}

.contentInsideLeft {float: left; width: 48%; line-height: 1.4em;}
.contentInsideRight {float: right; width: 48%; line-height: 1.4em;}

/* ======== SECTION BLOCKS ======== */
.infoBox {float: left; width: 29.3%; text-align: left; line-height: 1.4em; padding: 1%; margin: 0 1%;}
.infoBox h3 {color: #aa6906; border-bottom: 1px #aa6906 solid; text-align: center; margin: 0 0 10px 0;}

/* ======== FOOTER AREA ======== */
footer {width: 980px; margin: 0 auto; padding: 10px 0; border-top: 5px #d0a63f solid; clear: both; font-size: 0.90em;}
footer ul {list-style-type: none; margin: 0; padding: 0;}
footer ul li {margin: 0 5px; padding: 3px 0 3px 3px; border-bottom: 1px #a0a0a0 dashed; background: none;}
footer ul li a {color: #707070; text-transform: uppercase; text-decoration: none; font-weight: bold;}
footer ul li a:hover {color: #d0a63f; text-decoration: none; font-weight: bold;}

footer a {color: #d0a63f;}
footer a:hover {color: #707070;}

/* ======== IMAGES ======== */
img {border: none;}
.imageleft {margin: 0 10px 0 0; float: left;}
.imageright {margin: 0 0 0 10px; float: right;}
.imageleft-border {background-color: #ffffff; margin: 0 10px 0 0; padding: 3px; float: left; border: 1px #919191 solid;}
.imageright-border {background-color: #ffffff; margin: 0 0 0 10px; padding: 3px; float: right; border: 1px #919191 solid;}

/* ======== CATALOG AND GALLERY ======== */
.catalogimages {vertical-align: middle; text-align: center; padding: 5px;}
.catalogdescription {line-height: normal; vertical-align: top; text-align: left; padding: 5px;}
.catalogdescription h6 {color: #aa6906; margin: 0;}
.catalogcart {vertical-align: middle; text-align: center; padding: 5px;}

/* ======== MISC. CLASSES ======== */
.codeblock {font-family: "Courier New", Courier, monospace; font-size: 0.90em; color: #333; border-left: 2px #aa6906 solid;}
.codesnippet {margin: 1em; padding-left: 10px;}
.codeblock ol {list-style-position: outside; list-style-type:decimal-leading-zero; padding-left: 12px;}
.codeblock ol li {margin-left: 8px;}

.center {text-align: center;}
.right {text-align: right;}
.small {font-size: 0.85em;}
.clear {clear: both;}
.clearsmall {height: 1px; line-height: 0; margin: 0; padding: 0; clear: both;}
.highlight {background-color: #FFFF00;}
.button a {font-size: 0.90em; color: #ffffff; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; background-color: #aa6906;
text-decoration: none; font-weight: normal;}
.button a:hover {color: #ffffff; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; background-color: #d0a63f;
text-decoration: none; font-weight: normal;}