/*______________________________________________________________________________________________________ Hello! ________________________________________________________________________________________________________ BEAD BY BEAD | http://www.beadbybead.org Design and code: Mario Sestak (Sixpack66) | http://www.sixpack66.com 2009 ________________________________________________________________________________________________________*/ html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin:0; padding:0;} form, fieldset {border:none;} #arh ul{ list-style-type:none; } img {border:none; outline:none;} .left {float:left;} .right {float:right;} ul {list-style-type:none;} body {background:#ffdc7b url(../slices/main_bg.jpg) no-repeat center top; font:62.5%/1.7 Georgia, "Times New Roman", Times, serif; color:#333;} /*** __________typography & links________***/ a {color:#570c00; text-decoration:none; border-bottom:#570c00 dotted 1px; outline:none;} a:hover {color:#cc7b16; border-bottom:#cc7b16 dotted 1px;} #sixpack66 {position:absolute; bottom:1px; left:62px; height:20px; width:220px;font-family:Arial, Helvetica, sans-serif, "Trebuchet MS";} #sixpack66 a{border:none;} #blog{display:block; height:30px; width:150px; background:#fff; clear:both; font-size:1.2em; font-style:italic; text-align:center; padding:1em 0 0 .5em; border:none; position:absolute; left:5px; top:254px; z-index:2;} h1#logo a {border:none; } #logo {width:275px; height:175px; margin-top:37px; margin-left:15px;margin-bottom:1.5em;} h1 { text-transform:uppercase; font-size:2.8em; font-family:"Palatino Linotype", Georgia, "Times New Roman", Times, serif; color:#fff; font-weight:normal;} #meet_beadbybead, #about_title, #shop_title, #help, #uganda_title, #upoznajte_beadbybead, #contact_title{height:48px; width: 421px;float:left; margin:269px 0 0 -270px; display:inline; padding-left:39px; padding-top:2px;} #meet_beadbybead {background:url(../slices/meet_beadbybead.jpg) no-repeat;} #about_title {background:url(../slices/about_title.jpg) no-repeat;} #shop_title {background:url(../slices/shop_title.jpg) no-repeat;} #help {background:url(../slices/help.jpg) no-repeat;} #uganda_title {background:url(../slices/uganda_title.jpg) no-repeat;} #upoznajte_beadbybead {background:url(../slices/upoznajte_beadbybead.jpg) no-repeat;} #contact_title {background:url(../slices/contact_title.jpg) no-repeat;} h2 {font:2.1em "Palatino Linotype", Georgia, "Times New Roman", Times, serif;} #main_info_title {height:2em; width:13em; color:#fff; background:url(../slices/main_h2.png) no-repeat; margin:1em 0 1.2em .8em; padding-left:.9em; } #sec_info_title {height:2em; width:13em; color:#fff; background:url(../slices/sec_h2.png) no-repeat; margin:1em 0 .7em .2em; padding-left:36px; } h3 {font:1.8em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#5d5713; font-style:italic; font-weight:bold; text-transform:uppercase; padding:50px 0 32px 46px; letter-spacing:-.8px;} h4 {font:1.5em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#cc6a00; font-style:italic; font-weight:bold; padding:0 0 18px 44px; } h5 {font:1.3em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#cc6a00; font-weight:bold; margin:0 50px 18px 46px; border-bottom:#cc6a00 solid 1px; border-top:#cc6a00 solid 1px;} .less_space {padding-left:36px;} #footer_warp h5 {margin:44px 44px 15px 62px; border: none; padding-bottom:6px; } #footer_warp h4 {color:#ffdc7b; margin:30px 0 0 25px; padding:0 0 10px 34px; } p {margin-bottom:1.2em;} #main_info p, #info p {padding-left:46px; padding-right:50px;} #sec_info p {padding-left:44px; padding-right:34px;} #main_info p, #sec_info p {color:#ffe59c;} #info p {font-size:1.2em; color:#fff;} #beadbybead.buss_type #info p {color:#9a3539; font-style:italic;} #info a {color:#cb6e27;border-bottom:#cb6e27 dotted 1px;} #info a:hover{color:#ffdc7b; border-bottom:#ffdc7b dotted 1px;} .first p {padding-left:46px; padding-right:30px;} .sec p, .third p {padding-left:36px; padding-right:34px;} #footer_warp p {padding-left:62px; padding-right:34px;} .footer_info a {color:#cc7b16; text-decoration:none; border-bottom:#cc7b16 dotted 1px; outline:none;} .footer_info a:hover {color:#ffdc7b; border-bottom:#ffdc7b dotted 1px;} .important_solo, .important_solo_first {display:block; font-weight:bold; font-style:normal;color:#5d5713;} .imp {color:#5d5713; display:block; font-weight:bold;} .important {color:#cb6e27; margin-bottom:2em; font-style:normal;} .names {display:block; font-weight:bold;} .firm{ color:#7d7d7d;} #beadbybead .important_solo, .important_solo_first{padding-left:2.4em; padding-bottom:.5em; text-transform:uppercase;} #beadbybead.shop .important_solo {color:#333;} /*** __________view more buttons________***/ .moreinfo_sec, .moreinfo_main, .general_more{text-align:center;} a.moreinfo_sec, a.moreinfo_main {border:none !important; padding-top:8px;} a.general_more {border:none !important; padding-top:5px;} a.moreinfo_sec :hover, a.moreinfo_main :hover, a.general_more :hover { border:none !important;} .moreinfo_main {height:34px; width:356px; background:url(../slices/moreinfo_main.jpg) no-repeat; position: absolute; right:0; bottom:0;bottom:-8px;} .moreinfo_sec {height:34px; width:155px; background:url(../slices/moreinfo_sec.jpg) no-repeat; position: absolute; right:0; bottom:-8px;} .general_more{background:url(../slices/general_more.jpg) no-repeat right; width:122px; height:26px; position:absolute; bottom:-3px; right:0;} /*** __________________________________________________________________________________***/ /*** __________ HEADER, layout ________***/ #main_warp, #header, #footer {width:980px; margin:auto;} #header {height:559px; background:url(../slices/header_8.jpg) no-repeat bottom; position:relative; margin-bottom:15px;} #main_warp { background:#fff url(../slices/faux.jpg) repeat-x bottom; padding-bottom:6em; overflow:hidden; font-size:1.2em; position:relative; background-image: url(../slices/faux.jpg); } /*** __________ MAIN navigation & dropdown menu ________***/ #main_navigation {position: absolute; right:0; top:187px; width: 100%; } #main_navigation ul {float:right;} #main_navigation li {float:left; position: relative;} #main_navigation a {display:block; font-size:1.2em; padding-top:8px;} a.navigacija-a1 {width:88px; height:30px;} a.navigacija-a2 {width:125px; height:30px;} a.navigacija-a3 {width:127px; height:30px;} a.navigacija-a4 {width:91px; height:30px;} a.navigacija-a5 {width:70px; height:30px;} a.navigacija-a6 {width:92px; height:30px;} a.navigacija-a7 {width:96px; height:30px;} a.navigacija-a1, a.navigacija-a2, a.navigacija-a3, a.navigacija-a4, a.navigacija-a5, a.navigacija-a6, a.navigacija-a7{ border:none !important; margin-left:.2em; text-align:center;} /* _______________ dropdown menu _____________ */ #main_navigation li ul {display: none; position:absolute; top: 33px; left: 4px;} #main_navigation li:hover ul ,#main_navigation li.over ul {display: block; background-color:#fff;} #main_navigation ul li ul li {display: list-item; float: none; width:16em;} #main_navigation ul li ul li a {padding-left:1em; border-bottom: solid 1px #ffdc7b; padding-bottom:4px;} #main_navigation ul li ul li a:hover { color:#cc7b16;} /* _______________ language _____________ */ #lang li {float:left;} #lang a, #lang span {display:block; font-size:1.2em; padding-top:8px; border:none; width:78px; height:18px; margin:15px 2px 0 0;} #lang span { color:#cc7b16;} /*** __________________________________________________________________________________***/ /*** __________ CONTENT ________***/ #main_info {height:308px; width:599px; background:url(../slices/main_info.jpg) no-repeat; float:left; margin-left:17px; display:inline; position:relative;} #sec_info {height:308px; width:344px; background:url(../slices/sec_info.jpg) no-repeat; float:left;margin-left:5px; display:inline;position:relative; } .general_info {height:268px; width:313px; background:url(../slices/general_info.jpg) no-repeat top; float:left; margin-top:17px; border:#ffdc7c solid 1px; display:inline; position:relative;} .first{margin-left:17px;} .sec{margin-left:3px;} .third{margin-left:3px;} #footer {height:300px; padding-top:90px; font-size:1.1em; color:#b0484c;font-family:Arial, Helvetica, sans-serif, "Trebuchet MS";} #footer_warp {background:#200500 url(../slices/fotterwarp_back.jpg) no-repeat center top; height:395px; clear:both;} .footer_info {height:268px; width:313px;float:left; margin-top:17px; } /*** __________________________________________________________________________________***/ /*** __________ Simple mail form ________***/ #kontaktforma {margin-left:64px; width:100px; } #kontaktforma legend {visibility:hidden;} #kontaktforma label {display: block; font-size:1em; color:#ffdc7b; } #kontaktforma input, #kontaktforma textarea, #kontaktforma select {width: 200px; margin: 0 0 4px; padding: 2px; background: #ffecaf; border: 1px solid #e6d9b2;} #kontaktforma input:focus, #kontaktforma textarea:focus {background: #fff;border: 1px solid #e6d9b2;} #kontaktforma textarea {height: 78px;} #kontaktforma #theSubmit {width: auto; padding: 2px 4px;background: #ffdc7b;cursor: pointer; border: solid 1px #fff;} #message {font-size:1.1em;font-family: Arial, Helvetica, sans-serif;} /*** __________________________________________________________________________________***/ /*** __________ BEAD BY BEAD ________***/ #beadbybead #main_info p, #beadbybead #sec_info p{color:#333;} #beadbybead #sec_info h3{padding:50px 0 32px 43px;} #beadbybead #main_info h4{ color:#a0353a; padding:0 0 2px 44px; } #beadbybead #main_info h6{color:#a0353a; font:1em "Trebuchet MS", Arial, Helvetica, sans-serif; font-style:italic; font-weight:bold; padding-bottom:21px;} #beadbybead #header {height:697px; background:url(../slices/bbb.jpg) no-repeat bottom;} #beadbybead #main_info {background:none; height:100%;} #beadbybead #sec_info {background:#f2e2cf; height:100%;} #beadbybead .general_info {height:100%; background:url(../slices/general_info_byb.jpg) no-repeat top; border:none; } #beadbybead .general_info img{margin:0 0 15px 25px;} .news {clear:both; background:url(../slices/div.jpg) no-repeat top center; padding:2em 0;} .news img {float:left; margin:0 28px 40px 36px;} .general_info ul {padding:1em 0 2.2em .9em; margin-left:2.8em;} .general_info ul li {margin-bottom:1.4em; background:url(../slices/list_byb.jpg) no-repeat 0px -4px;} .goup{clear:both; display:block; background:url(../slices/gototop.jpg) center no-repeat; height:56px; } a.top {border:none !important; padding: 6px 0 0 22px; display:block; height:29px; width:94px; float:right; background:url(../slices/goup.jpg) no-repeat; margin-right:20px;} /*** __________ SEC navigation ________***/ #sec_navigation {position: absolute; right:10px; top:310px; width: 424px;} #sec_navigation ul {float:right;} #sec_navigation li {float:left; position: relative;} #sec_navigation a {display:block; font-size:1.1em; padding-top:8px;} a.sec_nav-a1 {width:153px; height:28px;} a.sec_nav-a2 {width:73px; height:28px;} a.sec_nav-a3 {width:42px; height:28px;} a.sec_nav-a4 {width:138px; height:28px;} a.sec_nav-a1, a.sec_nav-a2, a.sec_nav-a3, a.sec_nav-a4 {border:none !important; margin-left:.2em; text-align:center;} /*** ___________________________________***/ #info{width:480px; position:absolute; bottom:118px; right:0;} #beadbybead.buss_type #info { bottom:150px;} #beadbybead #main_info_title{color:#ffdc7b; margin:1em 0 1.4em .8em; font-size:2.4em;} #beadbybead.buss_type #header {height:697px; background:url(../slices/bbb_poslovanje.jpg) no-repeat bottom;} #beadbybead.buss_type #main_info { width:455px;} #beadbybead.buss_type #sec_info {width: 455px; background:none;} #beadbybead.buss_type h3{ background:url(../slices/gototop.jpg) no-repeat center; font-family:"Palatino Linotype"; font-style:normal; font-size:1.8em; padding:10px 0 50px 64px;} #beadbybead.buss_type #main_info h4, #beadbybead.buss_type #sec_info h4, #beadbybead.uganda #main_info h4{font-size:1.4em; text-transform:uppercase; color:#a0353a; padding-bottom:1.5em; } #beadbybead.contact #sec_info h4, #beadbybead.contact_form #sec_info h4 {font-size:1.4em; text-transform:uppercase; color:#a0353a; padding-bottom:1.2em; padding-top:1.1em; padding-left:12px;} /*** __________________________________________________________________________________***/ /*** __________ SHOP ________***/ #beadbybead.shop #sec_info {margin-left:17px; background:none; width:330px;} #beadbybead.shop #main_info {margin-left:0px;} #beadbybead.shop #header {background:url(../slices/shop.jpg) no-repeat bottom;} #beadbybead.shop #main_info h4{ color:#a0353a; padding:0 0 0px 22px; } #beadbybead.shop #main_info h6{ color:#a0353a; padding:0 0 15px 22px;} #beadbybead.shop #main_info p{ padding:0 55px 0px 22px;} #beadbybead.shop .top {margin:0 10px 0 0; background:url(../slices/order.jpg) no-repeat;} #beadbybead.shop #main_info h2 {padding:40px 0 18px 22px; color:#5d5713; text-transform:uppercase;} #beadbybead.shop #main_info .disclaimer{ color:#912f33; font-family:Arial, Helvetica, sans-serif, "Trebuchet MS"; font-size:.9em;} #beadbybead.shop .general_info {background:url(../slices/general_info_shop.jpg) no-repeat top; } #beadbybead.shop .general_info ul li { background:url(../slices/list_byb_shop.jpg) no-repeat 0px -4px;} #beadbybead.shop #sec_info ul.items {background:#f2e2cf; font-size:1.2em; text-transform:uppercase; padding:0 0 1.2em 0em; margin-right:1.1em;font-weight:bold; } #beadbybead.shop #sec_info ul.items li {margin-bottom:.7em;} #beadbybead.shop #sec_info ul.items li a {border:none; display:block; height:1.3em; padding-left:3.1em; padding-top:.2em; background:#f2e2cf; background:url(../slices/bullet.jpg) no-repeat 26px 10px;} #beadbybead.shop #sec_info ul li a.opa {border:none; display:block; height:1.3em; padding-left:2.3em; padding-top:.6em; padding-bottom:.4em; background:#ffdc7b; margin-bottom:.4em; font-size:1.3em; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-style:italic; border-bottom: solid 1px #fff;} ul.update_photos {margin-left:1.6em;} .update_photos li {float:left; margin:0 1.6em .6em 0;} .update_photos a {padding:.4em .6em 1.2em .6em; background:#ffdc7b; border:none !important; display:block; float:left;} .update_photos li a:hover {background:#ffecaf;} ul.social_network {margin-left:4.6em;} .social_network li {float:left; margin:0 .2em .2em 0;} .social_network a {padding:.4em .6em 1.2em .6em; background:none; border:none !important; display:block; float:left;} #beadbybead.shop .news img {margin:0;} #beadbybead.shop .top {margin:0 1.8em 0 0;} #beadbybead.shop #main_info p.price{margin-bottom:.4em; font-size:1em; color:#5d5713; display:block; clear:both;} #beadbybead.shop .goup { padding-top:2em;} #beadbybead.shop .goup .top{ margin-top:2.3em; background:none;} /*** __________ SEC navigation SHOP________***/ #beadbybead.shop a.sec_nav-a1 {width:149px; height:28px;} #beadbybead.shop a.sec_nav-a2 {width:102px; height:28px;} #beadbybead.shop a.sec_nav-a3 {width:57px; height:28px;} /*** __________ SEC navigation 2 SHOP________***/ #sec_navigation_info {position: absolute; left:15px; bottom:0px; width: 624px;} #sec_navigation_info ul {float:left;} #sec_navigation_info li {float:left; position: relative;} #sec_navigation_info a {display:block; font-size:1.1em; padding-top:8px;} #beadbybead.shop a.info_nav-a1 {width:198px; height:28px;} #beadbybead.shop a.info_nav-a2 {width:137px; height:28px;} #beadbybead.shop a.info_nav-a3 {width:174px; height:28px;} a.info_nav-a1, a.info_nav-a2, a.info_nav-a3 {border:none !important; margin-left:.2em; text-align:center;} .terms_list {margin: 16px 0 15px 34px;} .terms_list li{list-style-type:circle; margin-bottom:1em;} /*** __________________________________________________________________________________***/ /*** __________UGANDA________***/ #beadbybead.uganda #header {height:697px; background:url(../slices/uganda.jpg) no-repeat bottom;} ul#links {margin-left:58px} #links li{list-style-type:circle;} #beadbybead.uganda .general_info img{margin:0} #beadbybead.uganda ul.update_photos {margin-left:.4em;} #beadbybead.uganda .update_photos li {margin:0 .4em .6em 0;} #beadbybead.uganda .update_photos a {padding:.2em .3em .6em .3em; background:#ffdc7b; border:none !important; display:block; float:left;} #beadbybead.uganda .update_photos li a:hover {background:#ffecaf;} /*** __________________________________________________________________________________***/ /*** KAKO POMOCI***/ #beadbybead.help #header {height:697px; background:url(../slices/kako_pomoci.jpg) no-repeat bottom;} #beadbybead.help #info{width:380px; position:absolute; bottom:112px; left:21px;} #beadbybead.help #info p {color:#ffe59c;padding-left:42px;} #beadbybead.help .important_solo {display:block; font-weight:bold; font-style:normal;color:#963537; padding-top:2.2em; padding-left:0; background:url(../slices/list_bottom.jpg) no-repeat right top;} #beadbybead.help .important_solo_first{display:block; font-weight:bold; font-style:normal;color:#963537; padding-top:2.2em; padding-left:0;} #beadbybead.help .bg_none{background:none;} #beadbybead.help #main_info ul{margin-left:3.2em; margin-top:2em;position: relative;} #beadbybead.help #main_info li{margin-left:5.6em; background:url(../slices/list_bullet.jpg) no-repeat 0px 28px; margin-bottom:.6em; padding-left:7.6em;} #beadbybead.help #main_info {width:720px; position: relative;} /*** __________________________________________________________________________________***/ /*** KONTAKT***/ #beadbybead.contact #header {height:697px; background:url(../slices/kontakt.jpg) no-repeat bottom;} #beadbybead.contact_form #header {height:397px; background:url(../slices/kontakt_form.jpg) no-repeat bottom;} #beadbybead.contact #info{width:370px; position:absolute; bottom:146px; right:0px;} #beadbybead.contact #info p {color:#ffe59c;} #beadbybead.contact #main_info, #beadbybead.contact_form #main_info{width:480px; padding-top:1.5em;} #beadbybead.contact #sec_info, #beadbybead.contact_form #sec_info {background:none; width:460px;} #beadbybead.contact #sec_info p, #beadbybead.contact_form #sec_info p { padding-left:12px;} /*** __________ Simple contact form ________***/ #main_contact_form {margin-left:46px; margin-top:30px; width:380px; } #main_contact_form legend {visibility:hidden;} #main_contact_form label {display: block; font-size:1.2em; color:#7d7d7d; } #main_contact_form input, #main_contact_form textarea, #main_contact_form select {width: 371px; margin: 0 0 10px; padding:4px; background: #ffecaf; border: 2px solid #e6d9b2;} #main_contact_form input:focus, #main_contact_form textarea:focus {background: #fff;border: 2px solid #e6d9b2;} #main_contact_form textarea {height: 180px;} #main_contact_form #theSubmit {width: 100px; height:30px; background: #ffdc7b; cursor: pointer; float:right;} #message {font-size:1.1em;font-family: Arial, Helvetica, sans-serif;} /*** __________ error page ________***/ #beadbybead.contact_form #main_info .warning{ color:#fff; font-size:1.4em; text-transform:uppercase; font-style:normal; background:#990000;} #beadbybead.contact_form #main_warp{height:800px;} /*** __________________________________________________________________________________***/ /*** O NAMA***/ #beadbybead.about #header {height:397px; background:url(../slices/o_nama.jpg) no-repeat bottom;} #beadbybead.about #main_info {width:940px; padding-top:1.5em;} #beadbybead.about #main_info p{ padding-left:0;} #bybinfo {float:right; width:590px; padding-left:0;} #beadbybead.about #main_info h4{padding:.6em 0 1em 0; } #beadbybead.about .news img {float:left; margin:0 0px 40px 0px;} #beadbybead.about a.sec_nav-a1 {width:164px; height:28px;} #beadbybead.about a.sec_nav-a2 {width:96px; height:28px;} #beadbybead.about a.sec_nav-a3 {width:142px; height:28px;} #beadbybead.about a.sec_nav-a1, #beadbybead.about a.sec_nav-a2, #beadbybead.about a.sec_nav-a3{border:none !important; margin-left:.2em; text-align:center;} /*** __________________________________________________________________________________***/ /*** NOVOSTI***/ #beadbybead.whats_new #header {height:697px; background:url(../slices/novosti.jpg) no-repeat bottom;} .press {float:left; padding:.4em 1.1em 1em 1.5em;} .news_img{ padding:.3em .5em .6em .5em; background:#ffdc7b; display:block;} #beadbybead.whats_new #main_info h4{ color:#a0353a; padding:0 0 0px 22px; margin-left:22px; } #beadbybead.whats_new #main_info h6{ color:#a0353a; padding:0 0 15px 22px; margin-left:22px; } #beadbybead.whats_new #info{ position:absolute; bottom:135px; right:110px;} #pdf{float:left; padding:0 .5em 2em 1.3em;} a.news-a1 {width:82px; height:28px;} a.news-a2 {width:96px; height:28px;} a.news-a3 {width:72px; height:28px;} a.news-a1, a.news-a2, a.news-a3{border:none !important; margin-left:.2em; text-align:center;} /*** __________________________________________________________________________________***/ /*** ORDER***/ #order_form {/*width:380px; */ padding-left:22px;} #order_form legend {visibility:hidden;} #order_form label {display: block; font-size:1.1em; color:#333; padding:2px 0; } #order_form input, #order_form textarea, #order_form select { padding:2px; background: #ffecaf; border: 1px solid #c0c0c0;} .data { width:200px; height:18px;} .smaller_data {width:46px;} #order_form input:focus, #order_form textarea:focus {background: #fff;border: 1px solid #c0c0c0;} #order_form textarea {height: 180px;} #order_form #theSubmit {width: 70px; height:28px; background: #ffdc7b; cursor: pointer; float:left; outline:none; margin-right:.8em; margin-top:.2em;} #message {font-size:1.1em;font-family: Arial, Helvetica, sans-serif; } #beadbybead.shop #main_info h4.form_title{ color:#a0353a;margin:20px 0 22px 0; padding:0;} .order_item{ clear:both; border-bottom: solid 1px #d0d0d0; padding-top:6px;} .left_item {float:left; margin-right:32px;} .bead_item { width:200px; float:left;} .label_check {font-weight:bold;} #phone{background:#FFFFCC;} .type_input {float:left; width:220px;} .more{padding-top:2em;} #beadbybead .general_info ul.friends li{background:none; border:none; float:left;} #beadbybead .general_info ul.friends img{ margin:.2em .8em 0 0;} #beadbybead .general_info ul.friends li a{ border:none;} #beadbybead_shop ul.friends{list-style-type:none;}