/*CCBot/2.0 - ccbot*/
html {font-size: 89%; }
html * { box-sizing: border-box; margin: 0; padding: 0; vertical-align: baseline;}
body { font-size: 0.7em; text-align: center; font-family: "Liberation Sans", Helvetica, Arial, sans-serif !important; text-align: left;  }

div#header { font-size: 1.8em;  padding: 0.5em; margin: 0.2em; height: 8.5em;  background-size: 100% auto; background-repeat: no-repeat; background-position:  0% 72%}
#header h1 {color: #000; height: 100%; background-color: rgba(240,240,240,0.7); /*background-image: url(./bgimg/profile.jpg); background-size: 10% auto; background-repeat: no-repeat; background-position:  98% 50%;*/ padding: 0.1em}
#header h2 {font-size: 1.8em; color: #230; margin-top: -2.2em; font-variant: normal; margin-left: 0.5em}
#header > #about {font-size: 0.72em;  margin-top: -6em; width: 70%; margin-left: 2em; height: auto; font-weight: 700;}
#header #statustext {font-size: 0.02em; float: right; width: 10em; position: relative; display: block; top: -10em;}

div#marginalia, div#me  { width: 30%; float: left; margin-left: 3.4em; font-size: 1.6em;  padding: 0.7ex; margin-top: 1.3em; }
div#content {width: 50%; 
font-size: 1.75em; 
float: left; 
padding: 0.8ex 0.8ex 4ex 0.8ex; 
margin-top: 1.3em;
margin-left: 0.3em; 
line-height: 145%;
}


#menu-head {display:none; visibility:hidden; margin: 0; padding: 0;}
ul#menu { font-size: 1.9em; position: absolute; top: 7.2em; left: 2em; background-color: rgba(240,240,240,0.9); border-bottom: 2px solid #ddd; border-top: 2px solid #ddd; }
#acc-head {display:none; visibility: hidden; padding:0; margin: 0}

@media all and (color) {
div#header {width: 99%; margin: 2em auto 1em auto;background-image: url(./bgimg/possbanner.jpg); }
div#content {margin-top: 1em; width: 55%;  }
div#marginalia, div#me  {margin-top: 1em; width: 34%;}
ul#menu { position: fixed; top: 0em; left: 0em; width: 100%; font-size: 1.9em; text-align: left; vertical-align: middle; background-color: rgba(240,240,240,0.9); border-bottom: 2px solid #ddd; border-top: 0px solid #ddd; height: auto; z-index: 2000}
}

.st4 {content: "****"; color: #f90; font-size: 2em; vertical-align: bottom; text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black; line-height: 50%; text-decoration: none; outline: none; border: none}
.st5 {content: "*****"; color: #f90; font-size: 2em; vertical-align: middle; text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;  line-height: 50%; text-decoration: none; outline: none; border: none}




a:link, a:visited { color: #993206;}
a:hover {color: #fff; background-color: #993206; }
hr { margin: 1.8ex auto; }
#header h1 > a:link, #header h1 > a:visited {color: #a80303; text-decoration: none;  }
#header h1 > a:hover {color: #000; background-color: transparent; }
#marginalia *, #me * {font-size: 0.95em;}
.more {text-align: right;}

label { display: block;}

pre {word-wrap: break-word;  white-space: pre-wrap; border-left: 4px solid #2d0; padding-left: 3px; font-size: 0.8em; background-color: #000; color: yellow; font-weight: 700; margin: 1.5em }
pre code {color: #fff}
pre var {color: lightblue}

sup[id^=fnref] {vertical-align: bottom; font-weight: 700; border: 1px solid #230; padding: 1px  } 
dt, h2 {color: #888; font-variant: small-caps;}
h2 {font-size: 210%; margin-bottom: 0.3em; line-height: 1.05}
h3 {font-size: 115%; margin-bottom: 0.3em;}

ul#menu li {display: inline;  margin:0em; padding: 0ex 0.5ex; text-align: center; font-weight: 700;font-variant: small-caps;  }


ul#menu li a {text-decoration: none;}
ul#menu li#statustext {float: right; background-color: #bbb; padding: 0ex; font-size:110%; width: 6em }
ul#menu li#statustext a:link, ul#menu li#statustext a:visited {color: #fff; display: block }
ul#menu li#statustext a:hover {color: green; background-color: yellow;}
.signedin {background-color: olivedrab !important}

#marginalia ul, #me ul {list-style-type: none;}
#marginalia ul li, #me ul li {margin-bottom: 6px;}
#marginalia:hover .comment, #me:hover .comment  {display: block; font-size: 9px; background-color: #ddd; border: 1px dotted; padding: 2em; max-width: 180px; position: absolute;  opacity: 0.7; left: 80%; top: 6em;}
dl#links {width: 18em; margin: 1em auto; }
dl#links dd a:link, dd a:visited {text-decoration: none;}
dl#links dd { display: inline-block; padding: 3px; text-align: center}

blockquote p cite { display: block; text-align: right;}

.fixed {position: fixed}
#marginalia.fixed {right: 2%;}

/*microformats*/
.value {visibility: hidden; font-size: 0px; height: 0; width: 0; opacity: 0;}
.vcard {font-size: 1.2em !important;}
.adr span {display: block;}


/* GIGS */
table.gigs { 
margin: 1em auto;
width: 80%;

border-collapse: collapse;
}
tr {
padding: 2em;
border-bottom: 1px solid #aaa;
}

thead tr > th { 
color: #250;
font-weight: 400;
font-size: 1.3em;
text-align: center;
/* border-bottom: 4px solid #520;*/
vertical-align: top;
}
td.det { 
vertical-align: top;
width: 40%;
}
td.det > span {
font-size: 1.1em;
}

td.ve {
font-size: 0.8em;
}

td.pr { 
text-align: center;
font-size: 1em;
color: #520;
font-weight: 700;
width: 5em;
}
th.da { 
font-weight: 700;
font-size: 1.1em;
color: #000;
text-align: left;
width: 8em;
border: 0px solid;
padding-left: 1ex;

}
td { 
padding: 4px;
}



/* categories */
th.gig_solo { border-left: 4px solid #090;}
th.gig_ag { border-left: 4px solid #009;}
th.gig_dae { border-left: 4px solid #900;}
th.gig_trio { border-left: 4px solid #990;}
th.gig_oth { border-left: 4px solid #000;}
th.gig_lyd { border-left: 4px solid #909;}
th.gig_rm { border-left: 4px solid #0c0;}
th.gig_or { border-left: 4px solid #cc0;}





/*SHOP*/

ul.shop { font-size: 0.8em; width: 100%; margin-left: 0em !important; }
ul.shop li {display: inline-block; width: 30%; padding: 0px; margin: 6px 3px; }
.photo {width: 100%; border: 2px solid #ddd; padding: 2px}
ul.shop li > a:link, ul.shop li > a:visited {text-decoration: none; background-color: transparent;}
ul.shop li > a:hover { background-color: transparent; color: #993206; }
ul.shop li > h3 {margin-bottom: 3px; font-size: 0.8em; text-align: center}
ul.shop li > p {background-color: #ccc; position: relative; bottom: 0px; padding: 0 !important; margin: 0 !important; font-size: 1em; font-weight: 700}





table.shop { border-spacing: 10px; }
table.shop thead {display: none;}
.thumb img {width: 170px;}
.photo img { width: 90px; border: 2px solid #223300}
tr.haudio .desc {font-size: 0.8em; width: 18em; }
tr.haudio .fn {font-size:1em; font-weight: 700; line-height: 1.1; text-decoration: none;}
tr.haudio a {text-decoration: none;}
tr.haudio .photo {width: 100px;  vertical-align: top;}
tr.haudio .price {font-size: 0.7em; font-weight:700; width: 20em;}


#cart > table, #mail_ord > table { border-spacing: 1px; border-collapse: collapse; height: auto; margin-bottom: 1ex;}
#mail_ord > table {font-size: 1em !important; width: 80%; margin: 1em auto;}
#cart table > tr, #mail_ord table > tr {height: auto; }
#cart table > tr > th[headers="item"] {width: 12em; font-size: 1em;}
#cart table > tr > th[headers="rem"] {width: 4em; font-size: 1.3em;}
td[headers="adesc"] {font-size: 0.9em;}
#cart table tr > th, #mail_ord table tr > th  {text-align: left; font-weight: 400; vertical-align: middle; padding-left: 1ex;}
#cart table tr > td, #mail_ord table tr > td { vertical-align: middle; padding: 1.5ex;}
.addbut, .rembut {text-decoration: none; font-size: 1.8em; font-weight: 700}
td > input[id^="qty"] { width: 2em;}

#cart input[type=submit] { margin: 1ex 1ex 3ex 1ex;}

#mail_ord input[type=text], #mail_ord label {margin: 1ex auto; display: block;} 
#mail_ord input[type=text] {font-size: 1.2em;}
label {color: #888; font-weight: 700; margin-bottom: 0.6ex}

.lipo {
border-bottom: 2px solid #000;
background-color: #820;

color: #fff;
}

.lidi {
border-bottom: 2px solid #000;
background-color: #280;

color: #fff;
}

.lito {
border-bottom: 2px solid #000;
font-size: 1.6em !important;
}
.ccbadge {width: 200px}

/*BLOG*/
.articles {list-style-type: none; }
.articles li {margin-bottom: 1em;  padding-bottom: 2em; border-bottom: 1px dotted #aaa;}
#content p, #content ol, #content ul, #content blockquote {margin: 1ex;}
#content ol, #content ul {margin-left: 4em;}
#content > blockquote { border-left: 4px solid #a80303; font-size: 0.9em; width: 80%; margin: 1ex auto; background-color: #f6f6f6}

#content > blockquote > ul, #content > blockquote > ol { list-style-position: inside; margin-left: 1em}
#content object {width: 90% !important; margin: 1em auto}
.note {border: 2px dotted #ccc; width: 65%;font-size: 0.8em; margin: 1.3em auto; padding: 2em;}  
#content blockquote .note { width: 90%}
.note iframe, .note object {width: 100% !important}

/*IMAGES*/
div.thumb {display: inline-block; width: 200px; margin: 0px 2px; text-align: center; vertical-align: top;}
div.thumb a {width: 200px; font-size: 0.4em}
div.thumb img {width:200px; }


/*COMMENTS*/
#comments {border-top: 1px solid #f30; margin: 4em auto; width: 80%;}
#comments blockquote {font-size: 1.1em; padding: 4px; margin-bottom: 0em; margin-top: 0em; font-style: normal; border-bottom: 3px dotted #ccc; padding: 8px;}
#comments blockquote:nth-of-type(odd) {background-color: #eee;}
#comments blockquote:last-of-type {border-bottom: 0px} 
blockquote:target:before {content: "<"; float: right;  left: 108px; position: relative; font-size: 128px; margin: 0; padding: 0; width: 72px;}
#comments blockquote h3 {font-size: 1em; margin-top: 0;}
#comments blockquote ol, #comments blockquote ul {margin-left: 1.5em}
/*#comments blockquote h3 address {display: inline; }*/
#comments blockquote h3 > span {display: block; font-size: 0.8em;}
#comments .reply {margin-top: 0.6em; width: 3em; display: inline-block}

#comments .reply input {font-size: 1.1em; font-family: "Liberation Sans", Helvetica, Arial, sans-serif !important;}
#comments .reply input:hover {cursor: pointer;}
#comments .comm_del:link, #comments .comm_del:hover  {border: 1px solid red; font-size: 1.1em; color: #444; background-color: #fcc; text-decoration: none; padding: 1px; position: relative; float: right; top: 0.6em; margin: 0;}
#comments p {font-size: 0.85em;}
#comments h2 > .rss_sr {font-size: 0.5em;} 

/*CONTACT FORM*/
#contactform fieldset{border: 0;}
legend {display: none;}
#contactform input[type=submit] {font-size: 1.3em;}
#email, #mess, #subj, #nom {width: 100%; font-size: 1.1em; margin: 1ex auto;}
.err {background-color: #fff !important; width: 80%; }
.exa {border: 2px solid #280; text-align: center !important; font-weight: 900; margin: 1.5em auto; padding: 0.6em; font-size: 1.3em }


/*SIGN-IN*/

form#oidform, form#emailform {margin: 1em auto; font-size: 0.8em;}
form > fieldset {border: 0}
#type {margin: 0 auto;}
#type > #send { text-align: left; float: right; font-size: 1.3em; }
#mark-box {text-align: left; border: 3px solid black; padding: 1ex; background-color: rgba(250, 270, 250, 0.85);margin: 4em auto; font-size: 0.8em; width: 30em;}
#whd {vertical-align: middle;margin-right: 6px}
label[for=whd] {display: inline; }
#mark-box ul {margin-left: 2em;}
.unc {margin-top: 18px;padding: 0; border-top: 2px solid #ccc; text-align: left;}
@media all and (min-width: 400px) {
.unc {display: none}
.unc * {margin: 0;padding: 0;text-align: left; font-size: 1.2em;}
.unc input {margin-top: 6px; display: inline; font-size: 1.2em;}
.unc input[type=submit] {font-size: 1.1em; padding: 1ex;}
input:checked ~ .unc {display: block;}
#aol_i:checked ~ .unc strong, #wordpress_i:checked ~ .unc strong, #facebook_i:checked ~ .unc strong, #blogger_i:checked ~ .unc strong, #claimid_i:checked ~ .unc strong, #verisign_i:checked ~ .unc strong, #myopenid_i:checked ~ .unc strong, #livejournal_i:checked ~ .unc strong, #google_i:checked ~ .unc label, #msn_i:checked ~ .unc label,  #twitter_i:checked ~ .unc label,  #facebook_i:checked ~ .unc label, #myspace_i:checked ~ .unc label, #yahoo_i:checked ~ .unc label, #google_i:checked ~ .unc input[type=text], #myspace_i:checked ~ .unc input[type=text],#msn_i:checked ~ .unc input[type=text], #facebook_i:checked ~ .unc input[type=text], #twitter_i:checked ~ .unc input[type=text], #yahoo_i:checked ~ .unc input[type=text], input:checked ~ .unc em {display: none;}
#openid_i:checked ~ .unc span {display:none;}
input[type=radio] {width:0px; display:none; margin: 0; padding: 0}
input[type=radio] + label {margin:1ex 1ex 1ex 0ex; padding: 0em; color: #993206; font-weight: 700; min-width: 14em; text-align: left; cursor: pointer; display: inline-block !important;}
input[type=radio]:checked + label {color: #f30; border: 1px solid #f60;}
input[type=radio] + label > span {display: none;}

.oidbutton, .oidbutton fieldset {display: inline;  margin: 1ex 0.3ex }
.oidbutton #twitter_i {background-image: url(http://www.coreymwamba.co.uk/styles/icons/twitter.png)}
.oidbutton #msn_i {background-image: url(http://www.coreymwamba.co.uk/styles/icons/msn.png);}
.oidbutton #google_i {background-image: url(http://www.coreymwamba.co.uk/styles/icons/google.png);}
.oidbutton #facebook_i {background-image: url(http://www.coreymwamba.co.uk/styles/icons/facebook.png);}
.oidbutton #yahoo_i {background-image: url(http://www.coreymwamba.co.uk/styles/icons/yahoo.png);}
.oidbutton #myspace_i {background-image: url(http://www.coreymwamba.co.uk/styles/icons/myspace.png);}
.oidbutton #webid_i {background-image: url(http://www.coreymwamba.co.uk/styles/icons/webid.png); }
#webid_i:hover {background-color:transparent;}
.oidbutton input[type=submit], .oidbutton #webid_i {cursor: pointer; width: 48px; height: 48px; border: 0px; background-color: transparent; color: transparent; display: inline-block; padding: 0;}
}
#aboid, #usn { font-size: 1.4em }
#oidspinner #usn {width: 18em}
#oidspinner input[type=submit] {font-size: 1.5em}


#emailform label { font-size: 1.6em; text-align: left;}
#emailform input[type=text], #emailform input[type=number] {font-size: 1.8em; margin-bottom: 1.2em;}
#emailform input[type=text] {width: 16em;}
#emailform fieldset {margin: auto; display: inline-block; width: 52em; }

#login { font-size: 0.8em; list-style-type: none; padding:1ex; margin: 1ex;}
#login > li {margin: 1.5em auto; border-bottom: 1px solid #ddd; width: 95%; }

#login > li.sign_cancel {text-align: right; border-bottom: 0px; font-weight: 700}



#signin {display: none;}
#login {display: block; margin-bottom: 18em; width: 60em;  background-color: #fff; border: 3px solid #aaa }
#signin:target + #login {display: block; margin-bottom: 18em; width: 60em; height: 40em;  background-color: #fff; border: 3px solid #aaa }
@media all and (color) {
#login {display: none;}
#signin:target + #login { position: fixed; overflow-y: scroll; top: 1em; left: 2em; height: 40em;  z-index: 3000;  }
}

#status {float: right !important; color: #b00; }
.small {font-size: 0.6em !important;}
.msmall {font-size: 0.8em !important;}
.medium {font-size: 1.3em !important; }
.mlarge {font-size: 1.5em !important; }
.large {font-size: 2.5em !important; }
.centre { text-align: center;}
#content a.centre {display: block; font-size: 1.5em}

object.centre, embed.centre { margin: 1ex auto; width: 36rem; height: 30rem}
.rhs {text-align: right;}
.rf {float: right;}
.lf {float: left;}
.bold {font-weight: 700;}
.full {width: 90% !important;}
.thq {width: 70% !important;}
.thq + #marginalia {width: 20% !important}

/*buttons*/
.gr_but:link, .gr_but:visited, .gr_but {color: #fff;
font-weight: 700;
border: 1px solid darkgreen;
background-color: green;
border-radius: 4px;
box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
padding: 0.5% 2%; text-decoration: none; text-shadow:0 0 8px #ffd;}
.gr_but:hover {padding: 0.7% 2.2%; text-shadow:0 0 18px #ff0; background-color:lightgreen; cursor: pointer}
.block { display: block; margin: 0.5em;}
.buybut {display: block; margin: 1.8ex auto;}

/*SEARCH*/
#search input[type=submit]  {display: inline;}
#search input[type=text] { width: 72%; margin-right: 2px; font-weight: 700}
#fullsearch label {display: inline; width: 16em }
#fullsearch input[type=text] {width: 100%; font-size: 1.3em; border-bottom: 1px solid #333; background-color: #ddd}
#fullsearch input[type=submit] {font-size: 1.6em}

.ye_but:link, .ye_but:visited, .ye_but {color: #000;
font-weight: 700;
border: 1px solid gold;
background-color: yellow;
border-radius: 4px;
box-shadow: inset 1px 6px 12px lightyellow, inset -1px -10px 5px gold, 1px 2px 1px white;
padding: 0.5% 2%; text-decoration: none; text-shadow:0 0 8px #ffd;}
.ye_but:hover {padding: 0.7% 2.2%; text-shadow:0 0 18px #ff0; background-color:orange; cursor: pointer}

#watch {margin-top: 6px;}
#accessibility {font-size: 0.8em; position: absolute; top: 4em; left: 75%; }
#accessibility li {display: inline; }
#accessibility li a:link, #accessibility li a:visited  {visibility: hidden; }
#accessibility li a:focus {visibility: visible; }

.asp {content:"\0040"; }
.fsp {content:"\002e"; }

@media all and (-moz-min-device-pixel-ratio: 0.75) {

body {font-size: 70%}

.asp, .fsp {visibility: hidden;display: inline-block}
.asp { width: 14px !important; }
.fsp {  width: 4px !important;}
.asp:before {content:"\0040";visibility: visible;overflow: hidden; }
.fsp:before {content:"\002e";visibility: visible;overflow: hidden; }


}
@media all and (-webkit-min-device-pixel-ratio: 0.75) {
body {font-size: 75%}
.asp, .fsp {visibility: hidden;display: inline-block; font-size: 0em}
.asp { width: 12px !important; }
.fsp {  width: 4px !important;}
.asp:before {content:"\0040";visibility: visible;overflow: hidden; }
.fsp:before {content:"\002e";visibility: visible;overflow: hidden;position: relative; top: 14px}
}

@media all and (-webkit-min-device-pixel-ratio: 1.69) {
body {font-size: 50%}
}


@media all and (max-width: 400px) {
body {font-size: 40%;}

#accessibility li {display: block; }
div#header, div#header *, div#marginalia, div#me, div#content, div#signin, ul#menu, div#footer, #accessibility, #signin:target + #login, #mark-box, .note { position: static; float: none; width: 100% !important; margin: auto; background-image: none; height:auto !important; overflow: none; }
div#about {display: none;}
#accessibility li a:link, #accessibility li a:visited  {visibility: visible; }
/*div#marginalia, div#me { width: 24em}*/
div#marginalia *, div#me {font-size: 1.1em; width: auto !important}
div#content {min-height: 100%; height: auto; margin-top: 1em;}
.full {width: 100%;}
.thq {width: 100%;}
.thq + div#marginalia, .thq + div#me {width: 100% !important;}
dl#links {width: auto; margin: 1em auto; }
}