@import url("./classes.css");

/* @import url("../_rsrc/ajax-calendar/ajax-calendar.css"); */

body, th, td, input, select, textarea, label { 
    font-size: 11px; 
    font-family: Arial, Helvetica, sans-serif; 
}

body { 
    background: #D0D0D0; color: #999;
    text-align: center;
}

div#root { 
    margin: 0 auto;
    padding-top: 250px;
    width: 960px;
    text-align: left; 
    background: #FFF;
}
div#content { 
    /*width: 719px; */
    width: 698px;
    _width: 719px;
    padding-right: 21px;
    float: right;
}
div#left_menu {
    width: 241px;
    min-height: 284px;
    _height: 284px;
    float: left;
    background: url('../_img/bg_left_menu.gif') 0% 0% no-repeat;
}
div#footer {
    padding: 3em 21px 1em 0;
    text-align: right;
}

div#top {
    width: 960px; height: 250px;
    position: absolute;
    top: 0;
    background: url('../_img/bg_top.gif') 0% 0% no-repeat;
    z-index: 97;
}

div.text {
    width: 550px;
    text-align: justify;
    float: left
}

div.r_img { float: right; }
div.r_img img { margin-bottom: 1em; border: 1px solid #999; display: block; }

h1 { 
    margin-bottom: 23px;
    padding: 5px 0 0 563px;
    font-size: 11px;
    height: 17px;
    =height: 22px;
    background: url('../_img/bg_heading.gif') 0% 0% no-repeat;
    text-transform: uppercase;
    clear: both;
    _width: 698px;
    _overflow: hidden;
    z-index: 22;
}
h2 {
    padding-top: 1em;
    font-size: 12px;
    line-height: 12px;
    clear: both;
}
h3 {
    padding-top: 1em;
    font-size: 11px;
    line-height: 12px;
    clear: both;
}

a { color: #999; }
a:hover { color: #FF6600; }

:focus {
	outline: none!important;
}

/* CONTENT */
div#content ul { margin: 0; padding: 1em 1.5em; }
div#content ul li { margin: 0; padding: .5em 0 0 0; }
div#content p { margin-bottom: 1em; }

/* LOGO */
div#logo { 
    width: 220px; height: 80px;
    margin-left: 224px;
    =margin-left: -17px;
    _margin-left: 224px;
    top: 20px;
    position: absolute;
    z-index: 98;
}
div#logo img { 
    width: 220px; height: 80px;
    z-index: 99;
}

/* LANGS, LOGIN, REGISTER */
div#langs {
    margin: 55px 21px 0 0;
    float: right;
}
div#langs a, div#langs strong { float: left; }

div#langs a#l1:hover { background: url('../_img/flags/login_on.gif') 0% 0%  no-repeat; }
div#langs a#l2:hover { background: url('../_img/flags/register_on.gif') 0% 0% no-repeat; }
div#langs a#l3:hover { background: url('../_img/flags/en_on.gif') 0% 0% no-repeat; }
div#langs a#l4:hover { background: url('../_img/flags/cs_on.gif') 0% 0% no-repeat; }
div#langs a:hover img {
    visibility: hidden;
}
div#langs div.l_divider { 
    width: 15px; height: 12px;
    background: url('../_img/flags/lang_divider.gif') 0% 0%  no-repeat;
    float: left;
}

/* PROJECT CLASSES */
.orange { color: #FF6600; }
.red { color: #FF0000; }
.ml { margin-left: 1.5em; }
.mr { margin-right: 1.5em; }

hr.img { /* There is only one way how to format HR for all browsers - actualy NOT USED (replaced by div.divider) */
    height: 3px;
    margin: 0; padding: 0;
    border: 0;
    background: url('../_img/bg_hr.gif') 0% 0% repeat-x;
    =height: 12px;
    =background: url('../_img/bg_hr_ie.gif') 0% 0% repeat-x;
    =zoom: 25%;
}
div.divider {
    height: 32px;
    background: url('../_img/bg_hr.gif') 0% 50% repeat-x;
    clear: both;
}

/* TOP MENU */
div#top_menu { margin: 120px 0 0 241px; }
div#top_menu a, div#top_menu strong { margin: 0 22px 0 0; float: left; }
div#top_menu a.last, div#top_menu strong.last { margin: 0; }
div#top_menu a img, div#top_menu strong img { width: 122px; height: 82px; }
div#top_menu div#enviro_head { 
    width: 45px; height: 15px; 
    margin: 82px 0 0 653px;
    =margin: 82px 0 0 -45px;
    background: url('../_img/top_menu/enviro_head.jpg') 0% 0% no-repeat; 
    position: absolute;
}


/* SUB MENU */
div#sub_menu {
    height: 41px;
    margin-bottom: 63px;
    _margin-bottom: 60px;
}
div#sub_menu a, div#sub_menu strong { 
    width: 92px; height: 18px;
    margin: 23px 0 0 0; 
    float: left; 
}
div#sub_menu a#join, div#sub_menu a#join_cs {
    width: 144px; height: 41px;
    margin: 0;
    _margin-right: -2px;
}
div#sub_menu a#join img, div#sub_menu a#join_cs img {
    width: 144px; height: 41px;
}
div#sub_menu a#sm6, div#sub_menu a#sm6_cs, div#sub_menu strong#sm6, div#sub_menu strong#sm6_cs { width: 93px; height: 18px; }

div#sub_menu a#join:hover { background: url('../_img/sub_menu/join_on.gif') 0% 0% no-repeat; }
div#sub_menu a#join_cs:hover { background: url('../_img/sub_menu/join_on_cs.gif') 0% 0% no-repeat; }

div#sub_menu a#sm1:hover { background: url('../_img/sub_menu/my_account_on.gif') 0% 0% no-repeat; }
div#sub_menu a#sm2:hover { background: url('../_img/sub_menu/pre_order_on.gif') 0% 0% no-repeat; }
div#sub_menu a#sm3:hover { background: url('../_img/sub_menu/whats_new_on.gif') 0% 0% no-repeat; }
div#sub_menu a#sm5:hover { background: url('../_img/sub_menu/forums_on.gif') 0% 0% no-repeat; }
div#sub_menu a#sm6:hover { background: url('../_img/sub_menu/downloads_on.gif') 0% 0% no-repeat; }

div#sub_menu a#sm1_cs:hover { background: url('../_img/sub_menu/my_account_on_cs.gif') 0% 0% no-repeat; }
div#sub_menu a#sm2_cs:hover { background: url('../_img/sub_menu/pre_order_on_cs.gif') 0% 0% no-repeat; }
div#sub_menu a#sm3_cs:hover { background: url('../_img/sub_menu/whats_new_on_cs.gif') 0% 0% no-repeat; }
div#sub_menu a#sm5_cs:hover { background: url('../_img/sub_menu/forums_on_cs.gif') 0% 0% no-repeat; }
div#sub_menu a#sm6_cs:hover { background: url('../_img/sub_menu/downloads_on_cs.gif') 0% 0% no-repeat; }

div#sub_menu a#sm4:hover { background: url('../_img/sub_menu/universe_on.gif') 0% 0% no-repeat; }

div#sub_menu a:hover img {
    visibility: hidden;
}

/* GALLERY MENU */
div#gallery_menu {
    height: 17px;
    margin-bottom: .8em;
    margin: -22px 0 68px 0;
    =margin: -50px 0 68px 0;
    _margin: -45px 0 68px 0;
    z-index: 23;
    position: absolute;
}
/* This hack is visible only for Safari and IE7 */
html>body*#gallery_menu { 
    margin: -45px 0 68px 0;
    =margin: -50px 0 68px 0;
}
div#gallery_menu a, div#gallery_menu strong { 
    width: 116px; height: 17px;
    margin-left: -7px;
    margin-left: 0px;
    margin-right: -7px;
    float: left; 
}
div#gallery_menu a#gm1, div#gallery_menu strong#gm1 { 
    margin-left: 0;
}
div#gallery_menu a#gm1:hover, div#gallery_menu strong#gm1 { background: url('../_img/gallery_menu/humanon.gif') 0% 0% no-repeat; }
div#gallery_menu a#gm2:hover, div#gallery_menu strong#gm2 { background: url('../_img/gallery_menu/skoron.gif') 0% 0% no-repeat; }
div#gallery_menu a#gm3:hover, div#gallery_menu strong#gm3 { background: url('../_img/gallery_menu/envon.gif') 0% 0% no-repeat; }
div#gallery_menu a#gm4:hover, div#gallery_menu strong#gm4 { background: url('../_img/gallery_menu/videoon.gif') 0% 0% no-repeat; }
div#gallery_menu a#gm5:hover, div#gallery_menu strong#gm5 { background: url('../_img/gallery_menu/screenshotson.gif') 0% 0% no-repeat; }

div#gallery_menu a:hover img, div#gallery_menu strong img {
    visibility: hidden;
}


/* LEFT MENU */
div#left_menu ul { 
    margin: 0; 
    padding: 0 0 0 106px; 
}
div#left_menu ul li { 
    _width: 135px;
    margin: 0;
    list-style-type: none; 
    width: 135px; 
    height: 41px;
    _height: 44px;
    float: left;
}
div#left_menu ul li a, div#left_menu ul li strong { width: 135px; height: 41px; display: block; }
div#left_menu ul li#m3, div#left_menu ul li#m4, div#left_menu ul li#m3_cs, div#left_menu ul li#m4_cs { 
    margin-top: 41px; 
}

div#left_menu ul li#m1 a:hover { background: url('../_img/left_menu/mainon.gif') 0% 0% no-repeat; }
div#left_menu ul li#m2 a:hover { background: url('../_img/left_menu/featon.gif') 0% 0% no-repeat; }
div#left_menu ul li#m3 a:hover { background: url('../_img/left_menu/galon.gif') 0% 0% no-repeat; }
div#left_menu ul li#m4 a:hover { background: url('../_img/left_menu/ginfoon.gif') 0% 0% no-repeat; }
div#left_menu ul li#m5 a:hover { background: url('../_img/left_menu/conon.gif') 0% 0% no-repeat; }

div#left_menu ul li#m1_cs a:hover { background: url('../_img/left_menu/mainon.gif') 0% 0% no-repeat; }
div#left_menu ul li#m2_cs a:hover { background: url('../_img/left_menu/featon_cs.gif') 0% 0% no-repeat; }
div#left_menu ul li#m3_cs a:hover { background: url('../_img/left_menu/galon_cs.gif') 0% 0% no-repeat; }
div#left_menu ul li#m4_cs a:hover { background: url('../_img/left_menu/ginfoon_cs.gif') 0% 0% no-repeat; }
div#left_menu ul li#m5_cs a:hover { background: url('../_img/left_menu/conon_cs.gif') 0% 0% no-repeat; }

div#left_menu ul li a:hover img { visibility: hidden; }
div#left_menu ul li { _margin-bottom: -3px; }

/* REGISTER & LOGIN BUTTONS */
/*
div#buttons { height: 38px; padding-top: 10px; clear: both; text-align: center; _width: 320px }
div#buttons a { width: 139px; height: 38px; display: block; float: left; }

div#buttons a.l, div#buttons a.l_cs { margin-left: 18px; _margin-left: 7px; }
div#buttons a.r, div#buttons a.r_cs { margin-left: 24px; _margin-right: 0px; }

div#buttons a { margin: 0; padding: 0; }

div#buttons a.l:hover { background: url('../_img/register_139x38_on.gif') 0% 0% no-repeat; }
div#buttons a.r:hover { background: url('../_img/pre-order_139x38_on.gif') 0% 0% no-repeat; }

div#buttons a.l_cs:hover { background: url('../_img/register_139x38_on_cs.gif') 0% 0% no-repeat; }
div#buttons a.r_cs:hover { background: url('../_img/pre-order_139x38_on_cs.gif') 0% 0% no-repeat; }

div#buttons a:hover img {
    visibility: hidden;
}
*/
div#buttons { height: 38px; padding-top: 10px; clear: both; text-align: center; }
div#buttons a { width: 172px; height: 44px; display: block; float: left; }

div#buttons a.l, div#buttons a.l_cs { margin-left: 18px; _margin-left: 7px; }
div#buttons a.r, div#buttons a.r_cs { margin-left: 24px; _margin-right: 0px; }

div#buttons a { margin: 0; padding: 0; }

div#buttons a.l:hover { background: url('../_img/register_butt_on.gif') 0% 0% no-repeat; }
div#buttons a.r:hover { background: url('../_img/login_butt_on.gif') 0% 0% no-repeat; }

div#buttons a.l_cs:hover { background: url('../_img/register_butt_on_cs.gif') 0% 0% no-repeat; }
div#buttons a.r_cs:hover { background: url('../_img/login_butt_on_cs.gif') 0% 0% no-repeat; }

div#buttons a:hover img {
    visibility: hidden;
}

/* SITE GALLERY */
div.gallery { margin: 0 0 2em 0; padding-top: 19px; }
div.gallery a { 
    width: 120px; height: 80px;
    margin: 0 22px 22px 0;
    =margin: 0 22px 0 0;
    padding: 0;
    border: 1px solid #999;
    float: left;
    overflow: hidden;
}
div.gallery a.wide { 
    width: 120px; height: 67px;
}
div.gallery a:hover { 
    border-color: #FF6600;
}

/* LINKS TO REFUSION */
div.banner {
    margin-top: 3em;
    height: 60px; 
}
div.banner img {
    width: 88px; height: 31px;
    margin: 16px 0 16px 3em;
    float: left;
}
div.banner textarea {
    width: 45em; height: 60px;
    margin-right: 3em;
    border: 1px solid #999;
    font-family: "Courier New", "Courier CE", "Courier New", courier, monospace;
    float: right;
    overflow: hidden;
}

/* Pop-up div - info */
.abbr { cursor: help; }
.overDiv {
    margin: -6em 0 0 1em;
    =margin: -4em 0 0 -5em;
    padding-left: .5em;
    padding-right: .5em;
    background: #FFFFEA;
    color: #000;
    border: 2px solid #FFEDC5;
    font-size: .9em;
    font-weight: normal;
    position: absolute;
    z-index: 1000;
    display: none;
}

/* Pre-order is here */
div.preorder_is_here {
    width: 320px;
    min-height: 320px;
    _height: 320px;
    margin: 0; 
    padding: 0 0 0 230px;
    background: url('../_img/skoromans_white.jpg') 0% 5px no-repeat;
}
div.preorder_is_here div.pre-text {
    height: 270px;
}
div.pre-img img {
    margin-bottom: 36px;
}
div.preorder_is_here ul {
    _width: 320px; 
    padding-right: 0 !important;
    list-style-type: square;
    clear: both;
}
/*
div.preorder_is_here {
    width: 320px;
    min-height: 320px;
    _height: 320px;
    margin: 0; 
    padding: 0 0 0 230px;
    background: url('../_img/skoromans_white.jpg') 0% 0% no-repeat;
}
div.preorder_is_here ul {
    _width: 320px; 
    padding-right: 0 !important;
    list-style-type: square;
    clear: both;
}
*/

div#videos { margin-bottom: 3em; }
div#videos h3 { margin: 2em 0 1em 0; }
div#videos div#test-videos { width: 480px; float: left; }
form#donate-form { text-align: center; margin-top: 4em; }
div#youtube-channel { text-align: center; margin-top: 2em;}
div#facebook-group { text-align: center; margin-top: 2em;}
div#facebook-likeit { text-align: center; margin: 2em 0 0 2em; width:200px;}
div#share-this { text-align: center; margin-top: 2em; }