/*
    Document    : style.css
    Created on  : 10-Feb-2010, 11:23:20
    Author      : Paul Osborne

    #812990     : purple
    #c7d2eb     : violet
    #f26522     : orange


*/


a:link, #nav a:visited { color: #7285ac;}
a:hover { text-decoration: none; }




/* form style */

.form-errors {
    padding: 0.8em;
    background-color: #fff;
    border: 1px solid #999;
    margin-bottom: 1em;
    display: none;
}

ul.errors {
    margin-top: 0.5em;
}

ul.errors li {
    list-style-position: outside;
    list-style-type:circle;
    margin-left: 2em;
}


/* header styles */

#hd { 
    background: #c7d2eb url('http://www.barnsley4me.com/bc/assets/images/bg-header.png') no-repeat top;
    padding: 1em;
    background-color: #c7d2eb;
}
#hd .welcome    { margin: 1em 0 0em 0; }
#hd .logo       { float: left; margin: 0 2em 0 1em;  display: block; }
#hd p           {  display: inline-block; width: 640px;  }
#hd p.buttons   { margin-top: 0.8em;}

/* navigation */


#nav { display: block;height: 20px;  text-align: right; padding: 0.5em 0.5em; border-bottom: 1px solid #FFF;}

#hd .banner { float: right; text-align: left; display: inline-block; height: 60px; }

/* body */

#bd { background-color: #c7d2eb; margin: 0; padding: 0;}
#bd .yui-g { background-color: #ffffff; padding: 0.5em; }
#company-profile { padding: 1em; border: 1px dashed #CC0000; }
#company-media {  }
#company-testimonials { border: 1px dashed #0000CC; }


.two-column .column-left {
    width: 470px;
    margin-right: 15px;
    float: left;
    display: block;
}

.two-column .column-right {
    width: 460px;
    display: block;
    float: left;
}

p.upsell {
    width: 463px;
    height: 50px;
    border: 1px solid #000;
    padding: 0.5em;
    margin-bottom: 2px;
}



/* footer */

#ft {
    background: transparent url('http://www.barnsley4me.com/bc/assets/images/bg-footer.png') no-repeat top;
    height: 150px;
    padding-top: 1em;
}

#ft .logo { float: left; display: inline-block; margin-right: 1em; }
#ft .links {  margin-top: 1em; float: right;  display: block;  width: 80px; text-align: right; line-height: 20px; }
#ft p { margin-top: 2em; width: 500px; display: inline-block;}

.upsell {

    padding: 5px 0;
    height: 50px;
}

.upsell td {
    padding: 5px 0;
}

.gold {
    background-color: #ffedb6;
    
}


.focus {
    border: 1px solid #D00;
}

/* Start custom button CSS here
---------------------------------------- */

.btn {
      display:inline-block;
      background:none;
      margin:0 5px 0 0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font:100%/1.2 Arial,Sans-serif;
      text-decoration:none;
      color:#333;
      cursor: pointer;
      }
    * html button.btn {
      padding-bottom:1px;

      }
    /* Immediately below is a temporary hack to serve the
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
      }

    .btn span {
      background:#fff url(http://www.barnsley4me.com/bc/assets/images/bg-button.png) repeat-x 0 0;
      margin:0;
      padding:3px 0;
      border-left:1px solid #879ac1;
      border-right:1px solid #879ac1;
      }

    * html .btn span {
      padding-top:0;
      }

    .btn span span {
      position:relative;
      padding:3px .4em;
      border-width:0;
      border-top:1px solid #879ac1;
      border-bottom:1px solid #879ac1;
      }

    /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
    button.pill-l span {
      border-right-width:0;
      }
    button.pill-l span span {
      border-right:1px solid #bbb;
      }
    button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    button.pill-c span span {
      border-right: 1px solid #bbb;
      }
    button.pill-r span {
      border-left-color:#fff;
      }

    /* only needed if implementing separate hover/focus/active state for buttons */
    .btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus span span {
      cursor: pointer; /* important for any clickable/pressable element */
      border-color:#9cf !important;
      color:#000;
      }
    .btn:active span {
      background-position:0 -400px;
      outline:none;
      }
    .btn:focus, .btn:active {
      outline:none; /* doesn't seem to be respected for <button>, only <a> */
      }


/* root element for tabs  */
ul.tabs {
	list-style:none;
	margin:0 !important;
	padding:0;
	border-bottom:1px solid #666;
	height:30px;
}

/* single tab */
ul.tabs li {
	float:left;
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important;
}



/* link inside the tab. uses a background image */
ul.tabs a {
	background: url(../images/blue-tab.png) no-repeat -420px 0;
	font-size:11px;
	display:block;
	height: 30px;
	line-height:30px;
	width: 134px;
	text-align:center;
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs li a:hover {
	background-position: -420px -31px;
	color:#fff;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;
	cursor:default !important;
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */
div.panes div.pane {
	display:none;
        padding: 1em 0;
       height: 800px;
}

div.panes div.pane .pdf-holder {
    float: right;
    width: 200px;
    height: 300px;
    display: block;
    margin-left: 3em;
    text-align: center;

}

.upsell-price {
    font-weight: bold;
    font-size: 123.1%;
    padding: 0.5em;
    margin-top: 3em;
}