/*------------------------------------------------------------------------------
>>>>  Default Blueprint CSS 
      This provides the styles for Blueprint's default templates.
      You can discard it entirely, or simply delete or comment out the irrelevant
      parts.
      
      This stylesheet is divided into several sections:
      + Reset (to give you a blank CSS canvas on which to work)
      + Sample colours and embellishments (the first bit you should delete - this
        provides tweaks to make the default templates look nice, and probably
        isn't relevent when you're putting together a fresh design)
      + Layout
      + Basic typography (in ems) with simple table styles
      + Mimetypes (presentation of download / view links for non-image assets)
      
      Following these sections, there are styles for each of the default blueprint
      modules. They are namespaced with the module code (i.e. blg, evt, nws),
      which is is applied to the body in the main default layout.

      We're always keen to hear about things that might make the default templates
      easier to comprehend and to use.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

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, font, img, 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: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}

/* For IE */
img { -ms-interpolation-mode:bicubic; } 

a img {
  border: none;
}

a, a:link { text-decoration: none; }
a:visited { }
a:hover { }
a:active { }

.text a {
  color: #111;
  border-bottom: 1px dotted #333;
}
.text a:hover {
  background: #e1e1e1;
}
.text h1 a {
  border: none;
}
.text h1 a:hover {
  background-color: transparent;
  color: #000;
}
/*------------------------------------------------------------------------------
>>>> Sample site colours + layout + nudges + small embellishments 
     Beware: some of this stuff isn't IE-friendly.
     Commenting out this section will give you a vanilla canvas.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

body { 
  color: #07181d; 
  color: #333;
  background-color: #e1e1e1;
  text-shadow: rgba(255, 255, 255, .01) 0px -1px 1px; 
  font-family: Helvetica, Arial, sans-serif;
  font-size: 82%;
}
a {
  color: #333;
}


/*------------------------------------------------------------------------------
>>>> Layout
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.container {
  width: 950px;
  margin: 0 auto;
}

/* First pass at the grid */

.unit {
  background-color: red;
}

.unit1, .unit2 {
  float: left;
}
.unit1 {
  width: 150px;
  margin-right: 10px;
}
.unit2 {
  width: 310px;
  margin-right: 10px;
}
.unit3 {
  width: 470px;
  float: left;
  margin-right: 10px;
}
.unit4 {
  width: 630px;
  float: left;
  margin-right: 10px;
}
.unit5 {
  width: 790px;
  float: left;
  margin-right: 10px;
}
.unit6 {
  width: 950px;
  margin: 0;
  float: left;
}
.inner {
  padding: 10px;
}
.masthead .inner {
  padding-top: 6px;
}
.filter .inner {
  padding: 6px 10px;
}
.footer .inner {
  padding: 5px 10px;
}
/* Main areas */

#strap {
  width: 100%;
  overflow: hidden;
  margin: 10px 0;
}

#feature {
  height: 300px;
  background: transparent;
  margin: 20px 0;
  overflow: hidden;
  width: 100%;
}
.content {
  background: #fff;
  margin-bottom: 20px;
}
.footer {
  clear:both;
  font-size: 90%;
  padding-top: 0.5em;
  margin-top: 3.0em;
}
.byline {
  padding-top: 0.5em;
  font-size: 90%;
  text-align: center;
}

/*------------------------------------------------------------------------------
>>>> Masthead, breadcrumbs & tabs
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.masthead a.logo {
  display: block;
  background-image: url(/static/images/proof.png);
  width: 154px;
  height: 185px;
  float: left;
  background-color: #333;
}
.masthead {
  width: 100%;  
  overflow: hidden;  
  padding: 0;
  margin: 20px 0 10px 0;
  text-align: left;  
}
.masthead .title {
  font-size: 2.5em;
  margin-top: 30px;
  text-align: center;
  padding-bottom: 0.8em;
  letter-spacing:0.05em;  
}
.strap { /* Contains breadcrumbs and shoppping cart */
  height: 2.5em;
  padding-top: 0;
}
.breadcrumbs {
  padding: 0.5em 0;
  font-size: 0.8em;
}

li#home { /* The 'home' link in the main nav */ }

/* Plain text-link style nav */

ul.textNav {
  clear: both;
  display: block;
  padding: 12px 0 0 0;
  margin: 0;
  list-style-type: none;
}
ul.textNav li {
  float: left;
  margin-right: 1px;
  line-height: 100%;
  font-weight: bold;
}
ul.textNav li a {
  background: #fff;
  display: block;
  width: 143px;
  padding: 6px 8px;  
}
.textNav li#last {
  margin-right: 0;
}
.textNav li#last a {
  width: 134px;  
}


/* Sidebar subnav */

.subnav ul ul {
  margin-top: 0.7em;
  margin-bottom: 0;  
}
.subnav a.active {
  font-weight: bold;
}


/*------------------------------------------------------------------------------
>>>> Basic Typography
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

em, i {
  font-style:italic;
}
b, strong {
  font-weight: bold;
}

h1 {
  font-size:2.6em;
  font-weight: normal;
  margin: 0;
  line-height: 90%;
  padding: 8px;
  letter-spacing: -0.04em;
  border-bottom: 1px solid #e1e1e1;  
}
h1 span {
  font-size: 87%;
}
h2 {
  font-weight: normal;  
  font-size: 1.4em;
  margin-top: 1.8em;
  margin-bottom: 0.7em;
}
h3 {
  font-size: 1.0em;
  line-height: 1.25;
  margin-top: 1.4em;  
  font-weight: bold;
  margin-bottom: 0.5em;
}
h4 {
  margin-top:2.0em;    
  font-size:1em;
  font-weight:bold;
  margin-bottom:0.5em;
}
.masthead h4 {
  margin-top: 2px;
}
h6 {
  font-size:1em;
  font-weight:bold;
}
p {
  line-height:115%;
  margin-bottom:1.0em;
}
ul, ol {
  padding: 0;
  margin:1.0em 3.0em 1.4em 1.8em;
}
ul ul, ol ol {
  margin-left: 1.8em;
}
li {
  line-height:130%;
  margin-bottom:0.7em;
}
dl {
  line-height: 130%;
}
dt {
  font-weight: bold;
  margin-bottom: 0;
}
dd {
  margin-bottom: 2.0em;
}
blockquote {
  margin: 1.6em 0;
  padding: 0 2.0em;
  border-left: 1px solid #ccc;
}
blockquote p {
  padding:0;
  margin:0 0 1.0em 0;
}
blockquote cite {
  font-style:italic;
  font-weight: bold;
  font-size:0.9em;
}
table {
  border-collapse: collapse;
  margin: 1.0em 0;
  padding: 0;
  font-size: 0.9em;
  width: 100%;
}
table td {
  text-align: left;
  vertical-align: top;
  padding: 0.3em 1.0em 0.3em 0;
  border-bottom:1px solid #ddd;  
}
table th {
  padding: 0.3em 1.0em 0.3em 0;
  font-weight: bold;
  text-align: left;  
  border-bottom: 1px solid #222;
}
table p {
  margin: 0.5em 0;
}

/*------------------------------------------------------------------------------
>>>> Generally helpful
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.error, .preview {
  border: 1px dashed red;
  padding: 1.0em 1.0em 0 1.0em;
}

.skip { /* For hidden skip-to-content link */
  display: none;
}
.back { /* Used for back-to-page links for blg, nws, evt */
  clear: both;
  padding-top:2.0em;
}
.go { /* Link to post or extended article */
  text-align: right;
}
.first { /* For the first item in series */
  margin-left: 0;
  padding-left: 0;
}
.last { /* For the last item in series */
  margin-right: 0;
  padding-right: 0;
  float: right;
}
.notFound { /* Where people / products don't have images */
  background: #ddd;
  text-align: center;
  padding: 3.5em 0;
  width: 100%;
}

/*  
  For convenience, the basic unit of all post-able blueprints is 'post'.
  Where there's a standard image associated with the post (products, people), the 
  post is further divided into .image and .body.
*/

#blg div.post {
  background: #fff;
  margin-bottom:10px;
  float: right;
}
 
 
/*------------------------------------------------------------------------------
>>>> Grid
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#grid {
  clear: both;
/*  width: 100%;*/
  width: 960px;
  min-height: 204px;
  overflow: hidden;
  margin-bottom: 10px;
}
#grid .artist, .result .artist { 
  height: 194px; 
  margin-bottom: 10px;
  display: block; 
  background: #fff;
  position: relative;
}

#grid .artist img {
  width: 100%;
}

#grid a.last, #grid div.last {
  width: 150px;
  margin-right: 10px;
  float: left;
}

a.name, span.name {
  display: block;
  margin: 5px 7px 0px 7px;
/*  font-weight: bold;*/
}
#grid div.artist:hover a.name {
  color: #fff;
}
span.tags {
  display: block;
  margin: 0 7px;
}

/* Mini slideshow */

.miniSlideshow {
  height: 150px;
  width: 150px;
}
.controller {
  background: url(/static/images/controller.png) top left no-repeat;
  position: absolute;
  top: 110px;
  left: 10px;
  z-index: 100;
  width: 132px;
  height: 27px;
  text-align: center;
}
.controller a {
  display: block;
  text-indent: -5000px;
  width: 30px;
  height: 26px;
  float: left;
}
.controller a.next {
  float: right;
  margin-right: 2px;
}
div.maxiController {
  background: transparent;
  position: relative;
  z-index: 100;
  width: 100%;
  margin: -35% 0 0 0;
}
.maxiSlideshow a.next {
  float: right;
  display: block;
  text-indent: -5000px;
  margin-right: 20px;  
  background: url(/static/images/maxi-right.png) top left no-repeat;
  width: 53px;
  height: 52px;
}
.maxiSlideshow a.prev {
  float: left;
  display: block;  
  text-indent: -5000px;  
  margin-left: 20px;
  background: url(/static/images/maxi-left.png) top left no-repeat;
  width: 53px;
  height: 52px;
}
/* Maxi slideshow */

.maxiSlideshow {
  height: 350px; 
/*  border: 1px solid red;*/
/*  width: 100%;*/
}

/*------------------------------------------------------------------------------
>>>> Feature section
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#feature .maxislideshow {
  
}

#feature .bio {
  height: 300px;
}


/*------------------------------------------------------------------------------
>>>> Artist page
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#jwgart .keyImage img {

}
.info { /* wraps the top section */
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}
.bio, .downloads {
  background: #fff;
  position: relative;
}
.filter {
  background: #ccc;
  margin-bottom: 10px;
}

.tearsheets a {
  display: block;
  margin: 8px 0;
  font-weight: bold;
  padding: 5px 10px;
  color: #fff;
  border-bottom: none;
}

/*------------------------------------------------------------------------------
>>>> Roster
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.roster {
  background: #fff;
  overflow: hidden;
  clear: both;
}
.roster ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.roster ul li {
  padding-top: 6px;
  padding-bottom: 6px; 
  width: 140px;
  margin-right: 20px;
  height: 2.4em;
  border-bottom: 1px solid #ccc;
}
.roster li a {
  display: block;
}
.roster ul li.last {
  width: 130px;
  margin-right: 0px;
}
.roster ul li.last_row {
  border-bottom: 0;
}


/*------------------------------------------------------------------------------
>>>> Blog and Twitter
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.blog, .twitter {
  height: 152px;
  width: 319px;
  margin-right: 1px;
}
.blogIntro, .latestTweet, .emailSignup {
  background: #ccc;
  height: 110px;
}
.blogIntro p, .latestTweet p {
  line-height: 100%;
  margin-bottom: 0.4em;
}
.feed, .subscribe {
  background: #ccc;  
  height: 42px;
  margin-bottom: 1px;
  position: relative;  
}
.blogFeed {
  background: url(/static/images/feed.png) top left no-repeat;
  width: 23px;
  height: 23px;
  position: absolute;
  top: 8px;
  right: 8px;
}
.twitterFeed {
  background: url(/static/images/tweetie.png) top left no-repeat;
  width: 42px;
  height: 25px;
  position: absolute;
  top: 8px;
  right: 8px;
}
.twitter ul, .twitter ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.recent {
  list-style-type: none;
  padding: 0;
  margin: 8px;
}
ul.recent li {
  border-bottom: 1px solid #e1e1e1;  
  padding-bottom: 8px;
  margin-bottom: 8px;
}
ul.recent li a {
  font-weight: bold;
}


/* Pagination */


#blg div.pagination { font-weight: bold; clear: both;}



/*  >> Comments <<   */

#blg p.commentInfo,
#tlk p.commentInfo,
#mapblg p.commentInfo { /* Shows if comments are on or off, and how many */
  margin-top: 2.0em;
  text-align: right;
  font-size: 90%;
  font-weight: bold;
}
#blg div.cmt,
#tlk div.cmt,
#mapblg div.cmt {
  margin-bottom: 2.4em;
  font-size: 90%;
}
div.preview h4.commenter {
  margin-top: 0;
}
#blg div.preview a.hide,
#tlk div.preview a.hide,
#mapblg div.preview a.hide {
  color: red;
}


/*------------------------------------------------------------------------------
>>>> Events (EVT)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*------------------------------------------------------------------------------
>>>> Search (SCH) & Signup
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.signup {
  padding-right: ;
}

.signup input {
  margin-left: -4px;
  background: #fff;
  border:none;
}
.signup input.email {
  font-size: 11px;
  width: 128px;
  padding: 7px 5px;
  margin-bottom: 8px;
  background: url(/static/images/plain_input.png);  
}
.signup input.btn {
  width: 138px;
  height: 28px;
  text-align: left;
  font-size: 12px;
  color: #333;
  padding-left: 9px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  background: url(/static/images/submit.png);
}
.signup .corners input {
  background: transparent;
}

.miniSearch {
  padding-bottom: 4px;
  background: #ccc;
}
.miniSearch input.searchField {
  background: #ccc;
  border: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  width: 80%;
  color: #333;
}
.miniSearch input.searchField:focus, .signup input.email:focus {
  border: 0;
  outline: none;
  outline-offset: 0;
}
.miniSearch input.search, .miniSearch input.searchField {
/*  border: 1px solid red;*/
  float: left;
}
.miniSearch input.search {
  float: right;
  margin: -2px 0 0 0;
}
#blg .miniSearch {
  width: 290px;
  margin-top: 10px;
  margin-left: 10px;
}

.resultText {
  height: 194px;
}
.resultText h4 {
  margin-top: 0;
}

/*------------------------------------------------------------------------------
>>>> Contact form (CTT)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



/*-----------------------------------------------------
                     >> Images <<
                     
Sizes
size4/large: 630px
size2/medium: 310px
size1/small: 150px

Adjust accordingly!

-----------------------------------------------------*/

.captioned {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}
.captioned blockquote {
  background:none;
  margin: 6px 0 0 0;
  padding: 0;
  border: 0;
}
.captioned blockquote p {
  font-size: 0.85em;
  font-style: normal;
  line-height: 140%;
}
img.small, .smallCaptioned {
  float: left;
  width: 150px;
  margin: 0 10px 10px 0;
}
img.medium, .medCaptioned {
  float: left;
  width: 300px;
  margin: 0 10px 10px 0;
}
img.medium_right, .medium_rightCaptioned {
  float: right;
  width: 300px;
  position: relative;
  margin: 0 0 10px 10px;
}
img.large, .largeCaptioned {
  width: 608px;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  background:#fff;  
}
.largeCaptioned {
  margin: 1.7em 0;
  border: none;
  padding: 0;
}

.medCaptioned img, 
.med_rightCaptioned img,
.smallCaptioned img,
.small_rightCaptioned img,
.largeCaptioned img {
  float: none;
  margin: 0;
}

p.submit {
  text-align:center;
  margin-top:10px;
  width:100%;
  overflow:hidden;
}

.submit input {
  font-size:16px;
}




/*------------------------------------------------------------------------------
>>>> Mime-type display - the default behaviour when a file is inserted in text
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

a.download {
  display:block;
  overflow:hidden;
  border:1px solid #ccc;
  margin:0;
  padding:0;
  background:#eee;
  position:relative;
  text-decoration:none;
}
a.download:hover {
  background:#E6F1FF;
}
a.download label {
  margin:20px 0 0 0;
  padding:0;
  display:block;
  line-height:140%;
  float:left;
}
a.download label span {
  font-weight:bold;
  font-size:12px;
}
a.download img {
  float:left;
  margin:0;
  padding:3px 0;
  width:64px;
  height:64px
}


/*------------------------------------------------------------------------------
>>>> Search and Tags
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.tagCloud a {
  margin-right: 2%;
}

.cloud1 { font-size: 100%; }
.cloud2 { font-size: 110%; }
.cloud3 { font-size: 120%; }
.cloud4 { font-size: 130%; }
.cloud5 { font-size: 140%; }
.cloud6 { font-size: 150%; }
.cloud7 { font-size: 160%; }

/*------------------------------------------------------------------------------
>>>> Footer
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#footer {
  overflow: hidden;
  width: 100%;
  clear: both;
  margin: 20px 0;
}
.footer {
  background-color: #ccc;
}
.footer .inner {
  overflow: hidden;
  padding-bottom: 8px;
}
span.roe {
  display: block;
  float: left;
  text-align: left;
  width: 20%;
}
span.copyright {
  text-align: center;
  float: left;
  width: 55%;
}
span.madeby {
  display: block;  
  float: right;  
  text-align: right;
  width: 20%;
  text-align: right;
}


/*------------------------------------------------------------------------------
>>>> Uniform overwrites (remove the .uniForm class from forms to disregard)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* This is the main unit that contains our form elements */
.uniForm .ctrlHolder { padding: 0; }
.uniForm .buttonHolder { padding-top: 10px; }

.uniForm .inlineLabels label,
.uniForm .inlineLabels .label { 
  width: 40%; 
}
.uniForm .inlineLabels .textInput,
.uniForm .inlineLabels .fileUpload { 
  width: 54%; 
}

.uniForm .inlineLabels .selectInput,
.uniForm .inlineLabels select{ width: 54%;  }

.uniForm .inlineLabels textarea{  width: 54%; font-family: Helvetica, Arial, sans-serif; }

.uniForm .inlineLabels .formHint { 
  margin-top: 0; 
  margin-left: 42%; 
  font-size: .9em; 
  color: #777; 
  position: static; 
}
.uniForm .inlineLabels .multiField { 
  width: 54%; 
  margin: 0 0 .3em 0; 
}

.uniForm label.blockLabel { font-size: 90%; }
.uniForm .inlineLabels .blockLabel {
  width: 45%;
  margin-right: 5%;
/*  border: 1px solid red;*/
}
.uniForm .inlineLabels .expiry label.blockLabel { /* For credit card expiry date #shp */
  width: 46%;
}
.uniForm .inlineLabels .cc label.cardNumber { /* For credit card number #shp */
  width: 65%;
}
.uniForm .inlineLabels .cc label.cvv { /* For credit card expiry date #shp */
  width: 22%;
}
.uniForm .inlineLabels .address .textInput {
  width: 100%;
}
.uniForm .inlineLabels .address label {
  display: none;
}
.uniForm .ctrlHolder { 
  padding: 6px 0; 
  border-bottom: 1px solid #dfdfdf;
}
.uniForm .noBorder {
  border: 0;
}
.uniForm .inlineLabels p.formHint {
  font-size: 80%;
  padding-top: 0.8em;
  line-height: 130%;
}
