/* Import */ @import "basic.css"; @font-face { font-family: 'Calibri'; font-style: normal; font-weight: 400; src: local('Calibri'), local('Calibri'), url('../font/calibri.woff') format('woff'); } @font-face { font-family: 'Calibri'; font-style: italic; font-weight: 400; src: local('Calibri'), local('Calibri'), url('../font/calibrii.woff') format('woff'); } @font-face { font-family: 'Calibri'; font-style: normal; font-weight: 700; src: local('Calibri'), local('Calibri'), url('../font/calibrib.woff') format('woff'); } /* ============================================= ----------------- CSS START --------------- ============================================= */ body {color: #444; background: #fff url('../image/www/bg.png') 0 0 repeat-x; line-height: 1.3em; font-size: 14px; padding: 0 0 30px; font-family: 'Calibri', Arial, Verdana, sans-serif;} .wrap {width: 1000px;} .hr {background: transparent url('../image/www/hr.png') 0 50% repeat-x; padding: 12px 0; height: 2px;} /* ICOS */ span.icos, a.icoLogout {display: block; width: 40px; height: 40px; background: transparent url('../image/www/icos.png') 99px 99px no-repeat; position: absolute;} span.icoEmail {width: 28px; height: 20px; background-position: -40px 0;} span.icoPhone {width: 28px; height: 20px; background-position: 0 1px;} /* FORM */ form .select {display: block;} /* input */ input.inp, textarea.tArea {width: 234px; border: 1px solid #c2c2c2; background: #fff; height: 34px; line-height: 34px; font-size: 12px; color: #444; padding: 0 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; font-family: 'Calibri', Arial, Verdana, sans-serif;} input.inpBig {width: 416px;} input.inpMiddle {width: 230px;} /* textarea */ textarea.tArea {width: 560px; height: 60px; line-height: 16px; padding: 8px 9px;} /* label */ label.lbl {display: block; color: #474747; padding: 2px 2px 0;} /* BUTTON */ a.button {background: transparent url('../image/www/button-bg-shadow.png') 100% 100% no-repeat; padding: 0 0 6px; text-decoration: none !important; display: block; color: #737373 !important;} a.button > span {background: #e2e2e2 url('../image/www/button-bg.png') 0 0 repeat-x; display: block; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 1px solid #c6d1d5; text-align: center; line-height: 1.4em; padding: 6px 0 4px; text-decoration: none; text-transform: uppercase; font-size: 18px; cursor: pointer;} a.button:hover > span {background-position: 0 100%; text-decoration: underline;} input.button {background: #e1ef91 url('../image/www/button-bg-green.png') 0 0 repeat-x; display: block; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 1px solid #b6c995; text-align: center; padding: 0 24px; text-decoration: none; text-transform: uppercase; font-size: 20px; font-weight: 700; cursor: pointer; height: 40px; line-height: 40px; color: #fff; text-shadow: 1px 1px 2px #627b12; font-family: 'Calibri', Arial, Verdana, sans-serif;} input.button:hover {background-position: 0 -40px;} /* ============================================= -------------- HEADER && TOP -------------- ============================================= */ #topBar {height: 7px; position: absolute; background: #218872; top: 0; left: 0; width: 100%;} #header {background: transparent url('../image/www/header-bg.png') 0 100% repeat-x; margin: 0 0 0 5px; z-index: 2001;} #header #headerRight {float: right;} #header #logo {float: left; padding: 36px 0 0;} #header #logo a {display:block; text-decoration:none;} /* CONTACT */ #header #contact {float: right; font-size: 13px; color: #b0b0b0; padding: 2px 0 0 20px; height: 50px;} #header #contact a {color: #b0b0b0; text-decoration: none;} #header #contact a:hover {text-decoration: underline;} #header #contact ul li {position: relative; line-height: 21px; padding: 8px 0 8px 36px; float: left;} #header #contact ul li:first-child {padding-right: 28px; float: left;} #header #contact ul li span.icos {left: 0; top: 7px;} /* MENU */ #header ul#menu {padding: 38px 0 0; float: right; clear: both;} #header ul#menu li {float: right; font-size: 16px; padding: 0 0 0 6px;} #header ul#menu li a {color: #fff; text-decoration: none; background: #535353; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; padding: 2px 10px; line-height: 24px;} #header ul#menu li a:hover {text-decoration: underline;} /* ============================================= ------------------ MAIN ------------------- ============================================= */ /* ============================================= ----------------- CONTENT ----------------- ============================================= */ #content {padding: 24px 0; line-height: 1.5em;} #content .inner {padding: 6px 18px;} #content p {padding: 6px 0;} #content a {text-decoration: underline; color: #d86101;} #content a:hover {text-decoration: none;} #content h1 {color: #e58800; text-transform: uppercase; font-weight: 700; text-shadow: 1px 1px 0 #fff; font-size: 26px; padding: 12px 0 6px; margin: 0;} #content h2 {color: #909090; border-bottom: 1px solid #ccc; padding: 30px 0 4px; text-transform: uppercase; font-size: 20px;} #content .image {margin: 0 18px;} #content .image.floatRight {margin-right: 0;} #content .image.floatLeft {margin-left: 0;} #content .content p {text-align: justify;} #content .imageBorder {background: transparent url('../image/www/img-big-shadow.png') 50% 100% no-repeat; padding: 10px 0;} #content .imageBorder img {display: block; border: 5px solid #c7c7c7;} /* ====== BREADCRUMBS ====== */ #breadcrumbs ul {padding: 4px 0 10px; text-transform: uppercase; font-size: 14px;} #breadcrumbs ul li {float: left; padding: 0 2px 0 2px;} /* ====== TABS ====== */ #tabs {padding: 12px 0 0; text-transform: uppercase; font-size: 15px;} #tabs > ul { position: relative; z-index: 200;} #tabs > ul li {background: #eca200 url('../image/www/tabs-bg.png') 0 100% repeat-x; border: 1px solid #dadada; border-bottom: none; margin: 0 4px 0 0; float: left; text-align: center;} #tabs > ul li a {display: block; border: 1px solid #f6d27f; padding: 4px 12px; text-decoration: none; color: #fff;} #tabs > ul li a:hover {text-decoration: underline;} #tabs > ul li.cur {background: #fff;} #tabs > ul li.cur a {border-color: #fff; color: #d86101;} /* ====== SORT ====== */ #sort {background: #e8e8e8 url('../image/www/sort-bg.png') 0 100% repeat-x; border: 1px solid #dadada; position: relative; margin-top: -1px;} #sort > div {background: transparent url('../image/www/sort-bg-home.png') 0 100% no-repeat; display: none;} #sort > div.cur {display: block;} #sort form {padding: 14px 24px 20px;} #sort form div.floatLeft {padding: 0 0 0 107px;} #sort form div.floatLeft:first-child {padding-left: 0;} #sort form p.floatRight {padding: 10px 0 6px; background: transparent url('../image/www/button-bg-shadow.png') 100% 100% no-repeat;} #sort input.button {width: 240px;} /* ====== ITEMS ====== */ #content .items {color: #595959; padding: 10px 0 6px; border-bottom: 1px solid #ccc;} #content .items > div {width: 218px; padding: 16px 0 16px 42px; float: left;} #content .items > div.left {padding-left: 0;} #content .items > div .img {padding: 4px 0 9px; background: transparent url('../image/www/img-shadow.png') 50% 100% no-repeat; position: relative;} #content .items > div .img strong {position: absolute; bottom: 20px; width: 100%; text-align: center; color: #000; font-size: 18px; background-color: rgba(255,255,255,0.8); padding: 5px 0 4px; display: block;} #content .items > div .img img {display: block; background: #ebebeb url('../image/www/img-border.png') 0 0 repeat-x; padding: 5px;} #content .items > div h3 {font-size: 16px; line-height: 1.3em; padding: 0 4px; margin: 0;} /* ====== BOXES ====== */ #content .boxes {color: #595959; padding: 24px 0;} #content .boxes > div {width: 300px; padding: 18px 49px 8px 0; float: left;} #content .boxes h2 {border: 1px solid #fff !important; background: #e48700 url('../image/www/title-bg.png') 0 0 repeat-x; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; text-align: center; font-size: 20px; text-transform: uppercase; text-shadow: 2px 2px 1px #c46400; color: #fff; line-height: 40px; padding: 2px 0 0; margin: 0; position: relative; font-weight: 400; letter-spacing: 1px;} #content .boxes h2 span {position: absolute; bottom: -12px; left: 0; width: 100%; height: 12px; background: transparent url('../image/www/title-bg-arrow.png') 50% 0 no-repeat; display: block;} #content .boxes > div > strong {text-transform: uppercase; color: #212121; text-align: center; display: block; font-weight: normal; padding: 18px 0; font-size: 18px;} #content .boxes .buttonWrap {padding: 24px 0 0;} #content .boxes > .floatRight {padding-right: 0; background: none;} #content .boxes > .floatRight ul {text-align: center; text-transform: uppercase; font-size: 20px; color: #474747; padding: 22px 0 10px;} #content .boxes > .floatRight ul li {background: transparent url('../image/www/bullet.png') center top no-repeat; padding: 22px 0 18px;} #content .boxes > .floatRight strong {padding-bottom: 10px;} #content .boxes > .floatStav .buttonWrap {padding-top: 0;} #content .boxes > .floatStav strong {padding-bottom: 10px;} #content .boxes > .floatStav img {display: block;} #content .boxes > #box-02 img {display: block;} #content .boxes > #box-02 .buttonWrap {padding-top: 30px;} /* ====== ITEMS ====== */ #content .boxes .items {border: none; padding: 1px 0;} #content .boxes .items > div {width: 137px; padding: 16px 0 16px; float: right; border: none;} #content .boxes .items > div .img {padding: 4px 0 8px; background: transparent url('../image/www/img-bg.png') 50% 100% no-repeat;} #content .boxes .items > div .img img {border: 3px solid #fff; display: block; background: none; padding: 0;} #content .boxes .items > div h3 {font-size: 13px; line-height: 1.4em; padding: 0; margin: 0;} /* ====== PAGENAVI ====== */ #pagenavi {padding: 12px 0 12px;} #pagenavi ul {float: left;} #pagenavi ul li {float: left; padding: 0 2px;} #pagenavi ul li a {display: block; background: #e7e7e7 url('../image/www/pagenavi-bg.png') 0 0 repeat-x; border: 1px solid #d4d4d4; min-width: 26px; height: 26px; line-height: 26px; text-align: center; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color: #737373; text-decoration: none; font-size: 16px;} #pagenavi ul li.cur a, #pagenavi ul li a:hover {background: #f8dd99 url('../image/www/pagenavi-cur-bg.png') 0 0 repeat-x; border-color: #f1c080; color: #fff; text-shadow: 0 0 1px #7d4c03;} /* ====== DETAIL ====== */ #content .rightDetail {float: right; width: 480px; color: #202020;} #content .leftDetail {float: left; width: 480px;} /* ====== TABLE ====== */ #content table.table {width: 100%; border-collapse: collapse; vertical-align: middle; margin: 20px 0;} #content table.table td, table.table th {padding: 3px 8px; border-bottom: 1px solid #cbcbcb; border-top: 1px solid #f2f2f2;} #content table.table th {background: #f5f5f5; color: #6a6a6a; font-weight: 400; text-align: left;} #content table.table tr.first th, table.table tr.first td {color: #fff; background: #e58800; border: none !important; padding: 6px 8px 3px !important;} #content table.table tr.first th {text-transform: uppercase; font-size: 15px;} #content table.table tr.first td span {font-size: 20px; font-weight: 700;} /* ====== THUMB ====== */ #content ul.thumb {padding: 6px 0 10px} #content ul.thumb li {float: left; padding: 3px 0 3px 7px;} #content ul.thumb li.left {padding-left: 0;} #content ul.thumb li img {display: block;} #content #thumb {background: transparent url('../image/www/img-big-shadow.png') 50% 100% no-repeat; padding: 10px 0;} #content #thumb img {display: block; border: 5px solid #c7c7c7;} #content #thumb a {display: block;} /* ============================================= ----------------- FOOTER ----------------- ============================================= */ #footer {padding: 0; font-size: 12px; color: #888; background: #fafafa url('../image/www/footer-bg-top.png') 0 0 repeat-x;} #footer .footer {text-align: center; padding: 10px 0; border-top: 1px solid #dadada; margin-top: 1px; background: #fff;} #bottom {background: transparent url('../image/www/footer-bg-bottom.png') 0 100% repeat-x; color: #474747;} #bottom .wrap {background: transparent url('../image/www/envelope.png') 100% 0 no-repeat; padding-top: 10px;} #bottom .wrap > .floatRight > p {padding: 0 0 12px; font-size: 16px; line-height: 1.4em;} #bottom .wrap > .floatLeft {width: 580px;} #bottom form {padding: 0 0 14px 0;} #bottom form p {padding: 6px 0;} #bottom input.inp {width: 200px;} #bottom h4 {text-transform: uppercase; font-size: 22px; color: #000; padding: 12px 0 10px} #bottom {background: transparent url('../image/www/footer-bg-bottom.png') 0 100% repeat-x; color: #474747;} #bottom .wrap > .floatRight > p {padding: 0 0 12px; font-size: 16px; line-height: 1.4em;} #bottom .wrap > .floatLeft {width: 580px;} #bottom form {padding: 0 0 14px 0;} #bottom form p {padding: 6px 0;} #bottom form > p.floatRight {background: transparent url('../image/www/button-bg-shadow.png') 100% 100% no-repeat;} #bottom .wrap > .floatRight {width: 320px;} #bottom input.inp {width: 200px;} #bottom .wrap > .floatRight input.inp {width: 302px;} #bottom .wrap > .floatRight input.button {width: 320px;} #bottom h4 {text-transform: uppercase; font-size: 22px; color: #000; padding: 12px 0 10px} /* ============================================= --------------- SELECTBOXES --------------- ============================================= */ .sbHolder {position: relative; display: block; margin: 0; z-index: 10; background: #fff url('../image/www/select-bg.png') 100% 0 no-repeat; z-index: 2; width: 240px; border: 1px solid #c2c2c2; height: 34px; line-height: 34px; font-size: 12px; color: #444; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .sbSelector {display: block; height: 34px; left: 0; line-height: 34px; padding: 0; outline: none; overflow: hidden; position: absolute; text-indent: 8px; top: 0; width: 240px; background: transparent url('../image/www/select-holder.png') 100% 0 no-repeat;} .sbSelector:link, .sbSelector:visited, .sbSelector:hover {color: #888 !important; outline: none; text-decoration: none !important;} .sbToggle {display: none;} .sbOptions {background: #f5f5f5; list-style: none; z-index: 100; margin: 0; padding: 0; position: absolute; top: 21px; left: 10px; width: 220px; overflow-y: auto; border: solid 1px #ccc;} .sbOptions li {padding: 0; line-height: 1.3;} .sbOptions a {border-bottom: solid 1px #ddd; display: block; outline: none; padding: 6px 6px;} .sbOptions li:last-child a {border-bottom: none;} .sbOptions a:link, .sbOptions a:visited {color: #595959 !important; text-decoration: none !important;} .sbOptions a:hover {color: #333 !important; background: #fbfbfb;} .sbHolderMini {width: 48px} .sbHolderMini .sbSelector {width: 48px; height: 21px; line-height: 21px;} .sbHolderMini .sbOptions {width: 48px;} .sbHolderMiddle {width: 154px} .sbHolderMiddle .sbSelector {width: 154px; height: 21px; line-height: 21px;} .sbHolderMiddle .sbOptions {width: 154px;} /* ====== BOTTOM BOXES 2 ====== */ #content .bottom {border-top: 1px solid #e8e8e8;} #content .bottom h2 {border: none; text-transform: uppercase; font-size: 20px; color: #000000; font-weight: 700; padding: 22px 0 8px;} #content .bottom .boxes2 {padding: 14px 0 6px;} #content .bottom .boxes2 > div {background: #f3f3f3 url('../image/www/boxes2-bg.png') 0 0 repeat-x; border: 1px solid #dcdcdc; float: left; width: 456px; padding: 12px 14px 6px;} #content .bottom .boxes2 > div h3 {font-weight: 700; color: #e58800; text-transform: uppercase; font-size: 18px;}