/* COLOR REF blue: #00bdf2 for links hover pink: #d403d4 for links and links visited green: #00c600 for links on /* RESET */ * { margin: 0; padding: 0; } html, body { height: 100%; background-color: #000000; } body { font-size: 62.5%; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #fff; background-color: #000000; } ul { list-style: none; } ol { list-style: decimal inside; } a { outline: none; text-decoration: none; } a img { border: none; background: none; } img { vertical-align: top; } h2 img { float:left; display: inline; padding: 0 10px; vertical-align:text-top;} table { border-collapse: collapse; } strong { font-weight: bold } em { font-style: italic } hr { width: 100%; border: 1px solid #00c600; clear:both; margin: 10px 0; display:block; float:left;} blockquote { margin: 20px 40px; line-height:2.5em;} .alignleft { float:left; padding: 10px 0 10px 10px;} /* UTILITY */ br.dirtyLittleTrick, br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */ .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .aligncentre, .aligncentre img {text-align: center; vertical-align:bottom;} .blue { color:#00bdf2;} .space {margin: 20px 0;} /* TYPGROGRAPHY */ p { clear:both;} p, li { font-size: 1.2em; line-height: 1.5em; margin: 0; list-style: none; } p { margin-top:5px;} #post-133 p { margin:5px 0;} p#intro-paragraph { font-family: Georgia, serif; font-size: 2.0em; font-style: italic; line-height: 1.4em; margin-top: 5px; } p#intro-paragraph span { font-size: 2.4em; font-weight: bold; } p#intro-paragraph em { color: #990000; } a { color: #d403d4; } a:hover { color: #00bdf2; } h1 { font-size: 3.6em; font-weight: normal; } h2 { font-size: 2.5em; font-weight: bold; display:inline; } h3, .edinburgh-text, .dates, .other-pages, .lfctv, .dates-archive, .more-blogs, .vid-container { font-size: 1.4em; margin: 0 ; line-height: 1.6em; } h4, .venue { color: white; font-size: 0.75em; margin-top: 10px; } .post h4 { font-size: 1.8em; font-weight: normal; margin: 0 0 10px 0; color: #900; } .edinburgh-text { padding-top:10px; height:274px; overflow:hidden; width:312px; display:block;} .ireland, .ireland a {background:url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/tour-map.jpg) no-repeat top; background-position:0 0; float:left; height:272px; width:135px; display:block;} .ireland a:hover { background-position: 0 -272px;} .scotland, .scotland a {background:url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/tour-map.jpg) no-repeat top; background-position:-141px 0; float:left; height:120px; width:166px; display:block; overflow:hidden;} .scotland a:hover { background-position: -141px -272px;} .north, .north a {background:url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/tour-map.jpg) no-repeat top; background-position:-141px -120px; float:left; height:45px; width:166px; display:block; overflow:hidden;} .north a:hover { background-position: -141px -392px;} .south, .south a {background:url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/tour-map.jpg) no-repeat top; background-position:-141px -167px; float:left; height:105px; width:168px; display:block; overflow:hidden;} .south a:hover { background-position: -141px -439px;} .wales {position:absolute; top:0; left:0; z-index:999;} .wales, .wales a {background:url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/tour-map.jpg) no-repeat top; background-position:-140px -166px; float:left; height:59px; width:70px; display:block; overflow:hidden; } .wales a:hover { background-position: -140px -438px;} /*MAP*/ /* FORMS */ input { padding: 3px; margin:5px; background:#000000; border: 2px solid #00c600; color:#FFFFFF; } textarea { width: 530px; padding: 10px; margin:5px 4px;} input:focus, select:focus, textarea:focus, input:hover { background:#00c600; border: 2px solid #00c600; color:#000000; } .contactlabel { width:50px; float:left; display:inline-block; padding-top: 15px; } /* STRUCTURE */ div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */ #page-wrap { width: 962px; margin: 0px auto; min-height: 100%; height: auto !important; height: 100%;} /* HEADER */ #logo { width: 328px; height:147px; display:block; float:left; overflow:hidden;} #subscribe-top { width: 600px; display:block; float:right; text-align:right; } ul#subscribe-top { float: right; margin: 0; list-style: none; display: inline; width: 960px; } li.subscribe-text, li.subscribe-text a { display:inline; float:right; margin-top: 20px; font-weight:bold;} li.email-icon, li.email-icon a { background: url(images/email-icon.jpg) no-repeat; background-position: 0 0; display:block; float:right; width:52px; height:45px;} li.rss-icon, li.rss-icon a { background: url(images/rss-icon.jpg) no-repeat; background-position: 0 0; display:block; float:right; width:52px; height:45px;} li.press-icon, li.press-icon a { background: url(images/press-icon.jpg) no-repeat; background-position: 0 0; display:block; float:right; width:64px; height:45px;} li.rss-icon a:hover, li.email-icon a:hover, li.press-icon a:hover { background-position: 0 -45px;} #main-nav { width: 632px; height:147px; background:url(images/nav-bg.jpg) no-repeat right; display:block; float:left;} /* MAIN MAVIGATION */ #nav { margin: 40px 0 0 0;} ul#page-nav { float: left; margin: 0; list-style: none; display: inline; } ul#page-nav li, li.home, li.live, li.contact { margin-top:10px; position: relative; float: left; list-style: none; display: inline; text-indent: -9999px; margin-left:20px;} .home { width: 110px;} li.home a { background: url(images/navigation-sprite.jpg) no-repeat; background-position: 0 0; width: 110px; display:block; height:60px; padding:0;} body#wordpress ul#page-nav li.home a { background: url(images/navigation-sprite.jpg) no-repeat; background-position: 0 -60px; width: 110px; display:block; height:60px; padding:0; margin: 0;} li.live a { background:url(images/navigation-sprite.jpg) no-repeat; background-position: -117px 0; width: 176px; display:block; height:60px; padding:0;} ul#page-nav li.live a, body#wordpresspagelive ul#page-nav li.live a { background:url(images/navigation-sprite.jpg) no-repeat; background-position: -117px 0; width: 176px; display:block; height:60px; padding:0;} li.edinburghnav a { background:url(images/navigation-sprite.jpg) no-repeat; background-position: -303px 0; width: 170px; display:block; height:60px; padding:0;} li.contact a { background:url(images/navigation-sprite.jpg) no-repeat; background-position: -480px 0; width: 138px; display:block; height:60px; padding:0;} body#wordpresscontact ul#page-nav li.contact a { background:url(images/navigation-sprite.jpg) no-repeat; background-position:-480px -60px; width: 138px; display:block; height:60px; padding:0;} ul#page-nav li.home a:hover { background-position: 0 -60px; background-repeat:no-repeat; padding:0; margin: 0;} ul#page-nav li.live a:hover{ background-position: -117px -60px;} ul#page-nav li.edinburghnav a:hover { background-position: -303px -60px;} ul#page-nav li.contact a:hover { background-position: -480px -60px;} ul#page-nav li a:hover {background-position: 0 -60px;} .border-top { background: url(images/border-top.jpg) top no-repeat; display:block; width:960px; height:29px; float:left;} #content, #content-footer { background: url(images/bg-border.jpg) repeat-y; width:960px;} .newlinks { width:560px; margin:0; padding-top:10px; float:left;} /* BOOK TOUR */ #book-tour { display:block; float:left; } ul#book-tour { width: 140px; float: left; margin: 0 auto; list-style: none; display: inline; } li.book-tour-text, li.book-tour-text a { margin: 0; width:140px; float: left; display:block; font-size:1.1em; font-weight:bold; line-height: 1.3em; } li.book-tour-logo, li.book-tour-logo a { float: left; display:block; width:140px; height:230px; background:url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/homepagebuttons.jpg) no-repeat; background-position: 0 0;} li.book-tour-logo a:hover { background-position: 0 -230px;} /* LIVERPOOL */ #liverpool { display:block; float:left; } ul#liverpool { width: 140px; float: left; margin: 0 ;list-style: none; display: inline; } li.liverpool-text, li.liverpool-text a { margin: 0; float: left; display:block; font-size:1.1em; font-weight:bold; line-height: 1.3em;} li.liverpool-logo, li.liverpool-logo a { float: left; display:block; width:140px; height:230px; } li.liverpool-logo, li.liverpool-logo a { float: left; display:block; width: 140px; height:230px; background: url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/homepagebuttons.jpg) no-repeat; background-position: -140px 0;} li.liverpool-logo a:hover { background-position: -140px -230px;} /* YOUTUBE */ #youtube { display:block; float:left; margin: 0;} ul#youtube { width: 140px; float: left; margin: 0 auto; list-style: none; display: inline; } li.youtube-text, li.youtube-text a { margin: 0; float: left; display:block; font-size:1.1em; font-weight:bold; line-height: 1.3em;} li.youtube-logo, li.youtube-logo a { float: left; display:block; width: 140px; height:230px; background: url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/homepagebuttons.jpg) no-repeat; background-position: -280px 0;} li.youtube-logo a:hover { background-position: -280px -230px;} li.dvd-text, li.book-tour-text a, li.liverpool-text a, li.youtube-text a { text-align:center; padding:0 10px; font-weight:normal; width:120px;} /* DVD */ #dvd { display:block; float:left; margin: 0;} ul#dvd { width: 140px; float: left; margin: 0; list-style: none; display: inline; } li.dvd-text, li.dvd-text a { margin: 0; float: left; display:block; font-size:1.1em; font-weight:normal; line-height: 1.3em;} li.dvd-logo, li.dvd-logo a { float: left; display:block; width: 140px; height:230px; background: url(http://www.johnbishoponline.com/wp-content/themes/john-bishop/starkers/images/homepagebuttons.jpg) no-repeat; background-position: -420px 0;} li.dvd-logo a:hover { background-position: -420px -230px;} /* EDINBURGH2010 AND charity DVD*/ #johnbishopsbritain { background:url(images/edinburgh2010-empire.jpg) top no-repeat; width:112px; height:135px; margin-top:20px; overflow:hidden; float:left; padding:60px 30px 30px 130px; font-size:120%;} #johnbishopsbritain {background-position:-274px 0; padding-left:140px;} #johnbishopsbritain p { font-size:100%; padding: 3px 0 0 0; margin:0; line-height:normal; float:left;} /* MAIN CONTENT AREA*/ #main-col { width: 565px; float: left; margin: 0 0 0 40px; } .post { float: left;} .post-heading { width: 565px; padding-left:0; display:block;} .post-title { width: 565px; float: left; display:block; } .post-date { display: block; float:left; text-align: right; width: 29%; line-height:2.5em;} .flashvideo { clear: both; background:#000000 url(images/flashframe.jpg) top no-repeat; height:360px; width:545px; display:block; padding: 30px 0 0 30px;} ol li { border:#00CCFF 2px solid; width:525px; display:block; padding: 10px; margin:10px 0 0 10px;} ol li img { padding: 5px; border: 1px solid #d403d4; } .odd { border:#00c600 2px solid; width:525px; display:block; padding: 10px; margin-left:10px;} .count {float:right; font-size:0.5em; color:#fff; border: 1px solid #000; padding: 0 3px; font-weight: bold; display: block;} .comment-text { padding-left: 65px; font-size: 0.85em; margin: 0 0 10px 0;} .comment-date { font-size: 0.95em; float: right; line-height:1.6em;} .formobj, .personalinfo { margin-top: 10px;} .other-pages { margin: 0 0 0 30px; width:300px; float:left; text-align:center;} .other-pages img, .lfctv img { vertical-align:middle;} .lfctv { margin: 0 30px 20px 30px; width:108px; float:left; text-align:center;} .single-tour-date {font-size: 140%; margin:30px 0 30px 0;} /* LIVE SUB MENU */ #live-sub-menu { width:565px; float:left; margin: 0 0 20px 0;} ul#sub-nav { float: left; margin: 0; list-style: none; display: inline; } ul#sub-nav li, li.edinburgh, li.tour, li.istanbul { position: relative; float: left; list-style: none; display: inline; text-indent: -9999px;} li.edinburgh a { background: url(images/live-sub-menu.png) no-repeat; background-position: 0 -90px; width: 150px; display:block; height:90px; padding:0; margin: 0;} li.tour a { background:url(images/live-sub-menu.png) no-repeat; background-position: -150px -90px; width: 110px; display:block; height:90px; padding:0;} li.istanbul a { background:url(images/live-sub-menu.png) no-repeat; background-position: -380px -90px; width: 180px; display:block; height:90px; padding:0;} li.otherdates a { background:url(images/live-sub-menu.png) no-repeat; background-position: -260px -90px; width: 120px; display:block; height:90px; padding:0;} li.edinburgh a:hover { background-position: 0 0;} li.tour a:hover { background-position: -150px 0;} li.istanbul a:hover { background-position: -380px 0;} li.otherdates a:hover { background-position: -260px 0;} /* SIDEBAR SUB MENU */ ul.side-nav { float: left; margin: 0; list-style: none; display: inline; padding-left:18px; } ul.side-nav li, li.edinburgh, li.tour, li.istanbul { position: relative; float: left; list-style: none; display: inline; text-indent: -9999px;} li.side-edinburgh a { background: url(images/sidebarmenu.png) no-repeat; background-position: 0 0; width: 244px; display:block; height:60px; padding:0; margin: 0;} li.side-tour a { background:url(images/sidebarmenu.png) no-repeat; width: 244px; display:block; height:60px; padding:0;} li.side-tour a:hover { background-position: 0 -60px;} /* SIDEBAR */ #sidebar { width: 300px; position: relative; float: right; margin-right: 20px;} .vid-container { width:224px; display:block; float: left; text-align:center; padding:0 10px 0 20px;} ul.vid-excerpt { width: 224px; display: inline; float:left;} li.more-blogs { clear: both; text-align:center; padding: 15px 0 0 0; font-weight:bold;} .vid-excerpt, li.vid-excerpt, li.vid-excerpt a { width: 224px; height:227px; float:left; background: url(images/vid-bg.png) no-repeat top; display:block; background-position: 0 0;} .vid-excerpt img { padding: 22px 0 0 0;} .vid-excerpt-text { padding: 2px 0 5px 15px; display:block;} .dates img { display: inline; float:left; vertical-align:middle; } li.dates { background:url(images/arrow.png) left no-repeat; display:block; float:left; height:40px; padding: 5px 10px 0 50px;} .sidebar-text, .contact-text { margin: 10px 0 0 15px; clear:both; float:left; width: 281px; padding-right:10px;} .contact-text p { line-height:2em; padding: 5px 20px;} .submenu-text { clear:both; padding:0 0 10px 20px; font-weight:bold;} #mailing-list { padding:0 0 20px 0; text-align:center; font-size:120%; font-weight:bold;} #mailing-list p { padding:0 0 0 18px ;text-align:left; font-size:90%; font-weight: normal;} /* FOOTER */ #content-footer { background: url(images/bg-border.jpg) repeat-y; width:960px; float:left; margin:0; display:block; font-size:95%; } .border-footer { background: url(images/border-footer.jpg) top no-repeat; display:block; float:left; width:960px; height:35px;} .footer-text-links { margin: 0 40px; padding-left:40px; width:240px; float:left;} .footer-text { margin: 0 30px; width:240px; float:left;} /* TWITTER BOX */ .twitterbg { background:url(images/twitterbox-bg.png) repeat-y;} .twitterbox-foot { background:url(images/twitterbox-foot.png) no-repeat; margin:0; padding: 15px 25px 0 0; text-align:right; height:45px; font-size:125%; color:#d403d4; font-weight:bold;} li.twitter-item { padding:10px;} .twitter-timestamp { color:#00bdf2; clear:both;} abbr, acronym { border-bottom: none;} p.twitter-message { padding:5px; width:200px;} a.twitter-link: the tweet link class a.twitter-user: the @username reply link class /* scrollbar*/ .holder {float: left;} .scroll-pane {width: 243px; height: 250px;overflow: auto;background: none;padding: 5px 0 15px 20px;} #tweets { height:1100px;} .scroll-pane ul li {padding:5px;} .jScrollPaneDrag {position: absolute;background: #006e00;cursor: pointer;overflow: hidden;} .jScrollPaneTrack {position: absolute;cursor: pointer;right: 0;top: 0;height: 100%;background: #004900;} .jScrollPaneContainer {position: relative;overflow: hidden;z-index: 1;} .jScrollPaneDragTop {position: absolute;top: 0;left: 0;overflow: hidden;} .jScrollPaneDragBottom {position: absolute;bottom: 0;left: 0;overflow: hidden;} /*LIVEARCHIVE*/ .livedate {float:left; width:50%;} .availability {float:left; width:43%; font-weight:bold; font-size:165%;} /*EDINBURGH2010*/ #edinburgh2010 { float:left; } #edinburgh2010 p { float:left; clear:both; font-size:150%; margin:0; padding:5px 0; display:block;width:580px;} #edinburgh2010 img { padding:0 10px 10px 0; vertical-align:text-top; float:left;} #edinburgh2010 blockquote { font-weight:bold; font-size:120%; color:#00CCFF; clear:both; float:left; width:580px; margin:0;} #edinburgh2010 blockquote p { margin:0;} #edinburgh2010 small { font-size:80%; color:#fff; clear:both;} #reviews2010 { position:relative; float:left; clear:both; margin:15px 0;display:block;} #reviews2010 h3 {font-size:175%;width:500px;} #reviews2010 p {padding:5px 0;} #reviews2010 .blue { color:#00bdf2;} #reviews2010 .pink { color:#d403d4;} #reviews2010 .stars { color:#ff0; font-size:150%; padding:0 10px;}