/* -----------------------------------
   |                                 |
   |   Main styles for my site       |
   |   by M002u2                     |
   |                                 |
   ----------------------------------- */

/* CSS RESET (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: white;
    background: black;
    font: 9pt/17pt arial;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

/* --- Site ---------------------- */
    
#header { padding-top: 20px; }
#header .quote { float:right; width: 290px; background: black url(../images/nav/bg_quote.png); text-align: center; margin-right: 50px; padding: 5px; height: 65px; }
#header .quote i { font: italic 16pt/28pt arial; }
#header .quote span { font:8pt/16pt arial; }
#header img { margin-left: 50px; }

#tabs { background: black url(../images/nav/bg_tabs.png); border-top: 1px solid #999999; border-bottom: 1px solid #999999; height: 26pt; }
#tabs ul { width: 500px; margin: 0 auto; }
#tabs ul li { float: left; padding: 0 30px; font: 14pt/26pt arial; background: url(../images/nav/tabs_separator.png) 100% 0 no-repeat; }
#tabs ul li a { color: white; text-decoration: none; }
#tabs ul li a:hover { color: #AAAAAA; }

#main {  background: white url(../images/cowspots.gif) -10px; }
#frame { width: 880px; margin: 0 auto; clear:both; padding: 10px; }

#menus { width: 200px; float: left; margin-left:20px; border: 1px solid gray; background: white; color: black; }
#menus .title { background: black url(../images/nav/bg_menu.png); color: white; font: 14pt/26pt arial; text-align: center; }
#menus ul { list-style: none; margin: 10px 0 10px 20px; padding-left: 10px; font-weight: bold; }
#menus ul li { list-style-image: url(../images/nav/bullet.png); }
#menus ul li a { color: #555555; text-decoration: none; }
#menus ul li a.menusselected { color: black; text-decoration: none; }
#menus ul li a:hover { color: black; text-decoration: underline; }

#content { width: 590px; margin: 0 20px 0 250px; border: 1px solid gray; background: white; color: black; padding: 10px; }
#content.fullscreen { width: 820px; margin: 0 20px 0 20px; border: 1px solid gray; background: white; color: black; padding: 10px; }
#content h1 { font: 14pt/26pt arial; }
#content p { margin-bottom: 10px; }
#content br { clear: both; line-height: 100%; }
#content h2 { font-weight: bold; font-size: 120%; line-height: 180%; margin-top: 20px; }
#content h3 { font-weight: bold; font-size: 110%; line-height: 130%; margin-top: 10px; }
#content .work_item { margin-bottom: 20px; }
#content.fullscreen p { margin-bottom: auto; }
#content.fullscreen ul { margin: 0 10px; list-style-type: disc; }
#content.fullscreen li { margin-left: 10px; list-style-type: disc; }

#footer { border-top: 1px solid #999999; padding: 0 10px; clear: both; }
#footer p { float: left; }
#footer a { color: #999999; }
#footer #copyright { float: right; }

/* --- Splash page ------------------- */

#splash_div {
 width: 750px;
 height: 270px;
 text-align:center;
 background: transparent url(/images/splash_div_bg.png);
 margin: 150px auto 0 auto;
 padding: 0;
}
#splash_div p {
 text-align:right;
 margin: 0 30px 0 0; 
 padding: 20px 0 0 0;
 color: #DDDDDD;
 font-size: 12pt
}
#splash_div table {
 margin: 10px auto 0 auto;
 padding: 0;
 border: 0;
 width: 100%;
}
#splash_div td {
 margin: 0;
 padding: 0;
 width: 30%;
 vertical-align: middle;
 text-align: center;
 border: 0;
}
#splash_div td a {
 color: #708095;      
 font-size: 18pt;
 font-weight: normal;
 text-decoration: none;
}
#splash_div td a:active, #splash_div td a:hover {
 color: #c0dbff;
 font-size: 19pt;
 font-weight: normal;
 text-decoration: none;
}
#splash_div td img {
 vertical-align: -15px;
 width: 50px;
 height: 50px;
 margin: 0 5px 0 0;
 padding: 0;
 border: 0;
}
#splash_div #logo {
 display:block;
 width:306px;
 height:109px;
 color:white;
 margin: 30px auto 15px auto;
 font-size: 50pt;
 font-weight: bold;
}
#splash_div hr
{
    height: 2px;
    margin:0 2px;
    padding:0;
    border:0;
    color: black;
    border-top:1px solid #222222;
    border-bottom:1px solid #666666;
}
#splash_div .hrtop
{
    border-bottom:1px solid #222222;
}
#splash_div .hrbottom
{
    border-top:1px solid #666666;
}