/* * ------------------------------------------------------------------------ * LeoBeauty template for joomla 1.7 * ------------------------------------------------------------------------ * Copyright leotheme.com. All Rights Reserved. * @license GNU / GPL2 http://www.gnu.org/licenses/gpl-2.0.html * Author: leotheme.com * Websites: http://www.leotheme.com * ------------------------------------------------------------------------ *//* COMMON STYLE --------------------------------------------------------- */ /* PREFORMATTED TEXT -------------------------------------------------------------*/ /* Pre, Code ---*/ pre, .code { background-color: #ffffdd !important; border: 1px solid #ccc !important; border-left-width: 5px !important; font: 1em/1.5 Monaco, Consolas, "Courier News", monospace !important; padding: 10px 15px !important; } /* Inline Words Hilite ---*/ .highlight { background: #ffffdd; font-weight: bold; padding: 1px 5px; } /* Dropcap ---*/ .dropcap { display: block; float: left; font: 60px/40px Georgia, Times, serif; padding: 7px 8px 0 0; } /* Blockquote ---*/ blockquote { font-family: Georgia, Times, serif; font-size: 100%; } blockquote span.open { background: url(../images/so-q.gif) no-repeat left top; display: inline-block; padding: 0 0 0 20px; } blockquote span.close { background: url(../images/sc-q.gif) no-repeat bottom right; display: inline-block; padding: 0 20px 0 0; } /* sub & sup tags ---*/ sub, sup { color: #CC0000; font-size: 11px; font-weight: bold; } /* LIST STYLES -----------------------------------------------------------------*/ /* Special list style ---*/ ul.ja-typo-list li { background: none; margin-left: 8px; padding: 0 0 0 25px; position: relative; overflow: hidden; } ul.ja-typo-list span.icon { background-image: url(../images/icons-sprites-silk.png); /*background-image: url(../../images/icons/icons-sprites-tango.png);*/ background-repeat: no-repeat; width: 18px; height: 18px; display: block; position: absolute; top: 0; left: 0; } ul.list-arrow span.icon { background-position: left top; } ul.list-star span.icon { background-position: left -18px; } ul.list-check span.icon { background-position: left -36px; } ul.ja-unordered-list li { background: url(../images/bullet.gif) no-repeat 20px 7px; line-height: 160%; margin-bottom: 5px; overflow: hidden; padding-left: 30px; } ol.ja-ordered-list li { line-height: 180%; margin-left: 30px; } dl.ja-definition-list dt { font-weight: bold; line-height: 160%; } dl.ja-definition-list dd { margin-left: 15px; line-height: 160%; } /* Big Number ---*/ .blocknumber { position: relative; padding: 5px 0 5px 55px !important; min-height: 44px; } .blocknumber .bignumber { background-image: url(../images/blocknumber-bg.png); background-repeat: no-repeat; color: #FFFFFF; display: block; width: 44px; height: 44px; line-height: 44px !important; position: absolute; top: 0; left: 0; font: bold 20px/normal Arial, sans-serif; text-align: center; } .blocknumber-1 .bignumber { background-position: left top;} .blocknumber-2 .bignumber { background-position: left -44px;} .blocknumber-3 .bignumber { background-position: left -88px;} /* ICON STYLE -----------------------------------------------------------------*/ /* Tips, Error, Message, Hightlight ---*/ p.ja-typo-icon { padding-left: 25px; position: relative; } p.ja-typo-icon span.icon { background-image: url(../images/icons-sprites-silk.png); /*background-image: url(../../images/icons/icons-sprites-tango.png);*/ background-repeat: no-repeat; width: 18px; height: 18px; display: block; position: absolute; top: 2px; left: 0; } p.icon-error span.icon { background-position: left -54px; } p.icon-message span.icon { background-position: left -72px; } p.icon-tips span.icon { background-position: left -90px; } p.icon-key span.icon { background-position: left -108px; } p.icon-tag span.icon { background-position: left -126px;; } p.icon-cart span.icon { background-position: right -54px; } p.icon-doc span.icon { background-position: right -72px; } p.icon-note span.icon { background-position: right -90px; } p.icon-photo span.icon { background-position: right -108px; } p.icon-mobi span.icon { background-position: right -126px; } p.icon-error { color: #CC0000; } p.icon-message { color: #2C79B3; } p.icon-tips { color: #E58C00; } /* BUBBLES -----------------------------------------------------------------*/ /* Common Style + Style 1 */ .ja-typo-bubble { margin: 20px 0; position: relative; } .ja-typo-bubblect { padding: 15px; border: 3px solid #ddd; box-shadow: 0 0 3px rgba(0,0,0,.5); -moz-box-shadow: 0 0 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5); } .ja-typo-bubble p.ja-typo-bubble-meta { margin: -3px 0 0; height: 25px; padding-left: 65px; } .ja-typo-bubble span.ja-typo-bubble-author { font-weight: bold; display: block; padding-top: 5px; } .ja-typo-bubble span.ja-typo-bubble-arrow { display: block; position: absolute; bottom: 0; left: 28px; width: 25px; height: 25px; background: url(../images/bubble-arrow.png) 0 0; } /* Style 2 --- */ .bubble-2 .ja-typo-bubblect { border: 0; background: #ddd; } .bubble-2 span.ja-typo-bubble-arrow { background-position: -25px 0; } /* Style 3 --- */ .bubble-3 .ja-typo-bubblect { border: 3px solid #08c; } .bubble-3 span.ja-typo-bubble-arrow { background-position: 0 -25px; } /* Style 4 --- */ .bubble-4 .ja-typo-bubblect { border: 0; background: #08c; color: #fff; } .bubble-4 span.ja-typo-bubble-arrow { background-position: -25px -25px; } /* Style 5 --- */ .bubble-5 .ja-typo-bubblect { border: 3px solid #333; } .bubble-5 span.ja-typo-bubble-arrow { background-position: -50px -50px; } /* Style 6 --- */ .bubble-6 .ja-typo-bubblect { border: none; background: #333; color: #fff; } .bubble-6 span.ja-typo-bubble-arrow { background-position: -25px -50px; } /* Common Style for Rounded Bubbles --- */ .bubble-rounded .ja-typo-bubblect { border-radius: 18px; -moz-border-radius: 18px; -webkit-border-radius: 18px; } /* MESSAGE BOXES AND LEGENDS STYLE -----------------------------------------------------------------*/ /* Box style ---*/ p.ja-typo-box { border: 3px solid #ddd; padding: 10px 10px 10px 50px; } /* Box with icons */ p.box-download, p.box-sticky { background-repeat: no-repeat; background-position: 10px 15px; } p.box-download { background-image: url(../images/icons/download-big.png); } p.box-sticky { background-image: url(../images/icons/sticky-big.png); } /* Box without icons - Style 1*/ p.box-grey-1, p.box-hilite-1 { padding: 10px 15px; } p.box-grey-1 { background: #f7f7f7; border-color: #dddddd; } p.box-hilite-1 { background: #ffffdd; border-color: #d2d2b6; } /* Box without icons - Style 2*/ p.box-grey-2, p.box-hilite-2 { padding: 10px 15px; } p.box-grey-2 { background: #f7f7f7; border-color: #dddddd; border-style: dotted; } p.box-hilite-2 { background: #ffffdd; border-color: #d2d2b6; border-style: dotted; } /* Rounded Box*/ .box-rounded { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 3px rgba(0,0,0,.5); -moz-box-shadow: 0 0 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5); } /* Legend ---*/ .ja-typo-legend { border: 3px solid #ddd; margin: 20px 0; padding: 20px 15px 15px; position: relative; } .ja-typo-legend .legend-title { background: #fff; display: block; float: left; font-family: Arial, sans-serif; font-size: 125%; font-weight: bold; left: 10px; line-height: normal; margin: 0 !important; padding: 5px !important; position: absolute; top: -17px; } /* Legend Style 2 */ .legend-2 { border: 3px solid #08c; } .legend-2 .legend-title { color: #08c; } /* Rounded Box*/ .legend-rounded { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 3px rgba(0,0,0,.5); -moz-box-shadow: 0 0 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5); } /* BUTTONS --------------------------------------------------*/ /* Common Buttons Style ---*/ a.ja-typo-btn { display: block; text-decoration: none; white-space: nowrap; border: 1px solid #ccc; color: #333; text-shadow: 0 1px 2px rgba(255,255,255,.8); background: url(../images/grad-l1-trans.png) repeat-x top #ddd; box-shadow: 0 0 3px rgba(0,0,0,.5); -moz-box-shadow: 0 0 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5); } a.ja-typo-btn:hover, a.ja-typo-btn:active, a.ja-typo-btn:focus { border: 1px solid #aaa; background-position: bottom; color: #333; } /*Use for Demo Page Only*/ #ja-typo a.ja-typo-btn { margin: 20px 30px 10px 0; float: left; } #ja-typo a.ja-typo-btn:hover, #ja-typo a.ja-typo-btn:focus, #ja-typo a.ja-typo-btn:active { text-decoration: none; } /* Icon Buttons ---*/ a.ja-typo-btn-icn { height: 30px; color: #333; } a.ja-typo-btn-icn span { padding: 0 15px 0 34px; display: block; background-repeat: no-repeat; background-position: 10px 7px; border: 1px solid #fff; } a.btn-icn-save span { background-image: url(../images/icons/disk.png); } a.btn-icn-tip span { background-image: url(../images/icons/lightbulb.png); } a.btn-icn-info span { background-image: url(../images/icons/information.png); } a.btn-icn-ok span { background-image: url(../images/icons/tick.png); } a.btn-icn-warning span { background-image: url(../images/icons/exclamation.png); } a.ja-typo-btn-icn span span { height: auto; line-height: 28px; padding: 0; display: inline; background: none; border: none; } /* Big Buttons ----*/ a.ja-typo-btn-big { text-align: center; border: 1px solid #ccc; font-size: 125%; line-height: normal; font-weight: bold; } a.ja-typo-btn-big span { padding: 8px 15px; border: 1px solid #fff; display: block; } /* Small Buttons --- */ a.ja-typo-btn-sm { text-align: center; border: 1px solid #ccc; font-size: 100%; line-height: normal; } a.ja-typo-btn-sm span { padding: 5px 10px; border: 1px solid #fff; display: block; } /* Common style for Dark Buttons --- */ a.btn-blue, a.btn-red, a.btn-green, a.btn-orange, a.btn-black { background-image: url(../images/grad-d1-trans.png); color: #fff; border: 1px solid #ccc; text-shadow: 0 1px 2px rgba(0,0,0,.8); } a.btn-blue:hover, a.btn-blue:active, a.btn-blue:focus, a.btn-red:hover, a.btn-red:active, a.btn-red:focus, a.btn-green:hover, a.btn-green:active, a.btn-green:focus, a.btn-orange:hover, a.btn-orange:active, a.btn-orange:focus, a.btn-black:hover, a.btn-black:active, a.btn-black:focus { background-image: url(../images/grad-d1-trans.png); background-position: bottom; border-color: #aaa; } /* Button Blue*/ a.btn-blue { background-color: #08c; border-color: #08c; } a.btn-blue:hover, a.btn-blue:active, a.btn-blue:focus { border-color: #006ea6; color: #fff; } a.btn-blue span { border-color: #6ab9e1; } /* Button Black*/ a.btn-black { background-color: #666; border-color: #666; } a.btn-black:hover, a.btn-black:active, a.btn-black:focus { border-color: #333; color: #fff; } a.btn-black span { border-color: #999; } /* Button green*/ a.btn-green { background-color: #669900; border-color: #669900; } a.btn-green:hover, a.btn-green:active, a.btn-green:focus { border-color: #4d7300; color: #fff; } a.btn-green span { border-color: #b1cb7d; } /* Button red*/ a.btn-red { background-color: #cc0000; border-color: #cc0000; } a.btn-red:hover, a.btn-red:active, a.btn-red:focus { border-color: #9a0000; color: #fff; } a.btn-red span { border-color: #e47878; } /* Button orange*/ a.btn-orange { background-color: #e58c00; border-color: #e58c00; } a.btn-orange:hover, a.btn-orange:active, a.btn-orange:focus { border-color: #a96700; color: #fff; } a.btn-orange span { border-color: #f1c073; } /* Common style for Rounded Buttons --- */ .btn-rounded-icn, .btn-rounded-big, .btn-rounded-sm, .btn-rounded-icn span, .btn-rounded-big span, .btn-rounded-sm span { border-radius: 18px; -moz-border-radius: 18px; -webkit-border-radius: 18px; } .btn-rounded-sm, .btn-rounded-sm span { border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } /* TAGS --------------------------------------------------*/ span.ja-typo-tag { padding: 3px 12px; margin: 0 2px; display: inline-block; line-height: normal; white-space: nowrap; background: #666; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); } span.tag-blue { background: #08c; } span.tag-green { background: #669900; } span.tag-orange { background: #e58c00; } span.tag-red { background: #cc0000; } span.tag-grey { background: #ccc; color: #333; text-shadow: 0 -1px 0 rgba(255,255,255,.8); } /* Common style for Rounded Tags --- */ span.tag-rounded { border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } /* SPECIAL MODULE STYLE --------------------------------------------------*/ /* Badge ---*/ .badge { background-image: url(../images/badge.png); background-repeat: no-repeat; height: 46px; position: absolute; right: 0; width: 45px; } .badge-hot .badge { background-position: 0 0; } .badge-new .badge { background-position: 0 -46px; } .badge-pick .badge { background-position: 0 -92px; } .badge-top .badge { background-position: 0 -138px; } /*Use for Demo Page Only*/ #ja-typo .moduletable_badge { margin: 0; padding: 0; min-height: 40px; } #ja-typo .moduletable_badge .ja-box-ct { border: 3px solid #ddd; padding: 20px; background: #f7f7f7; } /* FORM --------------------------------------------------*/ /* Fieldset ----*/ /* Common Style + Style 1 */ fieldset.ja-typo-fieldset { border: 3px solid #ddd; padding: 10px 12px; } fieldset.ja-typo-fieldset legend { padding: 0 10px; } /* Style 2 */ fieldset.fieldset-2 { border: 3px solid #08c; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } fieldset.fieldset-2 legend { color: #08c; } /*Use for Demo Page Only*/ #ja-typo fieldset { margin-top: 20px; } /* TYPO PAGE LAYOUT -------------------------------------------------------------*/ .ja-typo-blockswrap { margin: 15px 0; } .ja-typo-blockrow { border-bottom: 1px dotted #ddd; padding: 0 0 20px; } .ja-typo-block { float: left; padding-top: 20px; } .ja-typo-blockct { padding: 0 10px; } .ja-typo-blockswrap .cols-1 .ja-typo-block { width: 100%; float: none; } .ja-typo-blockswrap .cols-2 .ja-typo-block { width: 50%; float: left; } .ja-typo-blockswrap .cols-3 .ja-typo-block { width: 33%; float: left; } .ja-typo-blockswrap .cols-4 .ja-typo-block { width: 24.9%; float: left; } .ja-typo-blockswrap .ja-typo-block.last { float: right; } .ja-typo-blockswrap h1.ja-typo-title { font-size: 175%; border-bottom: 8px solid #ddd; padding: 5px; margin: 0; font-family: "Arial Narrow", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: bold; position: relative; color: #666; } .ja-typo-blockswrap:hover h1.ja-typo-title { border-color: #333; color: #333; } .ja-typo-blockswrap h2.ja-typo-title { font-size: 115%; margin: 0; padding: 0 10px; font-family: "Arial Narrow", Helvetica, Arial, sans-serif; text-transform: uppercase; } .ja-typo-blockswrap h2.ja-typo-title span { background: #f2f2f2; color: #666; text-shadow: 0 -1px 1px rgba(255,255,255,.8); padding: 3px 10px; display: inline-block; } .ja-typo-blockswrap:hover h2.ja-typo-title span { background: #ddd; color: #333; } .ja-typo-blockrow > h2.ja-typo-title { margin-bottom: -20px; margin-top: 20px; } /* Blockswrap Actions ---*/ .ja-typo-blocks-actions { font-size: 85%; position: absolute; right: 5px; top: 5px; color: #999; } .ja-typo-blocks-actions a { font-size: 85%; text-transform: none; font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #c00; text-decoration: none; }