/*-------[ general ]---------------------*/

body {
background:url(images/bg.jpg) repeat-x #F2F2F2;
margin:100px 0 30px 0;
font:11px Arial, Tahoma, Sans-Serif;
color:#444;
}
p,ul,ol,h1,h2,h3,h4,blockquote,fieldset,form,input {
margin:0;
padding:0;
}
a {
text-decoration:none;
outline:none;
color:#4D6793;
}
a:hover {
color:#000;
}
img {
border:none;
}
.img-left {
float:left;
border:1px solid #5B5B5B;
padding:2px;
margin:3px 7px 2px 0;
}
.img-right {
float:left;
border:1px solid #5B5B5B;
padding:2px;
margin:3px 0 2px 7px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#tooltip {
position:absolute;
border:1px solid #444;
background:url(images/tooltip.jpg) repeat-x #fff;
color:#444;
display:none;
padding:5px;
}

.ie6 #networks li, .ie7 #networks li {
margin:0 0 -4px 0;
}
.ie6 #networks li a {
height:1%;
}

/*-------[ container ]---------------------*/

#container {
margin:0 auto;
width:410px;
}

/*-------[ header ]---------------------*/

#header {
height:82px;
width:350px;
padding-left:10px;
}

/*-------[ my photo ]---------------------*/

#my_photo {
float:left;
width:63px;
height:63px;
margin:7px 10px 0 0;
}
/*
#my_photo span {
position:absolute;
background:url(images/frame.png) no-repeat;
display:block;
width:63px;
height:63px;
margin:-6px 0 0 -6px;
cursor:pointer;
}
*/
#my_photo img {
display:block;
}
/*-------[ logo ]---------------------*/

#logo {
text-align:center;
float:right;
}
#logo h1 {
background:url(images/Kreatis_logo.png) no-repeat;
width:277px;
height:61px;
display:block;
text-indent:-9999pt;
}

/*-------[ navigation ]---------------------*/

#navigation {
width:410px;
height:36px;
background:url(images/navigation.png) no-repeat;
margin-top: 20px;
}
#navigation ul {
list-style:none;
margin:9px 0 0 21px;
position:absolute;
border-left:1px solid #000;
}
#navigation li {
float:left;
border-right:1px solid #000;
}
#navigation li a {
background:url(images/buttons.jpg) repeat-x;
padding:8px 12px 7px 12px;
font-size:11px;
text-transform:uppercase;
display:block;
}
#navigation li a:hover, .selected {
background:url(images/buttons.jpg) 0 -22px repeat-x !important;
}
#navigation li a span {
display:block;
height:7px;
text-indent:-9999pt;
overflow:hidden;
cursor:pointer;
}
#domov-button {
background:url(images/domov.gif) no-repeat;
width:27px;
}
#ponudba-button {
background:url(images/ponudba.gif) no-repeat;
width:35px;
}
#reference-button {
background:url(images/reference.gif) no-repeat;
width:45px;
}
#kontakt-button {
background:url(images/kontakt.gif) no-repeat;
width:37px;
}

/*-------[ content ]---------------------*/

#content {
width:370px;
padding:15px 20px 5px 20px;
background:url(images/background.png) repeat-y;
line-height:16px;
}
#content p {
margin-bottom:10px;
background: #fff;
}
#content h3 {
font:14px Arial, Tahoma, Sans-Serif;
color:#000;
border-bottom:1px solid #5B5B5B;
padding-bottom:2px;
margin-bottom:10px;
}

/*-------[ about styles ]---------------------*/

#domov ul {
list-style-image:url(images/bullet.gif);
margin:0 0 10px 15px;
background: #fff;
}

/*-------[ work styles ]---------------------*/

#works {
list-style:none;
width:420px;
margin:8px 0 0 7px;
}
#works li {
float:left;
margin:0 16px 23px  0;
}
.work-thumb {
display:block;
}
.work-thumb img {
display:block;
width:52px;
height:52px;
margin:-60px 0 0 0;
}
.work-thumb span {
display:block;
background:url(images/portfolio-frame.png) no-repeat;
width:68px;
height:68px;
margin:-8px 0 0 -8px;
position:relative;
cursor:pointer;
}
.work-thumb span:hover {
background:url(images/portfolio-frame.png) 0 -68px no-repeat;
}

/*-------[ social styles ]---------------------*/

#networks {
list-style:none;
}
#networks li {
margin:0 0 -1px 0;
background:url(images/social_bg.png) no-repeat;
border:1px solid #000;
width:368px;
}
#networks li a {
padding:5px 0 5px 7px;
display:block;
color:#809FBF;
}
#networks li a:hover {
color:#fff;
}
#networks img {
float:left;
display:block;
margin:3px 7px 0 0;
}
#networks strong {
display:block;
font-size:14px;
color:#eee;
margin:1px 0 4px 0;
}
#networks span {
display:block;
margin-bottom:1px;
}

/*-------[ contact form ]---------------------*/

#contactform {
width:370px;
}
#contactform fieldset {
border:none;
}
.input-field {
height:27px;
width:370px;
display:block;
margin-bottom:10px;
}
.input-field label {
width:57px;
background:url(images/label.jpg) no-repeat;
height:17px;
padding:5px 0 5px 12px;
float:left;
color:#eee;
}
.input-field input {
width:291px;
background:url(images/input.jpg) no-repeat;
height:17px;
padding:6px 5px 4px 5px;
border:none;
float:right;
}
#contactform textarea {
width:350px;
height:108px;
background:url(images/textarea.jpg) no-repeat;
padding:7px 10px 7px 10px;
border:none;
}
#contactform input, #contactform textarea {
display:block;
font:11px Arial, Tahoma, Sans-Serif;
color:#111;
}
.input-submit {
width:82px;
height:27px;
padding:1px 0 4px 0;
text-align:center;
background:url(images/send-button.jpg) no-repeat;
border:none;
color:#eee !important;
cursor:pointer;
margin-top:10px;
float:right;
}
.input-submit:hover {
background:url(images/send-button.jpg) 0 -27px no-repeat;
}

/*-------[ footer ]---------------------*/

#footer {
background:url(images/bottom.png) no-repeat;
width:410px;
height:18px;
}