/******** TimKeesling.com stylesheet **********/
@import url(levelout.css);

body {
font: 100% "Trebuchet MS", Arial, Verdana, Sans-Serif;
min-width: 960px;
color: #fff;
background: #000 url(/images/blue_dot_back.png);
}

h1, h2, h3, h4, h5, h6 {
  color: #275f9d;
  background-color: inherit;
}

h1.mainhdr {
  width: auto;
  color: #275f9d;
  background: url(/images/tcorner_logo.png) no-repeat 160px 23%;
  font-size: 2.0em;
  font-variant: small-caps;
  margin: 0 auto -11px 100px;
  padding: 0;
}

h1.h1fstltr:first-letter {
  font-size: 1.4em;
  font-variant: small-caps;
  margin: 0 -10px 0 0;
  padding: 0;
}

h2 {
  font-size: 1.4em;
  font-variant: small-caps;
}

h3 {
  font-size: 1.2em;
  font-variant: small-caps;
}

h4 {
  font-size: 1.0em;
  font-variant: small-caps;
}

h5 {
  font-size: .9em;
  font-variant: small-caps;
}

a.norm:link, a.norm:visited {
  color: #275f9d;
  background-color: inherit; 
}

a.norm:hover, a.norm:active {
  color: #275f9d;
  background-color: #fff;
}

/******************************* Start Top Navigation Menu Styles ********************************/
div#topnav {
  width: 100%;
  height: 45px;
  position: fixed;
  top: 0;
  left: 0;
  color: inherit;
  background: url(/images/topnav_back.png);
  margin: 0;
  padding: 0;
  z-index: 50;
}

div#skipnav {
  width: auto;
  float: left;
  font-size: .8em;
  border-right: 1px dashed #275f9d;
  border-bottom: 1px dashed #275f9d;
  margin: 0;
  padding: 2px;
}

/** This is the main div wrapper for the whole menu and centers it on the page at the top **/
div#navwrapper {
  width: auto;
  float: right;
  margin: 0 10% 0 auto;
  padding: 0;
}

/************************************ START MAIN NAVIGATION STYLE ROLL OVERS ******************************************/
/** This just styles the top level unordered list **/
#nav, #nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/** This styles the top level list item or the main list item not the hyperlink itself **/
#nav li.top_level_li {
  display: block;
  float: left;
  width: 85px;
  height: 40px;
  position: relative;
  border: none;
  background: url(/images/blacktab.png);
  /*background-position: top middle;*/
  background-repeat: no-repeat;
  color: #fff;
  margin-right: -5px; /** This is the amount of space between the top level list items or the main boxes on 
                         a side note.  I can set this at a negitive vslue to have the items have an overlap effect **/
}

/** This styles the top level list item or the main list item not the hyperlink itself when it is hovered over **/
#nav li.top_level_li:hover, #nav li.top_level_li:active {
  float: left;
  width: 85px;
  height: 40px;
  position: relative;
  border: none;
  background: url(/images/bluetab.png);
  /*background-position: top middle;*/
  background-repeat: no-repeat;
  color: #fff !important;
  margin-right: -5px;
}

/** This styles the sub level dropdown boxes or sub list items but not the hyperlink within it **/
#nav li.sub_level_dropboxes {
  float: left;
  width: 140px;
  height: 22px;
  position: relative;
  top: 4px;
  left: 10px;
  border: 1px solid #000;
  background-color: #275f9d;
  color: #000;
  font-size: .8em;
  margin: 0 0 .05em 0; /* This was set at 0 1em .3em 0 */
  z-index: 1000; 
}

#nav li.sub_level_dropboxes:hover, #nav li.sub_level_dropboxes:active {
  float: left;
  width: 140px;
  height: 22px;
  position: relative;
  top: 4px;
  left: 10px;
  border: 1px solid #000;
  background-color: #ccc;
  color: inherit;
  font-size: .8em;
  margin: 0 0 .05em 0; /* This was set at 0 1em .3em 0 */
  z-index: 1000;
}

/** This styles the top level main links but not the list box that contains them. **/
#nav a.toplink:link, #nav a.toplink:visited {
  display: block;
  text-decoration: none;
  width: auto;
  padding: 0;
  margin: 3px 0;
  text-align: center;
  font-size: .8em;
  font-weight: 600;
  color: #fff;
  background: transparent;
}

#nav a.toplink:hover, #nav a.toplink:active {
  display: block;
  text-decoration: none;
  width: auto;
  padding: 0;
  margin: 3px 0;
  text-align: center;
  font-size: .8em;
  font-weight: 600;
  color: #fff;
  background: transparent;
}

/** This styles the sub level links but not the list box that contains them. **/
#nav a.sublink:link, #nav a.sublink:visited {
  display: block;
  text-decoration: none;
  padding: 5px .3em;
  color: #fff;
  background-color: inherit;
  font-size: .8em;
}

#nav a.sublink:hover, #nav a.sublink:active {
  display: block;
  text-decoration: none;
  padding: 5px .3em;
  color: #275f9d;
  background-color: inherit;
  font-size: .8em;
}

/** This style ensures that the whole box is clickable as a link. **/
* html #nav a.toplink, * html #nav a.sublink {
  width: 100%;
}

/** This style hides the dropdown menu until the top level is hovered over **/
#nav ul.subnav {
  display: none;
  position: absolute;
  padding: 0;
}

/** This style is for Internet Explorer as you may lose the hover effect because of the gap between main list and dropdown list. **/
/* #nav ul.subnav li.sub_level_dropboxes {
  border: 0 none;
  border-bottom: 1px solid #000;
  border-top: 2px solid #000;
  background-color: #000;
  color: inherit;
  margin-bottom: -1px;
  margin-top: 1px;
  padding: 0;
}*/

/** This hover effect causes the dropdown menu to activate upon hovering over the top level menu item **/
#nav li.top_level_li:hover ul.subnav, #nav li.top_level_li:active ul.subnav {
  display: block;
}

/** This styles the dropdown item that is a heading and not an actual link. **/
#nav ul.subnav li.nolink {
  width: 130px;
  height: 22px;
  color: #fff;
  background-color: #000;
  margin: .08em 0 0 -4px; /* 1px 0 */
  padding: 5px 0 0 0;
  text-align: center;
  font-size: .8em;
  font-weight: 600;
  border: 1px solid #fff;
}

#nav ul.subnav li.nolink:hover, #nav ul.subnav li.nolink:active {
  width: 130px;
  height: 22px;
  margin: .08em 0 0 -4px; /* 1px 0 */
  background-color: #000;
  color: inherit;
  border: 1px solid #fff;
}

/***************************************** END MAIN NAVIGATION STYLE ROLL OVERS ***************************************/

/***************************************** START ACTIVE PAGE STATE LINK STYLES ****************************************/
#home #navwrapper ul#nav li.home,
#sitemap #navwrapper ul#nav li.sitemap, 
#about #navwrapper ul#nav li.about, 
#blog #navwrapper ul#nav li.blog, 
#contact #navwrapper ul#nav li.contact,
#websites #navwrapper ul#nav li.websites,
#projects #navwrapper ul#nav li.projects,
#chat #navwrapper ul#nav li.chat,
#login #navwrapper ul#nav li.login {
  float: left;
  width: 85px;
  height: 40px;
  position: relative;
  border: none;
  background: url(/images/bluetab.png);
  /*background-position: top middle;*/
  background-repeat: no-repeat;
  color: #fff !important;
  margin-right: -5px;
}
/****************************************** END ACTIVE PAGE STATE LINK STYLES *****************************************/

/**************************************** START ROLL OVER POP UP GRAPHIC STYLES ***************************************/
ul#nav li.home a.toplink img.homeimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.home a.home2:hover img.homeimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}

ul#nav li.sitemap a.toplink img.sitemapimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.sitemap a.sitemap2:hover img.sitemapimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}

ul#nav li.about a.toplink img.aboutimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.about a.about2:hover img.aboutimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}

ul#nav li.blog a.toplink img.blogimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.blog a.blog2:hover img.blogimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}

ul#nav li.contact a.toplink img.contactimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.contact a.contact2:hover img.contactimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}

ul#nav li.websites a.toplink img.websitesimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.websites a.websites2:hover img.websitesimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}

ul#nav li.projects a.toplink img.projectsimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.projects a.projects2:hover img.projectsimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}

ul#nav li.login a.toplink img.loginimg {
  width: 0;
  height: 0;
  border-width: 0;
}

ul#nav li.login a.login2:hover img.loginimg {
  position: fixed;
  top: 110px;
  left: 1%;
  height: 50px;
  width: 50px;
}
/***************************************** END ROLL OVER POP UP GRAPHIC STYLES ***************************************/

/********************************* End Top Navigation Menu Styles ********************************/

div#header {
  position: relative;
  width: 100%;
  margin: 45px 0 0 0;
  padding: 0;
  border-bottom: 6px solid #275f9d;
  z-index: 2; 
}

/********** Middle section of website ************/
div#middle {
  width: 100%;
  margin-top: 5px;
}

div.midbox {
  position: relative;
  width: 85%;
  height: auto; /** Set this to auto once content is added to website so it will expand **/
  float: left;  
  color: inherit;
  background: url(/images/main_middle_back.png);
  margin: -50px auto 0 7%;
  padding: 50px 5px;
  z-index: 1;
}

div.midwrap {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}

div.midwrap_left {
  width: 35%;
  float: left;
  height: 300px;
  color: inherit;
  background: url(/images/Tims_Mug.png) no-repeat 50% 50%;
}

div.midwrap_middle {
  width: 40%;
  float: left;
}

div.midwrap_twocol_right {
  width: 65%;
  float: left;
}

div.oldclient_frame {
  width: 100%;
  border: 1px solid #275f9d;
  padding: 5px;
  margin: 2px 0;
}

div.midtext {
  width: 95%;
  margin: 5px auto;
}

div.midtext p {
  text-align: justify;
  font-size: .8em;
  text-indent: 1.0em;
  padding: 5px;
}

div.midwrap_right {
  width: 25%;
  float: left;
  height: auto;
}

/**div.rightbox {
  margin: 5px auto;
  width: 200px;
  border: 1px solid red;
}**/

div.rightbox_top {
 width: 200px;
 color: inherit;
 background: url(/images/blue_dialog_top.png) no-repeat;
 margin: 10px auto 0 auto;
 padding: 0;
}

div.rightbox_top p {
  padding: 0 0 2px 5px;
  font-variant: small-caps; 
}

div.rightbox_middle {
  width: 194px;
  height: auto; /** take this value off once I have content added **/
  color: inherit;
  background-color: #000; 
  clear: both;
  margin: 0 auto;
  padding: 0;
  border-right: 3px solid #275f9d;
  border-left: 3px solid #275f9d;
}

div.rightbox_middle ul {
  font-size: .6em;
  list-style: square;
  margin-left: 15px;
  padding: 5px;
}

div.rightbox_middle p {
  font-size: .6em;
  padding: 5px;
  text-indent: 1.0em;
  text-align: justify;
}

div.rightbox_bottom {
  width: 194px;
  color: inherit;
  background-color: #000;
  clear: both;
  margin: 0 auto;
  padding: 0;
  border-right: 3px solid #275f9d;
  border-bottom: 3px solid #275f9d;
  border-left: 3px solid #275f9d; 
}

/**********Footer section of website ************/
div#footer {
  position: relative;
  width: 100%;
  height: 40px;
  float: left;
  margin: -35px 0 0 0;
  padding: 0;
  border-top: 6px solid #275f9d;
  z-index: 2; 
}

div.footbox {
  width: 85%;
  clear: both;
  margin: 0 auto 0 7%;
}

div.footbox div.cpy p {
  padding: 4px;
}

div.cpy {
  width: 200px;
  float: left;
}

div.addthis {
  width: 126px;
  float: right;
  padding: 5px 0 0 0;
}

/********** Credits section of website ************/
div#credits {
  width: 85%;
  margin: 0 auto 10px auto;
}

/******************************************* Start Styles for sitemap.php *******************************************/

ul.sitemap1 {
  font-size: .8em;
  margin: 1px 0 2px 20px;
  padding: 0;
}

ul.sitemap2 {
  list-style-type: square;
  margin: 0 0 0 20px;
  padding: 0; 
}

ul.sitemap2 li {
  margin-bottom: 5px; 
}

ul.sitemap3, ul.sitemap3 li {
  list-style-type: square;
  margin: 0 0 0 8px;
  padding: 0;
}

/******************************************** End Styles for sitemap.php ********************************************/

/******************************************* Start Styles for training.php ******************************************/
ol.training li {
  list-style-type: upper-alpha;
  margin: 0 0 1em 4em;
  padding: 0;
  font-size: .8em;
  font-weight: 400;  
}

ol.training li ol li {
  list-style-type: lower-roman;
  margin: 0 0 0 1em;
  padding: 0; 
}
/******************************************** End Styles for training.php *******************************************/