@font-face {
  font-family: 'Titillium Maps';
  src: url("../fonts/TitilliumMaps29L002.eot");
  src: local('Titillium Maps'), local('TitilliumMaps'), 
    url("../fonts/TitilliumMaps29L002.otf") format("opentype"), 
    url("../fonts/TitilliumMaps29L002.woff") format("woff");
}

body, html{
  background: #101010 url(../images/grid.png) repeat;
  color: #122;
  font-size: 16px;
  line-height:1.5em;
  padding: 0px;
  text-align: center;
  width:100%;
  height:100%;
  font-family: 'Titillium Maps',  Arial, sans-serif;
}

a:link, a:visited {color:#ac3028; font-size:12px; text-decoration:underline;}
a:hover {color:#000; font-size:12px; text-decoration:none;}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 16px;
  font-weight: bold;
  border-top:#aaa 1px solid;
  border-bottom:#aaa 1px solid;
}
.category-module h5 {margin-bottom: 8px;}
.category-module h6 {margin-bottom: 4px;}
.moduletable {margin-top:16px;}

h1{font-size:28px; font-variant: small-caps;  line-height: 1.16em; text-shadow: #aaa 1px 1px 3px;}
h2{font-size:24px; line-height: 1em;}
h3{font-size:22px; line-height: 1.0909em; border:0px;}
h4{font-size:20px; line-height: 1.2em; border:0px; }
h5{font-size:18px; line-height: 1.333em; border:0px; }
h6{font-size:16px; line-height: 1.5em; border:0px; }
img { 
  border: 0 none; 
}

#wrapper{
  width:1000px;
  margin:0 auto;
  text-align:left;
  z-index:1;
}

#header{
  background:transparent;
  position:relative;
  z-index:4;
  /*-moz-box-shadow: 0px -15px 15px #111;
  -webkit-box-shadow: 0px -15px 15px #111;
  box-shadow: 0px -15px 15px #111;*/
}

#logo {
  float:left;
  margin:16px 8px;
}

#topLeft{
  float:left;
  width:500px; 
  height:200px; 
  overflow:hidden; 
  background: url('../images/Logo.png') 8px 8px no-repeat;
}

#topLeft a img {
  margin-top:5px;
  height:50px;
}
#topLeft a img:hover{
  margin-top:0px;
  height:55px;
}

#topRight {
  float:right;
  width:450px; 
  height:200px; 
  overflow:hidden; 
  background: url('../images/chrome.png') 0 0 repeat;
  border-top-right-radius: 16px; 
  border-top-left-radius: 16px; 
}

#menuBar {clear:both; width:100%; background: url('../images/chrome.png') 0 0 repeat-x; border-top-left-radius: 8px; /*border-top-right-radius: 8px;*/}
  #menuBar ul{padding:0px; display:block; width:auto; height:40px; }
    #menuBar ul li{margin:0px; padding:0px; height:40px; float:left; position:relative; z-index:3; list-style-type: none; background: transparent;}
    #menuBar ul li:hover, #menuBar ul li.current{text-decoration:none; color:#fff; background: url('../images/chrome.jpg') 0 0 repeat;}
    #menuBar ul li.shadow{
      -moz-box-shadow: 0px -5px 15px #111;
      -webkit-box-shadow: 0px -5px 15px #111;
      box-shadow: 0px -5px 15px #111;
    }
    #menuBar ul li#item-101:hover, #menuBar ul li.current#item-101{border-top-left-radius: 8px;}
    #menuBar ul li a{color:#222; text-transform:uppercase; padding:8px 20px; display: block; font-size:18px; line-height: 1.333em; text-decoration:none; font-weight:bold; text-shadow: #eee 1px 1px 3px;}
    #menuBar ul li a:hover{text-decoration:none; color:#fff; text-shadow: #222 1px 1px 3px;}
    
    #menuBar ul li ul {margin-top:12px; display:block; height:auto; width: auto; position:absolute; z-index:1; left: -999em;}
    #menuBar ul li ul li {width:200px; margin:-14px 0px 20px -63px!important; padding:0px !important; height:30px; color:#fff !important; background:#ac3028 url('') 0 0 no-repeat !important; clear:both; float:left;}
    #menuBar ul li ul li a{color:#fff !important; text-transform:none; display: block; background:#ac3028; padding: 10px 5px; border:#fff 0px solid;}
    #menuBar ul li ul li a:hover{color:#fff; text-transform:none; display: block; background:#21408c; padding:10px 5px; }

    #menuBar ul li ul ul {margin: -18px 0 0 160px;}

    #menuBar ul li:hover ul ul, #menuBar ul li:hover ul ul ul {left: -999em;}
    #menuBar ul li:hover ul, #menuBar ul li li:hover ul, #menuBar ul li li li:hover ul, #menuBar ul li:hover ul{left: auto;}

#body{
  background: url('../images/chrome.jpg') 0 0 repeat;
  position:relative;
  z-index:3;
  
  -moz-box-shadow: 0px 0px 15px #111;
  -webkit-box-shadow: 0px 0px 15px #111;
  box-shadow: 0px 0px 15px #111;
}

#force-height{clear:both;}

#left{
  width:136px;
  padding:8px 12px;
  float:left;
}

.main{
  padding:12px 8px;
  float:left;
  margin:0px !important;
  background:#fff url('../images/chrome.jpg') 0 0 repeat;
}

#main-3-column{
  width:664px;
}

#main-2-column{
  width:824px;
}

#main-1-column{
  width:952px;
}

#content{
  text-align:left;
  width:100%;
  padding-top:12px;
}
  #content img.rounded {border-radius: 8px;}
  #content img.shaded  {
    -moz-box-shadow: 0px 0px 8px #444;
    -webkit-box-shadow: 0px 0px 8px #444;
    box-shadow: 0px 0px 8px #444;
  }
  #content img.shaded:hover {
    -moz-box-shadow: 0px 0px 16px #ac3028;
    -webkit-box-shadow: 0px 0px 16px #ac3028;
    box-shadow: 0px 0px 16px #ac3028;
  }
  
  #content p{margin-bottom:1em;}
  #content p:first-of-type {
    font-size: 1.125em;
    line-height: 1.333em;
    font-weight:bold;
  }
  #content p+p {
    margin-left: 1em;
  }
  
#right{
  width:136px;
  padding:8px 12px;
  float:left;
}

#footer-outer{
  width:976px;
  clear:both;
  background: url('../images/chrome.jpg') 0 0 repeat;
  padding: 8px 12px;
  position:relative;
  z-index:3;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -moz-box-shadow: 0px 15px 15px #111;
  -webkit-box-shadow: 0px 15px 15px #111;
  box-shadow: 0px 15px 15px #111;
}

#footer-inner{}

#bottom{
  overflow:hidden
}

.box{
  width:322px;
  float:left;
  min-height:100px;
}
.box img {padding-top:18px;}
.box a img:hover{height:60px;}

.box1{border-right:#ddd 1px solid;}
.box2{border-right:#ddd 1px solid; border-left:#999 1px solid;}
.box3{border-left:#999 1px solid;}

#footer-sub{
  padding-top:8px;
  height:24px;
}

#footer div.custom{
  float:left;
}

#leftStrip{
  width:85px;
  height:100%;
  position:fixed;
  top:0;
  left:5%;
  background: url('../images/gloss_stripe.png') 0 0 repeat-y;
  z-index:2;
  -moz-box-shadow: 0px 0px 15px #111;
  -webkit-box-shadow: 0px 0px 15px #111;
  box-shadow: 0px 0px 15px #111;
}

#rightStrip{
  width:85px;
  height:100%;
  position:fixed;
  top:0;
  right:5%;
  background: url('../images/stripe.png') 0 0 repeat-y;
  z-index:2;
  -moz-box-shadow: 0px 0px 15px #111;
  -webkit-box-shadow: 0px 0px 15px #111;
  box-shadow: 0px 0px 15px #111;
}

#light{
  position:fixed;
  z-index:1;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background: url('../images/light.png') 0% 50% no-repeat;
}

#progressBarOuter{
  margin: 90px auto 0px auto;
  width:50%;
  height:15px;
  border:1px solid #aaa;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 8px #444;
  -webkit-box-shadow: 0px 0px 8px #444;
  box-shadow: 0px 0px 8px #444;
}

#progressBarInner{
  width:0%;
  height:15px;
  background:#57ba35;
}

/****************** Tooltips ********************/
.tip-wrap{
  z-index:1000;
}

.tip {
   float: left;
   background: #ffc;
   border: 1px solid #D4D5AA;
   padding: 2px;
   max-width: 200px;
   z-index: 1000;
}
 
.tip-title {
  text-align:left;
  color:#303030;
     padding: 0;
     margin: 0;
     font-size: 12px;
     font-weight: bold;
     margin-top: -12px;
     padding-top: 15px;
     padding-bottom: 3px;
     background: url(../../../administrator/templates/khepri/images/selector-arrow.png) no-repeat;
}
 
.tip-text {
  text-align:left;
     font-size: 10px;
     margin: 0;
}

/*Twitter forces the min size to 150px so we change it to what we want here.*/
.twtr-doc{
  width:145px !important;
}