/*------------------------------------------------------------------------ # JF_CALLA-EXTERIORS! - JOOMFREAK.COM JOOMLA 2.5 TEMPLATE # June 2013 # ------------------------------------------------------------------------ # COPYRIGHT: (C) 2013 JOOMFREAK.COM / KREATIF MULTIMEDIA GMBH # LICENSE: Creative Commons Attribution # AUTHOR: JOOMFREAK.COM # WEBSITE: http://www.joomfreak.com - http://www.kreatif-multimedia.com # EMAIL: info@joomfreak.com -------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } body, html { height: 100%; } body { background: #fff; color: #2d2d2d; font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 0px; line-height: 1.4em; } body.font-opensans { font-family: 'Open Sans', sans-serif; } body.font-lato { font-family: 'Lato', sans-serif; } body.font-roboto { font-family: 'Roboto', sans-serif; } body.font-ptsans { font-family: 'PT Sans', sans-serif; } body.font-sourcesanspro { font-family: 'Source Sans Pro', sans-serif; } body.font-nobile { font-family: 'Nobile', sans-serif; } body.font-ubuntu { font-family: 'Ubuntu', sans-serif; } body.font-istokweb { font-family: 'Istok Web', sans-serif; } body.font-exo2 { font-family: 'Exo 2', sans-serif; } body.contentpane { width:auto; margin:10px; text-align: left; } img { border: 0 none; height: auto; max-width: 100%; vertical-align: middle; } ul { list-style: none; } h1,h2, h3, h4 { line-height: normal; margin: 0 0 15px; } h1, h2 { font-size: 24px; text-transform: uppercase; } a { color: #46962b; text-decoration: none; } a:hover { text-decoration: none; } h4, p { margin-bottom: 20px; } strong { font-weight: bold; } fieldset { border: none; margin-bottom: 10px; } input, textarea { background-color: #fff; border: 1px solid #e4e5e5; color: #ababab; padding: 4px; font-family: 'Open Sans', sans-serif; font-size: 12px; } button, .button { background-color: #46962b; border: none; border-radius: 5px; color: #fff; cursor: pointer; font-family: "Open Sans",sans-serif; font-size: 14px; font-weight: bold; padding: 4px 25px; } table { border: 1px solid #ededed; border-collapse: collapse; } tr, td { border: 1px solid #ededed; } .tooltip { display: none !important; } .pull-left { float: left; margin: 0 20px 0 0; } .pull-right { float: right; } .componentheading, .contentheading { color: #2d2d2d; font-size: 24px; font-weight: bold; margin: 0 0 15px; text-transform: uppercase; } #system-message, .reset { margin: 10px; } html[xmlns] .clearfix { display: block; } .clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; line-height: 0; } #jf-wrapper { overflow: hidden; position: relative; } .wrap { clear: both; width: 100%; } .main { margin: 0 auto; position: relative; width: 1200px; } body [class*="jf-grid"] { display: inline; float: left; margin: 0; position: relative; } /* TOP */ #jf-top { background-color: #292929; color: #fff; } #jf-callto { text-transform: uppercase; } #jf-callto p { margin: 0; } #jf-social ul { float: right; } #jf-social li { float: left; margin: 0; } #jf-social li a { background-repeat: no-repeat; background-position: center bottom; display: block; margin-left: 5px; height: 17px; width: 18px; } #jf-social li a.button-facebook { background-image: url(../images/facebook.png); } #jf-social li a.button-flickr { background-image: url(../images/flickr.png); } #jf-social li a.button-google { background-image: url(../images/google.png); } #jf-social li a.button-twitter { background-image: url(../images/twitter.png); } #jf-social li a.button-pinterest { background-image: url(../images/pinterest.png); } #jf-social li a.button-rss { background-image: url(../images/rss.png); margin-left: 20px; } /* HEADER */ #jf-header { padding: 30px 0; } #jf-header .main { position: relative; } #jf-header h1#logo { font-weight: normal; margin: 0; } #jf-header h1#logo .site-title { color: #292929; display: block; font-size: 42px; font-weight: bold; line-height: 42px; } #jf-header h1#logo a:hover { text-decoration: none; } #jf-header .search { border: 1px solid #e4e5e5; border-radius: 5px; float: right; padding-left: 10px; } #jf-header .search input { border: none; } #jf-header .search input[type=text] { background: url(../images/search.png) no-repeat left center; padding-left: 20px; } #jf-header .search .button { background-color: #46962b; border: none; border-radius: 0 5px 5px 0; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: bold; padding: 4px 8px; } #jf-mainnav { background: url(../images/menu.png); border-bottom: 4px solid #46962b; border-top: 1px solid #e1e1e1; } #jf-mainnav .jf-block { margin: 0 10px; } #jf-mainnav ul:after { clear: both; content: " "; display: block; height: 0; visibility: hidden; } #jf-mainnav ul.menu li { cursor: pointer; display: block; float: left; position: relative; z-index: 999; } #jf-mainnav ul.menu li a { background: url(../images/separator.png) no-repeat right center; border: 1px solid transparent; color: #2d2d2d; display: block; font-size: 13px; font-weight: bold; padding: 20px; text-transform: uppercase; } #jf-mainnav ul.menu li.vhover > a, #jf-mainnav ul.menu li a:hover, #jf-mainnav ul.menu li.active a { background: #282828; color: #fff; } #jf-mainnav ul.menu li.vhover > a, #jf-mainnav ul.menu li a:hover { background: #282828; color: #fff; border: 1px solid #cdcdcd; border-bottom: none; -moz-box-shadow: 5px 0 5px -4px #888; -webkit-box-shadow: 5px 0 5px -4px #888; box-shadow: 5px 0 5px -4px #888; } #jf-mainnav ul.menu li.active ul li a { background: none; } #jf-mainnav ul.menu li.parent > a { position: relative; z-index: 9999; } #jf-mainnav ul li > ul { background-color: #282828; border: 1px solid #cdcdcd; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; position: absolute; left: -9999em; z-index: 1000; min-width: 180px; padding: 0 20px; margin: 0; list-style: none; margin-top: -1px; } #jf-mainnav li:hover > ul { left: auto; top: auto; } #jf-mainnav ul.menu li ul li { border-bottom: 1px solid #444; float: none; padding: 4px 0; } #jf-mainnav ul.menu li ul li a { background: none; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; color: #fff; font-size: 12px; font-weight: normal; padding: 4px 10px; text-transform: none; } #jf-mainnav ul.menu li ul li a:hover, #jf-mainnav ul.menu li ul li.active a { background-color: #545454; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #navbutton { display: none; } /* SLIDESHOW */ #jf-slideshow { background: url(../images/shadow.png) repeat-x left bottom; padding-bottom: 17px; } .jflabel_skitter h2 { text-transform: uppercase; } .jfnext_button, .jfprev_button { height: 61px !important; width: 33px !important; margin-top: -30px !important; } .jfnext_button.nextslide1 { background-image: url(../images/next.png) !important; } .jfprev_button.prevsldide1 { background-image: url(../images/prev.png) !important; } .jflabel_skitter { width: 1180px !important; position: static !important; margin: 0 auto; } .label_skitter_container { width: 1180px !important; position: absolute !important; top: 115px; text-align: right; } .slidedescription { float: right; margin-top: 0 !important; } /* SHOWCASE */ #jf-showcase { background: url(../images/middle.png) repeat-x left bottom; margin-top: -17px; position: relative; z-index: -1; padding: 24px 0; text-align: justify; } #jf-showcase h3 { font-size: 18px; font-weight: bold; margin: 0 0 5px; } #jf-showcase p { margin: 0; } #jf-showcase .jf-block { padding-left: 32px; } #showcase-1 .jf-block { background: url(../images/icon1.png) no-repeat; } #showcase-2 .jf-block { background: url(../images/icon2.png) no-repeat; } #showcase-3 .jf-block { background: url(../images/icon3.png) no-repeat; } #showcase-4 .jf-block { background: url(../images/icon4.png) no-repeat; } /* CONTENT */ #jf-content { padding: 15px 0; } /* COM_CONTENT */ .items-leading h2 a, .item-page h2 a { color: #2d2d2d; } .categories-list > div { border-bottom: 1px solid #ededed; padding: 20px 0; } .categories-list .item-image { float: left; margin: 0 20px 0 0; } .categories-list .item-image img { width: 150px; } .categories-list .item-title { display: block; font-size: 20px; font-weight: bold; margin: 0 0 20px; } .categories-list .item-title a { color: #2d2d2d; } .categories-list .category-readmore a, .readmore a { background: none repeat scroll 0 0 #46962b; border-radius: 5px; color: #fff; float: right; font-weight: bold; padding: 6px 25px; } .category-desc { margin: 0 0 20px; } .items-row .item { border-bottom: 1px solid #ededed; padding: 20px 0; } .items-leading h2, .items-row .item h2 { font-size: 20px; font-weight: bold; text-transform: none; } .items-row .item h2 a { color: #2d2d2d; } .img-intro-left { float: left; margin: 0 20px 0 0; } .img-intro-left img { width: 150px; } .item-separator { clear: both; } .item-page .article-info.below { border-top: 1px solid #ededed; padding-top: 20px; } .item-page .article-info.above { border-bottom: 1px solid #ededed; padding-bottom: 20px; } .blog-featured .readmore a { float: left; } .icons .dropdown-menu li { display: inline-block; *display: inline; zoom: 1; } .icons .dropdown-menu li a { display: block; height: 23px; width: 23px; text-indent: -9999em; } .icons .dropdown-menu li.email-icon a { background: url("../images/system/email.gif") no-repeat scroll center center rgba(0, 0, 0, 0); } .icons .dropdown-menu li.print-icon a { background: url("../images/system/print.gif") no-repeat scroll center center rgba(0, 0, 0, 0); } .pagination { font-size: 12px; margin: 24px 0 4px; padding: 8px 0; } div.pagination ul {} div.pagination ul li {display:inline;margin:0 8px 0 0;text-align:center} div.pagination ul li a, div.pagination ul li span {line-height:28px;color:#fff;display:inline-block;*display:inline;zoom:1;height:28px;width:28px;background-color:#313131;border-radius:3px;} div.pagination ul li.pagination-start a, div.pagination ul li.pagination-end a, div.pagination ul li.pagination-start span, div.pagination ul li.pagination-end span {width: auto;padding:0 10px;} div.pagination ul li span {background-color:#46962b;} div.pagination ul li a:hover {background-color:#7d7d7d;} /* WEBLINKS */ table.weblinks, table.category { font-size: 1em; margin: 10px 10px 20px 0; width: 100%; } table.weblinks td, table.category td { padding: 7px 10px; } table.weblinks td.hits, table.category td.hits { padding: 7px 30px; } table.weblinks p, table.category p { margin: 0; } table.weblinks a, table.category a { font-weight: bold; } tr.odd, .cat-list-row1 { background-color: #f9f9f9; } /* PORTFOLIO */ #filters { margin: 0 0 25px; } #filters li { float: left; margin: 5px 5px 0 0; } #filters li a { background-color: #333; color: #fff; display: block; font-weight: bold; padding: 6px 12px; } #filters li a:hover, #filters li a.selected { background: #46962b url(../images/arrow-down.png) no-repeat bottom center; padding: 6px 12px 11px; } /**** Isotope ****/ .itemListIsotope { margin: 0 -10px; } .itemListIsotope div.itemContainer { float: none; } .width4 { width: 25%; } .width3 { width: 33.33%; } .width2 { width: 50%; } /* LOGIN */ .login form { border-bottom: 1px solid #ededed; margin-bottom: 25px; padding-bottom: 20px; } .form-horizontal .control-group:before, .form-horizontal .control-group:after { content: ""; display: table; line-height: 0; } .form-horizontal .control-group:after { clear: both; } .form-horizontal .control-group { margin-bottom: 20px; } .form-horizontal .control-label { float: left; padding-top: 4px; width: 180px; } .form-horizontal input[type=checkbox] { margin: 5px 0 0; } .form-horizontal .controls { margin-left: 180px; } .profile-edit form#member-profile fieldset dt, .registration form#member-registration fieldset dt { padding: 12px 5px 10px 0; width: 13em; float: left; clear: left; } .profile-edit form#member-profile fieldset dd, .registration form#member-registration fieldset dd { float: none; padding: 10px 0; } /* CONTACT */ .contact-details { margin: 65px 0 50px; } .contact-details .contact-module { float: left; width: 25%; } .contact-details .jicons-icons { background-color: #46962b; border-radius: 50%; float: left; margin-right: 15px; line-height: 50px; height: 50px; width: 50px; text-align: center; } .contact-details strong, .contact-details .contact-phone span, .contact-details .contact-fax span, .contact-details .contact-email span { display: block; } address { font-style: normal; } /* SEARCH */ .searchintro { font-weight: normal; margin: 20px 0; } .only, .phrases { border: 1px solid #ededed; padding: 15px; } legend { padding: 3px 5px; } .phrases-box { float: left; width: 60%; } .phrases-box { float: left; width: 60%; } fieldset.only label, fieldset.phrases label { margin: 0 10px 0 0; } dl.search-results dt.result-title { font-weight: bold; padding: 15px 0 5px; } /* RIGHT */ #jf-sidebar .moduletable { border-bottom: 1px solid #ededed; padding-bottom: 20px; margin-top: 18px; } #jf-sidebar h3 { font-size: 18px; text-transform: uppercase; } #jf-sidebar p { margin-bottom: 0; } div.k2ItemsBlock ul li div.moduleItemText { overflow: hidden; } #jf-sidebar div.k2ItemsBlock ul li div.moduleItemIntrotext { font-size: 12px; } #jf-sidebar div.k2ItemsBlock ul li span.moduleItemDateCreated { font-style: italic; } #jf-sidebar div.k2ItemsBlock ul li a.moduleItemComments { font-size: 12px; font-weight: bold; } /* BOTTOM CONTENT */ #jf-bottom-content { margin-top: 30px; } #jf-bottom-content .jf-block { border-top: 1px solid #ededed; padding: 20px 0; } #jf-bottom-content h3 { font-size: 24px; text-transform: uppercase; } #jf-bottom-content div.k2ItemsBlock ul { margin: 0 -10px; } #jf-bottom-content div.k2ItemsBlock ul li { float: left; width: 25%; } #jf-bottom-content div.k2ItemsBlock ul li.clearList { float: none; } #jf-bottom-content div.k2ItemsBlock ul li .moduleItemView { margin: 10px; } #jf-bottom-content div.k2ItemsBlock ul li a.moduleItemImage img { float: none; width: 100% !important; } #jf-bottom-content div.moduleItemText { border: 1px solid #ededed; margin-top: 1px; padding: 12px 18px; } #jf-bottom-content div.moduleItemText p { margin: 0; } /* BOTTOM */ #jf-bottom { background: #303030; color: #fff; padding: 35px 0; } #jf-bottom h3 { font-size: 18px; text-transform: uppercase; } #jf-bottom div.k2ItemsBlock ul li { background-color: #545454; margin: 0 0 8px; padding: 10px 25px; } #jf-bottom div.k2ItemsBlock ul li a.moduleItemTitle { color: #fff; } /* FOOTER */ #jf-footer { color: #ababab; padding: 90px 0 35px; text-align: center; } #jf-footer h3 { color: #fff; font-size: 72px; text-transform: none; } #jf-footer li { display: inline-block; font-size: 36px; } #jf-footer li strong { color: #247d99; } #jf-footer .copyright { margin-top: -18px; } #jf-footer .copyright p { margin: 0; } #jf-footer .copyright a { color: #303030; font-weight: bold; } #backtotop { background: url(../images/back-to-top.png) no-repeat; display: inline-block; *display: inline; zoom: 1; margin-bottom: 60px; height: 36px; width: 36px; text-indent: -9999em; } /* K2 */ div.itemRelated span.itemRelImage { display: block; height: 140px; overflow: hidden; } .form-right { float: right; } .form-left { float: left; } /* Bootstrap Css Map Fix*/ #googleMap img { max-width: none; } /* Bootstrap Css Map Fix*/ #googleMap label { width: auto; display:inline; } #contact-form label#jform_contact_name-lbl { display: block; margin: 30px 0 0; } #contact-form label#jform_contact_email-lbl{ display: block; margin: 30px 0 0; } #contact-form label#jform_contact_email_copy-lbl { display: inline-block; margin: 30px 0 0; } #contact-form label#jform_contact_message-lbl { display: block; margin: 30px 0 0; } #contact-form input#jform_contact_name, #contact-form input#jform_contact_email { display: block; margin: 0; width: 432px; } #contact-form textarea { height: 120px; width: 432px; } .contact-miscinfo p { margin: 0; } input.invalid, textarea.invalid { border: 1px solid #CF1919; } /* #Base 1200 Grid ================================================== */ .jf-grid-1 {width: 100px;} .jf-grid-2 {width: 200px;} .jf-grid-3 {width: 300px;} .jf-grid-4 {width: 400px;} .jf-grid-5 {width: 500px;} .jf-grid-6 {width: 600px;} .jf-grid-7 {width: 700px;} .jf-grid-8 {width: 800px;} .jf-grid-9 {width: 900px;} .jf-grid-10 {width: 1000px;} .jf-grid-11 {width: 1100px;} .jf-grid-12 {width: 1200px;} .jf-block { margin: 10px; } .jf-block:after { clear: both; content: ""; display: table; } @media only screen and (min-width: 960px) and (max-width: 1199px) { .main {width: 960px;} .jf-grid-1 {width: 80px;} .jf-grid-2 {width: 160px;} .jf-grid-3 {width: 240px;} .jf-grid-4 {width: 320px;} .jf-grid-5 {width: 400px;} .jf-grid-6 {width: 480px;} .jf-grid-7 {width: 560px;} .jf-grid-8 {width: 640px;} .jf-grid-9 {width: 720px;} .jf-grid-10 {width: 800px;} .jf-grid-11 {width: 880px;} .jf-grid-12 {width: 960px;} .jflabel_skitter { width: 960px !important; } .label_skitter_container { width: 960px !important; top: 50px; } div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox { width: 430px; } } /* #Tablet (Portrait) ================================================== */ @media only screen and (min-width: 768px) and (max-width: 959px) { .main {width: 768px;} .jf-grid-1 {width: 64px;} .jf-grid-2 {width: 128px;} .jf-grid-3 {width: 192px;} .jf-grid-4 {width: 256px;} .jf-grid-5 {width: 320px;} .jf-grid-6 {width: 384px;} .jf-grid-7 {width: 448px;} .jf-grid-8 {width: 512px;} .jf-grid-9 {width: 576px;} .jf-grid-10 {width: 640px;} .jf-grid-11 {width: 704px;} .jf-grid-12 {width: 768px;} .jflabel_skitter { width: 768px !important; } .label_skitter_container { width: 768px !important; top: 50px; } div.k2ItemsBlock ul li a.moduleItemImage img { float: none; } div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox { width: 330px; } } /* #Mobile (Portrait) ================================================== */ @media only screen and (max-width: 767px) { #jf-header h1#logo { text-align: center; } #jf-header form { text-align: center; } #jf-header .search { float: none; display: inline-block; } #navbutton { display: block; } #navbutton a { background: url("../images/collapse-icon.png") no-repeat scroll right center #f5f5f5; border: 1px solid #bbb; color: #5c686d; cursor: pointer; display: block; font-family: amaranthregular; font-size: 18px; padding: 6px 10px; } #jf-mainnav { padding: 20px 0; } #jf-mainnav ul.menu { background-color: #f5f5f5; border: 1px solid #bbb; border-top: none; display: none; float: none; } #jf-mainnav ul.menu li { float: none; } #jf-mainnav ul.menu li a { background: none; border: none; padding: 8px 10px; } #jf-mainnav ul.menu li > ul { background: none; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: static; } #jf-mainnav ul.menu li.vhover > a, #jf-mainnav ul.menu li a:hover { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #jf-mainnav ul.menu li ul li a { color: #2d2d2d; } #jf-mainnav ul.menu li.active ul li a { color: #2d2d2d; } #jf-mainnav ul.menu li ul li a:hover, #jf-mainnav ul.menu li ul li.active a { color: #fff; } } @media only screen and (min-width: 481px) and (max-width: 767px) { body {-webkit-tap-highlight-color: transparent;} .main {width: 480px;} .main [class*="jf-grid"] {display: block;float: none;position: relative;width: 100%;} #jf-top .jf-grid-6 { float: left; width: 240px; } .jflabel_skitter { width: 480px !important; } .label_skitter_container { width: 480px !important; top: 0; } #jf-bottom-content div.k2ItemsBlock ul li, div.itemRelated ul li { width: 50%; } .form-left, .form-right { float: none; } div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox { width: 417px; } .contact-details .contact-module { width: 100%; margin: 0 0 20px; } .width4, .width3, .width2 { width: 50%; } } /* #Mobile (Landscape) ================================================== */ @media only screen and (max-width: 480px) { body {-webkit-tap-highlight-color: transparent;} .main {width: 95%;} .main [class*="jf-grid"] {display: block;float: none;position: relative;width: 100%;} #jf-callto, #jf-social { text-align: center; } #jf-social ul { float: none; display: inline-block; } .jflabel_skitter { width: 95% !important; } .label_skitter_container { width: 95% !important; top: 0; } #jf-bottom-content div.k2ItemsBlock ul li, div.itemRelated ul li { width: 100%; } .form-left, .form-right { float: none; } div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox { width: 240px; } .contact-details .contact-module { width: 100%; margin: 0 0 20px; } .width4, .width3, .width2 { width: 100%; } }