/*************************************************** CSS file for Villa Tuttorotto Author: WEB Marketing (www.wem.hr) Media: Screen ***************************************************/ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 12px/18px Arial, Verdana, sans-serif; color: #444; background: #211e1a url(../images/css/body-bkg.gif) repeat-x 0 0; } :root { overflow-y: scroll; } h1, h2, h3 { font-weight: normal; color: #000; } a { color: #444; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } fieldset, a img { border: 0; } table { text-align: left; border-collapse: collapse; border-spacing: 0; } td, th { vertical-align: top; text-align: left; } p, li, dd, dt, label, legend, td, th, caption { /*font-size: 1.2em; line-height: 1.5;*/ } legend { white-space: normal; } select, input, textarea { outline: 0; font: 12px/18px Arial, sans-serif; } /* LAYOUT */ #layout { width: 900px; margin: 0 auto; padding: 0 30px; overflow: hidden; position: relative; } #navigation-and-banners { clear: both; float: left; width: 182px; overflow: hidden; } #main-content { clear: both; } #content { float: right; display: inline; width: 640px; background: #fff; position: relative; margin-right: 60px; padding-bottom: 20px; min-height: 360px; height: auto !important; height: 360px; } #logo { float: left; margin: 15px 0 20px 0; display: inline; background: url(../images/css/logo.png) no-repeat 0 0; } #logo, #logo a { display: block; width: 374px; height: 44px; overflow: hidden; } #logo a { text-indent: -9999px; } #header-flash { /*float: right; width: 620px; height: 240px; margin-right: 60px; display: inline;*/ border: 10px solid #fff; } #header-flash img { display: block; } /* BOOKING */ #booking-container { float: left; width: 100%; height: 38px; border: 1px solid #57534a; clear: both; margin-bottom: 10px; } #booking-container h2 { float: left; font: 18px/20px Georgia, sans-serif; color: #fff; padding: 8px 0 0 13px; } #booking-container form { float: left; padding-top: 8px; width: 643px; } #booking-container .field { float: left; padding-left: 3px; display: inline; } #booking-container .date { } #booking-container .date label { position: absolute; top: -9999px; left: -9999px; } #booking-container .date label.first-child { position: static; } #booking-container label { float: left; font-size: 11px; line-height: 1; color: #fff; padding: 7px 0 0; } #booking-container select { font-size: 11px; line-height: 1; margin: 3px 0 0 4px; float: left; display: inline; } #booking-container input { font-size: 11px; line-height: 11px; color: #320315; padding: 1px 2px; width: 40px; margin: 2px 0 0 4px; } input#book { float: left; font-size: 12px; background: #0c0a0a; color: #fff; text-transform: uppercase; padding: 3px 11px; border: 0; margin: 2px 0 0 5px; width: auto; } #booking-container p { float: right; font-size: 11px; margin: 10px 10px 0 0; } #booking-container p a { color: #fff; white-space: nowrap; } /* BREADCUMBS */ #breadcrumbs { float: left; clear: both; width: 540px; padding: 8px 100px 6px 0; background: #35312a; } #breadcrumbs ul { float: left; list-style: none; } #breadcrumbs li { float: left; font-size: 11px; margin-right: 5px; } #breadcrumbs a { float: left; padding-right: 10px; color: #fff; background: url(../images/css/breadcrumbs-arrow.gif) no-repeat 100% 50%; } #breadcrumbs a.selected { background: none; } #breadcrumbs .on a { padding-right: 0; background: 0; text-decoration: none; } #breadcrumbs a:hover, #breadcrumbs a:active, #breadcrumbs a:focus { text-decoration: underline; } /* TOOLS */ #tools { position: absolute; height: 27px; top: 264px; right: 0; width: 68px; } #tools ul { list-style: none; float: right; height: 30px; } #tools li { float: left; text-transform: uppercase; margin-left: 6px; display: inline; line-height: 1; display: inline; position: relative; } #tools li.small { font-size: 10px; top: 10px; } #tools li.medium { font-size: 12px; top: 8px; } #tools li.large { font-size: 16px; top: 5px; } #tools li a { text-decoration: none; color: #fff; } #tools li a:hover, #tools li a:active, #tools li a:focus { text-decoration: underline; } #print-link { margin: 10px 0 0 0; position: static !important; float: left; display: inline; width: 11px; height: 10px; text-indent: -9999px; overflow: hidden; background: url(../images/css/icon-print.gif) no-repeat 0 0; } #print-link a { display: block; width: 11px; height: 10px; } #to-beginning { border-bottom: 1px solid #57534a; padding-bottom: 7px; width: 54px; position: absolute; bottom: 12px; right: -64px; } #to-beginning p { font-size: 10px; line-height: 1; } #to-beginning a { float: left; text-decoration: none; color: #fff; padding-right: 10px; background: url(../images/css/to-beginning.gif) no-repeat 100% 3px; } #to-beginning a:hover, #to-beginning a:active, #to-beginning a:focus { } /* LANGUAGE */ #languages-container { position: absolute; top: 130px; right: 30px; width: 54px; } #languages-container ul { list-style: none; border-bottom: 1px solid #57534a; } #languages-container li { font-size: 10px; line-height: 1; border-top: 1px solid #57534a; } #languages-container li a { color: #fff; text-decoration: none; padding: 3px 0 4px 5px; display: block; } #languages-container li.first-child, #languages-container li.select-child { border: 0; } #languages-container li.select-child a:hover { text-decoration:none; cursor:default; } #languages-container li.on a { color: #81775f; } #languages-container a:hover, #languages-container a:active, #languages-container a:focus { text-decoration: underline; } /* MAIN NAVIGATION */ #external-navigation, #navigation {} #external-navigation ul, #navigation ul { list-style: none; padding-bottom: 4px; } #external-navigation li, #navigation li { font-size: 12px; line-height: 16px; border-top: 1px solid #57534a; } #external-navigation li { padding-left: 0 !important;} #external-navigation li.first-child, #navigation li.first-child { border-top: 0; } #external-navigation li a, #navigation li a { color: #fff; text-decoration: none; padding: 3px 0 4px 20px; display: block; } #navigation li.active a { color: #fff; background: #4d4736; } #navigation li.active li a { background: url(../images/css/nav-icon.gif) no-repeat 20px 10px; } #navigation li.active li li a { background-position: 35px 10px; } #navigation li.active li li li a { background-position: 50px 10px; } #navigation a.active { color: #81775f !important; } #external-navigation li.highlighted, #navigation li.highlighted { background: #57534a; border-bottom: 0; margin-bottom: 1px; } #external-navigation li.highlighted { background: #57534a url(../images/css/icon-external.gif) no-repeat 166px 6px; border-bottom: 0; margin-bottom: 1px; } #navigation li.highlighted a { padding-right: 10px;padding-top: 1px; } #external-navigation li.highlighted a { padding-right: 25px; padding-top: 1px; } #external-navigation .first-highlighted, #navigation .first-highlighted { margin-top: 5px; } #navigation li li a { padding-left: 35px; } #navigation li li li a { padding-left: 50px; } #navigation li li li li a { padding-left: 65px; } #external-navigation li a:hover, #external-navigation li a:active, #external-navigation li a:focus, #navigation li a:hover, #navigation li a:active, #navigation li a:focus { text-decoration: underline; } /* FEATURED ARTICLES */ #featured-banner { float: left; width: 640px; clear: both; border-bottom: 10px solid #322E27; } #featured-banner img, #featured-banner object, #featured-banner embed { display: block; margin: 0 auto; } #featured-articles { float: left; width: 100%; padding: 16px 0 0; clear: both; } #featured-articles .article-intro { float: left; width: 172px; margin-left: 41px; display: inline; } #featured-articles .first-child { margin-left: 20px; } #featured-articles img { display: block; margin-bottom: 10px; border: 1px solid #989a97; } #featured-articles h3 { padding-bottom: 11px; font: 18px/20px Georgia, sans-serif; } #featured-articles h3 a { color: #444; text-decoration: none; } #featured-articles p, #featured-articles ul, #featured-articles ol { margin-bottom: 5px; } #featured-articles ul { list-style: none; } #featured-articles li { padding: 0 0 0 10px; background: url(../images/css/li-square.gif) no-repeat 0 50%; } /* SIDEBAR CONTENT */ #sidebar-content { padding-top: 5px; font-size: 11px; line-height: 14px; color: #fff; } #sidebar-content h2 { font: 11px/14px Georgia, sans-serif; margin-bottom: 7px; font-weight: bold; color: #fff; } #sidebar-content h3 { font: 11px/14px Georgia, sans-serif; margin-bottom: 7px; font-weight: normal; color: #fff; } #sidebar-content p, #sidebar-content ul, #sidebar-content dl, #sidebar-content ol { margin-bottom: 5px; } #sidebar-content ul { list-style: none; margin-top: 7px; } #sidebar-content ul li { padding: 0 0 0 20px; background: url(../images/css/li-dot.gif) no-repeat 0 6px; } #sidebar-content ol { margin-left: 20px; } #sidebar-content li ol { margin-top: 7px; } #sidebar-content li ol li { background: 0; padding-left: 0; } #sidebar-content table { width: 100%; margin-bottom: 10px; border-bottom: 1px solid #ccc; } #sidebar-content table td, #sidebar-content table th { padding: 5px 10px; border-top: 1px solid #ccc; font-weight: normal; } #sidebar-content table th { color: #57534a; font-weight: bold; } #sidebar-content table tr.odd {} #sidebar-content table tr.even { background: #f7f7f7; } #sidebar-content table caption { color: #57534a; padding: 0 10px 5px; font-weight: bold; font-size: 11px; text-align: left; } #sidebar-content table.blank { margin-left: 0; margin-right: 0; border: none; width: auto; } #sidebar-content table.blank tr { background: 0; } #sidebar-content table.blank caption { padding: 0 0 10px; text-align: center; } #sidebar-content table.blank th, #sidebar-content table.blank td { border: 0; background: none; font-weight: normal; padding: 0; } #sidebar-content a { color: #fff; text-decoration: underline; } #sidebar-content a:hover, #sidebar-content a:active, #sidebar-content a:focus { text-decoration: none; } #sidebar-content img { display: block; margin: 0 auto 5px; } /* ARTICLE */ #article { font-size: 12px; line-height: 18px; padding: 16px 20px 20px; } #main-content h1, #article h1 { font: 18px/24px Georgia, sans-serif; margin-bottom: 21px; } #article h2 { font: 12px/16px Georgia, sans-serif; margin-bottom: 7px; font-weight: bold; } #article h3 { font: 12px/16px Georgia, sans-serif; margin-bottom: 7px; font-weight: normal; } #article h4, #article h5, #article h6 { font-size: 12px; line-height: 16px; font-weight: normal; margin-bottom: 7px; } #article p, #article ul, #article dl, #article ol { margin-bottom: 7px; } #article dt { font-weight: bold; } #article p.date { margin: 0; } #article p.lead { margin-bottom: 9px; font-style: italic; padding: 10px; background: #ebebeb; position: relative; top: -5px; } #article p.lead { } #article ul { list-style: none; margin-top: 7px; } #article ul li { padding: 0 0 0 20px; background: url(../images/css/li-dot.gif) no-repeat 0 6px; } #article ol { margin-left: 20px; } #article li ol { margin-top: 7px; } #article li ol li { background: 0; padding-left: 0; } #article .left { float: left; margin: 0 15px 10px 0; clear: left; position: relative; top: 5px; } #article .right { float: right; margin: 0 0 10px 15px; clear: right; position: relative; top: 5px; } #article img { border: 1px solid #9e9e9e; padding:0 } #article a.pdf { background: url(../images/css/pdf.gif) no-repeat 0 1px; padding-left: 18px; } #article a.word { background: url(../images/css/word.gif) no-repeat 0 1px; padding-left: 18px; } #article table { width: 300px; margin-bottom: 10px; border-bottom: 1px solid #ccc; background: #ebebeb; } #article table td, #article table th { padding: 5px 10px; border-top: 1px solid #ccc; font-weight: normal; } #article table th { color: #57534a; font-weight: bold; } #article table tr.odd {} #article table tr.even { background: #f7f7f7; } #article table caption { color: #57534a; padding: 0 10px 5px; font-weight: bold; font-size: 14px; text-align: left; } #article table.blank { margin-left: 0; margin-right: 0; border: none; width: auto; } #article table.blank tr { background: 0; } #article table.blank caption { padding: 0 0 10px; text-align: center; } #article table.blank th, #article table.blank td { border: 0; background: none; font-weight: normal; padding: 0; } /* GALLERY */ #photo-gallery { width: 600px; margin: 0 auto; background: url(../images/css/gallery-bottom.gif) no-repeat 0 100%; padding-bottom: 15px; } #photo-gallery h2 { height: 15px; overflow: hidden; text-indent: -9999px; background: url(../images/css/gallery-top.gif) no-repeat 0 0; } #photo-gallery a { float: left; margin-left: 18px; display: inline; position: relative; left: 3px; border: 1px solid #9e9e9e; } #photo-gallery img { width: 95px; height: 72px;} /* FOOTER */ #footer { padding: 11px 0 10px; clear: both; float: right; width: 640px; margin-right: 60px; display: inline; } #footer p { font-size: 11px; text-align: center; padding-bottom: 3px; } #footer p, #footer p a { color: #635e51; } /* MISC */ #photo-gallery:after, #article:after, #layout:after, #content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0px; line-height: 0; overflow: hidden; } #tools p, #featured-articles h2, #languages-container li.select-child, #languages-container p, #breadcrumbs p, .skip-links, #navigation h2 { position: absolute; top: -9999px; left: -9999px; } #admin-pages { position: absolute; top: 5px; right: 5px; width: 100px; padding: 10px; background: #fff; } #admin-pages ul { list-style: none; } #admin-pages li { padding: 5px 0; text-transform: uppercase; font-size: 10px; line-height: 1; border-top: 1px solid #eee; } #admin-pages li:first-child { border-top: 0; } #admin-pages li.active a { color: #f00; }