/* -------------------------------------------------------------- Blueprint CSS Framework [bjorkoy.com/blueprint] * Screen & Projection Styles * This is the main CSS-file for the framework. Include this in the of every page. See the Readme file in this directory for further instructions. --------------------------------------------------------------- */ @import "reset.css"; @import "typography.css"; @import "forms.css"; /* =STRUCTURE ------------------------------------------------ */ div#container { margin: 0 auto 0 auto; padding: 30px 0px 0px 0px; width: 880px; } div#content { position: relative; float: left; width: 100%; clear: left; margin: 0 0 0px 0; padding: 0 0px 0 0; background: url(../images/bg-content.gif) repeat-y; border-top: 20px solid #66BFFF; border-bottom: 20px solid #66BFFF; /*background: white;*/ } div#content-primary { position: relative; margin: 0 0 0 20px; float: left; width: 587px; padding: 20px; } div#content-secondary { position: relative; width: 173px; padding: 10px; float: left; margin: 0 0 0 20px; } /* =THREE-COL ADJUSTMENTS -------------------------*/ body.three-col div#content { background: url(images/bg-content-3col.gif) repeat-y; } /* body.three-col ul#breadcrumb { clear: both; display: block; } */ body.three-col div#content-primary h1, body.three-col div#content-primary h2, body.three-col div#content-primary h3, body.three-col div#content-primary h4, body.three-col div#content-primary h5, body.three-col div#content-primary h6, body.three-col div#content-primary p, body.three-col div.GMapEZ, body.three-col hr, body.three-col ul, body.three-col ol, body.three-col blockquote, body.three-col div#socialBookmarking, body.three-col ul#breadcrumb { margin-left: 192px; } body.three-col div#socialBookmarking { width: auto; } body.three-col div#socialBookmarking h5, body.three-col div#socialBookmarking ul { margin-left: 0; } body.three-col div#socialBookmarking ul li { padding-right: 12px; } body.three-col div.maptitle div.GMapEZ a, body.three-col div.maptitle div.GMapEZ span, body.three-col div.maptitle div.GMapEZ span a.gmnoprint { display: none; } body.three-col div#content-primary div.GMapEZ h1, body.three-col div#content-primary div.GMapEZ p { margin: 0; padding: 0; width: 100%; float: left; } body.three-col div#content-primary div.GMapEZ h1 { font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; } body.three-col div#content-primary div.GMapEZ p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; margin-top: 10px; } /* =LINKS ------------------------------------------------ */ a:link, a:visited, a:focus, a:active { text-decoration: underline; color: #990033; } a:hover { text-decoration: none; } /* =BRANDING ------------------------------------------------ */ img#branding { margin: 0 0 2px 0; float: left; } /* =SITE-TOOLS ------------------------------------------------ */ div#site-tools { margin: 0 0 20px 0; float: right; text-align: right; font-size: 95%; } div#site-tools ul { margin: 0; padding: 0 0 32px 0; list-style: none; } div#site-tools li { margin: 0; padding: 0; list-style: none; } div#site-tools li { float: left; } div#site-tools a:link, div#site-tools a:visited, div#site-tools a:focus, div#site-tools a:active { background: url(images/divider-list.gif) no-repeat 100% 70%; padding: 0 10px 0 10px; color: #3b4b5b; text-decoration: underline; margin: 0; } div#site-tools a:hover { color: #9e1b34; text-decoration: none; } div#container div#site-tools li.last a { background: none; padding: 0 0 0 10px; } /* Apply body class to active site tool links ------------------------------------------------ */ body.home div#container div#site-tools li.home a { font-weight: bold; color: #9e1b34; text-decoration: none; } /* Hide this if the body class is equal to 'commerce' ------------------------------------------------ */ body.commerce div#site-tools li.us, body.commerce div#site-tools li.tell, body.commerce div#site-tools li.subscribe { display: none; } /* =SEARCH ------------------------------------------------ */ form#search { clear: left; /* Use display: none to hide search site wide visibility: hidden might be better as the div will occupy same space */ /*visibility: hidden; */ } form#search label, body.search form#search legend { font-weight: bold; font-size: 75%; } form#search #search-term, body.search form#search #search-input { border: 1px solid #7f9db9; height: 16px; width: 125px; position: relative; top: -1px; font-size: 75%; padding-top: 1px; padding-left: 2px; } form#search #button-search { position: relative; top: 6px; } /* Hide this if the body class is equal to 'commerce' ------------------------------------------------ */ body.commerce form#search { display: none; } /* =NAV-PRIMARY ------------------------------------------------ */ ul#nav-primary { float: left; clear: left; margin: 0 0 1px 0; font-size: 70%; list-style-type: none; padding: 0px 0px 0px 0px; } #nav-primary ul, #nav-primary li { margin: 0; padding: 0; list-style: none; } ul#nav-primary li { float: left; } ul#nav-primary a:link, ul#nav-primary a:visited, ul#nav-primary a:focus, ul#nav-primary a:active { display: block; width: 145px; height: 34px; background: #CC78AA; /* Color of menu item */ padding: 0px 0px 0px 0px; margin: 0px 0.045em 0px 0.075em; color: #FFFFFF; text-decoration: none; font-weight: bold; text-align: center; float: center; } ul#nav-primary li.last a { margin: 0; padding: 10px 0 11px 0; } ul#nav-primary a:hover { background: #BFE7FF; /* Color of menu item on mouse over*/ color:black; } /* Apply body class to active primary navigation links ------------------------------------------------ */ body.index ul#nav-primary li.index a, body.m1 ul#nav-primary li.m1 a, body.m2 ul#nav-primary li.m2 a, body.m3 ul#nav-primary li.m3 a, body.m4 ul#nav-primary li.m4 a, body.m5 ul#nav-primary li.m5 a, body.m6 ul#nav-primary li.m6 a, body.news ul#nav-primary li.news a { background: #66BFFF; /* Color of selected menu item */ color:black; } /* Hide this if the body class is equal to 'commerce' ------------------------------------------------ */ body.commerce ul#nav-primary { display: none; } /* =NAV-SECONDARY ------------------------------------------------ */ ul#nav-secondary { position: absolute; top: 216px; left: 30px; width: 163px; float: left; clear: both; list-style: none; font-size: 75%; font-weight: bold; z-index: 1; margin-left: 0; padding: 0; } /* Hide this if the no secondary navigation required ------------------------------------------------ */ ul#nav-secondary li { border-bottom: 1px solid #dfe3e6; } ul#nav-secondary li.tertiary { border: none; } ul#nav-secondary a:link, ul#nav-secondary a:visited, ul#nav-secondary a:focus, ul#nav-secondary a:active { padding: 7px 0 7px 7px; display: block; text-decoration: none; color: #000; } ul#nav-secondary a:hover{ text-decoration: underline; } ul#nav-secondary li.active a { color: #990033; font-weight: bold; background: url(images/sec-nav-active-arrow.gif) no-repeat 95% 50%; } ul#nav-secondary ul { list-style: none; border-bottom: 1px solid #dfe3e6; font-size: 95%; font-weight: normal; padding: 0; } ul#nav-secondary ul li { margin: 0 0 1px 0; border: none; width: 100%; } ul#nav-secondary ul li.last { margin: 0; } ul#nav-secondary ul a:link, ul#nav-secondary ul a:visited, ul#nav-secondary ul a:focus, ul#nav-secondary ul a:active { background: #F9F9F9; padding: 7px 0 7px 22px; text-decoration: underline; color: #990033; } ul#nav-secondary ul a:hover { background: #EEE; text-decoration: underline; } ul#nav-secondary ul li.active a { color: #990033; /*background: url(images/sec-nav-active-arrow.gif) no-repeat 95% 50%;*/ background: #FFF; font-weight: bold; text-decoration: none; } /* =BREADCRUMB ------------------------------------------------ */ ul#breadcrumb { clear: both; font-size: 70%; list-style-type: none; padding: 0; overflow: hidden; } ul#breadcrumb li { float: left; background: url(images/bg-breadcrumb.gif) no-repeat 100% 55%; padding: 0 10px 0 8px; margin: 0; } ul#breadcrumb li.first { padding: 0 12px 0 0; } ul#breadcrumb li.last { background: none; text-decoration: none; } body.shop #content-primary ul#breadcrumb { display: none; } /* =CONTENT ------------------------------------------------ */ p img { display: inline; float: right; margin: 5px 0 5px 20px; padding:1px; border: 1px solid #CCC; } p img.no-border { padding: 0; border: none; } p img.left { float: left; margin: 5px 20px 5px 0; } img.no-border { border: none; } img#banner, div#banner { position: relative; top: -20px; left: -20px; margin: 0; padding: 0; border: none; border-bottom: 10px solid #EEE; background: #EEE; display: block; width: 627px; z-index: 98; } div#banner img { top: 0; left: 0; } div#banner object { float: left; padding: 0; margin: 0; display: block; } img#button-donate { position: absolute; top: 0; right: 0; z-index: 100; } div#content-secondary h3 { position: relative; border-bottom: 1px solid #CCC; padding: 0 0 3px 0; line-height: 150%; } div#content-secondary h3 span { position: absolute; right: 0; font-weight: normal; font-size: 95%; } div#content-secondary h3 span a:link, div#content-secondary h3 span :visited, div#content-secondary h3 span a:focus, div#content-secondary h3 span a:active { color: #999; background:url(images/feed-icon-12x12.jpg) no-repeat 0 1px; padding: 0 0 0 17px; } div#content-secondary h3 span a:hover { color: #666; } div#content-secondary p { font-size: 70%; padding-top: 5px; } div#content-secondary img { padding: 0; width: 173px; margin: 5px 0 0 0; } /* =UNORDERED LISTS ------------------------------------------------ */ /* for content secondary */ div#content-secondary ul { font-size: 70%; margin: 5px 0 10px 20px; padding: 0; margin: 5px 0 10px 20px; float: left; } div#content-secondary ul#news { list-style-type: none; width: 100%; margin: 0 0 10px 0; } div#content-secondary ul#news li { border-bottom: 1px solid #CCC; line-height: 150%; padding: 5px 0 5px 0; } div#content-secondary ul#news li.photo { background:url(images/icon-photo.gif) no-repeat 0 8px; } div#content-secondary ul#news li.film { background:url(images/icon-film.gif) no-repeat 0 8px; } div#content-secondary ul#news li.story { background:url(images/icon-story.gif) no-repeat 0 8px; } div#content-secondary ul#news li.testimonial { background:url(images/icon-testimonial.gif) no-repeat 0 8px; } div#content-secondary ul#news li.blog { background:url(images/icon-blog.gif) no-repeat 0 8px; } div#content-secondary ul#news a:link, div#content-secondary ul#news :visited, div#content-secondary ul#news a:focus, div#content-secondary ul#news a:active { display: block; padding: 0 0 0 30px; } div#content-secondary ul#news li span { display: block; color: #999; padding: 0 0 0 30px; } /* =DEF LISTS ------------------------------------------------ */ body.shop dl, body.donate dl { font-size: 75%; margin-bottom: 1em; } body.shop dt, body.donate dt { font-weight: bold; } /* =DEFINITION LIST PRIMARY ------------------------------------------------ */ dl.primary, body.shop dl.primary, body.donate dl.primary { width: 100%; float: left; overflow: hidden; margin: 0 0 30px 0; } dl.primary.last { margin: 0; } dl.primary dt { font-family: Arial, Helvetica, sans-serif; font-size: 120%; line-height: 80%; margin: 0 0 4px 0; border-bottom: 1px solid #CCC; font-weight: normal; padding-top: 1px; letter-spacing: -0.02em; } body.shop dl.primary dt, body.donate dl.primary dt { font-size: 220%; } dl.primary dt, dl.primary dd.copy { width: 405px; float: right; } dl.primary dd.copy p { padding: 2px 0 3px 0; } body.shop dl.primary dd.copy p, body.donate dl.primary dd.copy p { font-size: 100%; } dl.primary dt a:link, dl.primary dt a:visited, dl.primary dt a:focus, dl.primary dt a:active { text-decoration: none; color: #333; /*bg color of title*/ } dl.primary dd.img { float: left; } dl.primary ul { margin: 0; padding: 0; font-size: 70%; } body.shop dl.primary ul, body.donate dl.primary ul { font-size: 95%; } dl.primary li { float: left; list-style: none; padding: 0 5px 0 0; } /* Place a comma after each link item. */ dl.primary li:after { content: ","; } /* Remove the comma from the last link item in the list. */ dl.primary li.last:after { content: ""; } /* =DEFINITION LIST SEONCADRY ------------------------------------------------ */ dl.secondary { width: 50%; float: left; overflow: hidden; margin: 0; } dl.secondary.last { margin: 0; } dl.secondary dt, dl.secondary dd.copy { width: 220px; float: right; padding: 0 0 5px 0; } dl.secondary dd.copy { font-size: 130%; } dl.secondary dt { font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 140%; font-weight: bold; } dl.secondary dd.img { float: left; } dl.secondary p { padding: 0; } /* =SITE-INFO ------------------------------------------------ */ ul#site-info { float: left; width: 100%; clear: left; margin: 0; padding: 0 0 30px 0; list-style: none; background:url(images/logo-footer.gif) no-repeat 100% 0; color: #3b4b5b; /*bg color of footer*/ font-size: 70%; } .footer { width:880px; height:60px; font-size: 70%; margin: 0 auto 0 auto; padding:20 0 0 0; /*background: url(../images/footer.gif) no-repeat 100% 100%; */ } ul#site-info li.footer{ width: 100%; margin: 0 auto 0 0: text-align:center; padding: 0 10px 0 0; position: top right; } ul#site-info li { float: left; border-right: 1px solid #CCC; padding: 0 10px 0 10px; } ul#site-info li.address { width: 217px; padding: 0 10px 0 0; } ul#site-info li.tel, ul#site-info li.fax { width: 138px; } ul#site-info li.email, ul#site-info li.web { width: 116px; } ul#site-info li.reg { width: 134px; } ul#site-info li.last { border: none; } ul#site-info li.lastx { border: 2px; type:disc; } ol#site-info li.lastd { border: solid red; border-width: 1px; type:disc; color:blue; } ul#site-info a { color: #3b4b5b; /*bg color of footer */ text-decoration: none; } ul#site-info a:hover { text-decoration: underline; color: #990033; } /* =APPEALS -------------------------*/ img.appeal-thumbnail { float: left; } img.appeal-detail-thumbnail { float: right; } body.donate p { clear:left; } textarea.viral-button-code { font-size: 1em; width: 100%; height: 8em; overflow: scroll; font-family: monospace; } /* =SHOP ---------------------------*/ body.shop div#content-secondary ul { list-style-type: none; padding: 0; margin-top: 10px; position: relative; left: -20px; width: 100%; } body.shop div#content-secondary ul li.items, body.shop div#content-secondary ul li.price { padding-left: 10px; } body.shop div#content-secondary ul li.action { padding-top: 10px; } body.shop form.default-form { clear: both; } /* =GOOGLE-SEARCH ---------------------------*/ body.search ul#breadcrumb { display: none; } body.search p { font-size: 75%; } body.search p span.time { color: #666; } body.search dl { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 1em 0 0 0; font-size: 75%; } body.search p em, body.search dl dt strong, body.search dd.search-highlight strong { font-weight: bold; font-style: normal; } body.search dl.search-results-list dt { font-size: 120%; } body.search dl dd.search-url { font-size: 90%; padding-bottom: 1em; color: green; } body.search ul.google-pagination { list-style-type: none; float: left; display: block; padding: 5px 90px 7px 109px; margin:1em 0 1em 0; border: 1px solid #E4e4e4; background: #edf3fe; } body.search ul.google-pagination li { float: left; padding: 0 20px 0 0; } body.search ul.google-pagination li.current { font-weight: bold; } /* =SOCIAL BOOKMARKING ---------------------------*/ div#socialBookmarking { font-size: 95%; overflow: hidden; border-top: 1px solid #CCC; clear: both; float: left; margin-top: 1em; padding-top: 0.5em; width: 100%; } div#socialBookmarking h5 { margin: 0; padding: 0 20px 0 0; float: left; font-size: 80%; font-weight: bold; } div#socialBookmarking ul { list-style-type: none; margin: 0; padding: 4px 0 3px 0; float: left; } div#socialBookmarking ul li { margin: 0; padding: 0 32px 0 0; float: left; } div#socialBookmarking a { margin: 0; padding: 0 0 0 20px; float: left; text-decoration: none; } #socialBookmarking a:hover { text-decoration: underline; } #socialBookmarking a.yahoo { background: url(images/social-bookmarking/yahoo.gif) no-repeat center left; } div#socialBookmarking a.google { background: url(images/social-bookmarking/google.gif) no-repeat center left; } div#socialBookmarking a.delicious { background: url(images/social-bookmarking/delicious.png) no-repeat center left; } div#socialBookmarking a.digg { background: url(images/social-bookmarking/digg.png) no-repeat center left; } div#socialBookmarking a.facebook { background: url(images/social-bookmarking/facebook.gif) no-repeat center left; } img.item-image { float: right; margin: 0em 0em 1em 1em; border: 1px #e4e4e4 solid; } /* = USD-GBP CONVERSIONS ----------------------------*/ div#us-payment-conversion { display: block; float: left; width: 567px; border: 1px #008000 solid; border-top: 1px #008000 solid; padding: 10px; margin: 10px 0px 10px 0px; background: #B0FFB0; }