/* @override http://paulbellmusic.com/css/style.css?v=2 */

/* _________________________________________________

320 and Up boilerplate extension

Author: Andy Clarke
Version: 0.9b
URL: http://stuffandnonsense.co.uk/projects/320andup/
_____________________________________________________

1.ROOT
2.HEADINGS
3.TYPOGRAPHY
4.LINKS
5.FIGURES & IMAGES
6.TABLES
7.FORMS
8.BANNER header[role="banner"]
9.NAVIGATION nav[role="navigation"]
10.CONTENT
11.MAIN div[role="main"]
12.COMPLIMENTARY div[role="complementary"]
13.CONTENTINFO footer[role="contentinfo"]
14.GLOBAL OBJECTS
15.VENDOR-SPECIFIC 
16.TEMPLATE SPECIFICS
17.MODERNIZR

COLOURS 

*/

@import url(mylibs/forms.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, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin : 0;
padding : 0;
border : 0;
font-size : 100%;
font : inherit;
vertical-align : baseline; }

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display : block; }

blockquote, q { 
quotes : none; }

blockquote:before, 
blockquote:after,
q:before, 
q:after { 
content : ""; content: none; }

del { 
text-decoration : line-through; }

ins { 
background-color : rgb(255,255,153); 
color : rgb(0,0,0); 
text-decoration : none; }

mark { 
background-color : rgb(255,255,153); 
color : rgb(0,0,0); 
font-style : italic; 
font-weight : bold; }

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 rgb(204,204,204);
margin : 1em 0; 
padding : 0; }

html {
overflow-y : scroll;
background : rgb(255,255,255) /* url(../img/tmp/grid.png) repeat-y 50% 0 */;
background : #f6f6f6 url(../img/bg_alt.jpg);
}

body { 
margin : 0 auto;
padding : 24px 0;
width : 90% /* 252px */;
font : 100%/1.4 "Helvetica Neue", Helvetica, Arial;
color : rgb(40,40,40); 
background-color : transparent; 
}

/* 2.HEADINGS */

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
font-family : "Helvetica Neue", Helvetica, Arial;
font-weight : bold; }

h1, h2{
	font-family: 'Special Elite', 'Helvetica Neue', sans-serif;
}

h1 { 
margin-bottom : .25em;
font-size : 3em; /* 48 / 16 = 3 */
line-height : 1.2; }

h2, .complementary h1 { 
margin-bottom : .5em;
font-size : 2em; /* 36 / 16 = 2 */
line-height : 1.2; }

h3 { 
margin-bottom : 1em;
font-size : 1.5em; /* 24 / 16 = 1.5 */
line-height : 1.3;
font-weight: normal; }

h4 { 
margin-bottom : 1.25em;
font-size : 1.25em; /* 20 / 16 = 1.25 */
line-height : 1.25; }

h5 { 
margin-bottom : 1.5em;
font-size : 1em; /* 16 / 16 = 1 */ }

h6 { 
font-size : 1em; /* 16 / 16 = 1 */ }

/* 3.TYPOGRAPHY */

p, 
ol, 
ul, 
dl, 
address { 
margin-bottom : 1.5em; 
font-size : 1em; /* 16 / 16 = 1 */ }

ul, 
ol { 
margin : 0 0 1.5em ; 
padding-left : 24px; }

ul { 
list-style-type : disc; }

ol { 
list-style-type : decimal; }

li ul, 
li ol { 
margin : 0;
font-size : 1em; /* 16 / 16 = 1 */ }

dl, 
dd { 
margin-bottom : 1.5em; }

dt { 
font-weight : normal; }

blockquote  { 
margin : 0 0 1.5em -24px; 
padding-left : 24px; 
border-left : 1px solid rgb(200,200,200);
font-style : italic; }

blockquote:before, 
blockquote:after, 
q:before, 
q:after {
content : '';
content : none; }

b, 
strong	{ 
font-weight : bold; }

i, 
em { 
font-style : italic; }

sup, 
sub { 
position : relative;
font-size : 75%; 
line-height : 0; }

sup { 
top : -.5em; }

sub { 
bottom : -.25em; }

address { 
font-style : normal; }

pre { 
margin-bottom : 1.5em; 
white-space : pre; 
white-space : pre-wrap; 
word-wrap : break-word; }

pre, 
code { 
font : .875em 'andale mono', 'lucida console', monospace; 
line-height : 1.5; }

small {
font-size : 1em; /* 16 / 16 = 1 */ }

/* 4.LINKS */

a, 
a:visited {
outline : none;
color : rgb(23,119,175);
text-decoration : none; }
 
a:hover { 
outline : none;
color : rgb(40,40,40); 
text-decoration : underline; }
 
a:active, 
a:focus { 
outline : none;
color : rgb(0,0,0); }

/* 5.FIGURES & IMAGES */

figure {
margin-bottom : 1.5em; }

figure img,
figure object,
figure embed {
margin-bottom : .75em;
max-width : 100%; }

figcaption {
display : block;
font-weight : normal; }

/* 6.TABLES */

table { 
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 1.4em; 
width : 100%;
font-size : .875em; /* 14 / 16 = .875 */ }

th { 
font-weight : bold; }

th, td, caption { 
padding : .25em 10px .25em 5px; }

tfoot { 
font-style : italic; }

caption { 
background-color : transparent; }

/* 7.FORMS (See css/mylibs/forms.css) */
label{
	display: block;
	margin-top: 3px;
}

input, select{
	margin-bottom: 5px;
}

/* 8.BANNER */
header[role=banner] img,
header.banner img{
	width: 100%;
	margin-bottom: 5px;
}

header[role=banner] h1, header[role=banner] h2,
header.banner h1, header.banner h2{
	font-weight: normal;
	font-size: 3.5em;
	margin-bottom: -.25em;
}

header[role=banner] h2,
header.banner h2{
	font-size: 1.6em;
	margin-bottom: .25em;
}

/* 9.NAVIGATION */

nav{
	border-bottom: 15px solid #b0b0b0;
	border-top: 15px solid #b0b0b0;
	padding-top: 1.5em;
	margin-bottom: 2em;
	overflow: hidden;
	padding-bottom: 1.5em;
}

.rgba nav{
	border-bottom-color: rgba(0,0,0,.2);
	border-bottom-top: rgba(0,0,0,.2);
}

nav ul{
	margin-left: -24px;
}

nav ul li{
	list-style-type: none;
	display: inline;
}

nav ul a, nav ul a:visited{
	display: block;
	padding: 5px 0;
	width: 46%;
	float: left;
	text-align: center;
	background: #c1c1c1;
	margin: 0 2% 10px;
	font-size: 1.1em;
	text-transform: uppercase;
	color: #333;
	border-radius: 15px;
}

.rgba nav ul a{
	background: rgba(0,0,0,.1);
}

nav ul li span{
	display: none;
}

.content nav{
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	margin-bottom: 1.5em;
}

.content nav li a{
	font-size: .9em;
	border-radius: 10px;
}

.about header[role=banner] nav .about a,
.gigs header[role=banner] nav .gigs a,
.blog header[role=banner] nav .blog a,
.blog header.banner nav .blog a,
.news header[role=banner] nav .news a,
.home header[role=banner] nav .home a
{
	background: #333;
	color: #eee;
}

nav.p_response_widget{
	color: #000;
}

nav.p_response_widget .p_responses_link a{
	padding: 0  10px!important;
	background: none;
}

/* 10.CONTENT */
/* 11.MAIN */
div[role=main] section,
div.main section{
	border-bottom: 15px solid #b0b0b0;
}

.rgba div[role=main] section,
.rgba div.main section{
	border-bottom-color: rgba(0,0,0,.2);
}

div[role=main] section:last-child,
div.main section:last-child{
	border-bottom: 0;
}

.blog .main{
	position: relative;
}

section#extra_links{
	border-bottom: 0;
	font-size: .8em;
	position: absolute;
	right: 3em;
}

/* 12.COMPLEMENTARY */
div[role=complementary] .email-updates p,
div.complementary .email-updates p{
	margin-top: 1em;
	font-size: .9em;
}


/* 13.CONTENTINFO */

/* 14.GLOBAL OBJECTS */

.clearfix { 
zoom : 1; }

.clearfix:before, 
.clearfix:after { 
content : "\0020"; 
display : block; 
height : 0; 
overflow : hidden; }

.clearfix:after { 
clear : both; }

footer{
	margin-top: 1em;
}

.latest-video iframe{
	width: 100%;
	max-width: 425px;
}

.album-embed, .tweets{
	display: none;
}

/* 15.VENDOR-SPECIFIC */

body {
-webkit-text-size-adjust : 100%; 
-ms-text-size-adjust : 100%; }

a:link { 
-webkit-tap-highlight-color : rgb(52,158,219); }

::-webkit-selection { 
background : rgb(23,119,175); 
color : rgb(250,250,250); 
text-shadow : none; }

::-moz-selection { 
background : rgb(23,119,175); 
color : rgb(250,250,250); 
text-shadow : none; }

::selection { 
background : rgb(23,119,175); 
color : rgb(250,250,250); 
text-shadow : none; }

nav ul li a{
	-moz-border-radius: 15px;	
}

.content nav li a{
	-moz-border-radius: 10px;	
}

/* input[type=search] {
-webkit-appearance : none; }

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
display : none; } */

::-webkit-input-placeholder {
padding : 10px;
font-size : .875em; 
line-height : 1.4; }

input:-moz-placeholder { 
padding : 10px;
font-size : .875em; 
line-height : 1.4; }

.ie7 img,
.iem7 img { 
-ms-interpolation-mode : bicubic; }

div,
input,
textarea  { 
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box; }

/* Non-semantic helper classes */

/* Image replacement */
.ir { 
display : block; 
text-indent : -999em; 
overflow : hidden; 
background-repeat : no-repeat; 
text-align : left; 
direction : ltr; }

/* Hide for screenreaders and visual browsers */
.hidden { 
display : none; 
visibility : hidden; }

/* Hide visually */
.visuallyhidden { 
position : absolute;
clip : rect(0 0 0 0); 
overflow : hidden;
margin: -1px;
padding : 0;
height : 1px;      
width : 1px;
border : 0; }

/* Allow an element to be focusable via keyboard  */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
position : static;
clip : auto; 
overflow : visible;
height : auto; 
margin : 0;   
width : auto; }

/* Hide but maintain layout */
.invisible { 
visibility : hidden; }

/* 16.TEMPLATE SPECIFICS */

#goog-fixurl ul  {
list-style-type : none; }

#goog-fixurl input  {
margin-bottom : 1.5em; }

.content div section{
	margin-bottom: 2em;
}

#allalbums li{
	list-style-type: none;
}

#allalbums li img{
	float: left;
	margin: 0 10px 10px;
}

#allalbums h2{
	clear: both;
}

.imagelisting {
	padding: 0 0 1em;
	overflow: hidden;
}

.imagelisting li{
	width: 270px;
	float: left;
}

.gigs .content ul li{
	list-style-type: none;
}

.gigs .content ul li{
	border-bottom: 1px solid #fff;
	margin-bottom: 1em;
}

.gigs .content ul li .date{
	font-size: .9em;
}

.gigs .content ul h3{
	margin-bottom: 0;
}

.blog .content .main img{
	float: none !important;
	margin: 0 auto;
}

.pre-order .main form img{
	border: 0 !important;
}

.pre-order .main form{
	text-align: center;
	padding: 1em;
	border: 1px solid #fff;
	background: rgba(255,255,255,.4);
	margin-bottom: 2em;
}

.pre-order .main form td{
	font-size: 1.4em;
}

/* 17.MODERNIZR */


@media print {
* { 
background : transparent !important; 
color : black !important; 
text-shadow : none !important; 
filter : none !important;
-ms-filter : none !important; } 

a, a:visited { 
color : #444 !important; 
text-decoration : underline; }

a[href]:after { 
content : " (" attr(href) ")"; }

abbr[title]:after { 
content : " (" attr(title) ")"; }

a[href^="javascript:"]:after, 
a[href^="#"]:after { 
content : ""; }
  
pre, blockquote { 
border : 1px solid #999; 
page-break-inside : avoid; }

thead { 
display : table-header-group; }

tr, img { 
page-break-inside : avoid; }

@page { 
margin : .5cm; }

p, h2, h3 { 
orphans : 3; 
widows : 3; }

h2, h3 { 
page-break-after : avoid; }
}/*/mediaquery*/

/* MEDIA QUERIES */

/*480px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 480px) {

/* 1.ROOT */


/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS (See css/mylibs/forms.css) */
/* 8.BANNER */
header[role=banner] h1, header[role=banner] h2,
header.banner h1, header.banner h2{
	font-weight: normal;
	font-size: 5em;
	margin-bottom: -.25em;
}

header[role=banner] h2,
header.banner h2{
	font-size: 2.5em;
	margin-bottom: .25em;
}
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLEMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */
}/*/mediaquery*/

/*768px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 768px) {

/* 1.ROOT */
html{
	background: #919191 url(../img/bg.jpg);
}
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS (See css/mylibs/forms.css) */
/* 8.BANNER */
header[role=banner] h1,
header.banner h1{
	color: #e9e9e9;
}

header[role=banner] h2,
header.banner h2{
	color: #cdcdcd;
	font-size: 1.8em;
}

.rgba header[role=banner] h1,
.rgba header.banner h1{
	color: rgba(255,255,255,.8);
}

.rgba header[role=banner] h2,
header.banner h2{
	color: rgba(255,255,255,.6);
}

header[role=banner] img,
header.banner img{
	display: none;
}

header[role=banner],
header.banner{
	background: url(../img/pb_1392.jpg) no-repeat top;
	padding-top: 22%;
	padding-top: 320px;
	min-height: 1px;
}

.backgroundsize header[role=banner],
.backgroundsize header.banner{
	background-size: 100% auto;
	padding-top: 22%;
}

/* 9.NAVIGATION */

nav{
	border: none;
	padding: 0;
	margin: 0;
}

nav ul li{
	display: inline;
}

nav ul{
	margin-bottom: .75em;
}

nav ul li a,
nav ul li a:visited{
	padding: 2px;
	text-transform: uppercase;
	background: #bbb;
	padding:.5em .63em;
	margin: 0 3px 0 0;
	width: auto;
	border-radius: 0;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	font-size: 1.05em;
}

.rgba nav ul a,
.rgba nav ul a:visited{
	background: rgba(255,255,255,.4);	
}

.about header.banner nav .about a,
.gigs header.banner nav .gigs a,
.blog header.banner nav .blog a,
.blog header.banner nav .blog a,
.news header.banner nav .news a,
.home header.banner nav .home a
{
	background: #d6d6d6;
	color: #000;
}

.rgba .about header.banner nav .about a,
.rgba .gigs header.banner nav .gigs a,
.rgba .blog header.banner nav .blog a,
.rgba .blog header.banner nav .blog a,
.rgba .news header.banner nav .news a,
.rgba .home header.banner nav .home a,
.rgba .contact header.banner nav .contact a
{
	background: rgba(255,255,255,.7);
}

.content nav li a{
	margin-right: 10px;
	padding: 5px 8px;
}

/* 10.CONTENT */
.content{
	background: #bbb;
	border-radius:8px;
	border-top-left-radius: 0;
}

.rgba .content{
	background: rgba(255,255,255,.5);
}

.content div[role=main] img,
.content div.main img{
	float: right;
	margin: 0 0 10px 10px;
	border: 10px solid #fff;
	border-radius: 8px;
}

/* 11.MAIN */
div[role=main],
div.main{
	float: left;
	width: 67%;
	background: #ddd;
	padding: 2%;
}

.rgba div[role=main],
.rgba div.main{
	background: rgba(255,255,255,.4);
}

/* 12.COMPLEMENTARY */
div[role=complementary],
div.complementary{
	float: right;
	width: 28%;
	padding: 2%;
	background: #cdcdcd;
}

.ie7 div[role=complementary],
.ie7 div.complementary{
	width: 22%;
}

.rgba div[role=complementary],
.rgba div.complementary{
	background: rgba(255,255,255,.2);
}

div[role=complementary] iframe{
	margin: 0 auto;
	background: #fff;
	border: 10px solid #fff;
	border-radius:5px;
}

div[role=complementary] h2,
div.complementary h2{
	margin-bottom: 0;
}

div[role=complementary] h3,
div.complementary h3{
	font-size: 1.1em;
}

.album-embed, .tweets{
	display: block;
}

/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */

footer{
	font-size: .95em;
}

footer ul li{
	list-style-type: none;
	display: inline;
	padding-right: 2em;
}

footer ul{
	margin: .5em 0;
}

footer, footer a, footer a:visited{
	color: #fff;
}

.social div{
	float: left;
	margin-right: 10px;
}

footer .social div{
	margin-left: 20px;
}

.social .social-tweet{
	padding-top: 2px;
}

/* 15.VENDOR-SPECIFIC */
nav ul li a{
	-moz-border-radius: 0;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

div[role=complementary] iframe{
	moz-border-radius: 5px;	
}

/* 16.TEMPLATE SPECIFICS */
.biog-facts ul{
	padding-left: 1.3em;
}

.latest-video h2{
	margin-bottom: 0;
}

.latest-video h3{
	font-size: 1.2em;
}

h3.date{
	font-size: 1.2em;
	margin-top: -1em;
	margin-bottom: .5em;
}

.hfeed article{
	border-bottom: 1px solid #fff;
	margin-bottom: 1.5em;
}

.hfeed article .more{
	margin-top: -.75em;	
}

/* 17.MODERNIZR */
}/*/mediaquery*/

/*992px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 992px) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS (See css/mylibs/forms.css) */
/* 8.BANNER */
header[role=banner] h2,
header.banner h2{
	font-size: 2.7em;	
}

/* 9.NAVIGATION */
nav ul li a,
nav ul li a:visited{
	padding: .5em .9em;
	font-size: 1.15em;
	margin-right: 4px;
}

nav ul li span{
	display: inline;
}

/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLEMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
.biog-facts{
	-moz-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	-webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
	-moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}

/* 16.TEMPLATE SPECIFICS */
.biog-blurb{
	float: left;
	width: 60%;
}

.biog-facts{
	float: right;
	width: 30%;
	background: #fff;
	padding: 1em;
	position: relative;
	top: -50px;
	right: 10px;
	border-radius:8px;
	transform:rotate(2deg);
	box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}

.content .about{
	overflow: hidden;
}
/* 17.MODERNIZR */

}/*/mediaquery*/

/*1382px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 1382px) {

/* 1.ROOT */
body{
	max-width: 1382px;
}
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS (See css/mylibs/forms.css) */
/* 8.BANNER */
/* 9.NAVIGATION */
nav ul li a,
nav ul li a:visited{
	margin-right: 10px;
}
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLEMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/

/*2x __________________________________________________________________________________________________________ */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/