/* Theme Name: WDFS 2011 Theme URI: Description: Simple, clean prototype theme by Web Design From Sratch, based on the Boilerplate theme - http://aarontgrogg.com/boilerplate/ Author: Dan Johnson, based on the work of Aaron T. Grogg, Paul Irish, Divya Manian, and Elliot Jay Stocks Author URI: http://webdesignfromscratch.com Version: 0.1 Tags: custom-menu, editor-style, theme-options, threaded-comments, sticky-post, microformats, rtl-language-support, translation-ready License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html This CSS file is a concatenation of style.css from HTML5 Boilerplate and style.css from Starkers. Comment blocks indicate where each begins and ends, like this, for example... */ /* HTML5 ✰ Boilerplate style.css contains a reset, font normalization and some base styles. credit is left where credit is due. much inspiration was taken from these projects: yui.yahooapis.com/2.8.1/build/base/base.css camendesign.com/design/ praegnanz.de/weblog/htmlcssjs-kickstart */ /* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; font: inherit; vertical-align:baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */ /* fonts.css from the YUI Library: developer.yahoo.com/yui/ refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages there are three custom edits: * remove arial, helvetica from explicit font stack * we normalize monospace styles ourselves * table font-size is reset in the HTML5 reset above so there is no need to repeat */ body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */ select, input, textarea, button { font:99% sans-serif; } /* normalize monospace sizing * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* * minimal base styles */ body, select, input, textarea { /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ color: #444; /* set your base font here, to apply evenly */ /* font-family: Georgia, serif; */ } /* headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */ h1,h2,h3,h4,h5,h6 { font-weight: bold; } /* always force a scrollbar in non-IE: */ html { overflow-y: scroll; } /* accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; } a, a:active, a:visited { color: #607890; } a:hover { color: #036; } ul, ol { margin-left: 2em; margin-bottom: 2ex; font-size: 14px; line-height: 1.5em;} ol { list-style-type: decimal; } ol li {margin-bottom: 15px;} ol ul li {margin-bottom: 5px;} /* remove margins for navigation lists */ nav ul, nav li { margin: 0; } small { font-size: 85%; } strong, th { font-weight: bold; } td { vertical-align: top; } /* set sub, sup without affecting line-height: gist.github.com/413930*/ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; padding: 15px; } textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ .ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */ /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } /* hand cursor on clickable input elements */ label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } /* webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /* colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: #FF5E99; } /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible; } /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* * Non-semantic helper classes */ /* for image replacement */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: by Jon Neal www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { border: 0 !important; clip: rect(0 0 0 0); height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ /* Changed clearfix to group, for better semantic markup, as advised by Dan Cederholm in http://handcraftedcss.com/ */ .group:before, .group:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .group:after { clear: both; } /* fix group: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .group { zoom: 1; } /* Primary Styles Author: Dan Johnson */ body {background: #eee;} .page-wrapper {width: 960px; margin: 20px auto 30px; background: #fff; -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.1); box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);} .page-wrapper > header, .page-wrapper > footer, .page-wrapper > section {padding-left: 30px; padding-right: 30px;} .page-wrapper > header { background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#ebf7ff)); background: -moz-linear-gradient(top, #FFF, #ebf7ff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EBF7FF'); padding-top: 3ex; padding-bottom: 3.5ex; } .page-wrapper > section {padding-top: 3ex; padding-bottom: 3ex;} .page-wrapper > footer {background: #ddd; padding-top: 3ex; padding-bottom: 2ex;} /* header */ .sitename {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.9em; margin: 0 0 0.1ex; font-weight: bold;} .sitename a {text-decoration: none; color: #333;} .sitedescription {color: #666;} /* main navigation */ .page-wrapper > nav {background: #fdaf17; border-left: 3px solid #fdaf17;} .menu-header ul.children, .menu-header ul.sub-menu {display: none; position: absolute;} /* hide child menus until hover */ .menu-header > ul > li {display: inline; float: left; position: relative; padding-top: 3px;} .menu-header > ul > li > a { display: block; float: left; padding: 2ex 1.5em; height: 2ex; text-decoration: none; font-weight: bold; font-size: 1.1em; border-right: 1px solid #fdaf17; color: #333; background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#fffdce)); background: -moz-linear-gradient(top, #FFF, #fffdce); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFDCE'); } .menu-header > ul > li:hover > a {background: #FFF;} .menu-header li:hover > ul.sub-menu, .menu-header li:hover > ul.children {display: block; top: 7ex; background: #333; width: 200px; -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);} .menu-header li:hover ul.sub-menu li a, .menu-header li:hover ul.children li a {color: #fff; padding: 2ex 1em; display: block; text-decoration: none; border-bottom: 1px solid #666;} .menu-header li:hover ul.sub-menu li a:hover, .menu-header li:hover ul.children li a:hover {background: #555;} .menu-header ul.children ul.children, .menu-header li:hover > ul.sub-menu li:hover > ul.sub-menu {left: 200px; top: 5px;} .menu-header > ul > li.current-menu-item > a, .menu-header > ul > li.current-menu-ancestor > a {color: #333; background: #fff; border-right: 1px solid #fdaf17;} .menu-header > ul > li.current-menu-ancestor ul li.current-menu-item {font-weight: bold;} /* column layout */ .main-content {width: 580px; float: left; padding-right: 20px;} .sidebar {width: 270px; float: right;} /* articles */ article {padding: 0 0 3ex 0; margin: 0 0 3ex 0;} .blog article, .archive article, .search article {border-bottom: 1px solid #eee;} .blog article h2, .archive article h2, .search article h2 {margin-top: 0;} article.sticky {background: #eee; padding: 10px 15px; border: none;} .single .entry-content, .page .entry-content {border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 2ex 0; margin: 1ex 0;} .post-thumbnail {width: 160px; float: left;} .post-summary {width: 420px; float: right} article.sticky .post-summary {width: 390px;} .post-thumbnail img {border: 1px solid #ddd; padding: 4px; background: #fff;} .entry-meta {margin: 0 0 1ex 0; color: #666;} .entry-utility {clear: both;} .main-content p {margin: 0 0 2ex; font-size: 1.1em; line-height: 1.4em;} article .pages {background: #eee; margin: 2ex 0; text-align: center; padding: 10px 0; clear: both;} nav#nav-below {margin: 2ex 0} nav#nav-below a {border: 1px solid #ccc; display: block; padding: 1ex 1em;} nav#nav-below a:hover {border: 1px solid #333;} nav#nav-below .nav-previous {float: left; width: 48%;} nav#nav-below .nav-next {float: right; width: 48%; text-align: right;} /* Styles for WP page navi, if installed. */ .wp-pagenavi {text-align: center; font-size: 0.9em;} .wp-pagenavi span.current {border: none; color: #333;} .wp-pagenavi span, .wp-pagenavi a {-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 4px 8px !important;} .wp-pagenavi span.pages, .wp-pagenavi span.extend {border: none;} /* comments */ ol.comments-list {list-style: none; margin: 0;} ol.comments-list ul {list-style: none; margin-left: 0;} li.comment {background: #fafafa; padding: 20px 20px 10px 20px; margin: 0 0 10px; border: 1px solid #ccc;} li.pingback, li.trackback {background: #eeffff; padding: 20px; margin: 0 0 10px; border: 1px solid #ccc;} ol.comments-list li.odd {background: #eaeaea;} li.comment article {margin: 0;} li.comment .comment-left {float: left; width: 50px; margin-right: 20px;} li.comment .comment-right {float: right; width: 480px;} li.depth-2 .comment-right {width: 440px;} li.depth-3 .comment-right {width: 400px;} li.depth-4 .comment-right {width: 360px;} li.depth-5 .comment-right {width: 320px;} li.comment blockquote {background: #ddd; margin: 0;} li.comment img.avatar {border: 1px solid #ccc; background: #fff; padding: 3px;} li.comment .reply a {display: block; background: #fff; text-align: center; border: 1px solid #aaa; text-decoration: none; padding: 2px 0; width: 46px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;} li.comment .reply a:hover {border-color: #333;} .comment .vcard {margin: 0 0 1ex;} .comment .comment-meta {margin: 0 0 3ex; font-size: 0.9em;} .comment .fn {font-weight: bold;} /* comment form */ .logged-in-as {background: #eee; padding: 5px 10px; margin: 0 0 10px;} .form-allowed-tags {border: 1px solid #ccc; margin: 10px 0; padding: 5px 10px; background: #eee;} .form-submit {margin: 0 auto; text-align: center; background: #ffffcc; padding: 10px 0;} #commentform label {display: block; font-weight: bold; margin: 1.5ex 0 0.5ex;} #commentform textarea {width: 100%;} #commentform input[type=text] {width: 50%;} #commentform p {position: relative;} #commentform p .required {position: absolute; color: red; left: -10px; top: 0.5ex;} #commentform p.comment-notes .required {position: static;} /* headings */ h1 {font-size: 2.5em; margin: 0.3ex 0 0.5ex;} h2 {font-size: 1.5em; margin: 2ex 0 1ex;} h3 {font-size: 1.3em; margin: 2ex 0 1ex;} h4 {font-size: 1.2em;} h5 {font-size: 1.1em;} .entry-title a {color: #003366; text-decoration: none;} .entry-title a:hover {color: #0066cc;} /* theme warnings */ .warning {border: 1px solid red; padding: 10px 15px; background: #ffffee; margin: 1ex 0;} /* widgets */ ul.xoxo {list-style: none; margin: 0;} .sidebar li.widget-container {margin: 0 0 2ex;} .sidebar li.widget-container .widget-title {margin: 0 0 1ex;} /* HTML styles */ blockquote {background: #eee; padding: 3ex 2em 2ex; margin: 1ex 0 2ex 2em;} blockquote cite {font-style: italic;} table {margin: 0 0 2ex;} table th, table td {border: 1px solid #ccc; padding: 1ex 1em; border-collapse: collapse;} table th {background: #eee;} dl {margin: 2ex 0;} dl dt {font-weight: bold;} dl dd {padding: 0 0 1ex 0.5em;} address {margin: 2ex 0;} em {font-style: italic;} /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */ .aligncenter { display:block; margin: 3ex auto; border: 1px solid #ddd; padding: 5px; background: #fff;} .alignleft { float:left; margin: 0 2em 3ex 0; border: 1px solid #ddd; padding: 5px; background: #fff;} .alignright { float:right; margin: 0 0 3ex 2em; border: 1px solid #ddd; padding: 5px; background: #fff;} .alignnone {display: block; margin: 3ex 0} .wp-caption { border:1px solid #ccc; text-align:center; background:#eee; padding:10px; max-width: 580px;} p.wp-caption-text {margin-top: 1ex; margin-bottom: 1ex;} /* Images */ .main-content img {max-width: 600px; height: auto;} .main-content .wp-caption img {max-width: 580px;} article h2, article h3 {clear: both;} /* Footer widgets */ footer ul.xoxo li.widget-container {float: left; width: 25%; margin: 0 0 4ex;} footer ul.xoxo li ul {list-style: none; margin: 0;} footer h3.widget-title {margin-top: 0; color: #666;} .copyright {clear: both; margin: 2ex 0 0; text-align: center; font-size: 0.8em; color: #666; border-top: 1px solid #ccc; padding: 2ex 0 0;} /* * media queries for responsive design * these follow after primary styles so they will successfully override. */ @media all and (orientation:portrait) { /* style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* style adjustments for landscape mode goes here */ } /* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) { /* uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you j.mp/textsizeadjust html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /** END HTML5 Boilerplate CSS **/ /** START Starkers CSS **/ /* LAYOUT */ /* ----------------------------------------- */ /* You might find the following useful */ /* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */ li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */ */ /* TYPOGRAPHY */ /* ----------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight:bold; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */ .alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes. /* Font stack options The following represents a list of font stacks, as recommended by Nathan Ford in http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ I've added inverted commas around the relevant family names to ensure compatibility. p = balanced for paragraphs or body copy t = balanced for headlines or titles - - - - Arial, "Helvetica Neue", Helvetica, sans-serif - p, t Baskerville, "Times New Roman", Times, serif - p Baskerville, "Times, Times New Roman", serif - t Cambria, Georgia, Times, "Times New Roman", serif - p, t "Century Gothic", "Apple Gothic", sans-serif - p, t Consolas, "Lucida Console", Monaco, monospace - p, t "Copperplate Light", "Copperplate Gothic Light", serif - p, t "Courier New", Courier, monospace - p, t "Franklin Gothic Medium", "Arial Narrow Bold", Arial, sans-serif - p, t Futura, "Century Gothic", "Apple Gothic", sans-serif - p, t Garamond, "Hoefler Text", "Times New Roman", Times, serif - p Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif - t Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif - p Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - t Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif - p Georgia, Times, "Times New Roman", serif - t GillSans, Calibri, Trebuchet, sans-serif - p GillSans, Trebuchet, Calibri, sans-serif - t "Helvetica Neue", Arial, Helvetica, sans-serif - p Helvetica, "Helvetica Neue", Arial, sans-serif - t Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif - p, t "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - p, t Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif - p Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif - t Tahoma, Geneva, Verdana - p Tahoma, Verdana, Geneva - t Times, "Times New Roman", Georgia, serif - p, t Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif - p Trebuchet, Tahoma, Arial, sans-serif - t Verdana, Geneva, Tahoma, sans-serif - p Verdana, Tahoma, Geneva, sans-serif - t */ /** END Starkers CSS **/ /** START WordPress-Defined CSS Classes **/ .wp-caption-text{} .gallery-caption{} .bypostauthor{} .sticky{} /** END WordPress-Defined CSS Classes **/ /* ----------------------------------- SITE SPECIFIC STYLES - JIMMY HUGHES ------------------------------------*/ .raised-box { padding: 20px 30px 5px 30px; background: #FFF; -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); box-shadow: 0px 1px 4px rgba(0,0,0,0.2); margin: 0 0 25px; } .raised-box h2 { margin: 0.5ex 0 1ex; } /* ----------------------------------- TESTIMONIALS ------------------------------------*/ .textwidget .testimonial { margin-bottom: 2em; padding: 20px; background: #FEFDE7; -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); box-shadow: 0px 1px 4px rgba(0,0,0,0.2); } .textwidget .testimonial p strong { font-size: 0.9em; } /* ----------------------------------- CALL TO ACTION - RHC ------------------------------------*/ .home-button {clear:both; color: #fff; font-family: "Microsoft New Tai Lue"; font-size: 18px; font-weight: bold; height:37px; line-height:37px; position:relative; text-shadow: 0 1px 1px rgba(0,0,0,.27); /* drop shadow */ margin:22px auto; text-align:center; width:325px; width:32.5rem; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* border radius */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /* prevents bg color from leaking outside the border */ background-color: #276de5; /* layer fill content */ -moz-box-shadow: 0 1px 3px rgba(135,135,135,.9), inset 0 0 3px rgba(49,49,49,.4); -webkit-box-shadow: 0 1px 3px rgba(135,135,135,.9), inset 0 0 3px rgba(49,49,49,.4); box-shadow: 0 1px 3px rgba(135,135,135,.9), inset 0 0 3px rgba(49,49,49,.4); /* drop shadow and inner shadow */ background: #a9c88c; /* Old browsers */ background: -moz-linear-gradient(top, #a9c88c 0%, #80b357 54%, #609e31 55%, #467f20 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9c88c), color-stop(54%,#80b357), color-stop(55%,#609e31), color-stop(100%,#467f20)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a9c88c 0%,#80b357 54%,#609e31 55%,#467f20 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a9c88c 0%,#80b357 54%,#609e31 55%,#467f20 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a9c88c 0%,#80b357 54%,#609e31 55%,#467f20 100%); /* IE10+ */ background: linear-gradient(to bottom, #a9c88c 0%,#80b357 54%,#609e31 55%,#467f20 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9c88c', endColorstr='#467f20',GradientType=0 ); /* IE6-9 */ } .home-button a {color:#fff; display:block; text-decoration:none;} .home-button a:hover {color:#fff; text-decoration:none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #99c275; /* Old browsers */ background: -moz-linear-gradient(top, #99c275 0%, #599929 50%, #599929 51%, #567d3c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99c275), color-stop(50%,#599929), color-stop(51%,#599929), color-stop(100%,#567d3c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #99c275 0%,#599929 50%,#599929 51%,#567d3c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #99c275 0%,#599929 50%,#599929 51%,#567d3c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #99c275 0%,#599929 50%,#599929 51%,#567d3c 100%); /* IE10+ */ background: linear-gradient(to bottom, #99c275 0%,#599929 50%,#599929 51%,#567d3c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99c275', endColorstr='#567d3c',GradientType=0 ); /* IE6-9 */} .cta { background: #FFF; -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); box-shadow: 0px 1px 4px rgba(0,0,0,0.2); margin: 0 0 25px; position: relative; } .cta .top { background: #fab116; padding: 15px 30px; text-align: center; color: #FFF; font-size: 0.9em; margin-bottom: 15px; } .cta .top h2 { margin: 0; line-height: normal; text-shadow: 1px 1px rgba(0,0,0,0.35); } .cta .bottom { padding: 10px 0 25px; text-align: center; background: url(images/cta/cta-bottom-bg.png) center 10px no-repeat; } .cta img { position: absolute; top: 60px; right: 6px; } .cta p { width: 135px; margin: 0 0 12px 15px; font-weight: bold; font-size: 1.25em; } .cta p.small { font-weight: normal; font-size: 1.4em; width: 240px; text-align: center; line-height: 1.4em; margin-bottom: 5px; } .cta p.small span { font-weight: bold; color: #093; } .cta ul { list-style: none; width: 135px; margin: 0 0 10px 25px; } .cta ul li { background: url(images/check.png) left 3px no-repeat; padding-left: 21px; } .cta h3 { font-size: 1.15em; margin: 0px; padding-bottom: 10px; } .cta .bonus { margin: 16px; background: #BDF0FD; padding: 10px; } .cta .bonus p { width: 190px; font-weight: bold; font-size: 1.25em; } .cta .bonus .bonus-extra { font-weight: bold; padding-top: 10px; padding-right: 100px; background: url('http://spanishlessonplansnow.com/wp-content/uploads/2012/09/estorybook-tiny.png') no-repeat right bottom; text-align: right; } /* ----------------------------------- CALL TO ACTION - RHC ------------------------------------*/ .box { padding: 15px; border: 1px solid #CCC; background: #E9E9E9; margin: 15px; text-align: left; } /* ----------------------------------- BODY BONUS ------------------------------------*/ .bonus { background: #BDF0FD url('http://spanishlessonplansnow.com/wp-content/uploads/2012/09/estorybook-tiny.png') no-repeat right center; padding: 20px 90px 20px 20px; margin: 30px 0; } .bonus h3 { font-size: 1.15em; margin: 0px; padding-bottom: 10px; } /* ----------------------------------- TABLE - WEBINARS ------------------------------------*/ table.webinar-dates td { padding: 2ex 2em; }