/*************************************************** CONTENT CSS file for InArt Author: WEB Marketing (www.wem.hr) Media: Screen STRUCTURE: 01/ TYP 02/ SPECIFIC CONTENT ***************************************************/ /* 01/ TYP ==================================================*/ #mainContent { line-height: 1.4em; } /*** BASIC TYP. ***/ #mainContent p,#mainContent ul, #mainContent ol,#mainContent dl, #mainContent table { margin: 15px 0; } /*** HEADINGS ***/ #mainContent h1 { font-size: 1.7em; font-weight: normal; margin: 0 0 25px 0; } #mainContent h2 { font-size: 1.3em; font-weight: normal; margin: 25px 0 15px 0; line-height: 1.1em; } #mainContent h3,#mainContent h4, #mainContent h5,#mainContent h6{ font-size: 1em; font-weight: bold; margin: 25px 0 15px 0; line-height: 1.1em; } /*** LIST ***/ #mainContent ul li { background: transparent url(../images/layout/bullet.gif) no-repeat 0 6px; padding-left: 15px; margin-left: 15px; } #mainContent ol li { list-style: decimal; margin-left: 55px; } #mainContent ol ol li { margin-left: 35px; } /*** TABLES ***/ #mainContent table { margin: 10px 5px; padding: 1px; border-collapse: collapse; } caption { font-size: .9em; margin: 0; padding: 0; font-style: italic; } td, th { padding: 5px; } th { background: #dedede; color: #333; text-align: left; font-weight: bold; border: 1px solid #ddd; } td { background: #777; border: 1px solid #ddd;} #mainContent .blank { margin-left: 0; margin-right: 0; border: none; } #mainContent .blank th, #mainContent .blank td { font-weight: normal; border: none; background: #777; color: #fff; padding: 3px; } /*** LINKS & IMAGES ***/ #mainContent a { color: #fff; text-decoration: underline; } #mainContent a:hover { color: #dedede; text-decoration: none; } #mainContent img { margin: 0 10px 5px 10px; border: 1px solid #3c3c3c; } /* 02/ SPECIFIC CONTENT ==================================================*/ a.pdf { background: transparent url(../images/layout/pdf.gif) no-repeat 0 1px; padding-left: 18px; } a.word { background: transparent url(../images/layout/word.gif) no-repeat 0 1px; padding-left: 18px; } /*** HOME ***/ .catalogRow { width: 705px; height: 100%; overflow: hidden; margin-bottom: 15px; background: #777; } .catalogItem { display: inline; float: left; width: 220px; height: 100%; overflow: hidden; position: relative; margin: 0 15px 0 0; } .catalogRow#topCatalogRow { background: transparent url(../images/layout/top-row-bg.gif) repeat-y 0 0; } .catalogItem .content { padding: 10px; } #mainContent .catalogItem .content h2 { margin: 0; height: 25px; font-size: 11px; } .home #mainContent .catalogItem .content h2 { margin: 0; height: 25px; font-size: 16px; font-weight: bold; } .home #mainContent .catalogItem .content #contacts h2, .home #mainContent .catalogItem .content #newsletterHolder h2 { margin: 0; height: 25px; font-size: 16px; font-weight: bold; } #mainContent .catalogItem h3, #mainContent .catalogItem h4, #mainContent .catalogItem h5, #mainContent .catalogItem h6 { margin: 3px 0; } #mainContent .catalogItem h2 a, #mainContent .catalogItem h3 a, #mainContent .catalogItem h4 a, #mainContent .catalogItem h5 a, #mainContent .catalogItem h6 a { text-decoration: none; } #mainContent .catalogItem h2 a:hover, #mainContent .catalogItem h3 a:hover, #mainContent .catalogItem h4 a:hover, #mainContent .catalogItem h5 a:hover, #mainContent .catalogItem h6 a:hover { color: #eee; text-decoration: underline; } #mainContent .catalogItem img { display: block; margin: 0 0 10px 0; padding: 0; border: 1px solid #565656; } #contacts { padding: 10px; background: #555; margin: 10px 0; } #mainContent .catalogItem #contacts h2 { margin-bottom: 5px; } .christmas { display: block; position: absolute; top: 0; right: 0; } #mainContent .catalogItem .christmas img { margin: 0; padding: 0; border: none; } /*** NEWSLETTER ***/ .catalogItem .content#newsletter { padding-left: 0; } #newsletterHolder { margin: 10px 0; padding: 10px 5px 10px 10px; background: #888; font-size: 11px; line-height: normal; } #newsletterHolder fieldset { border: none; } #newsletterLink { height: 100%; overflow: hidden; padding: 12px 0; } #newsletterLink a { background: #555; display: block; float: left; padding: 1px 5px; text-decoration: none; } #newsletterLink a:hover { text-decoration: none; } /*** GROUP ***/ .group #mainContent { padding: 0; background: none; width: 705px; margin-bottom: 0; } .group #mainContent h2 { font-size: 1em; font-weight: normal; text-transform: uppercase; } .group .catalogItem { background: #777; margin-bottom: 15px; } /*** GALLERY ***/ #gallery { height: 100%; overflow: hidden; margin-bottom: 25px; } #mainContent #gallery img { border: none; } #largeImage { height: 100%; overflow: hidden; text-align: center; } #mainContent #largeImage img { margin: 0; padding: 0; } #thumbsHolder { width: 630px; height: 145px; position: relative; overflow: hidden; background: #555; } #thumbsHolder div { float:left; display:block; } #thumbsHolder .thumbs { float: none; width: 550px; height: 130px; overflow: hidden; position: absolute; margin-left: 42px; } #mainContent #thumbsHolder .items { height: 100px; margin: 30px 0 0 0; width: 20000em; position: absolute; } #mainContent .items img { margin: 0 15px 0 0; } .prev, .next { display: block; position: absolute; width: 17px; height: 17px; top: 71px; cursor: pointer; } .prev { background: transparent url(../images/layout/gallery-prev.gif) no-repeat 0 0; left: 14px; } .next { background: transparent url(../images/layout/gallery-next.gif) no-repeat 0 0; right: 14px; } .pagination { position: absolute; top: 6px; right: 40px; font-size: 11px; } #mainContent .pagination a { color: #fff; text-decoration: none; margin-left: 2px; } #mainContent .pagination a:hover, #mainContent .pagination .on, #mainContent .pagination .on:hover, #mainContent .pagination .active, #mainContent .pagination .active:hover { color: #999; text-decoration: none; } /*** PAGINATOR ***/ #mainContainer .paginator { margin: 15px 5px; padding: 0; color: #000; font-size: 12px; line-height: 22px; clear: both; height: 100%; overflow: hidden; } #mainContainer .paginator ul { height: 100%; overflow: hidden; margin: 0; padding: 0; } #mainContainer .paginator ul li { float: left; padding: 0; background: none; margin: 0 8px 0 0; } #mainContainer .paginator ul a { display: block; width: 22px; height: 22px; line-height: 22px; margin: 0; border: none; overflow: hidden; color: #fff; text-decoration: none; text-align: center; background: #777; } #mainContainer .paginator ul a:hover, #mainContainer .paginator ul .on { background: #fff; color: #666; } #mainContainer .paginator ul .firstPage, #mainContainer .paginator ul .lastPage, #mainContainer .paginator ul .prevPage, #mainContainer .paginator ul .nextPage { text-indent: -9999px; border: none; margin: 0; } #mainContainer .paginator ul .firstPage a, #mainContainer .paginator ul .lastPage a, #mainContainer .paginator ul .prevPage a, #mainContainer .paginator ul .nextPage a { text-indent: -9999px; border: none; } #mainContainer .paginator ul .firstPage a, #mainContainer .paginator ul .firstPage a:hover { background: transparent url(../images/layout/first.gif) no-repeat center center; } #mainContainer .paginator ul .firstPage a.off, #mainContainer .paginator ul .firstPage a.off:hover { background: transparent url(../images/layout/first-off.gif) no-repeat center center; } #mainContainer .paginator ul .prevPage a, #mainContainer .paginator ul .prevPage a:hover { background: transparent url(../images/layout/prev.gif) no-repeat center center; margin-right: 5px; } #mainContainer .paginator ul .prevPage a.off, #mainContainer .paginator ul .prevPage a.off:hover { background: transparent url(../images/layout/prev-off.gif) no-repeat center center; margin-right: 5px; } #mainContainer .paginator ul .nextPage a, #mainContainer .paginator ul .nextPage a:hover { background: transparent url(../images/layout/next.gif) no-repeat center center; margin-left: 5px; } #mainContainer .paginator ul .nextPage a.off, #mainContainer .paginator ul .nextPage a.off:hover { background: transparent url(../images/layout/next-off.gif) no-repeat center center; margin-left: 5px; } #mainContainer .paginator ul .lastPage a, #mainContainer .paginator ul .lastPage a:hover { background: transparent url(../images/layout/last.gif) no-repeat center center; } #mainContainer .paginator ul .lastPage a.off, #mainContainer .paginator ul .lastPage a.off:hover { background: transparent url(../images/layout/last-off.gif) no-repeat center center; } /*** PRODUCT LISTING ***/ #mainContainer .productListing { position: relative; bottom: -15px; } #mainContainer .productListing ul { margin: 0; padding: 0; font-size: 11px; line-height: 16px; } #mainContainer .productListing ul li { float: left; padding: 0; margin: 0 2px 0 0; background: #434343; background-image: none !important; } #mainContainer .productListing a { text-decoration: none; display: block; padding: 2px 10px; } #mainContainer .productListing a:hover { color: #dedede; } #mainContainer .productListing .product-prev a { background: transparent url(../images/layout/prev-product.gif) no-repeat left center; padding-left: 30px; } #mainContainer .productListing .product-list a { background: transparent url(../images/layout/list-product.gif) no-repeat right center; padding-right: 30px; } #mainContainer .productListing .product-next a { background: transparent url(../images/layout/next-product.gif) no-repeat right center; padding-right: 30px; } /*** FORM Typ. ***/ .basicForm fieldset { border: none; } .basicForm legend { display: none; } .basicForm div.input,.basicForm div.date,.basicForm div.textarea,.basicForm div.select,.basicForm div.radio,.basicForm div.checkbox,.basicForm div.file { overflow: hidden; height: 100%; clear: both; padding: 10px 0 10px 0; } .basicForm div.input input,.basicForm div.date input,.basicForm textarea,.basicForm select,.captchaInput input { font: normal 12px Arial, Helvetica, sans-serif; background: #fff; border: 1px solid #555; padding: 3px; margin-right: 5px; color: #000; } .basicForm div.input input:focus,.basicForm div.date input:focus,.basicForm textarea:focus,.basicForm div.captchaInput input:focus { background: #ccc; border-color: #555; } .basicForm div.input label,.basicForm div.date label,.basicForm div.textarea label,.basicForm div.select label,.basicForm div.file label { display: block; float: left; width: 120px; padding-top: 2px; margin-right: 10px; text-align: right; vertical-align: middle; color: #fff; } .basicForm div.date img { position: relative; top: 2px; } .basicForm div.input input.readonly { background: #f5f5f5; border: 1px solid #ccc; color: #ccc; } .basicForm div.input input { width: 230px; } .basicForm div.input select { width: 240px; } .basicForm div.input input.small { width: 20px; } .basicForm div.input select.small { width: 55px; } .basicForm div.captchaInput input { width: 100px; } .basicForm div.textarea label,.basicForm textarea { vertical-align: top; } .basicForm .textarea textarea { width: 230px; height: 100px; overflow: hidden; } .basicForm .select select option { padding-right: 10px; padding-left: 2px; margin-bottom: 2px; } .basicForm .captchaWrapper { overflow: hidden; height: 100%; margin: 10px 0 0 130px; } .basicForm .captchaImageWrapper img { display: block; margin: 0 0 5px 0; padding: 0 0 0 0; border: none; } .basicForm .submit { padding: 10px 0 10px 130px; } .basicForm .submit input { background: #555; width: 80px; height: 23px; border: none; font: normal 11px Arial, Helvetica, sans-serif; text-transform: uppercase; color: #fff; line-height: normal; } .errorMessage { color: #cc0000; font-size: 10px; background: #fff; padding: 2px; } .captchaInput { margin-top: 10px; margin-bottom: 20px; } .captchaInput label { display: block; margin-bottom: 3px; } .captchaInput input { display: block; } .notice { margin: 0 0 20px 130px; } .checkboxWrapper { height: 100%; overflow: hidden; padding: 10px 0; } .checkboxTitle { display: inline; float: left; width: 120px; margin-right: 10px; text-align: right; } .checkboxWrapper input { vertical-align: middle; margin-right: 5px; } .basicForm .checkboxButtons label { margin: 0 10px 0 0; } .checkboxButtons { display: inline; float: left; line-height: 1.6em; } .checkboxButtons input { vertical-align: middle; } .formNote { margin-left: 130px; } #mainContent .basicForm img { margin: 0; padding: 0; border: none; }