/********************************************************************* * balcannes 2013 CSS * @author nix * @since 25.02.2013. ******************************************************************/ /****************************************************************** * General ************************************************#******************/ * {padding: 0; margin: 0;} body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; color: #58656C; background-attachment: fixed; } html, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, fieldset, form, label, legend, button, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, section, summary, time, mark, audio, video {margin: 0px; padding: 0px; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} .clear {clear: both;} a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } .right {text-align: right;} ul ,ol {list-style: none; margin: 0;} strong {font-weight: bold;} header { width: 938px; padding: 0px; margin-right: auto; margin-left: auto; margin-top: 0px; overflow: hidden; margin-bottom: 0px; padding-bottom: 5px; } header h1 { width: 419px; height: 67px; overflow: hidden; padding: 0px; background-repeat: no-repeat; margin-top: 14px; margin-right: auto; margin-left: auto; margin-bottom: 0px; } header h1 a { display: block; text-indent: -9999px; width: 419px; height: 67px; background-image: url(../images/balcannes-logo.png); } #language { color: #6A7985; font-size: 11px; float: right; margin-top: 10px; } #language a:link , #language a:visited{ color: #C5CCD2; } #language a:hover { color: #F7263F; } #main-menu { margin-top: 25px; } #main-menu nav { text-align: center; color: #F7263F; height: 30px; } #main-menu nav .lnk-profiles { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #F7263F; font-weight: bold } #main-menu nav .lnk-profiles:hover { text-decoration: none; } #main-menu nav a:nth-last-child(2){ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #F7263F;} #main-menu nav a:nth-last-child(2):hover{ text-decoration: none; } #main-menu nav .lnk-profiles img { position: absolute; margin-top: -25px; margin-left: -40px; } #main-menu nav a:last-child, #main-menu nav a:nth-last-child(2) {font-weight: bold } #main-menu nav a:nth-last-child(2):after {content:""; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(205deg); position:absolute; width:19px; height:25px; background-image: url(../images/strelica.png); margin-top: 22px; margin-left: -34px;} #main-menu nav a { color: #6A7985; font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 15px; } #index-agency {width: 100%; margin-top: 13px; margin-bottom: 13px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #C6CDD2; border-bottom-color: #C6CDD2; padding-top: 13px; padding-bottom: 13px; } #index-agency #agency-show { margin-right: auto; margin-left: auto; width: 1200px; opacity: 0.6; height: 448px; margin-top: 0px; margin-bottom: 0px; position: relative; z-index: -10; } #index-agency #agency-search { height: 168px; width: 580px; margin-right: auto; margin-left: auto; margin-top: -379px; z-index: 1; background-image: url(../images/search_back.png); background-repeat: repeat; padding-top: 20px; padding-right: 29px; padding-bottom: 20px; padding-left: 29px; margin-bottom: 72px; } #index-agency #agency-search h2 { font-family: 'Archivo Black', sans-serif; font-size: 17px; color: #FFF; font-weight: normal; width: auto; display: block; height: 25px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #FFF; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; } #index-agency #agency-search .style-select { width: 190px; color: #A5B0B6; font-family: Arial, Helvetica, sans-serif; height: 23px; margin-bottom: 21px; } #index-agency #agency-search .style-textfield { width: 188px; color: #A5B0B6; font-family: Arial, Helvetica, sans-serif; height: 25px; margin-bottom: 21px; } #index-agency #agency-search .style-submit { width: 140px; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; height: 30px; margin-bottom: 21px; background-color: #F7263F; display: block; font-size: 17px; font-weight: bold; background-image: url(../images/submit-bac.png); background-repeat: no-repeat; background-position: 120px center; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; cursor: pointer; } #index-agency #agency-search .style-submit:hover { outline: 1px solid #fff; } #top_search { width: 100%; } #top_search .container { margin-bottom: 0px; } #main_title { width: 100%; border-top-width: 1px; border-bottom-width: 1px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #C6CDD2; border-bottom-color: #C6CDD2; margin-top: 15px; } #main_title .container { margin-bottom: 0px; background-image: url(http://balcannes.com/images/travica.png); background-position: 765px bottom; background-repeat: no-repeat; height: 76px; } #main_title h1 { width: 920px; height: 76px; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 42px; font-weight: normal; line-height: 76px; overflow: hidden;} #main_title .container.agency { height: 102px;} #main_title .container.agency .opis { color: #F6263F; font-size: 20px; font-family: Arial, Helvetica, sans-serif; margin-top: -10px; position: absolute; } #main_title .container #controls { float: right; height: 25px; width: 60px; margin-top: -50px; } #main_title .container #controls a { height: 25px; width: 25px; display: block; float: left; } #main_title .container #controls .prev { background-image: url(../images/btn-prev.png); margin-right: 10px; } #main_title .container #controls .next { background-image: url(../images/btn-next.png); } .content #profil { padding-top: 20px; padding-bottom: 20px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C6CDD2; } .content #profil #data { width: 720px; float: right; } .content #profil #data td { background-color: #F0F1F2; } .content #profil #data table p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #5D6870; margin-top: 10px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; } .content #profil #data table p.show { font-size: 19px; color: #F7263F; margin-top: 0px; } .content #profil #data table p.show span { color: #58656C; } .content #profil #profile_pic { height: 198px; width: 198px; float: left; margin-right: 20px; } .content #profil section { margin-top: 20px; padding-top: 20px; border-top-width: 1px; border-top-style: dotted; border-top-color: #C6CDD2; } .content #profil section h2 { width: 198px; float: left; text-align: right; color:#E1E3E4; font-family: 'Archivo Black', sans-serif; font-size: 20px; margin: 0px; padding: 0px; line-height: 18px; } .content #profil section .body { float: right; width: 720px; } .content #profil section .body p { font-size: 13px; margin-top: 0px; margin-bottom: 0px; } .content #profil section .body article { margin-bottom: 15px; padding-bottom: 15px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C6CDD2; } .content #profil section .body article:last-child { border-bottom-style: none; margin-bottom: 0px; padding-bottom: 0px; } .content #profil section .body article img { float: left; margin-right: 17px; } .content #profil section .body article .info { float: right; width: 432px; } .content #profil section .body article .info h2 { float: none; width: auto; text-align: left; color: #F6263F; font-family: Arial, Helvetica, sans-serif; margin-bottom: 12px; } .content #profil section .body article .info h2 a { color: #F6263F; } .content #profil section .body article .info .klijent { font-weight: bold; margin-bottom: 12px; font-size: 13px; } .content #profil section .body article .info li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; background-image: none; } .content #profil section .body article .info ul li span { font-weight: bold; } .content #profil section .body ul li { font-size: 12px; color: #58656C; font-family: Arial, Helvetica, sans-serif; margin-bottom: 7px; padding-left: 12px; background-image: url(../images/bullet_red.png); background-repeat: no-repeat; background-position: left center; } .content .pager { width: 938px; height: 55px; text-align: center; line-height: 55px; font-size: 20px; } .content .pager a { color: #999; } .content .t25 { padding-top: 20px; padding-bottom: 20px; } .order_no {display:none; width: 195px; float: left; text-align: center; color:#E1E3E4; font-family: 'Archivo Black', sans-serif; font-size: 128px; margin: 0px; padding: 0px; line-height: 137px; height:160px;} .content .t25 article {margin-bottom:10px; padding-bottom:10px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C6CDD2;} .content .t25 article img { float: left; margin-right: 17px; margin-left:17px } .content .t25 article .info { float: left; width: 618px; } .content .t25 article .info h2 { float: none; width: auto; text-align: left; color: #F6263F; font-family: Arial, Helvetica, sans-serif; margin-bottom: 0px; font-size:20px } .content .t25 article .info p {font-size:13px} .content .t25 article .info a {font-size:13px; color: #F6263F;} .content .t25 article .info .agencija {margin-bottom:14px} .content .t25 article .info .agencija a {color: #58656C} .content .t25 article .info .klijent { font-weight: bold; margin-bottom: 12px; font-size: 13px; } #main_title .container.t25 {height:auto} #main_title .container.t25 p {margin-bottom:15px} .content .t25 article .info .expand {display:none; padding-top:14px} .content .t25 article .info .expand span {font-weight: bold;} .content .t25 article .info .expand li {font-size:12px} .content { margin-bottom: 20px; font-weight: normal; } .content .main-article { float: left; width: 556px; margin-top: 20px; } .content .main-article h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #58656C; font-weight: normal; margin-bottom: 42px; } .content .main-article h3 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #58656C; font-weight: normal; margin-bottom: 24px; } .content .main-article p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-bottom: 15px; margin-top: 0px; } .content .main-article a { font-weight: bold; color: #F7263F; } .content .main-article header { text-align: left; padding: 0px; height: auto; margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; } .content .main-article #body { margin-bottom: 15px; } .content .main-article li {list-style:disc; list-style-position:outside; margin-left:15px } .content .main-article ul, .content .main-article ol{ margin-bottom:28px} .content .main-article .date { font-size: 11px; } .content .main-article header h1 {width:900px; font-size: 30px; color: #F7263F; font-weight: normal; padding: 0px; display: block; height: auto; margin-top: 0px; margin-right: 0px; margin-bottom: 30px; margin-left: 0px; } .content .main-article .vignette { height: 270px; width: 556px; } .content #r-col { width: 358px; float: right; margin-top: 20px; } .content #r-col #agency-search { background-color: #404040; height: 320px; width: 318px; padding: 20px; } .content #r-col #agency-search .style-select { width: 318px; color: #A5B0B6; font-family: Arial, Helvetica, sans-serif; height: 23px; margin-bottom: 21px; } .content #r-col #agency-search .style-textfield { width: 316px; color: #A5B0B6; font-family: Arial, Helvetica, sans-serif; height: 25px; margin-bottom: 21px; } .content #r-col #agency-search .style-submit { width: 140px; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; height: 30px; margin-bottom: 21px; background-color: #F7263F; display: block; font-size: 17px; font-weight: bold; background-image: url(../images/submit-bac.png); background-repeat: no-repeat; background-position: 120px center; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; cursor: pointer; float: right; } .content #r-col #agency-search .style-submit:hover { outline: 1px solid #fff; } .content #r-col #ostale_novosti article { height: 50px; padding-top: 20px; padding-bottom: 20px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C6CDD2; } .content #r-col #ostale_novosti { border-top-width: 1px; border-top-style: solid; border-top-color: #C6CDD2; margin-top: 130px; } .content #r-col #ostale_novosti article img { float: left; margin-right: 10px; } .content #r-col #ostale_novosti article p { font-size: 11px; } .content #r-col #ostale_novosti article h2 { font-size: 13px; font-weight: normal; } .content #r-col #ostale_novosti article h2 a { color: #F7263F; } .content #agency-list { margin-top: 33px; } .content .search-list{ float: left; width: 556px; margin-top: 20px !important; } .content #agency-list ul li { float: left; height: 200px; width: 150px; display: block; margin-right: 46px; } .content #agency-list ul li:last-child { margin: 0px; padding: 0px; } .content #agency-list ul li a { font-family: Arial, Helvetica, sans-serif; color: #999; } .content #agency-list ul li a:hover { font-family: Arial, Helvetica, sans-serif; color: #F7263F; text-decoration: none; } .content #agency-list .title { height: 40px; font-size: 12px; text-decoration: none; text-align: center; padding-top: 5px; padding-bottom: 5px; } .content .search-result { height: 40px; line-height: 50px; } .container { width: 938px; margin-right: auto; margin-left: auto; margin-bottom: 63px; } #info-text { text-align: center; padding-top: 20px; padding-bottom: 20px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C6CDD2; } #mid-banner { text-align: center; padding-top: 20px; padding-bottom: 20px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C6CDD2; height: 90px; border-top-width: 1px; border-top-style: dotted; border-top-color: #C6CDD2; margin-bottom: 20px; } #info-text p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 23px; margin-bottom: 10px; } #scrollable .items div article { height: 183px; width: 179px; float: left; margin-right: 10px; margin-bottom: 10px; } #scrollable .items div article img { margin: 0px; padding: 0px; } #scrollable .items div article .opis { height: 62px; width: 169px; background-color: #000000; margin-top: -2px; padding: 5px; } #scrollable .items div article a:hover { text-decoration: none; } #scrollable .items div article a .opis h1 { color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; height: 30px; display: block; line-height: 15px; } #scrollable .items div article a .opis p { color: #666666; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; height: 30px; display: block; line-height: 15px; } #top-agency { height: 162px; width: 938px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #C6CDD2; border-bottom-color: #C6CDD2; margin-top: 10px; margin-bottom: 10px; padding-bottom: 10px; } #top-agency h2 { font-family: 'Archivo Black', sans-serif; font-size: 15px; color: #CDD1D3; font-weight: normal; width: auto; display: block; margin-bottom: 10px; } #top-agency ul li { float: left; height: 100px; width: 100px; display: block; margin-right: 65px; } #top-agency ul li:last-child { margin-right: 0px; } #news h2 { color: #CDD1D3; font-family: 'Archivo Black', sans-serif; font-size: 30px; width: auto; display: block; height: 35px; } #news { border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: #9BA3A7; height: 116px; position: relative; width: 939px; } #news article { height: 81px; width: 313px; background-color: #CDD0D3; display: block; float: left; } #news article:last-child { width: 312px; } #news article img { float: left; margin-right: 10px; } #news article a:link , #news article a:visited{ height: 51px; width: 273px; background-color: #CDD0D3; padding-top: 15px; padding-bottom: 15px; padding-left: 10px; padding-right: 30px; display: block; } #news article a:hover { text-decoration: none; background-color: #EDEEEF; } #news article a .date { color: #58656C; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } #news article a h2 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #F7263F; } #news .archive { color: #58656C; font-family: 'Archivo Black', sans-serif; font-size:17px; float: right; margin-top: -4px; margin-right: 10px; } footer { height: auto; width: 100%; background-color: #F7F8F9; border-top-width: 1px; border-top-style: dotted; border-top-color: #C6CDD2; } footer .footer-inside { width: 898px; margin-right: auto; margin-left: auto; } footer .footer-inside .flag { position: absolute; margin-top: -45px; } footer .footer-inside .organiser { height: 27px; width: 224px; float: left; margin-top: 40px; } footer .footer-inside #footer-menu { float: right; color: #FD2643; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-top: 50px; } .footer-inside #footer-menu a { color: #9BA3A7; } /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position:relative; overflow:hidden; width: 938px; height:380px; } /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accommodate scrollable items. it's enough that you set width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; } /* a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */ .items div { float:left; height: 390px; width: 948px; } .actions { position: absolute; } .actions a { height: 45px; width: 24px; display: block; } .actions .prev{ position: absolute; margin-left: -50px; background-image: url(../images/arrows-bulk.png); cursor: pointer; margin-top: 170px; } .actions .next { position: absolute; margin-left: 958px; background-image: url(../images/arrows-bulk.png); cursor: pointer; margin-top: 170px; background-repeat: no-repeat; background-position: right top; } .actions .next:hover { position: absolute; margin-left: 958px; background-image: url(../images/arrows-bulk.png); cursor: pointer; margin-top: 170px; background-repeat: no-repeat; background-position: right bottom; } .actions .prev:hover { background-image: url(../images/arrows-bulk.png); background-position: 0px 45px; } #top-agency .actions .prev { position: absolute; margin-left: -50px; background-image: url(../images/arrows-bulk.png); cursor: pointer; margin-top: 23px; } #top-agency .actions .next { position: absolute; margin-left: 958px; background-image: url(../images/arrows-bulk.png); cursor: pointer; margin-top: 23px; background-repeat: no-repeat; background-position: right top; } #top-agency .actions .next:hover { position: absolute; margin-left: 958px; background-image: url(../images/arrows-bulk.png); cursor: pointer; background-repeat: no-repeat; background-position: right bottom; } #top-agency .actions .next:hover { position: absolute; margin-left: 958px; background-image: url(../images/arrows-bulk.png); cursor: pointer; background-repeat: no-repeat; background-position: right bottom; } .images-list img {margin-right:10px} .images-list img:last-child {margin-right:0px} #scrollable2 .items div article { height: 183px; width: 179px; float: left; margin-right: 10px; margin-bottom: 10px; } /**NEW SEARCH-**/ section.search-radovi { margin-top: 20px; padding-top: 20px; border-top-width: 1px; border-top-style: dotted; border-top-color: #C6CDD2; } section.search-radovi h2, section.search-radovi h2 a { width: 198px; float: left; text-align: right; color:#E1E3E4; font-family: 'Archivo Black', sans-serif; font-size: 20px; margin: 0px; padding: 0px; line-height: 18px; } section.search-radovi .body { float: right; width: 720px; } section.search-radovi .body p { font-size: 13px; margin-top: 0px; margin-bottom: 0px; } section.search-radovi .body article { margin-bottom: 15px; padding-bottom: 15px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C6CDD2; } section.search-radovi .body article:last-child { border-bottom-style: none; margin-bottom: 0px; padding-bottom: 0px; } section.search-radovi .body article img { float: left; margin-right: 17px; } section.search-radovi .body article .info { float: right; width: 432px; } section.search-radovi .body article .info h2 { float: none; width: auto; text-align: left; color: #F6263F; font-family: Arial, Helvetica, sans-serif; margin-bottom: 12px; } section.search-radovi .body article .info h2 a { color: #F6263F; } section.search-radovi .body article .info .klijent { font-weight: bold; margin-bottom: 12px; font-size: 13px; } section.search-radovi .body article .info li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; background-image: none; } section.search-radovi .body article .info ul li span { font-weight: bold; }