body { background: #01769d url(../images/layout/body.png) repeat-x; font-family: Arial, Helvetica, sans-serif; }
strong { font-weight: bold; }
html { font-size: 62.5%; }
.clear { clear: both; }
.boat { margin-left: 15px; width: 580px; }

#container { width: 860px; margin: 0 auto; height: 200px; }

/* =Header & Sub Header
----------------------------------------------- */
#header { position: relative; }
#header h1 a { margin-left: 20px; float: left; display: block; text-indent: -5000px; width: 172px; height: 120px; background: url(../images/layout/logo.png) no-repeat; }
#header, #header a { color: #b8d8e3; text-decoration: none; }
#header a:hover { color: #fff; }
#choose-lang  { position: absolute; right: -10px; top: 143px; }
#choose-lang { margin-right: 30px; float: right; font-size: 1.1em; clear: right;font-weight: bold; }
#choose-lang li { margin-left:5px; }
#choose-lang li img { margin-right: 3px; vertical-align: middle; margin-top: -2px; }
.hr, .gb, .de, .it { margin-right: 3px; }
#choose-lang li { float: left; }

/* =Main Navigation
----------------------------------------------- */
#main-nav { clear: both; height: 34px; padding: 21px 0 0 5px; background: #0b6a8a url(../images/layout/main-nav.png) no-repeat; font-family: Georgia, sans-serif; }
#main-nav li { display: inline; margin-right: -2px; }
#main-nav a { padding: 15px 14px; color: #b8d8e3; font-size: 1.6em; text-decoration: none; background: url(../images/layout/main-nav_bar.png) no-repeat center left; }
#main-nav.de a { padding: 15px 10px; }
#main-nav.it a { padding: 15px 13px; }
#main-nav .first a { background: none; }
#main-nav a:hover, #main-nav a.active { background: url(../images/layout/main-nav_hover.png) repeat-x bottom left; }
#main-nav .first a:hover { background-position: -2px bottom; }

/* =Content
----------------------------------------------- */
#content { background-color: #fff; border: solid #fff; border-width: 0 5px; }
#content h2 { font-family: Georgia, sans-serif; font-style: italic; font-size: 1.7em; }

#flash-area { margin-bottom: -3px; }

#sidebar { float: left; width: 230px; }
#sidebar .column h2 { height: 41px; background: url(../images/layout/column_h2_generic.gif) no-repeat; }

.column { margin: 8px 9px 15px 0; background: url(../images/layout/column.png) no-repeat; float: left; width: 277px; position: relative; }
#container.home .column { height: 235px; }
#sidebar .column { width: 230px; margin: 8px 0 0; height: 201px; max-height: 201px;}
#sidebar ul.contact {}

.column h2 { color: #4e2b00; padding: 10px 15px 0; }
#dobrodosli h2 { height: 41px; background: url(../images/layout/column_h2_dobrodosli.gif) no-repeat; }
#rute h2 { height: 41px; background: url(../images/layout/column_h2_rute.gif) no-repeat; }
#lifestyle h2 { height: 41px; background: url(../images/layout/column_h2_lifestyle.gif) no-repeat; }
#lifestyle { margin: 0; margin-top: 10px; }

#sidebar .list h2 { background: url(../images/layout/column_h2_contact.gif) no-repeat; }
#sidebar .list h2.links { background: url(../images/layout/column_h2_korisni_linkovi.gif) no-repeat; }
#sidebar .list ul { font-size: 1.2em; color: #4e2c00; padding: 0 15px 0; margin-top: -8px; margin-left: -5px; }
#sidebar .list li { padding: 5px 0 4px 8px; background: url(../images/icons/contact_arrow.gif) no-repeat center left; border-bottom: 1px solid #d4b277; }
#sidebar .list li a { color: #06526c; text-decoration: none; }
#sidebar .list li a:hover { color: #000; text-decoration: underline; }
#sidebar .list .last { border: 0; }

.column p, #rute.column ul li { padding: 0 15px; font-size: 1.1em; color: #341d00; line-height: 1.6em; }

.column .button { position: absolute; bottom: 0; left: 15px; text-decoration: none; margin: 10px 25px 0 0; padding: 6px 0; display: block; height: 22px; width: 98px; background: url(../images/layout/button.png) no-repeat; font-size: 1.3em; font-weight: bold; color: #fff; text-align: center; }
.column .button.it { font-size: 1.1em; font-weight: normal; }

.main { float: left; margin-left: 10px; padding-bottom: 10px; width: 610px; background: url(../images/layout/main_content.png) no-repeat; margin-right: 0; min-height: 393px; }
.main h2 { height: 48px; font-size: 2.4em!important; padding-top: 6px; }
.main h3 { text-indent: 15px; font-size: 12px; font-weight: bold; color: #4e2c00; margin-bottom: 7px; }
.main h4 { font-size: 18px; text-align: center; font-weight: bold; margin-bottom: 10px; }
.main p { font-size: 12px; margin-bottom: 20px; line-height: 1.5; }
.main ol li { font-size: 12px; line-height: 1.5; margin-bottom: 10px; list-style-type: decimal; margin-left: 15px; }
.main ol { margin: 0 15px; }
.main p a { color: #a67426; }

.main fieldset { margin: 0 15px; }
.main fieldset label { font-size: 12px; display: block; margin-bottom: 5px; }
.main fieldset li { margin-bottom: 15px; }
.main fieldset .input-text { background: #fbe8c3; padding: 3px; width: 200px; border: 1px solid #a26c2f; }
.main fieldset textarea { width: 575px;border: 1px solid #a26c2f; padding: 3px; background: #fbe8c3; height: 100px; }
.main fieldset .input-button { border: none; cursor: pointer; background: url(../images/layout/posalji_por.gif) no-repeat; width: 98px; height: 28px; }

.google-map { width: 576px; height: 350px; border: 2px solid #fdeabe; padding: 1px; background: #fff; margin: 0 auto 10px auto; }


#tabs { margin: 0 0 15px 12px; }
#tabs li { float: left; }
#tabs li a { font-size: 12px; display: block; float: left; margin: 0 3px; color: #4e2c00; text-decoration: none; }
#tabs li a.active { text-decoration: underline; color: #000; }

#videos { padding-bottom: 15px; clear: both; height: 180px; background: url(../images/layout/videos.jpg) no-repeat; }
#videos h2 { font-family: Georgia, sans-serif; font-style: italic; color: #04516b; font-size: 1.7em; padding: 10px 15px; }
.video {float: left; font-size: 1.2em; margin: 15px 15px 0; width: 243px; }
.video img { float: left; padding-right: 8px; }
.video .name { display: block; font-weight: bold; color: #0a6989; padding: 4px 0; }
.video p { float: right; width: 136px; line-height: 1.4em; }
.video .view-link { float: right; width: 130px; clear: both; display: block; padding: 0 0 0 6px; margin-top: 6px; color: #21a0cb; background: url(../images/icons/vid_arrow.png) no-repeat 0 4px;  text-decoration: none; }

#gallery { margin-left: 15px; }
#gallery li { float: left; margin-right: 15px; margin-bottom: 15px; }
#gallery li img { background: #fff; border: 2px solid #edab59; padding: 1px; display: block; }


.main #error { background: #ffb4b4; border: 1px solid #ff9999; padding: 10px; font-size: 12px; width: 560px; margin-bottom: 15px; margin-left: 15px; }
.main #error ul { margin-top: 10px; margin-bottom: 0; }
.main #error ul li { font-size: 12px; margin-left: 25px; list-style-type: disc; margin-bottom: 0; }
	
.main #success { background: #b5ffc7; border: 1px solid #65fd8a; font-size: 12px; padding: 10px; width: 560px; margin-bottom: 15px; margin-left: 15px; }
.main #success h3, .main #error h3 { font-size: 12px; font-weight: bold; margin-bottom: 5px;text-indent: 0; }
.main #success p { font-size: 12px; margin-bottom: 0; padding-left: 0; }

/* ="Groups" and "Items"
----------------------------------------------- */
.item { font-size: 1.1em; margin: 8px 15px 15px; }
.group, .item { clear: both; }
.group .item { clear: none; float: left; width: 260px; }
.item .title { display: block; width: 100%; font-size: 1.2em; font-weight: bold; border-bottom: 1px solid #d4b277; margin-bottom: 3px; padding-bottom: 3px; }
.item p { padding-left: 8px; line-height: 1.5; }
.item li { display: block; font-size: 1.1em; padding: 3px 0; color: #4e2b00; }

/* =Footer
----------------------------------------------- */
#footer { font-size: 1.2em; padding: 20px 0 0 22px; height: 125px; color: #a38048; background: url(../images/layout/footer.gif) no-repeat; position: relative; }
#footer h3 { float: right; margin-right: 20px; margin-top: -2px; text-indent: -5000px; height: 66px; width: 155px; background: url(../images/layout/croatia_logo.png) no-repeat; }
#footer ul li { display: inline; }
#footer p, #footer ul { margin-bottom: 3px; }
#footer p.procedo { position: relative; padding-top: 3px; }
#footer p.procedo a { display: block; background: url(../images/layout/procedo.gif) no-repeat; width: 84px; height: 20px; text-indent: -5000px; position: absolute; left: 120px; top: 1px; }
#footer p.procedo.custom a { left: 132px; }
#footer a { text-decoration: none; color: #a38048; }
#footer a:hover { text-decoration: underline; }
#footer a.krilo { display: block; width: 96px; height: 56px; text-indent: -5000px; position: absolute; right: 192px;top: 29px; }