/************************************************************/
/* Style Sheet for the Outlands Chirurgeon's Guild Web Page */
/* William J. Knight - 03/19/2007                           */
/************************************************************/

/* define the pages background color and image */
body {background: #aaffaa url('images/eosoberbackground.gif');}

/* Force IE, Firefox, Opera and Webkit all  to use the      */
/* border-to-border width, instead of content width.        */
DIV {box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box;}

/* body {background: #aaffaa;}                                 */
/* This defines the color pattern for the links: Blue for new, */
/* Dark Magenta for visited, and Red for active.               */
/* hovered links will have a light yellow background,          */
/* active links will have a darker yellow background.          */

a:link                         {color: #0000FF;}
a:visited                      {color: #990099;}
a:link:hover, :visited:hover   {color: #FF0000; 
                                background: #00FF66; 
                                text-decoration: none;}
a:link:active, :visited:active {color: #FF0000; 
                                background: #66FF66; 
                                text-decoration: none;}

/* These are general CSS settings that define my preferences */
  
.heading  {font-family: Arial, Helvetica, sans-serif;
           font-size: 20px;
           font-weight: bold;
           text-align: center;}
.centered {text-align: center}
.smaller  {font-size: smaller}
.bold     {font-weight: bold}

.info-box {font: italic 0.8em arial; 
            text-align:center;
			padding-left: 5px;
			padding-right: 5px;
            border-style: double;
            margin-left: 20%;
            margin-right: 20%;}
.disclaimer {float: none; 
             width:100%; 
             clear: both; 
             font-size: 0.8em; 
             text-align: justify;}			
.certs {float: right; 
        width:100%; 
        clear: both; 
        text-align: right;}	

/* Some specific IDs */

#lfoot {float: left; 
        width: 54%; 
        font-size: 0.75em; 
        text-align: left;}

#rfoot {float: right; 
        width:46%; 
        font-size: 0.75em; 
        text-align: right;}

/* These CSS definitions allow the floating menu to work -             */
/* The Content DIV is 150px left to allow room for the floating        */
/* menu, which will occupy the left 150px of the page as the menu DIV. */

div#menu {position: absolute;
          top: 10px;
          left: 10px;
          padding-left: 0px;}

div#content {position: absolute; 
             Left: 150px; 
             Top: 0px; 
             margin-top: 10px;
             margin-bottom: 10px;
             border: medium ridge #aaffaa;
             background-image: url('images/eosoberbackparchment.gif');
             padding: 10px;}

div#footer  {clear: both;
             padding: 5px;
             width: 100%; 
             background-color: #aaffaa;
             background-image: url('images/eosoberbackparchment.gif');
             border: medium double #000000;}	  

/* these  are special settings for the menu box to display the   */
/* colors and Borders I want.                                   */

div#menubox {float: none; 
             width: 128px; 
             background-color: #aaffaa; 
             text-align: center; 
             border: medium ridge #00ff00;}

div#bottom-menubox {float: none; 
             width: 128px; 
             background-color: #aaffaa; 
             text-align: center; 
             border-top: none;
             border-left: medium ridge #00ff00;
             border-right: medium ridge #00ff00;
             border-bottom: medium ridge #00ff00;}			 

/* This is a CSS trick for roll-overs in the menu. I'm using a     */
/* single image, which has the normal, hovered, and active images  */
/* stacked.  hovering or activating will change the background     */
/* position of the image displayed, and change the text-decoration */

div#menu ul {margin: 0;
             padding: 0;
             list-style-type: none;}

div#menu li {height: 30px;
             width: 120px;
             margin: 0px;
             font-family: Arial, Helvetica, sans-serif;
             font-size: 10px;
             text-align: center;
             line-height: 30px;
             list-style-type: none;
             background-image: url('images/buttons.png');
             background-repeat: no-repeat}

div#menu li a {color: #000000;
               display: block;
               width: 100%;
               height: 100%;
               text-decoration: none;}

div#menu li a:link {color: #000000;
                    background-image: url('images/buttons.png');
                    background-position: 0px 0px;}

div#menu li a:visited {color: #000000;
                       background-image: url('images/buttons.png');
                       background-position: 0px 0px;}

div#menu li a:hover {color: #000000;
                     font-weight: bold;                     
                     background-image: url('images/buttons.png');
                     background-position: 0px -30px;}

div#menu li a:active {font-weight: bold;
                      color: #000000;
                      background-image: url('images/buttons.png');
                      background-position: 0px -60px;}

/* This is how we indicate the active page in the menu */

body#homepage          a#homenav,
body#aboutus           a#aboutusnav,
body#whatis            a#whatisnav,
body#regalia           a#regalianav,
body#becoming          a#becomingnav,
body#ranks             a#ranksnav,
body#admin             a#adminnav,

body#admin-chic        a#admin-chicnav,
body#admin-branch      a#admin-branchnav,
body#admin-deputy      a#admin-deputynav,
body#admin-kingdom     a#admin-kingdomnav,
body#admin-society     a#admin-societynav,

body#cit               a#citnav,
body#chirurgeon        a#chirurgeonnav,
body#mentor            a#mentornav,
body#emeritus          a#emeritusnav,
body#roster            a#rosternav,
body#roster-admin      a#roster-adminnav,
body#roster-alpha      a#roster-alphanav,
body#roster-pdf        a#roster-pdfnav,
body#roster-regional   a#roster-regionalnav,
body#roster-statistics a#roster-statisticsnav,
body#forms             a#formnav,
body#resources         a#resourcenav,
body#reportdates       a#reportdatesnav,
body#chi-news          a#chi-newsnav,
body#newsletter        a#newsletternav,
body#alqanan           a#alqanannav,
body#burden            a#burdennav,
body#goodsamlaws       a#goodsamlawsnav,
body#volprot           a#volprotnav,
body#gs50states        a#gs50statesnav,
body#gsstjohns         a#gsstjohnsnav,
body#gsprovinces       a#gsprovincesnav,

body#articles          a#articlesnav,
body#kwcs              a#kwcsnav,
body#links             a#linksnav,   

body#cafepress         a#cafepressnav,
body#sitemap           a#sitemapnav,
body#forum             a#forumnav,
body#chat              a#chatnav {color: blue; font-weight:bold;}

/* These are used in the roster-input page */

.label-valid   {color: #000000;}
.label-warning {color: #ff9900;}   
.label-invalid {color: #ff0000;}  
.input-box     {background-color: #FFFD9E; 
                font-size: 0.8em; 
                border: inset 2px;}