/* Theme Name:devolved 2010 Theme URI:http://www.devolved.co.uk Description:Theme for www.devolved.co.uk Version:1 Author:Steve Firth Author URI:http://www.devolved.co.uk Tags: fixed-width, two-columns, right-sidebar, widget enabled, footer */ /* reset css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ima a, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-family: "Trebuchet MS", arial, helvetica, sans-serif; } :focus { outline: 0;} ol, ul, dl { list-style: none; } table { border-collapse: separate; border-spacing: 0; } /* basic decs */ html { background: #85B5ED; } body { font-size: 84%; color: #444; min-height: 750px; text-align: center; background: url(./gfx/upper-bg.jpg) center top no-repeat; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-size: 1.3em; color: #980B3E; margin-bottom: 10px; } h1 { font-size: 4em; margin: 10px 0px 24px 0px; text-shadow: 1px 1px 1px #aaa; } p { line-height: 150%; margin-bottom: 20px; } a { color: #980B3E; text-decoration: none; } a:hover { text-decoration: underline; color: #85B5ED; } strong, .bold { font-weight: bold; } em, .italic { font-style: italic; } small { font-size: 0.8em; } acronym, abbr, .abbr, .help { border-bottom: 1px dotted #980B3E; cursor: help; } #nav ul.post-meta li { background: none; color: #980B3E; font-size: 1em; font-weight: normal; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } #nav ul.post-meta li span.post-meta-key { display: none; } div.blockquote { padding: 10px 10px 20px 10px; margin: 40px 0px 20px 10px; font-size: 1em; border-top: 2px solid #980B3E; border-bottom: 2px solid #980B3E; } blockquote { margin-bottom: 0px; color: #980b3e; font-family: "georgia", serif; } cite { font-style: italic; } /* main css */ * html #mainbox { background: transparent; } #mainbox { width: 870px; margin: 0px auto; text-align: left; padding: 0px 35px 35px 35px; background: url(./gfx/shade.png); -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; } #mainbox #inner { background: #fff; padding: 0px 40px 40px 40px; min-height: 500px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; } /* top nav */ ul#topnav { height: 25px; line-height: 25px; color: #aaa; } ul#topnav li { display: inline; border-left: 1px solid #aaa; padding-left: 10px; margin-right: 10px; font-size: 0.9em; } ul#topnav li:first-child { border-left: 0px solid #eee; padding-left: 0px; } ul#topnav li a { color: #aaa; } ul#topnav li a:hover, ul#topnav li.current_page_item a { color: #980B3E; } /* basic content */ #content { width: 510px; float: left; } #content a { background: #980B3E; color: #fff; letter-spacing: 0.1em; font-weight: bold; padding: 0px 6px; margin: 0px -1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #content p a { text-shadow: 1px 1px 1px #222; } #content a:hover, #content a:active { color: #980B3E; background: #fff; } #content a:visited { color: #222; background: #eee; } #content a.external { background: #980B3E url(./gfx/external2.gif) right center no-repeat; color: #fff; font-weight: bold; padding: 0px 16px 0px 4px; margin: 0px -2px; } #content a:hover.external { background: #eee url(./gfx/external.gif) right center no-repeat; color: #980B3E; font-weight: bold; padding: 0px 16px 0px 4px; margin: 0px -2px; } #content ul { margin-bottom: 20px; } ul.tick { margin-bottom: 20px; } ul.tick li { background: url(./gfx/li.gif) left center no-repeat; padding-left: 16px; margin: 2px 5px; } #content .mb5 { margin-bottom: 5px; } /* sidebar */ #nav { width: 235px; float: right; } #nav ul { margin-top: -15px; } * html #nav ul li { margin-bottom: -20px; } #nav ul li { color: #444; font-size: 1.5em; line-height: 1.8em; } #nav ul li a, #nav ul li span { color: #980b3e; display: block; padding: 0px 10px; } #nav ul li span a { padding: 0px; } #nav ul li ul { margin: 0px 0px 10px 0px; } #nav ul li ul li { background: #fff; font-size: 1em; line-height: 1em; color: #444; } #nav ul li ul li a { color: #444; background: #fff; font-size: 0.65em; font-weight: normal; padding: 0px 10px 0px 25px; } #nav ul li ul li a:hover { color: #980b3e; background: #fff; } #nav cite { font-style: italic; color: #666; float: right; margin-top: -5px; } #recentposts { padding: 10px 15px 15px 15px; margin: 20px 10px; color: #555; font-size: 0.9em; background: #f7f7f7 url(./gfx/recentposts.jpg) right top no-repeat; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #recentposts h3, #recentposts a { color: #980B3E; margin-bottom: 5px; font-size: 14px; } #recentposts p { margin-bottom: 0px; } #recentposts span a { font-size: 12px; } /* slideshow style rules */ #slideshow { width:510px; height:260px; background:transparent url(http://www.devolved.co.uk/images/slider/sliderbg.jpg) no-repeat 0 0; position:relative; bottom: 8px; margin-bottom: 30px; } #slideshow #slidesContainer { margin:0 auto; width:450px; height:260px; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width: 430px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:260px; position: relative; text-shadow: 1px 1px 1px #70062C; color: #fff; } #content div.slide h2 a { font-size: 1.5em; padding: 0px; position: absolute; top: 30px; left: 30px; background: transparent; color: #fff; } .slide p { position: absolute; top: 80px; left: 30px; width: 210px; margin-bottom: 0px; font-weight: bold; } .slide img { position: absolute; bottom: 30px; right: 30px; margin-bottom: 0px; } /* Slideshow controls style rules */ .control { display:block; width:30px; height:260px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(http://www.devolved.co.uk/images/slider/left.gif) no-repeat 0 50%; } #rightControl { top:0; right:0; background:transparent url(http://www.devolved.co.uk/images/slider/right.gif) no-repeat 0 50%; } /* portfolio */ p.p1 { font-size: 1.2em; font-weight: bold; } /* footer */ #footer { background: url(./gfx/footer.jpg) center top; margin-top: 200px; height: 190px; border-top: 2px solid #fff; color: #fff; font-size: 1em; text-align: left; text-shadow: 1px 1px 2px #91ADCD; } #footer #finner { width: 870px; margin: 35px auto; } #footer a { color: #fff; } #footer a:hover, #footer a:focus { color: #980B3E; text-decoration: underline; } #footer dl { float: left; width: 255px; } #footer dl dt { font-size: 1.1em; font-weight: bold; } #footer dl.addy { text-align: right; float: right; } /* sitemap */ #content ul#smap a { background: #fff; color: #444; background: url(./gfx/tick.png) right center no-repeat; padding-right: 25px; font-weight: normal; margin: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } #content ul#smap a:hover, #content ul#smap a:active { color: #980B3E; background: #fff; background: url(./gfx/arrow_right.png) right center no-repeat !important; padding-right: 25px; } #content ul#smap a:visited { background: url(./gfx/cross.png) right center no-repeat; padding-right: 25px; } #content ul#smap { margin-bottom: 10px; } #content ul#smap li { font-size: 1.1em; margin-bottom: 5px; } #content ul#smap li a { color: #980B3E; } #content ul#smap li ul { margin: 5px 0px 10px 5px; } #content ul#smap li ul li { font-size: 0.8em; margin: 0px 0px 5px 10px; } #content ul#smap li ul li a { color: #444; } /* blog */ #content div.post h2, #content div.mydate { margin-bottom: 5px; } #content div.postmetadata { font-size: 0.9em; margin: 15px 0px; } #content div.postmetadata a { color: #980B3E; margin: 0px; padding: 0px; font-weight: normal; background: none; } div#content div.post { padding-top: 20px; border-top: 1px dotted #980B3E; margin-bottom: 20px } div#content div.post:first-child { padding-top: 0px; border-top: 0px dotted #fff !important; } div.widget_twitter { font-size: 11px; } div.widget_twitter span.entry-content { font-size: 1em; } #nav ul li ul#socialnstuff li a { padding-left: 0px; } #nav ul li ul#socialnstuff li { padding-left: 40px; margin: 0px 0px 5px 25px; line-height: 32px; } #nav ul li ul li#social-twitter { background: #fff url(./gfx/social/twitter_32.png) left center no-repeat; } #nav ul li ul li#social-lastfm { background: #fff url(./gfx/social/lastfm_32.png) left center no-repeat; } #nav ul li ul li#social-youtube { background: #fff url(./gfx/social/youtube_32.png) left center no-repeat; } #nav ul li ul li#social-skype { background: #fff url(./gfx/social/skype_32.png) left center no-repeat; } #nav ul li ul li#social-digg { background: #fff url(./gfx/social/digg_32.png) left center no-repeat; } #nav ul li ul li#social-rss { background: #fff url(./gfx/social/rss_32.png) left center no-repeat; } /* comments */ div#comments { font-size: 1em; margin-top: 30px; } div#comments input[type=text] , div#comments textarea { border: 1px solid #ccc; padding: 2px; font-size: 1em; font-family: "Trebuchet MS", arial, helvetica, sans-serif; } div#comments input:focus, div#comments textarea:focus { } div#comments input[type=text] { width: 246px; border: 0px; border-bottom: 1px dotted #980B3E } div#comments textarea { width: 506px; border: 1px dotted #980B3E } div#pimptext { margin: 5px 0px; padding: 5px; border: 1px solid #f5f5f5; background: #fafafa; font-weight: bold; color: #666; } div#pimptext code { font-family: "Trebuchet MS", arial, helvetica, sans-serif; font-size: 11px; padding: 0px; background: transparent; font-weight: normal; color: #666; } ul.formlist { margin-bottom: 20px; } ul.formlist li { margin-bottom: 10px; } ul.formlist li.submitbutton { line-height: 40px; } ul.formlist label { display: block; width: 70px; float: left; font-weight: bold; } ul.formlist label.forcom { width: 500px; margin-bottom: 3px; } div.grav { float: left; margin: 0px 30px 5px 0px; } ol.commentlist li { clear: both; padding: 20px 20px 0px 20px; margin-bottom: 30px; border: 1px solid #f5f5f5; background: #f7f7f7 url(./gfx/commentbg.jpg) right bottom no-repeat; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } ol.commentlist li.alt { border: 1px solid #f5f5f5; background: #f7f7f7 url(./gfx/altbg.jpg) right bottom no-repeat; } ol.commentlist li cite { font-size: 2em; display: block; margin-bottom: 2px; } ol.commentlist li span.cdate { font-size: 0.85em; text-transform: uppercase; color:#980B3E; display: block; margin-bottom: 23px; } ol.commentlist li p { margin-left: 110px } ol.commentlist li#deev { border: 1px solid #7E0A34; color: #fff; background: #980B3E url(./gfx/deevbg.jpg) right bottom no-repeat; -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; box-shadow: 0 1px 3px #999; } ol.commentlist li#deev span.cdate { color:#fff; } /* swanky button */ input[type=submit], #content a.swanky { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; box-shadow: 0 1px 3px #999; background-color: #980B3E; border: 0px solid #7E0A34; text-shadow: 1px 1px 1px #70062C; background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#BF1552), to(#980B3E)); background-image: -moz-linear-gradient(270deg, #BF1552, #980B3E); color: #fff; font-weight: bold; font-size: 1em; width: auto; border: 0px; padding: 4px; margin: 0px; } @-webkit-keyframes swankybutton { from { padding: 4px; } 50% { padding: 5px; } to { padding: 6px; } } input[type=submit]:hover, #content a.swanky:hover { -webkit-animation-name: swankybutton; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; cursor: pointer; text-decoration: none; } /* code styling */ div.codewrap { padding: 0px 10px 0px 0px; background: #f5f5f5; border: 1px solid #eee; color: #555; margin-bottom: 20px; } #content div.codewrap ol { background: #ddd; color: #aaa; list-style: decimal outside; padding: 0px 0px 0px 10px; margin-bottom: -1px; } #content div.codewrap ol li { background: #f5f5f5; margin: 0px 0px 1px 40px; padding: 4px 0px 4px 20px; color: #000; font-family: "Courier", "Times New Roman", serif; font-size: 0.9em; } /* sub cols */ div.cleft { width: 290px; float: left; position: relative; } div.cright { width: 290px; float: right; } /* misc classes etc */ .emph { border-bottom: 1px solid #980B3E; border-top: 1px solid #980B3E; padding: 10px 20px; font-size: 1.1em; font-weight: bold; font-style: italic; margin: 0px 20px 20px 20px; } .faq { font-size: 1.1em; font-weight: bold; font-style: italic; margin-bottom: 5px; } .maincolour, .red { color:#980B3E !important; } .maincolour2, .blue { color: #85B5ED !important; } .clear { clear: both; } a#navskip { position: absolute; top: -100px; } * html a#maincontent { background: #fff; margin-bottom: -1em; } a#maincontent { display: block; height: 0px !important; } a.external { background: url(./gfx/external.gif ) right center no-repeat; padding-right: 20px; } .inlinecross { background: url(./gfx/cross.png) right center no-repeat; padding-right: 25px; } .inlinetick { background: url(./gfx/tick.png) right center no-repeat; padding-right: 25px; } img.alignright { float: right; margin: 0px 0px 10px 30px; } img.alignleft { float: left; margin: 0px 0px 10px 30px; } img.aligncenter { margin: 0px auto 20px auto; display: block; } ul.socials a.external { background: none !important; padding-right: auto; }