/**
 * 
 *  Martin Hakl
 *  http://www.martinhakl.eu
 *  
 *  Hlavni CSS styl.
 *  
 *  Autor: Martin Hakl
 *
 *
 *    I.   Zakladni CSS tridy
 *    II.  Nadpisy & zakladni tagy 
 *  
 *    1) Pisma & barvy pisma
 *    2) Layout
 *    3) Jednotlive stranky
 *
 *  media: print
 *
 **/ 


 /*
 * I. Zakladni CSS tridy
 *     ==================
 **/
html, body, div, p, li, ul, form, 
set, h1, h2, h3, h4, h5, h6   { margin: 0; padding: 0; list-style: none; }
.none     { display: none;}
.hidden   { visibility: hidden;}
.fl       { float: left !important;}
.fr       { float: right !important;}
.left     { text-align: left;}
.right    { text-align: right;}
.center   { text-align: center !important;}
.bold     { font-weight: bold;}
.italic   { font-style: italic;}
.nomargin { margin: 0 !important;}
img       { border: none;}
a         { outline-style: none; }
.red      { color: #ff2805 !important;}

.clear        { display: block; clear: both; width: 100%; height: 0; line-height: 0; font-size: 0; }
.clear1px     { clear: both; height: 1px; font-size: 1px; line-height: 1px; /* for IE */}
.clear5px     { clear: both; height: 5px; font-size: 5px; line-height: 5px; /* for IE */ }
.clear20px    { clear: both; height: 20px; font-size: 20px; line-height: 20px; /* for IE */ }
.clear30px    { clear: both; height: 30px; font-size: 30px; line-height: 30px; /* for IE */ }

.borderRight {  border-right: 1px solid #d9eaf4; }

html, body         { height: 100%; }


/*
 * II. Nadpisy & zakladni tagy
 *     =======================
 **/

/* -- Links -- */
a, a:visited, a:active, a:link {  color: #e00400; text-decoration: underline; }
a:hover                        {  text-decoration: none; }
a.ext { padding-right:12px; background:url('../images/ico/ico-ext-red.gif') 100% 0 no-repeat; }

#footer a { color: #fff ;}

/* -- Nadpisy -- */
h1, h2, h3 { font-weight: bold; }

h1         { font-size: 1.6em; margin: 0 0 15px; }
h2         { font-size: 1.3em; margin: 0 0 15px; }
h3         { font-size: 1.1em; margin: 0 0 5px; }      

.title     { font-size: 1.4em; margin: 0 0 25px; }

html, body  {	height: 100%; }
body        { letter-spacing: 0em; background: #01080f url(../images/bg-body.jpg) center top no-repeat; }

/*
 * 1) Pisma & barvy pisma
 *    ===================
 **/
body, input, textarea { font: 0.9em/1.4em Arial, sans-serif; }

a { color: #000; text-decoration: underline;}
a span { cursor: pointer;}
a img { border: 0;}

h1, h2, h3 { color: #072a52; }

table { font-size: 1em;}

#content, input, textarea { color: #202020;}
#footer { font-size: 0.8em; color: #fff; }

#content p {
  margin-bottom: 20px;
  font-size: 0.917em;
  line-height: 1.6em;
}

/*
 * 1) Layout
 *    ======
 **/

#main {
	position: relative;
 	width: 930px;
	margin: 0 auto;
	text-align: left;
 }
body>#main {
 	height: auto;
}
#header {
  position: relative;
  width: 930px; height: 130px;
}
#header #logo {
  position: relative; top: 37px; left: 5px;
  width: 351px; height: 74px;
  font-size: 1em; color: #fff;
}
#header #logo strong {
  font-size: 1.8em; font-weight: normal;
}
#header #logo a { color: #fff; text-decoration: none;}
#header #logo span{
  display: block;
  position: absolute; top: 0; left: 0;
  width: 351px; height: 74px; 
  background: url(../images/logo-martinhakl.jpg) 0 0 no-repeat;  
}
#header #main-menu {
  margin: -17px 10px 0 0;
  float: right;
}
#header #main-menu li {
  float: left;
  margin-left: 10px;
  height: 25px; line-height: 25px;
}
#header #main-menu li a {
  display: block;  padding-left: 5px;
  height: 25px; line-height: 25px;
  color: #fff; font-weight: bold; text-decoration: none;
}
#header #main-menu li a span {
  display: block;
  padding: 0 10px 0 5px;
}
#header #main-menu li.active a {
  color: #e00400;
  text-decoration: none;
  background: url(../images/bg-main-menu-left.png) 0 0 no-repeat;
}
#header #main-menu li.active a span {
  background: url(../images/bg-main-menu-right.png) 100% 0 no-repeat;
}
#header #main-menu li a:hover {
  color: #e00400;
}

#content { position: relative; }

#content .inner {
  position: relative;
  margin: 20px 0 40px; padding: 5px 30px 0;
}
#content .inner .top,
#content .inner .bottom  {
  display: block;
  position: absolute; left: 0;
  height: 20px; font-size: 0;
}
#content .w100 {  width: 870px; background: url(../images/bg-w100-middle.png) 0 0 repeat-y; }
#content .w100 .top    { top: -20px; width: 930px; background: url(../images/bg-w100-top.png) 0 0 no-repeat; }
#content .w100 .bottom { bottom: -20px; width: 930px; background: url(../images/bg-w100-bottom.png) 0 0 no-repeat; }

#content .w2v1 { overflow: hidden; height: 100%; clear: both; }
#content .w2v1 .col1 { width: 540px; float: left; background: url(../images/bg-w2v1-middle.png) 0 0 repeat-y; }
#content .w2v1 .col1 .top    { top: -20px; width: 600px; background: url(../images/bg-w2v1-top.png) 0 0 no-repeat; }
#content .w2v1 .col1 .bottom { bottom: -20px; width: 600px; background: url(../images/bg-w2v1-bottom.png) 0 0 no-repeat; }

#content .w2v1 .col2 { width: 250px; float: right; background: url(../images/bg-w1v2-middle.png) 0 0 repeat-y; }
#content .w2v1 .col2 .top    { top: -20px; width: 310px; background: url(../images/bg-w1v2-top.png) 0 0 no-repeat; }
#content .w2v1 .col2 .bottom { bottom: -20px; width: 310px; background: url(../images/bg-w1v2-bottom.png) 0 0 no-repeat; }

/* -- foooter -- */
#footer {
  margin-bottom: 20px;
  height: 30px; line-height: 30px;
}
#footer p {
  margin-left: 10px;
  float: left;
}
#footer ul  {
  margin-right: 10px;
  float: right;
}
#footer ul li {
  margin-left: 20px;
  float: left;
}

/* -- Cols layout -- */
.cols { overflow: hidden; height: 100%; clear: both; }
.cols .col1 { float: left; }
.cols .col2 { float: left; }

.cols50 .col1 { float: left; width: 47% !important; }
.cols50 .col2 { float: right; width: 47% !important; }

.cols3 .col1,
.cols3 .col2,
.cols3 .col3 { width: 33%; }
.cols3 .col3 { float: right; }

.cols4 .col1,
.cols4 .col2,
.cols4 .col3,
.cols4 .col4 { float: left; width: 25%; }

.cols1v2 .col1 { width: 33%; }
.cols1v2 .col2 { width: 66%; }

/* reference */
.ref { margin-bottom: 30px; }
.ref .thumb { margin-bottom: 10px; }
.ref .thumb a img { border: 5px solid #e8e8e8;  }
.ref .thumb a:hover img { border: 5px solid #efefef;  }
.ref ul { margin-bottom: 2px; }
.ref ul li { display: inline; }
.ref ul li h3 { display: inline; }
.ref ul li a { font-size: .9em; }
.ref p { margin-bottom: 0; }
/* browser */
.browser { margin-bottom: 10px; height: 100%; overflow: hidden; clear: both;}
.browser .thumb { width: 75px; height: 75px; float: left; text-align: center; }
.browser h3 { margin: 0 0 0 80px; padding-top: 10px; }
.browser a  { margin-left: 5px; font-size: .9em; }

.code {
  margin: 0 0 10px 0; padding: 5px 10px;
  width: 520px; height: 85px;
  color: #6a6a6a;
  background: url(../images/bg-code.gif) 0 0 no-repeat;
}

/* FormBox */
.formBox { margin-bottom: 20px;}
.formBox fieldset  { margin: 0; padding: 0; border: none; }
.formBox .clearfix { margin-bottom: 10px; }

.formBox .lab {
  margin: 0;
  line-height: 30px;
  font-size: .9em; color: #094b86; font-weight: bold;
}
.formBox .error .lab,
.formBox .lab span {
  color: #e00400;
}

.formBox .con {
  margin: 0; padding: 0;
  width: 250px; height: 32px; line-height: 32px; 
  background: url(../images/bg-input.gif) 0 0 no-repeat;
}
.formBox .error .con { 
  background: url(../images/bg-input.gif) 0 -32px no-repeat;
}
.formBox .con .input {
  margin: 0 10px; padding: 0;
  width: 230px;
  border: none; color: #202020;
  background: none;
}
.formBox .error .con .input {
  margin: 0 10px; padding: 0;
  width: 230px;
  border: none; 
  background: none;
}
.formBox .con-textarea {
  position: relative;
  margin: 0 0 20px 0; padding: 0;
  width: 536px; height: 150px;
  background: url(../images/bg-textarea.gif) 0 0 no-repeat;
}
.formBox .error .con-textarea { 
  background: url(../images/bg-textarea.gif) 0 -150px no-repeat;
}
.formBox .con-textarea .textarea {
  margin: 10px; padding: 0;
  width: 516px; height: 130px;
  border: none;  color: #275b92;
  background: none;
}
.formBox .error .con-textarea .textarea {
  margin: 10px 30px 10px 10px;
  width: 553px; 
} 

#form-message p{ height: 35px; line-height: 35px !important; display: block; padding-left: 35px; margin-bottom: 15px;  }
#form-message.correct p{ color: #426407;  background: #E3FDB6 url(../images/ico/ico-correct.gif) 10px 10px no-repeat; border: 1px solid #a5d05a; }
#form-message.error   p{ color: #e00400;  background: #fce3e3 url(../images/ico/ico-error.png) 10px 10px no-repeat; border: 1px solid #fdb6b6; }


/* ul, ol list */
.list {
  margin: 0 0 20px 10px;
  font-size: 0.917em;
}
.list li {
  padding-left: 15px;
  line-height: 1.6em;
  background: url(../images/ico/li-list.gif) 0 10px no-repeat;
}


a.btn {
	display: block; float: left;
	margin: 0 10px 0 0; padding-right: 10px;
	height: 31px;
	color: #fff !important; font-size: 1em; 
  text-transform: uppercase; text-decoration: none; 
  background: transparent url(../images/bg-submit.gif) no-repeat scroll top right;
}

a.btn span {
  display: block;
  padding: 4px 10px 5px 20px;
	line-height: 22px;
	font-weight: bold;
  background: transparent url(../images/bg-submit.gif) no-repeat;
}

a:hover.btn { background-position: 100% -31px; }
a:hover.btn span { background-position: 0 -31px; }

a.more { padding: 2px 5px; font-weight: bold; text-decoration: none; font-size: .8em; color: #565656; background: #eee; }
a:hover.more { color: #fff; background: #000; }

#articleList .item { overflow: hidden; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #efefef; }
#articleList .item .thumb { float: left; width: 160px; height: 130px; line-height: 130px; }
#articleList .item .perex { margin-left: 175px; }
#articleList .item .perex h2{ font-size: 1.2em; margin-bottom: 2px; }
#articleList .item .perex p.date { font-size: .8em; margin-bottom: 5px; color: #888; }
#articleList .item .perex p { margin-bottom: 5px; }
#articleList .last { border: none; }

#articleDetail .item { overflow: hidden; margin-bottom: 20px; padding-bottom: 10px; }
#articleDetail .item .perex h1{ font-size: 1.4em; margin-bottom: 2px; }
#articleDetail .item .perex p.date { font-size: .8em; margin-bottom: 5px; color: #888; }
#articleDetail .item .perex p { margin-bottom: 10px; }

#articleDetail .item h2 { margin-bottom: 5px; }
#articleDetail .item .thumb { border: 1px solid #dadada; margin-bottom: 20px; text-align: center; }
#articleDetail .item .thumb img { margin: 0; }