/** 
 * Main screen stylesheet.
 * 
 * @author Ing. Ondrej Hanak
 * @link http://ondrejhanak.cz
 */

/* 
	link - red:   #d70000;
  menu - light red: #cc0000;
  menu - dark red: #990000; 
*/

html, body {height: 100%;}
body {margin: 0; padding: 0; background: #a8abbf url('../images/bgbody.png') center 0 repeat-y; font-family: sans-serif;
font-size: 12px;} 
a {color: #d70000; outline: none;}
.pdf {background: url('../images/pdf.gif') 0 0 no-repeat; padding-left: 22px;}
table {border-collapse: collapse;}
td {vertical-align: top;}
.center {text-align: center;}
a img {border: none;}

/* main page container */
#page {width: 960px; position: relative; min-height: 100%; margin: 0 auto -33px auto;
background: #fff url('../images/bgmain.png') 0 0 repeat-y;}


/* header */
#header {background: url('../images/header.jpg') 0 0 no-repeat; height: 200px; position: relative; color: #d70000;
border-bottom: 4px solid #bf0000;}
#header a {display: block; text-decoration: none; color: #d70000;}
#header h1 {font-size: 26px; letter-spacing: -1px; margin: 0; text-transform: uppercase; position: absolute; top: 20px;
left: 170px; width: 450px; text-align: center;}
#header #langs {background: #d4d5f2; border: 1px solid #000; height: 20px; position: absolute; top: 173px; left: 680px;
padding: 0 10px 0 12px; letter-spacing: 1px;}
#header #langs a { font-weight: bold; line-height: 19px; padding: 0 0 0 22px;}
#header #langs .cz {background: url('../images/flag_cz.png') 0 58% no-repeat;}

/* social icons */
#social {position: absolute; top: 36px; left: 11px;}
#social div {margin: 0 0 12px 0; text-align: center;}
#social .faceb {width: 50px;}
#social .faceb a {padding: 52px 0 0 0; font-size: 80%; color: #3c5fad;
background: url('../images/fbico.png') no-repeat top left;}


/* left column */
#left {width: 160px; float: left; margin-bottom: 30px;}
#left ul {list-style: none; padding: 0;}

/* menu */
ul.menu {margin: 0; font-size: 12px;}
ul.menu li {display: block; border-bottom: 1px solid #8c0000;
background: #bf0000 url('../images/menuli.gif') no-repeat 152px 50%;}
ul.menu li.big {margin-bottom: 4px; background: #bf0000 url('../images/menuli.gif') no-repeat 152px 50%;
border-bottom: 0;}
ul.menu li.big a:hover {text-decoration: underline;}
ul.menu li:hover, ul.menu li.big:hover, ul.menu li.active {background-color: #900;}
ul.menu li a {display: block; height: 33px; width: 100%; padding: 3px 0 0 10px; color: #fff; text-decoration: none;}
ul li.single a {padding-top: 10px; height: 26px;}

/* submenu */
ul.menu ul {display: none; margin: -36px 0 0 0; margin-left: 165px;}
ul.menu li:hover ul, ul.menu li.hover ul {position: absolute; z-index: 2; display: block;}
ul.menu ul li {margin-left: 5px; border-bottom: 1px solid #fff;}
ul.menu ul li a {background: #900; color: #fff; height: auto; padding: 3px 0 3px 15px; width: 100px; margin: 0;}
ul.menu ul li a:hover {text-decoration: underline;}


/* middle column */
#middle {width: 609px; padding: 0 15px 20px 15px; float: left; text-align: left; background: #fff; color: #000;
font-size: 13px;}
#middle ul, #middle ol {margin: 5px 0 0.8em 25px; padding: 0;}
#middle p {margin: 0 0 0.8em 0;}
#middle li {margin: 0 0 4px 0;}
#middle ol li {margin: 0 0 0.6em 0;}
#middle ul#download {list-style: square; margin: 0 0 0 2.5em;}
#middle h2 {font-size: 18px; color: #000; margin: 0.8em 0 10px 0;}
#middle h3, #middle  h4 {margin: 1.2em 0 0.3em 0;}
#middle h4 span {font-weight: normal;}
span[lang], td[lang] {font-style: italic;}
#middle p.contact {background: #e1e3ed url('../images/kontakt.jpg') 5px 5px no-repeat; padding: 4px 0 5px 95px;
line-height: 1.4; min-height: 55px; margin: 20px 0; }
#middle p.contact strong {color: #f00;}

.linkback {color: #d70000; text-decoration: underline; cursor: pointer;}

/* exercise - instructions and example */
p.example, p.instructions {padding: 6px 21px 6px 21px; border: 1px solid #ffea00; background: #feffae;
font-weight: bold; margin: 15px 0;}
p.example span, p.instructions span {font-weight: normal; display: block; margin: 0 0 4px -14px;}
p.instructions {background: #dfeff2; border-color: #91ccd9;}

/* link back to exercises list */
a.backex {text-decoration: none; font-weight: bold; background: #000 url('../images/back.png') no-repeat 16.3em 55%;
color: #fff; display: block;  padding: 2px 0; text-align: center; border: 1px solid #000;}
a.backex:hover {background-color: #1c1c1c ; color: #fff;}
hr {margin: 10px 0; padding: 0; border: none; border-top: 1px solid #666;}

/* link to the page begining */
p.toplink {text-align: right; margin: -0.5em 0 0 0;}
p.toplink a {padding: 0 9px 0 0; background: url('../images/top.png') right 4px no-repeat;}

/* exercise buttons */ 
.buttons {overflow: hidden; margin: 0 auto;}
.buttons a, .buttons button {border: 1px solid #bababa; border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0;
text-decoration: none;
background: #eaeaea no-repeat 10px 50%; cursor: pointer; margin: 0 6px 0 0; font-size: 14px; font-weight: bold;
float: left;}
.buttons a {width: 70px; height: 20px; display: block; padding: 5px 0 0 35px; float: left;}
.buttons button {width: 90px; height: 27px; padding-left: 20px;}
.buttons .btnclear {background-image: url('../images/btn_clear.png'); color: #d12f19;}
.buttons .btnremove:hover {background-color: #fbe3e4; border-color: #fbc2c4;}
.buttons .btnshow {background-image: url('../images/btn_show.png'); color: #336699;}
.buttons .btnshow:hover {background-color: #dfeff2; border-color: #91ccd9;}
.buttons .btncheck {background-image: url('../images/btn_check.png'); color: #529214;}
.buttons .btncheck:hover {background-color: #E6EFC2; border-color: #C6D880;}


/* answers coloring */
div.right {color: #336699;}
div.right span {font-weight: bold;}
span.wrong {color: #d12f19; font-weight: bold;}
span.right {color: #529214; font-weight: bold;}


/* right column */
#right {float: right; padding: 10px 0 0 0; width: 160px;}
#right p {margin: 0; padding: 0 5px 10px 5px; font-weight: bold;}


/* footer */
.clearfooter {clear: both; height: 33px;}
#footer {background: #999; border-top: 1px solid #888; border-bottom: 1px solid #777; text-align: right;
padding: 8px 170px 0 180px; height: 23px; position: relative; font-size: 11px; color: #000; width: 610px; margin: 0 auto;}
#footer a {color: #d70000; text-decoration: none;}