0byt3m1n1
Path:
/
home1
/
aserty
/
public_html
/
bonniescraftygifts.com
/
iFzj4
/
configCHM
/
Jump
/
0-aserty
/
testapp
/
wp-content
/
themes
/
mobile_pack_base
/
groups
/
nokia_high
/
styles
/
[
Home
]
File: baseStyles.css
@charset "UTF-8"; /* CSS Document */ /* * DEFAULT STYLES * */ body { font-size: 100%; color: #333333; font-weight: normal; font-family: sans-serif; } /* * PAGE CONTAINERS * See documentation for details regarding use of #wrap and #content */ #header { } #wrap { width: 100%; overflow: hidden; position: absolute; left: 0; padding: 0; } #content { margin-left: 10px; margin-right: 10px; } #footer { background: #434343 url(../images/sprite-footer.png) repeat-x top; padding: .7em 0em; clear: both; height: 3em; } #footer.ft-large { height: 9em; } /* * BASIC ELEMENTS * Basic styling of common elements. */ p { line-height: 125%; margin-top: 0.2em; margin-bottom: 0.8em; clear: both; } #footer p { color: #FFF; font-size: .8em; margin-left: 10px; margin-top: 0em; margin-bottom: 0em; padding: 0em; } strong { font-weight: bolder; } em { font-style: italic; } /* * LINK STATES * */ a:link { color:#003399; } a:visited { color:#006600; } a:hover { color:#FF9900; } a:active { color:#990000; } /* * NATIVE LISTS * */ ul { list-style: disc; margin-left: 10px; margin-top: 1em; margin-bottom: 1em; padding-left: 10px; } ul li { margin-top: 0.3em; margin-bottom: 0.3em; } ol { list-style: decimal; margin-left: 10px; margin-top: 1em; padding-left: 10px; } ol ol { margin-top: 0.3em; margin-bottom: 0.3em; } /* * CLEAR * */ .stack { clear:both; } /* add this class to a header to remove top and bottom margins */ .flush { margin-bottom: 0; margin-top: 0; } /* * HEADERS * */ /*designed to be used at the very top of a page*/ h1.top-aligned { font-size: 1.7em; padding-top: .3em; padding-bottom: .5em; padding-left: 10px; padding-right: 10px; font-weight: bold; background: #F6F6F6 url(../images/img-h1-shadow.png) repeat-x bottom; margin-top: 0em; margin-bottom: .5em; margin-left: -10px; margin-right: -10px; } /*alternate H1*/ h1 { font-size: 1.7em; padding-top: .3em; padding-bottom: .3em; padding-left: 10px; padding-right: 10px; font-weight: bold; background: #FFF url(../images/img-h1-gradient.png) repeat-x bottom; border-top: 1px solid #D8D8D8; margin-top: 0.2em; margin-bottom: 0.3em; margin-left: -10px; margin-right: -10px; } h2 { font-size: 1.5em; margin-top: 0.2em; margin-bottom: 0.3em; clear: both; border-bottom: 1px solid #D8D8D8; } h3 { font-size: 1.3em; color: #000077; margin-top: 0.2em; margin-bottom: 0.3em; clear: both; } h4 { font-size: 1.3em; color: #219B00; margin-top: 0.2em; margin-bottom: 0.3em; clear: both; } h5 { font-size: 1.2em; background-color: #F6F6F6; border-bottom: 1px solid #D8D8D8; border-top: 1px solid #D8D8D8; padding-left: 10px; padding-top: .3em; padding-bottom: .3em; margin-top: 0.2em; margin-bottom: 0.4em; margin-left: -10px; margin-right: -10px; clear: both; } /* enables h5 to stack neatly above other items */ h5.flush { margin-bottom: 0; border-bottom: none; } h6 { font-size: 1.0em; color: #333333; margin-top: 0.2em; margin-bottom: 0.4em; border-bottom: 1px solid #D8D8D8; clear: both; } /* * BLOCKQUOTE * */ blockquote { margin-right: 10px; margin-bottom: 0; margin-top: 0; padding: 1em .5em 1em 2em; background: url(../images/img-quote.png) no-repeat 0em .5em; font-style: italic; } blockquote p { margin: 0; padding: 0; } /* * END DEFAULT STYLES * */ /* * 1. BRANDING AND MARKETING * */ /* * BRANDING AREA * logo, tagline, background and hyperlink */ #header div.branding { height: 68px; background: url(../images/img-branding-background.png) repeat-x top; display: block; width: 100%; overflow: hidden; } #header div.branding img { padding-top: 20px; padding-left: 10px; } #header div.branding a { width: 100%; height: 68px; display: block; background-image: none; padding-right: none; } #header div.branding p { text-indent: -5000px; } /* * ADVERTISMENT CONTAINER * */ .advertisement { padding:0; margin: 0.5em 0 0.5em 0; width: 100%; } .advertisement p { border: 1px solid #D8D8D8; padding: 0.4em 0.4em; background-color: #F6F6F6; margin-bottom: 0; margin-top: 0; } .advertisement span { text-transform: uppercase; padding: 0; float: right; font-size: 0.7em; color: #B0B0B0; padding-bottom: 0.3em; } /* * 2. LISTS * */ /* * LIST WITH ICON * 30 x 30 graphic */ ul.list-graphical { list-style-type: none; padding: 0; margin-top: 0; margin-bottom: .6em; margin-left: -10px; margin-right: -10px; border-bottom: 1px solid #D5D8D8; color: #333333; } ul.list-graphical li { background: #F6F6F6 url(../images/sprite-list.png) repeat-x top; display: block; line-height: 40px; } ul.list-graphical a { display: block; padding-left: 50px; background: transparent url(../images/img-30x30-icon.png) no-repeat 7px top; height: 40px; text-decoration: none; } ul.list-graphical a:hover { background: transparent url(../images/img-30x30-icon.png) no-repeat 7px bottom; color: #FFFFFF; outline: none; } ul.list-graphical li:hover { background: #82CB20 url(../images/sprite-list.png) repeat-x 0px -50px; } /* * ALTERNATE GRAPHIC * 40 x 40 graphic */ /*---add this class if using a 40x40 graphic---*/ ul.list-graphical a.photo { display: block; padding-left: 50px; background: transparent url(../images/img-40x40.png) no-repeat 0px 0px; height: 40px; } /* * ALTERNATE IMPLEMENTATION * uses inline image rather than CSS-specified image */ ul.list-graphical-inline { list-style-type: none; padding: 0; margin-top: 0; margin-bottom: .6em; margin-left: -10px; margin-right: -10px; border-bottom: 1px solid #D5D8D8; color: #333333; } ul.list-graphical-inline li { background: #F6F6F6 url(../images/sprite-list.png) repeat-x top; display: block; line-height: 40px; } ul.list-graphical-inline a { display: block; height: 40px; text-decoration: none; } ul.list-graphical-inline a img { float: left; margin-right: 10px; } ul.list-graphical-inline a:hover { color: #FFFFFF; outline: none; } ul.list-graphical-inline li:hover { background: #82CB20 url(../images/sprite-list.png) repeat-x 0px -50px; } /* * SIMPLE STYLED LIST BOX * */ /*note: line height adjusts height*/ ul.list { list-style-type: none; padding: 0; margin-top: 0; margin-bottom: 0; margin-left: -10px; margin-right: -10px; border-bottom: 1px solid #D5D8D8; color: #333333; } ul.list li { background: #F6F6F6 url(../images/sprite-list.png) repeat-x top; line-height: 40px; display: block; } ul.list a { padding-left: 10px; display: block; height: 40px; background: url(../images/sprite-open.png) no-repeat right top; text-decoration: none; } ul.list li:hover { background: #82CB20 url(../images/sprite-list.png) repeat-x 0px -50px; color: #FFFFFF; } ul.list a:link, ul.list a:visited { color: #333333; } ul.list a:hover { color: #FFFFFF; background: url(../images/sprite-open.png) no-repeat right bottom; outline: none; } ul.list a:active { color: #990000; } /* * ACCORDION DEFINITION LIST * */ dl.list-accordion { margin-left: -10px; margin-right: -10px; border-bottom: 1px solid #D5D8D8; } dl.list-accordion dt{ padding-left: 10px; line-height: 40px; height: 40px; } /*definition container*/ dl.list-accordion dd { padding-left: 15px; padding-right: 10px; padding-top: 0.5em; padding-bottom: 0.4em; line-height: normal; background-color: #FFFFF; } /*definition term*/ dl.list-accordion dt { background: #F6F6F6 url(../images/sprite-list.png) repeat-x top; } dl.list-accordion dt.expanded { border-bottom: 1px solid #D5D8D8; } dl.list-accordion dt.collapsed { border-bottom: none; } /*container for expand/collapse icon*/ dl.list-accordion dt span { width: 14px; height: 14px; margin-top: 12px; margin-right: 0.5em; display: block; float: left; } /*switches icon when expanded*/ dl.list-accordion dt.expanded span{ background: url(../images/sprite-expand-collapse.png) no-repeat left bottom; } /*switches icon when collapsed*/ dl.list-accordion dt.collapsed span{ background: url(../images/sprite-expand-collapse.png) no-repeat left top; } dl.list-accordion dt:hover { background: #82CB20 url(../images/sprite-list.png) repeat-x 0px -50px; color: #FFFFFF; cursor: pointer; } /*content inside of definition container*/ dl.list-accordion dd p { margin: 0; padding: 0 0 0.4em 0; } /* * IMAGE GRID * */ ul.grid { width: 100%; margin: 0 auto; } ul.grid li { display: inline; } ul.grid li img{ border: 1px solid #D8D8D8; padding: .2em .2em; margin-right: .4em; margin-bottom: .4em; } /* * 3. NAVIGATION COMPONENTS * */ /* * BACK TO TOP * */ div.top { font-size: .9em; background: #F6F6F6 url(../images/img-top.png) no-repeat 10px center; border-bottom: 1px solid #D8D8D8; border-top: 1px solid #D8D8D8; padding-left: 2.2em; padding-top: .3em; padding-bottom: .3em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: -10px; margin-right: -10px; clear: both; } div.top a { color: #535353; text-decoration: none; width: 100%; display: block; } /* * HOME * */ div.home { font-size: .9em; background: #F6F6F6 url(../images/img-home.png) no-repeat 10px center; border-top: 1px solid #D8D8D8; padding-left: 1.5em; padding-top: .3em; padding-bottom: .3em; margin-top: 0.5em; margin-bottom: 0em; margin-left: -10px; margin-right: -10px; clear: both; } div.home a { color: #535353; text-decoration: none; width: 100%; display: block; } /* * BREADCRUMBS * */ ul.breadcrumbs { margin-left: -10px; margin-right: -10px; padding-top: .5em; padding-bottom: .5em; padding-left: 10px; padding-right: .5em; font-size: 80%; list-style-type: none; } ul.breadcrumbs li { display: inline; line-height: 1.5em; } /* * FOOTER OR ADMIN NAV * */ ul.nav-footer { display: block; color: #FFF; padding-top: 0em; padding-bottom: .5em; padding-left: 10px; padding-right: .5em; font-size: .85em; height: 2em; } ul.nav-footer li { display: inline; line-height: 1.5em; float: left; } ul.nav-footer li a { padding-right: 0.5em; padding-left: 0.5em; border-right: 1px solid #FFF; text-decoration: none; } ul.nav-footer li.last a { border-right: none; padding-right: 0; } ul.nav-footer li.first a { padding-left: 0; } ul.nav-footer a { color: #FFF; } /* * NAVIGATION BAR (ROUNDED CORNERS) * */ ul.nav-horizontal-rounded { padding:0; margin: 0 0 .6em 0; list-style-type: none; width: 100%; height: 40px; float: left; } /*line height determines vertical text positioning*/ ul.nav-horizontal-rounded li { float: left; display: block; padding: 0; margin-bottom: 0; line-height: 40px; text-align: center; text-decoration: none; background: #FFF url(../images/sprite-nav-rounded.png) no-repeat -20px 0px; } ul.nav-horizontal-rounded li:hover { background: url(../images/sprite-nav-rounded.png) repeat-x -20px -50px; color: #FFF; } /*height centers text vertically*/ ul.nav-horizontal-rounded li a { display: block; background: url(../images/vertical-divider.png) repeat-y left center; height: 40px; padding-right: 0px; text-decoration: none; } ul.nav-horizontal-rounded .first a { background-image: none; } ul.nav-horizontal-rounded li a:hover { color: #FFF; background-image: none; cursor: pointer; outline: none; } /*left rounded corner*/ ul.nav-horizontal-rounded li.first { background: #FFF url(../images/sprite-nav-rounded.png) no-repeat 0px 0px; } ul.nav-horizontal-rounded li.first :hover { background: #92CF1A url(../images/sprite-nav-rounded.png) repeat-x 0px -50px; color: #FFF; } /*right rounded corner*/ ul.nav-horizontal-rounded li.last :hover { background: #92CF1A url(../images/sprite-nav-rounded.png) repeat-x right -50px; color: #FFF; } ul.nav-horizontal-rounded li.last { background: #FFF url(../images/sprite-nav-rounded.png) no-repeat right 0px; } /* * SIMPLE NAVIGATION BAR * */ ul.nav-horizontal-flat { padding: 0; margin: 0 0 0.6em 0; list-style-type: none; width: 100%; height: 40px; float: left; border-top: 1px solid #D8D8D8; border-bottom: 2px solid #D8D8D8; border-left: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; background: #F6F6F6 url(../images/sprite-list.png) repeat-x 0px 0px; } ul.nav-horizontal-flat li { float: left; display: block; padding: 0; margin: 0; line-height: 40px; text-align: center; background: #F6F6F6 url(../images/sprite-list.png) repeat-x 0px 0px; } ul.nav-horizontal-flat li a { text-decoration: none; } ul.nav-horizontal-flat li.last { background-image: none; background-color: transparent; } ul.nav-horizontal-flat li:hover { background: #92CF1A url(../images/sprite-list.png) repeat-x 0px -50px; color: #FFF; } /*divider*/ /*removed on first item and on hover*/ ul.nav-horizontal-flat li a { display: block; background: url(../images/vertical-divider.png) repeat-y left center; height: 40px; padding-right: 0px; cursor: pointer; } ul.nav-horizontal-flat .first a { background-image: none; } ul.nav-horizontal-flat li a:hover { color: #FFF; background-image: none; outline: none; } /*sets number of navigation bar items*/ /*add class to li*/ .four-piece { width: 25%; } .three-piece { width: 33.3%; } .two-piece { width: 50%; } /* * 4. STYLIZED LINKS * includes icon to represent the type of link */ /*external link*/ a.external { background: url(../images/img-link-external.png) no-repeat right top; padding-right: 1em; } /*links to ical data*/ /*see 'data-ical' in resources*/ a.ical { background: url(../images/img-link-ical.png) no-repeat right top; padding-right: 1em; } a[href^="mailto:"] { background: url(../images/img-link-email.png) no-repeat right top; padding-right: 1em; } a[href^="tel:"] { background: url(../images/img-link-tel.png) no-repeat right top; padding-right: 1em; } a[href^="sms:"] { background: url(../images/img-link-sms.png) no-repeat right top; padding-right: 1em; } /* * 5. BUTTONS * */ /* * STYLED BUTTON * */ /*change button width to auto for full-width button or customize width*/ a.button-flat { display: block; line-height: 40px; height: 40px; width: 100px; background: #F6F6F6 url(../images/sprite-button-flat.png) repeat-x 0px 0px; text-align: center; border-bottom: 2px solid #D8D8D8; border-left: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; border-top: 1px solid #D8D8D8; text-decoration: none; color: #333333; padding: 0 .3em; margin-bottom: 0.5em; } a.button-flat:hover { background: #92CF1A url(../images/sprite-button-flat.png) repeat-x 0px -50px; color: #FFF; outline: none; border-bottom: 2px solid #B5B5B5; border-left: 1px solid #B5B5B5; border-right: 1px solid #B5B5B5; border-top: 1px solid #B5B5B5; } /* * STYLED BUTTON (ROUNDED CORNERS) * */ ul.button-rounded { margin: 0; padding: 0; list-style: none; float: left; } ul.button-rounded li { float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; line-height: 40px; background: url(../images/sprite-button-rounded-right.png) no-repeat right top; text-align: center; } ul.button-rounded li:hover { background: url(../images/sprite-button-rounded-right.png) no-repeat right bottom; } ul.button-rounded li a { display: block; padding: 0 1em; height: 40px; background: url(../images/sprite-button-rounded-left.png) no-repeat left top; text-decoration: none; float: left; color: #333333; } ul.button-rounded li a:hover { background: url(../images/sprite-button-rounded-left.png) no-repeat left bottom; color: #FFF; outline: none; } /* * FORM BUTTON (ROUNDED CORNERS) * */ button.button-submit { border:0; cursor:pointer; font-weight:bold; font-size: .95em; color: #333333; padding:0 1.5em 0 0; text-align:center; margin: 0.4em 0; } button.button-submit span { position:relative; display:block; white-space:nowrap; padding:0 0 0 1.5em; } button.button-submit { background:url(../images/sprite-button-rounded-right.png) no-repeat right top; height:40px; line-height:40px; } button.button-submit span { height:40px; line-height:40px; background:url(../images/sprite-button-rounded-left.png) no-repeat left top; } button.button-submit:hover { background:url(../images/sprite-button-rounded-right.png) no-repeat right bottom; color:#fff; } button.button-submit:hover span { background:url(../images/sprite-button-rounded-left.png) no-repeat left bottom; color:#fff; } /* * 6. FORMS * */ fieldset { margin-top: 0; } legend { font-size: 110%; font-weight: bold; padding-bottom: .5em; color: #000077; } form { color: #333333; } form ul { list-style-type: none; margin-bottom: .5em; margin-top: .5em; padding: 0; } form ul li { margin: 0; padding: 0; } form label { font-size: .9em; margin-bottom: .5em; margin-top: .5em; } input[type='text'] { border: 1px solid #D8D8D8; background: #FFF url(../images/img-form-input-shadow.png) repeat-x top; display: block; padding: 0.2em; width: 98%; color: #333333; margin-bottom: 1em; } textarea { border: 1px solid #D8D8D8; background: #FFF url(../images/img-form-input-shadow.png) repeat-x top; display: block; padding: 0.2em; color: #333333; width: 98%; line-height: normal; margin-bottom: .7em; } form ul li input[type='radio'], form ul li input[type='checkbox'] { margin:0.1em 0em; padding: 0; } select { border: 1px solid #D8D8D8; background: #fff; color: #666666; padding-top: 0.3em; padding-bottom: 0.3em; padding-left: 0.5em; margin: 0.2em 0; display: block; width: 98%; } input[type='button'] { border: 1px solid #D8D8D8; background-color: white; padding: 1em 1.3em; color: #666666; margin: 1em 0em; } /* * 7. TABLES * */ table { border: 1px solid #D8D8D8; margin: 0; width: 100%; color: #333333; vertical-align: top; } td { border-bottom: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; padding-left: .3em; padding-right: .3em; padding-top: .2em; padding-bottom: .2em; line-height: 1.5em; } tr { height: 1.5em; } th, tfoot { border-top: 1px solid #FFF; border-left: 1px solid #FFF; background-color: #434343; text-align: left; padding-left: .3em; padding-right: .2em; padding-top: .2em; padding-bottom: .2em; line-height: 1.5em; font-weight: bold; color: #FFF; } caption { font-style: italic; caption-side: bottom; text-align: left; padding-top: 0.3em; padding-bottom: 0.3em; } .odd { background: #F6F6F6; } tr:hover { background: #82CB20 url(../images/sprite-table-hover.png) repeat-x top; color: #FFF; } /* * 8. FLEXIBLE CONTAINERS * */ /* * SIMPLE FLEXIBLE BOX * */ .box-flat { background: #FBFBFB url(../images/img-box-flat.png) repeat-x left bottom; margin: 0.2em 0em 0.6em 0em; padding: 1em 1em 0.2em 1em; border-top: 1px solid #D8D8D8; border-bottom: 2px solid #D8D8D8; border-left: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; } .box-flat p { padding: 0; } /* * FLEXIBLE BOX (ROUNDED CORNERS) * */ .box-rounded { background: url(../images/img-box-bottom-left.png) no-repeat left bottom; margin-top: 1em; margin-bottom: 1em; } .box-rounded-outer { background: url(../images/img-box-bottom-right.png) no-repeat right bottom; padding-bottom: 10px; } .box-rounded-inner { background: url(../images/img-box-top-left.png) no-repeat left top; } .box-rounded h2 { background: url(../images/img-box-top-right.png) no-repeat right top; padding-top: 10px; padding-bottom:5px; margin: 0; font-size: 110%; color: #219B00; } .box-rounded p { padding:0; margin: 0; } .box-rounded h2, .box-rounded p { padding-left: 15px; padding-right: 15px; border: none; } /* * 9. UTILITY COMPONENTS * see documentation for details */ /* * 5-STAR RATING * static only */ div.rating span{ float: right; padding-top: 0.4em; } div.rating { width: 150px; height: 24px; background: url(../images/sprite-rating.png) no-repeat 0px 0px; margin-bottom: 1em; } div.stars-0 { background-position: left 0px; } div.stars-1 { background-position: left -25px; } div.stars-2 { background-position: left -50px; } div.stars-3 { background-position: left -75px; } div.stars-4 { background-position: left -100px; } div.stars-5 { background-position-y: left -125px; } /* * \ SWITCH * */ ol.toggle-switch { background: url(../images/sprite-toggle-switch.png) no-repeat left top; height: 35px; width: 100px; padding: 10px 0 0 0; margin: 0; } ol.toggle-switch li { display: block; float: left; text-align: center; width: 50%; color: #FFFFFF; } ol.toggle-switch li a { color: #FFFFFF; text-transform: uppercase; font-weight: bold; text-decoration: none; cursor: pointer; } ol.toggle-switch li a:hover { outline: none; } ol.toggle-switch.on { background-position: left top; } ol.toggle-switch.off { background-position: left -50px; } .off li.label-on { visibility: hidden; } .on li.label-off { visibility: hidden; } ul.toggle label { font-weight: bold; } /* * LIST CONTAINER FOR TOGGLE SWITCH * includes label */ /*line-height adjusts container height*/ ul.list-toggle { list-style-type: none; padding: 0; margin-top: 0; margin-bottom: 0; margin-left: -10px; margin-right: -10px; border-bottom: 1px solid #D5D8D8; color: #333333; height: 45px; background: #F6F6F6 url(../images/sprite-list.png) repeat-x top; display: block; } ul.list-toggle label { padding-left: 10px; margin: 15px 0px 0px 0px; float: left; display: block; } ul.list-toggle ol.toggle-switch { margin:5px 10px 0px 0px; float: right; height: 30px; } /* * SLIDESHOW * */ .slideshow { width: 100%; text-align: center; margin: 0 auto; } .slideshow img { border: 1px solid #D8D8D8; padding: .3em .3em; margin-top: 1em; margin-bottom:0; } .slideshow span { clear: both; width: 190px; display: block; margin-left: auto; margin-right: auto; margin-bottom:0.5em; font-size: 0.9em; padding: .3em 5px; } .slideshow a { text-decoration: none; } .slideshow ul.controls { width: 200px; float:none; margin: 0 auto 1em auto; } ol.data { display: none; }