/* -------------------------------------------------------------------------------------

        ======== PROJECT INFO ==========================================================
        
        Project:		Spersicom
        Author:			Leemon Interactive [www.leemon.cz]
        Last update:	12.12.2012
        
        
        ======== STRUCTURE =============================================================
        
        01. Reset
        02. Layout
        	02.1. Titulni strana
        	02.2. Podstrana - Sluzby
        	02.3. Podstrana - O spolecnosti
        	02.4. Podstrana - Reference
        	02.5. Podstrana - Kontakt
        03. Others

------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
   01. RESET
------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img,
small, strike, strong, sub, sup, b, u, i, center, 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;
    list-style: none;
}
html, body {
    background: #e5e6e6 url('../img/bg.jpg') top left;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: #2f3c3f;
    margin: 0;
    padding: 0;
    height: 100%;
    line-height: 1.3em;
    position: relative;
    text-align: center;
}

#hp-wrapper {background: url('../img/bg-hp.png') top repeat-x;}
#wrapper {background: url('../img/bg-sp.png') top repeat-x;}

h1 span {color: #eb6e0e;}
h2 {font-size: 16px; color: #0183c6; text-transform: uppercase;}
h3 {font-size: 16px; color: #0183c6; margin: 0 0 20px 0;}

a {color: #eb6e0e;}
a:hover {text-decoration: none;}
.center {text-align: center;}


/* -------------------------------------------------------------------------------------
   02. LAYOUT
------------------------------------------------------------------------------------- */

/* ---   02.1. Titulni strana
------------------------------------------------------- */
* {
	margin: 0;
}
#wrapper {background: url('../img/bg-wrapper.jpg') top left repeat-x; width: auto; min-width: 1000px;text-align: center; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto 0px;}
#wrapper.bb {margin: 0 auto -193px;}
#wrapper.bb .push-bb {height: 193px;}

#web {background: url('../img/bg-flare.png') top center no-repeat; width: auto; min-width: 1000px;}
#top {background: #ffffff url('../img/bg-top.png') top repeat-x; width: auto; min-width: 1000px; height: 104px; position: relative; z-index: 50; text-align: center; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);}
#top .inner {width: 960px; height: 104px; margin: auto; text-align: left; position: relative;}
#top .inner a.logotype {background: url('../img/logo.png') no-repeat; width: 106px; height: 60px; text-indent: -9999px; display: block; position: absolute; left: 0; top: 24px;}

#top .inner .navigation {background: url('../img/bg-nav.png') top left no-repeat; list-style: none; height: 62px; padding: 3px 0 0 50px; position: absolute; right: 0; top: 52px;}
#top .inner .navigation li {background: url('../img/nav-list.png') 0px 22px no-repeat; padding-left: 4px; float: left;}
#top .inner .navigation li.first {background: none; padding-left: 0px;}
#top .inner .navigation li a {text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 600; line-height: 49px; height: 49px; padding: 0 24px; display: block;}
#top .inner .navigation li a:hover {background: url('../img/bg-nav-hover.png') top center no-repeat; height: 62px; line-height: 49px; color: #0082c6;}
#top .inner .navigation li.active a {background: url('../img/bg-nav-active.png') top center no-repeat; height: 62px; line-height: 49px;}

#top .inner .top-contact {position: absolute; top: 19px; right: 0; font-size: 12px; font-weight: 600; color: #83909d;}
#top .inner .top-contact li {height: 18px; line-height: 18px; float: left;}
#top .inner .top-contact li.phone {background: url('../img/top-contact-split.png') left center no-repeat; padding-left: 15px; margin-left: 14px;}
#top .inner .top-contact li.mail span {background: url('../img/top-contact.png') bottom left no-repeat; display: block; padding-left: 30px;}
#top .inner .top-contact li.phone span {background: url('../img/top-contact.png') top left no-repeat; display: block; padding-left: 30px;}
#top .inner .top-contact li.lang span {background: url('../img/top-contact-split.png') top left no-repeat; display: block; padding-left: 15px; margin-left: 15px;}
#top .inner .top-contact li a {color: #83909d; text-decoration: none; font-weight: 600;}

#content {width: 1000px; margin: auto; position: relative; z-index: 60;}
#content #main {padding-bottom: 50px;}
#content #header {text-align: left; margin: 0 20px; position: relative; padding-top: 1px;}
#content #header h1 {margin: 85px 0 45px 0; color: #728589; font-size: 32px; line-height: 30px; font-weight: 800; text-transform: uppercase; text-shadow: 0px 1px 1px rgba(255,255,255,1);}
#content #header p.main-claim {font-size: 16px; width: 500px; margin: 0 0 25px 0; text-shadow: 0px 1px 1px rgba(255,255,255,1);}

div#slideshow {width: 440px; height: 340px; position: absolute; top: 10px; right: 0; z-index: 5;}
div#slideshow ul#slides {list-style: none;}
div#slideshow ul#slides li {margin: 0 0 20px 0;}



a.button {background: #ccd3da url('../img/bg-button.png') top repeat-x; color: #2f3c3f; height: 26px; line-height: 26px; padding: 0 14px; display: inline-block; border: 1px solid #bdc6ce; text-decoration: none; font-size: 13px;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
box-shadow: inset 1px 1px 1px rgba(255,255,255,1), 0px 1px 1px rgba(0,0,0,0.3); -moz-box-shadow: inset 1px 1px 1px rgba(255,255,255,1), 0px 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,1), 0px 1px 1px rgba(0,0,0,0.3);
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
a.button span {background: url('../img/button-span.png') center right no-repeat; display: block; padding-right: 18px;}
a.button:hover {background: rgba(255,255,255,0.5);}
a.button:hover span {background: url('../img/button-span-hover.png') center right no-repeat;}

#home-services {width: 960px; height: 54px; margin: 70px 15px 40px 15px;}
#home-services li {background: url('../img/bg-home-services.png') top repeat-x; width: 308px; margin: 0 5px; text-align: left; float: left; text-transform: uppercase; font-size: 14px; overflow: hidden; text-shadow: 0px 1px 1px rgba(255,255,255,1);
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #bdc6ce;
box-shadow: inset 1px 1px 1px rgba(255,255,255,1), 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 1px 1px 1px rgba(255,255,255,1), 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,1), 0px 1px 2px rgba(0,0,0,0.3);}
#home-services li span {font-weight: 800; display: block;}
#home-services li a {background: url('../img/button-span.png') 268px 21px no-repeat; padding: 10px 14px; color: #2f3c3f; text-decoration: none; display: block; line-height: 17px;}
#home-services li a:hover {background: rgba(255,255,255,0.5) url('../img/button-span-hover.png') 268px 21px no-repeat;}

#reference {background: #ffffff; width: 960px; padding: 15px 20px; box-shadow: 0px 1px 2px rgba(0,0,0,0.1); position: relative; font-size: 12px; }
#reference h2 {text-align: center; background: url('../img/h2-line.gif') center repeat-x; margin: 0 0 15px 0;}
#reference h2 span {text-align: center; background: #ffffff; padding: 0 10px;}
#reference .item {width: 450px; float: left; text-align: left;}
#reference .item.sec {float: right;}
#reference .item p {margin: 0;}
#reference .item strong {color: #889fa4; text-transform: uppercase; margin-top: 4px; display: inline-block;}
#reference .item span.company {font-weight: bold;}
#reference .more {background: url('../img/reference-more.png') top no-repeat; width: 122px; height: 29px; position: absolute; right: -2px; bottom: -31px; color: #0183c6; padding: 2px 0 0 68px; text-align: left; font-weight: 600; text-decoration: none;}
#reference .more:hover {background-position: bottom; color: #eb6e0e;}

#reference p.center {margin: 0 0 10px 0; text-align: center;}
#reference .auto-logo {margin: auto;}


#footer, .push {height: 50px;}
#footer {background: #ffffff; border-top: 1px solid #d7d9dd; font-size: 12px; line-height: 50px; position: relative;}
#footer .inner {width: 960px; margin: auto; position: relative;}
#footer p {float: left; margin: 0;}
#footer ul {float: right; margin: 0;}
#footer ul li {float: left;}
#footer ul li a {padding: 0 8px;}
#footer ul li a.l {background: url('../img/footer-split.gif') 0px 3px no-repeat; padding-left: 9px;}
.leemon {background: url('../img/leemon.png') top left no-repeat; line-height: 50px; padding-left: 75px; width: 150px; position: absolute; right: 0;}


/* ---   02.2. Podstrana - Sluzby
------------------------------------------------------- */
#content #main .service-item {width: 460px; float: left; margin: 0 40px 50px 0; text-align: left;}
#content #main .service-item.nomar {margin: 0 0px 50px 0;}
#content #main .service-item p {margin-bottom: 30px;}
#content #main .service-item ul {margin-bottom: 30px;}
#content #main .service-item ul li {background: url('../img/list-item.png') 0px 13px no-repeat; padding: 5px 0 5px 16px;}


/* ---   02.3. Podstrana - O spolecnosti
------------------------------------------------------- */
#content #main .history {background: url('../img/bg-reference-item.png') bottom center no-repeat; padding-bottom: 50px;}
#content #main .history .ilu {width: 320px; float: left; text-align: center;}
#content #main .history .info {width: 620px; float: right; text-align: left;}
#content #main .history .info h3 {margin: 0 0 20px 0;}
#content #main .char {background: url('../img/bg-char.png') bottom center no-repeat; padding: 30px 0 40px 0; margin-bottom: 50px;}
#content #main .process {padding-bottom: 50px;}
#content #main .process .items {width: 865px; margin: auto;}
#content #main .process .items p {background: #eef4f6; width: 147px; height: 44px; line-height: 44px; color: #eb6e0e; font-size: 12px; font-weight: 800; text-transform: uppercase; float: left; border: 1px solid #c5d4d8;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: inset 0px 1px 1px rgba(255,255,255,1), 0px 1px 1px rgba(255,255,255,1); -moz-box-shadow: inset 0px 1px 1px rgba(255,255,255,1), 0px 1px 1px rgba(255,255,255,1); -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255,1), 0px 1px 1px rgba(255,255,255,1);}
#content #main .process .items span {background: url('../img/process-arrow.png') center center no-repeat; width: 30px; height: 44px; display: block; float: left;}


/* ---   02.4. Podstrana - Reference
------------------------------------------------------- */
#content #main .reference-item {background: url('../img/bg-reference-item.png') bottom center no-repeat; padding-bottom: 50px; margin-bottom: 40px;}
#content #main .reference-item:last-child {background: none; margin-bottom: none; padding-bottom: 30px;}
#content #main .reference-item .reference-logo {width: 320px; float: left; text-align: center;}
#content #main .reference-item .reference-info {width: 620px; float: right; text-align: left;}
#content #main .reference-item .reference-info h3 {margin: 0;}
#content #main .reference-item .reference-info p.realizace {margin: 0; color: #728589; font-weight: 600; font-size: 12px; text-transform: uppercase;}
#content #main .reference-item .reference-info p.info {margin: 20px 0 0 0;}

#bottom-box {width: 100%; background: url('../img/bottom-box.png') top center no-repeat; height: 141px; position: relative; z-index: 10;}
#bottom-box-l {width: 50%; height: 139px; background: #efefef; border-top: 1px solid #d7d9dd; position: absolute; left: 0; z-index: 11;}
#bottom-box .inner {width: 960px; height: 79px; background: #efefef; border-top: 1px solid #d7d9dd; margin: auto; padding: 30px 0; text-align: center; position: relative; z-index: 12; color: #728589; text-shadow: 0px 1px 1px rgba(255,255,255,0.7);}
#bottom-box .inner h3 {font-size: 36px; margin: 0 0 20px 0; color: #728589;}
#bottom-box .inner p {font-weight: 600; font-size: 18px; line-height: 22px; width: 900px;}

/* ---   02.5. Podstrana - Kontakt
------------------------------------------------------- */
#content #header-sp {background: url('../img/header-sp.png') bottom center no-repeat; text-align: left; padding: 1px 20px 0 20px; position: relative; line-height: 128px; margin: 0 0 50px 0;}
#content #header-sp h1 {margin: 0; color: #728589; font-size: 32px; font-weight: 800; text-shadow: 0px 1px 1px rgba(255,255,255,1); float: left;}
#content #header-sp h2 {color: #728589; font-size: 16px; font-weight: 600; width: 540px; margin: 0; float: right; text-align: right; text-transform: none;}

#content #main {padding: 0 20px;}
#content #main .contact .item {width: 300px; text-align: left; float: left;}
#content #main .contact .item p {margin-bottom: 20px;}
#content #main .contact .contact-card {width: 360px; float: right; text-align: center;}
#content #main .contact .contact-card a {background: url('../img/contact-card.png') top no-repeat; width: 182px; height: 85px; line-height: 82px; padding-left: 100px; margin: 20px auto 0 auto; text-align: left; display: block; color: #0183c6; font-size: 12px; text-shadow: 0px 1px 1px rgba(255,255,255,0.5); text-decoration: none;}
#content #main .contact .contact-card a:hover {background-position: bottom;}

#content #main .map-container {background: url('../img/bg-map.png') bottom center no-repeat; padding-bottom: 40px; margin-top: 50px; position: relative;}
#content #main .map-container .inner {background: #ffffff; border: 1px solid #bdcdd3; padding: 9px; position: relative; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
/* #content #main .map-container .map {border: 1px solid #d2dbe5; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;} */
#map {height: 340px; position: relative; overflow: hidden !important; border: 1px solid #d2dbe5; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; behavior: url(PIE.htc);}
.map-marker {width: 190px; padding-top: 12px; height: 98px; line-height: 14px;}
.map-marker a {color: #ffffff; margin-top: 10px; display: block}

#content #main .map-container .inner ul {margin-right: 20px; height: 32px; position: absolute; top: -34px; right: 20px; width: auto; margin: 0; padding: 0; float: right;}
#content #main .map-container .inner ul li {float: left; margin: 0 -1px 0 0;}
#content #main .map-container .inner ul li.li-map a {margin-right: -1px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; }
#content #main .map-container .inner ul li.li-form a {-webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px;}
#content #main .map-container .inner ul li a {background: #dde1e2; height: 24px; line-height: 24px; border: 1px solid #bdcdd3; color: #3e4b4e; margin-top: 8px; text-transform: uppercase; text-decoration: none; font-size: 10px; display: block; padding: 0 20px; font-weight: 600;}
#content #main .map-container .inner ul li a:hover {background: #ffffff;}
#content #main .map-container .inner ul li.ui-state-active a{height: 32px; line-height: 32px; background: #ffffff; margin: 0; border-bottom: 1px solid #ffffff;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}

#content #main .map-container .inner #form {margin: 10px; font-size: 13px; font-weight: 600;}
#content #main .map-container .inner #form .col {width: 300px; margin-left: 20px; float: left; text-align: left;}
#content #main .map-container .inner #form .col.first {width: 280px; margin-left: 0px; display: table !important; vertical-align: middle;}
#content #main .map-container .inner #form .col.first .col-inner {display: table-cell; vertical-align: middle;}
#content #main .map-container .inner #form .col.first p {margin: 0 0 15px 0;}
#content #main .map-container .inner #form .col.first h3 {font-size: 18px; color: #3e4b4e; margin: 0 0 15px;}
#content #main .map-container .inner #form label {display: block; height: 26px; line-height: 26px;}
#content #main .map-container .inner #form input[type="text"] {background: #e8eef0; padding: 8px 10px; margin-bottom: 5px; width: 278px; display: block; border: 1px solid #afbbc8;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

#content #main .map-container .inner #form input[type="submit"] {background: url('../img/button-send.png') top no-repeat; color: #0183c6; float: right; margin-top: 10px; font-weight: 600; width: 93px; height: 31px; font-size: 12px; padding: 0 20px 0 0; border: none; cursor: pointer;}
#content #main .map-container .inner #form input[type="submit"]:hover {background-position: bottom; color: #eb6e0e;}


#content #main .map-container .inner #form textarea {background: #e8eef0; padding: 8px 10px; margin-bottom: 5px; width: 278px; height: 150px; display: block; border: 1px solid #afbbc8;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}


/* -------------------------------------------------------------------------------------
   0X. OTHERS
------------------------------------------------------------------------------------- */
.clear {clear: both;}
.clearfix {display: inline-block;}
.clearfix:after {content: ".";display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html .clearfix {display: block;}
* html .clearfix {height: 0%;}

.left-triangle {background: url('../img/left-triangle.png') bottom right no-repeat; z-index: 15; position: absolute; bottom: 51px; left: 50%; margin-left: -1490px; height: 100%; min-height: 400px ; width: 1000px; float: left;}
#bottom-box .left-triangle {bottom: 0;}
.right-triangle {background: url('../img/right-triangle.png') 480px 0 no-repeat; z-index: 10; position: absolute; top: 104px; left: 50%; height: 80%; width: 50%; float: right;}