/* CSS (c) www.hattas.sk */

/* Elements */
HTML   {margin: 0; padding:0;}
BODY   {color:#2f2f2f;  background: #c0c5c9; font: normal 80% 'Trebuchet MS', 'Geneva CE', lucida, sans-serif; margin: 0; padding:0; 	text-align:center;}


H1     {font-size:2em; margin:0px 0 10px 0; padding:0px 0 0px 0;  letter-spacing: -1px;}
H2     {font-size:1.5em; margin:0px 0px 7px 0px; padding-top:10px; color:#000;}
H3     {font-size:1.2em;  padding:5px 5px 5px 0; }
H1 a   {text-decoration: none;}

A         {color:#2f2f2f; text-decoration:underline; }
A:visited {color:#2f2f2f;}
A:active  {color:#e37a08}
A:focus   {color:#e37a08}
A:hover   {color:#1b982d;}


p      {margin-bottom:8px}
IMG    {border:none; display: block; margin:0px;}
FORM   {margin:0px;padding:0px}
UL,OL  {padding: 10px 0px 10px 20px; margin: 0px;}
HR     {height:1px; color:#c0c0c0; width:100%; background-color:#c0c0c0; border:0px solid #c0c0c0;}
acronym{border-bottom: 1px dotted gray; cursor: help;}

TABLE  {BORDER-COLLAPSE: collapse; border-spacing:0px; line-height:17px; font-size: 100%; }
TD     {vertical-align:top;}
TH     {text-align:left; vertical-align:top; background-color:#2f3d48; color:#5c5c5c; font-weight:bold; padding:10px; background: url(../images/tablebg.png) top  right repeat-x }


iframe {margin-top:10px; border:1px solid #898989}

/* Standards */
.red             {color:#ba142c; font-weight:bold }
.fontsmall       {font-size:0.85em; font-weight:normal; color:#616161;}
.fontsmall A     {color:#616161; text-decoration:underline;}
.fontbig         {font-size:2em; font-weight:bold;}
.clear           {clear:both;}
.fleft           {float:left}
.fright          {float:right; margin:10px}

.inline IMG      {display: inline;}
.inline          {display: inline; vertical-align: middle;}

TABLE.table      {border:1px solid #c0c0c0; width:620px; margin-top:5px}
.table TH        {text-align:left; vertical-align:top; background-color:#2f3d48; color:#5c5c5c; font-weight:bold; padding:15px 15px 15px 10px; background: url(../images/tablebg.png) top  right repeat-x }
.table TD        {padding:10px; border:1px solid #c0c0c0; color:#000; }

/* Site	*/
#site             {width:990px; margin: 0 auto; 	padding: 0; text-align:left; ; }

#accessible       {position:absolute;left:-1000px; top:-1000px;}
#header           {height: 77px; background: url(../images/header.jpg) no-repeat 1px 0}
#logo             {float:left; width:132px; padding:3px 0 0 33px}

#main             {float:left; width:980px; padding-left:10px; line-height: 1.5em; background: #fff url(../images/main.gif) repeat-y 0 80px}
#content          {padding:15px 35px 0px 31px}

#left             {float:left; width:670px;}
#right            {float:right; width:220px; }
#right LI         {padding-bottom:6px}

#footer           {clear:both; height:130px; font-size:.85em; color:#606162;  background:  url(../images/footer.jpg) no-repeat 0px 0; padding:10px 0 0 0px; line-height: 1.8em; text-align: center;}
#footer STRONG    {color:#606162}
#footer A         {color:#606162}
#footer A:hover   {color:#952726}


.fo1       {float: left; width:210px;}
.fo2    {float: left; width:210px;padding-right:30px; display: none}
.fo3  {float: left; width:150px; padding-right:20px;}
.fo4  {float: left; width:180px;}
.fo1submenu a {padding:7px; }

a.facebook  {background:  url(../images/facebook.png) no-repeat; padding:0 0 1px 23px; }
a.facebook:hover  {background:  url(../images/facebook.png) no-repeat 0 -16px}

#headline {float: left; width: 495px; padding-top:10px}
#headline IMG {padding:5px 0 0 30px}
#sluzby {float:right; margin:0 0 0 0px; width: 485px; }
#sluzby UL {list-style: none; margin:15px 0 0 0; padding:0; float:left; width:230px; line-height: 1.9em;}
#sluzby UL LI {background:  url(../images/plus.gif) no-repeat 0px 9px; padding:0 0 0 13px}

#nav ul {float: right;	margin: 20px 30px 0 0;	display: inline;	list-style: none;}
#nav ul li {float: left; margin-right:5px;	line-height: 0;}
#nav ul li a {display: block;	float: left;	height: 34px;	 text-decoration: none;}
#nav ul li a span {visibility: hidden;}

#nav ul li.uvod a {width: 57px;	background: url(../images/menu.png) no-repeat;}
#nav ul li.studio a {width: 121px;	background: url(../images/menu.png) no-repeat -70px 0; padding-right:6px}
#nav ul li.sluzby a {width: 65px;	background: url(../images/menu.png) no-repeat -210px 0; padding-right:9px}
#nav ul li.referencie a {width: 97px;	background: url(../images/menu.png) no-repeat -298px 0;}
#nav ul li.cena a {width: 61px;	background: url(../images/menu.png) no-repeat -414px 0; padding-right:3px}
#nav ul li.kontakt a {width: 80px;	background: url(../images/menu.png) no-repeat -494px 0;}



#nav ul li.uvod a:hover {background-position: 0 -32px;}
#nav ul li.studio a:hover {background-position: -70px -32px;}
#nav ul li.sluzby a:hover {background-position: -210px -32px;}
#nav ul li.referencie a:hover {background-position: -297px -32px;}
#nav ul li.cena a:hover {background-position: -414px -32px;}
#nav ul li.kontakt a:hover {background-position: -492px -32px;}

#nav ul li a.uvod_active  {width: 57px;	background: url(../images/menu.png) no-repeat 0 -32px;}
#nav ul li a.studio_active  {width: 121px;	background: url(../images/menu.png) no-repeat -70px -32px;}
#nav ul li a.sluzby_active  {width: 65px;	background: url(../images/menu.png) no-repeat -210px -32px;}
#nav ul li a.referencie_active  {width: 97px;	background: url(../images/menu.png) no-repeat -297px -32px;}
#nav ul li a.cena_active  {width: 61px;	background: url(../images/menu.png) no-repeat -414px -32px;}
#nav ul li a.kontakt_active  {width: 80px;	background: url(../images/menu.png) no-repeat -492px -32px;}
/*
 * SLIDER
*/
#loopedSlider {clear:both; position:relative; padding:15px;  background: url(../images/frame2.jpg) no-repeat; margin-left:22px}
.container {width:420px; height:140px; overflow:hidden; position:relative;   }

.slides { position:absolute; top:0; left:0;}
.slides > div { position:absolute; top:0;  display:none; }

		a.previous { position:absolute; top:123px; left:380px; width:16px; height:12px; display: block;  background: url(../images/sipky.png) no-repeat 0 0; text-decoration: none;}
		a.previous:hover {background-position:0 -11px}
		a.next { position:absolute; top:123px; right:20px; width:16px; height:12px; display: block;  background: url(../images/sipky.png) no-repeat -16px 0; text-decoration: none;}
		a.next:hover {background-position:-16px -11px}
  a.all { position:absolute; top:100px; left:185px; font-size: 0.85em;}
  a.previous  span, a.next  span {visibility: hidden; }

#newsslider {width:900px; padding:33px 35px 17px 35px;position:relative; clear:both; background-color: #000; background: url(../images/frame.png) no-repeat;}
  .newcontainer {width:900px; height:300px; overflow:hidden; position:relative; cursor:pointer;  }

ul.pagination { list-style-type:none; padding:20px 0 0 0; margin:0px auto;  width:48px;}
		ul.pagination li { float:left; margin:0 0px;}
		ul.pagination a { display:block; width:12px; padding:12px 4px 0 0;  height:0; overflow:hidden; background-image:url(../images/pagination.png); background-position:0 0; background-repeat:no-repeat;}
		ul.pagination li.active a {background-position:0 -12px}

/* REFERENCIE SLIDS */

#referencieslider {width:570px; margin:10px 0 20px 0; float:left; padding:56px 9px 15px 11px;  background:  url(../images/ref_frame.png) no-repeat;  margin:-2px 0 0 -10px}
 .referenciecontainer {width:570px; height:400px; overflow:hidden; position:relative; cursor:pointer; }
 
#referencieinfo {width:325px; height:350px; margin:10px 0 0px 0; background: #f4f4f4 url(../images/referencie.gif) no-repeat top right; color:#534f4f; float:left}
#referencieinfo h2 {clear:both; color:#534f4f; font-size:1.8em; line-height: 1.1em; margin-top:15px}
.referencie_txt {padding:0 30px 0 30px}
.referencie_txt UL {list-style-type:none; margin:15px 0 0 0; padding:0}
.referencie_txt LI {border-bottom:1px solid #d6d6d6; margin-bottom:4px; padding:0 0 4px 0}
.referencie_txt strong {display: block; width:60px; float:left}
#referencieslider ul.pagination { list-style-type:none; padding:10px 0 0 0; margin:0px auto;  width:48px;}
#referencieslider .center_obchody ul.pagination { width:98px;}
 
a.minitext { font-size: 0.85em; color: #7c7c7c; padding-top:5px; display: block;} /* Naspat na referencie */
a.minitext:hover {text-decoration: underline; color:#1b982d;}
.status_online { color:#1b982d;}

.referencie_nav {padding:10px 10px 20px 30px}
a.ref_dalej  {float:right; background: url(../images/refnext.png) no-repeat 0px 0 ; width:30px; height:30px; display: block; text-decoration: none; margin-left:7px}
a.ref_naspat {float:right;background: url(../images/refback.png) no-repeat 0px 0 ; width:30px; height:30px; display: block; text-decoration: none;}
a.ref_naspat:hover,a.ref_dalej:hover     {background-position:   0px -30px; }
a.ref_dalej SPAN, a.ref_naspat SPAN {visibility: hidden;}

/* INDEX */

#index                     {clear:left;}

#bottonbox {clear:left; margin-top:10px}
.boxslider {float:left; width:465px; }
.box {float:left; width: 215px; margin-left:30px;}
.box2 {float:left; width: 220px; padding-left:15px}
#bottonbox h2 {text-transform: uppercase; font-size: 1.3em;  line-height: 1.1em;}



.moreinfo {font-size: .85em; text-align: right; display: block; margin-top:-10px; padding-right:10px; background: url(../images/viac.gif) no-repeat right 7px}
.moreinfo a {color:#952726; text-decoration: underline;}

.slidermoreinfo {font-size: .85em;padding:5px 8px 0 0; background: url(../images/viac.gif) no-repeat right 10px}
.slidermoreinfo a {color:#952726; text-decoration: underline;}



.slideimg {width: 460px;}
.slideimg IMG {float:left; margin-right:25px}
.slideimg P {float:left; width: 280px; margin-top:10px; display: block; }
.slideling {font-weight: bold; text-transform: uppercase; padding-bottom:10px; display: block;}

/*
CONTENT
*/
#adresa {float:left; width:220px;  padding:10px 10px 10px 0}
#adresa STRONG {display: block; padding-bottom:2px; border-bottom:1px solid #ddd; text-transform: uppercase; width:180px}
#kontaktbg {float:left; width:210px; height:400px; background: #fff url(../images/kontakt.jpg) no-repeat top right }
#kontaktform {float:left; width:440px;}
.email, .tel {font-size: 1.3em; padding-bottom:8px; display: block; }
.email {background: url(../images/mail.gif) no-repeat; padding:0px 0 7px 27px}
.tel {background: url(../images/tel.gif) no-repeat; padding:2px 0 0 27px}




/* CENA */
TH.th1 {width:140px} TH.th3 {width:80px}
.table div.arrow { background:transparent url(../images/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
.table div.up { background-position:0px 0px;}
#tableexpand tr.trfirstchild td { background:#ddd}
.cenaleft {float: left; width:336px; line-height: 1.8em;}
.cenaright {float: right; margin:0 0px 0 0;   }
.cenarightpic1 {background: url(../images/cena1.jpg) no-repeat; width:259px; height:199px; }
.cenarightpic2 {background: url(../images/cena2.jpg) no-repeat; width:259px; height:199px }
.cenarightpic3 {background: url(../images/cena3.jpg) no-repeat; width:259px; height:199px }
.cenarightpic4 {background: url(../images/cena4.jpg) no-repeat; width:259px; height:199px }


.cenaright A {display: block; padding:99px 0 0 70px; font-size: 1.4em; color:#fff}
.cenaright A:visited {color:#fff}
.cenaright A:hover {color:#f1f1f1}


.cenaicon1, .cenaicon2, .cenaicon3 {position: relative;}
.cenaicon1 IMG {position: absolute; top:-20px; left:415px}
.cenaicon2 IMG {position: absolute; top:-20px; left:400px}
.cenaicon3 IMG {position: absolute; top:-10px; left:400px}

/* !departments slider ----------------------------------------------------- */

.vzorbox {clear:left; margin:20px 0 30px 10px; display: none;}
.slider {padding-bottom: 1.1111em; width: 621px;}
.slider P, .slider h4 {margin:0;padding:0}
.slider h3 {font-size: 1em;	height:20px; color:#4b4b4b;	line-height: 1.1111em;	margin: 0.5555em 0 0 0;	padding: 0.9em 0.5555em  1em  2.3em ; background: url(../images/more-info.gif) no-repeat 0px 0px;}
.slider SPAN.cena1 {float: left; display: block;}
.slider SPAN.cena2 {float: right; display: block;}
.slider A {color: #4b4b4b;}
.slider A:hover {color: #cc0000;}
.slider h3.active {color: #fff;	background-image: url(../images/close-info.gif);}


/* STUDIO */
#studiotxt {font-size: 1.2em; width:450px; line-height: 26px; margin:30px 0 10px 0}
#studio {height:522px}
#studioimg {position: relative; }
#studioimg IMG {position: absolute; top:49px; left:472px}
.studiobox {float:left; width:210px; margin-right:20px; line-height: 17px;}

/* SLUZBY */
#sluzbypage {margin-top:25px}
#sluzbypage DIV{float:left; margin: 0 22px 22px 0; width:190px; background-color: #f4f4f4; padding:10px;   -moz-border-radius: 15px;   border-radius: 15px; }
#sluzbypage IMG {margin-bottom:10px;}
#sluzbypage DIV.paddingnone {margin-right:0;}

#sluzbypage  h2 {font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;	font-size: 13px; 	text-transform: uppercase;	font-weight: normal;	padding:0; margin:0;	text-decoration: none;}
#sluzbypage  h2 a{text-decoration: none;}

/* REFERENCIE */

#refmenu {float:right; width:220px; margin-top:-7px; }

a.refshopicon  {float:left; background:  url(../images/refshop.png) no-repeat 62px 0 ; width:100px; height:30px; display: block; font-size:1em; font-weight: bold;}
a.ref_next     {float:left; margin-right:15px; background: url(../images/refnext.png) no-repeat 45px 0 ; width:80px; height:30px; display: block; font-size:1em; font-weight: bold; }
a.ref_back     {float:left; margin-right:15px; background: url(../images/refback.png) no-repeat 50px 0 ; width:80px; height:30px; display: block; font-size:1em; font-weight: bold; }

a.refshopicon SPAN, a.ref_next SPAN, a.ref_back SPAN  {padding-top:5px; display: block;}

a.refshopicon:hover  {background-position:   62px -30px;}
a.ref_next:hover     {background-position:   45px -30px;}
a.ref_back:hover     {background-position:   50px -30px;}

a.referencienext  {display: block; width: 247px; color: #fff; background: url(../images/pages.png) no-repeat; height: 40px; margin: 0px auto; font-size: 16px; text-decoration: underline; text-transform: uppercase; padding: 18px 20px 0 16px;}
a.referencienext:hover,a.referencieback:hover   {background-position:0px -56px; color: #000; text-decoration: underline;}
a.referencieback  {display: block; width: 247px; color: #fff; background: url(../images/pages_back.png) no-repeat; height: 40px; margin: 0px auto; font-size: 16px; text-decoration: underline; text-transform: uppercase; padding: 16px 0px 0 40px;}



#referencie DIV {margin: 11px 11px 11px 0;  padding: 5px;  background: #f4f4f4;  -moz-border-radius: 15px;  -webkit-border-radius: 15px;  border-radius: 15px;  float: left; }
#referencie  h2 {font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 	font-size: 1em;	text-transform: uppercase;	font-weight: normal;	padding:0; margin:5px 0 0 5px;	text-decoration: none;}
#referencie p {margin:5px 0 0 5px; padding:0; font-size: .85em; line-height: 1.4em;}

.col1 { width: 430px; }
.col2 { width: 180px; }
.col3 { width: 160px; }
.col4 { width: 280px; }
.col5 { width: 480px; }

.external { background: url(../images/external.gif) no-repeat top right; padding: 0 10px 0px 0; color:#ed2024; }
.external:hover { color:#ed2024; }

/* SLUZBY */
#sluzby_main .minitext {margin-bottom:10px; width:110px}
.stlpec1 {float:left; width:260px; margin:15px 35px 0 0;}
.stlpec2 {float:left; width:260px; margin:15px 35px 0 0;}
.stlpec_pic {float:left; margin-top:15px}

UL.sluzby_odr {padding:0; margin:0 0 20px 0}
UL.sluzby_odr li {background:  url(../images/plus.gif) no-repeat 0px 6px; padding:0 0 0 13px; margin:0; list-style-type:none; font-weight: bold;}

.demo-show     {border-top: 1px solid #d5d5d5;}
.demo-show  h3 {border-bottom: 1px solid #d5d5d5; padding:.25em .25em .25em .25em; margin:0; font-size: 0.85em; font-weight: normal;}

#katalogyimg {position: relative; }
#katalogyimg IMG {position: absolute; top:0px; left:760px; }


#kat_mainbox {float:left; background-color: #f4f4f4; padding:10px 0 15px 25px; margin-bottom:25px; -moz-border-radius: 15px;  -webkit-border-radius: 15px;  border-radius: 15px;}
.kat_box     {float:left; width:170px; }
.stlpec1_katalogy {float:left; width:170px; margin-right:55px}

.kat_show h3 {font-size: .95em; background:  url(../images/plus.gif) no-repeat 0px 6px; padding:0 0 0 13px; margin:0 0 0 5px}

.stlpec1_obchody {float:left; width:300px; margin:15px 20px 0 0}

/* ZISK */
#ziskimg {position: relative; }
#ziskimg IMG {position: absolute; top:199px; left:697px}
.zisktxt3 {float:left; width:250px; margin:15px -20px 0 0;}
.zisktxt1 {float:left; width:300px; margin:15px 35px 0 0; font-size:1.2em; line-height: 1.5em}
.zisktxt2 {float:left; width:320px; margin:15px 20px 0 0; line-height: 1.5em;}

/* FORMULARE */

FIELDSET   {border:none; margin:0; padding:0}
legend     {display: none;}
.form      {background-color: #f4f4f4; padding:20px 20px 10px 20px; margin-bottom:20px}
.rowElem   {margin:2px 0px 2px 0px;  padding:5px 5px 5px 0}
textarea {width:390px}



