/* *********************
Central hajinc stylesheet alpha. Created 10/26/2009, Updated 12/06/2009

!!!Everything this point and after should be removed from the final!!!
   
Purpose: Create a central, cashable .css file that defines the style for every element on the site. Goals include reducing inline styling, increasing maintainability,
and making styling easier. Most styling info should be folded into this file (including SDmenu)

Methods: There will be two major types of styles: Global and specific.
  - Global styles will either affect everything on the page, or will be classes that effect nonspecific targets (so .center will be global, while .sdmenu probably will not). Pretty much the page defaults.
  - Specific styles will use IDs or classes to target specific elements (so #main table img {} would be specific). IDs are prefered to classes.

Notes: 
  - I want to optimize this after I finalize it.
  - Make lots of comments in the drafts
  - These should probably get arranged into page specific groups
*********************** */

/******************* BEGIN GLOBAL STYLES ******************** */
  
  html {
        height: 100%;
        width: 100%; 
  }

  body {
        color: blue;
        background: #FFFFFF;
        background-image: url('images/back3.jpg');
        text-align: center;
        padding: 0px;
        margin: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        height: 100%;
        width: 100%; 
  }
  
  a { color: #111199;}
  
  a img {border:0px;}

  fieldset {
    border: 1px #aaaaaa solid;
     padding: 5px 10px
  }
  
  .block_center {margin: 0 auto 0 auto;}
  
  .text_left {text-align: left;}
  
  .text_right {text-align: right;}

  .text_center {text-align: center;}
  
  
  p,td,h2,h3,h4 {
    color: blue;
  }
  
  table.inset {
    border-width: 4px 4px 4px 4px;
    border-spacing: 0px;
    border-style: solid solid solid solid;
    border-color: blue blue blue blue;
  }
  
  table.inset th, table.inset td {
    border-width: 1px 1px 1px 1px;
    padding: 1px 1px 1px 1px;
    border-style: solid solid solid solid;
    border-color: blue blue blue blue;
  }
  
  div.binholder {
    width: 95%;
    margin: 0 auto 0 auto;
    padding: 8px;
  }  

  div.binholder div.binshadow {
    width: 100%;
    background-image: url(/images/shadow.png);
    position:relative;
    top:8px;
    left:8px; 
    margin-bottom: 4px;
  }
  
  div.binholder div.binshadow div.bininner {
    background-color:#e8f9ff;
    border-style:solid;
    border-width:5px;
    border-color:#f9ab74;
    position:relative;
    top:-8px;
    left:-8px; 
    padding-bottom: 4px;
  }
  
  div.binholder table {
    margin: 0 auto 0 auto;
    text-align: left;
  }

  div.binholder table table, div.binholder table li {
    text-align: left;
    margin: 0;
  }

  .hide {
    display: none;
  }

  .group:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
  }

  /* *** BUTTONS *** */

    .buttons {margin: 4px 0 3px 0;}
    
    .buttons a, .buttons button, .buttons input{
        display: table;
        margin: 0 auto 0 auto;
        padding:0 7px 0 0;
        background-color:#ffffff;
        border:2px outset #00f;
        border-top:2px outset #00f;
        border-left:2px outset #00f;
        font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
        font-size:100%;
        line-height:130%;
        text-decoration:none;
        font-weight:bold;
        color:#565656;
        cursor:pointer;
        min-width: 50px;
        padding:5px 10px 6px 7px; /* Links */
    }
    .buttons button{
        overflow:visible;
        padding:4px 10px 3px 7px; /* IE6 */
    }
    .buttons button[type]{
        padding:5px 10px 5px 7px; /* Firefox */
        line-height:17px; /* Safari */
    }
    *:first-child+html button[type]{
        padding:4px 10px 3px 7px; /* IE7 */
    }
    }
    .buttons input{
        overflow:visible;
        padding:4px 10px 3px 7px; /* IE6 */
    }
    .buttons input[type]{
        padding:5px 10px 5px 7px; /* Firefox */
        line-height:17px; /* Safari */
    }
    *:first-child+html input[type]{
        padding:4px 10px 3px 7px; /* IE7 */
    }
    .buttons button img, .buttons a img{
        margin:0 3px -3px 0 !important;
        padding:0;
        border:none;
        width:16px;
        height:16px;
    }
    .buttons input img, .buttons a img{
        margin:0 3px -3px 0 !important;
        padding:0;
        border:none;
        width:16px;
        height:16px;
    }
    
  
    .buttons a.negative, button.negative{
        color:#E86A10;
    }
    .buttons a.negative:hover, button.negative:hover{
        background:#e7fafe;
        border:2px inset #00f;
        color:#E86A10;
    }
    .buttons a.negative:active{
    
        border:2px inset #fbc2c4;
        color:#E86A10;
    }
    
  /* *** END buttons *** */
  
/* ***************** END GLOBAL STYLES ******************* */






/* ************************* BEGIN SPECIFIC STYLES ********** */
  
  #content img, #footer img {
    margin: 0 auto 0 auto;
  }
  
  #footer {
    color: blue;
  }
  
  #container { /*Note: does this even exist anymore?*/
    padding: 0px 0px 0px 0px;  
    margin: 0px 0px 0px 0px;
    margin-top: 0px;
    text-align: center;
  }
  
  #logo { 
    width: 385px; 
    height: 108px;
    background: url(images/logo3.jpg); 
    background-repeat: no-repeat;
    position:absolute;
    top:0px;
    left:0px;
  }
  
  #snowlogo { 
    width: 385px; 
    height: 108px;
    background: url(images/holiday/happyholidays.gif); 
    background-repeat: no-repeat;
    position:absolute;
    top:0px;
    left:0px;
  }
    
  #topbar { 
    width: 100%; 
    height: 108px;
    background: url(images/header3.jpg); 
    background-repeat: repeat-x;
    padding: 0px 0px 0px 0px;  
    margin: 0px 0px 0px 0px;
    margin-top: 0px;
  }
    
  #snowbar { 
    width: 100%; 
    height: 108px;
    background: url(images/holiday/snow.jpg); 
    background-repeat: repeat-x;
    padding: 0px 0px 0px 0px;  
    margin: 0px 0px 0px 0px;
    margin-top: 0px;
  }
    
  #navbar {
    margin-top: 125px;
  }
    
  #clock {
    position: absolute; 
    top:83px;
    right: 10px; 
  }
    
  #footer {
    width: 100%; 
    height: 100px;
    background: url(images/footer.png); 
    background-repeat: repeat-x;
    padding: 0px 0px 0px 0px;  
    margin: 0px 0px 0px 0px;
    margin-top: 0px;
    float: left;
  }
  #footer table{
    width: 100%;
    margin: 0 auto 0 auto;    
  }  

  #top_ad {
    border-width: 1px 1px 1px 1px;
    position: absolute;
    right: 15px;
    top: 20px;
    z-index: 10;
  }
  
  #wrapper {
    width: 95%;
    height: auto;
  }
  
  #sidemenu {
    float:left;
    width: 210px;
  }
  
  #content {
    width: 100%;
    margin-left: -210px;
    float: left;
  }
  
  #content #display {
    margin-left: 210px;
  }

  #vote table {
    margin: 0 auto 0 auto;
  }

  #horse_cp  table {
    margin: 0 auto 0 auto;
  }

  #create_horse  p {
    text-align: left;
    margin-left:15px;
    margin-right:15px;
  }

  #pattern_time  p {
    text-align: left;
    margin-left:15px;
    margin-right:15px;
  }
  
  #horse_tabs {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0 0 0 3.5% !important;
    padding:0;
    height: 16px;
    z-index: 3;
    position: relative;
  }

  #horse_tabs li {
    float: left;
    list-style-image:none !important;
    margin:0 0 0 3px !important;
    position: relative;
  }

    #horse_tabs li a.current {
    border-bottom-color: #E8F9FF;
    font-weight: bold;
  }

  #horse_tabs li a {
    text-decoration:none;
    padding:1px 3px;
    text-indent:0;
    border-style:solid;
    border-width:5px;
    border-color:#f9ab74;
    height:17px;
    background-color: #E8F9FF;
    display: block;
    outline: none;
  }

  .leaderboard .bininner p {
    text-align: center;
  }

  .leaderboard .bininner ol {
    line-height: 20px !important;
  }

  #create_horse .bininner table {
    text-align: center;
  }

  #genesearch {
    padding-right:20px;
    height:100%;
    width: 98%;
    display:table;
    margin: 0 auto;
  }

  #genesearch ul, #genesearch li {
    list-style:none;
  }
  
  #genesearch ul li, #genesearch ul ol {
    clear:both;
  }
  
  #genesearch ul ol {
  width: 450px;
  margin: 0 auto;
  }
  
  #genesearch ul ol li {
    clear:none;
    float:left;
  }

  #genesearch .genes p {
    margin-left:3px !important;
  }

  #genesearch ul > li p b:hover {
    color:Chocolate;
  }

  #SearchBin .bininner.binholder {
    text-align: left;
  }

  #SearchBin div.bininner div.binholder {
  padding:4px;
  }

  #SearchBin #genesearch .binholder table {
    margin: 0;
  }

  /* ************ adv_horse_create.php ************** */

    #adv_horse_create div.allele {
        float:left;
        width: 50%;
    }
    #adv_horse_create fieldset.catagory {border:#F9AB74 solid;}

    #adv_horse_create .allele input, .quality div input {float:right;}

    #adv_horse_create .allele label, .quality div label {float:right; margin-left:5px;}

    #adv_horse_create .allele span, .quality div span {float:left; margin:-3px;}

    #adv_horse_create .quality {float:left; width:110px;}

    #adv_horse_create #quality_group {margin:0 auto 0 auto; display:table;}

    #adv_horse_create .genes fieldset {min-width:155px;}
    
    #adv_horse_create fieldset.control {margin-top:10px;}

  /* ************ adv_search.php ************** */

  #search td.panel {
      border: medium solid #F9AB74;
  }

  #search .key {
      margin: 0;
      font-weight: bold;
  }

  #colors li {
      list-style: none;
  }

  #colors ol, #colors ul {
      padding: 1px;
  }

  #colors fieldset, #colors ol.panes {
      float:left;
  }


  #colors div.bininner  {
      display: inline-table;
  }

  #colors div.binshadow  {
      display: table-cell;
  }

  #colors div.binholder  {
      display: inline-block;
      padding-top: 0px;
      margin-top: 43px;
      z-index: 0;
  }


  #search .tab {
      border: 5px solid #F9AB74;
      margin:0 1px;
      padding:3px 3px 6px;
  }

  #search .tabs li.current {
      border-bottom: 5px solid #E8F9FF;
  }


  #search ul.tabs {
      margin:6px 6px 0;
      position: absolute;
      z-index: 1;
  }

  #search .tab, #search .tabs {
      float:left;
  }

  #search .tab a {
      text-decoration: none;
  }

  #search #settings .bininner fieldset {
    border: none;
  }

  /* ************ tackstore.php ************** */

  #tack_store {
      margin-top: 30px;
  }

  #tack_store .tab {
      background: #E8F9FF;
      border: 5px solid #F9AB74;
      margin:0 1px;
      padding:3px 3px 6px;
  }

  #tack_store .tabs li.current {
      border-bottom: 5px solid #E8F9FF;
  }


  #tack_store ul.tabs {
      margin: -30px 0 0 3%;
      position: absolute;
      z-index: 1;
      padding-left:0px;
  }

  #tack_store .tab, #tack_store .tabs {
      float:left;
  }

  #tack_store .tab a {
      text-decoration: none;
  }

#tack_store .tabs li {
      list-style: none;
  }

  #tack_display li {
      list-style: none;
  }

  #tack_display ol, #colors ul {
      padding: 1px;
  }

  #tack_display fieldset, #colors ol.panes {
      float:left;
  }


  #tack_display div.bininner  {
      display: block;
  }

  #tack_display div.binshadow  {
      display: block;
  }

  #tack_display {
      display: block;
      padding-top: 0px;
      z-index: 0;
  }

  #tack_display .loading {
      background: url("/images/loading.gif") no-repeat scroll 0 0 transparent;
  }




  /* ************ index.php (new) ************** */

  div.binholder div.binshadow div.binhidden {
    background-color:transparent;
    border-style:solid;
    border-width:0px;
    border-color:#f9ab74;
    position:relative;
    top:-8px;
    left:-10px; 
    padding: 0px;
    padding-bottom: 0px;
  }
 
  #game_question, #game_answer {
    position: absolute; 
    top: 230px;
    left: 318px;
  }

  #game_answer  {
    display: none;
    
  }
/* ************ END SPECIFIC STYLES ***************** */