/*           Style sheet for the bryce:FARRAH website              *
 *******************************************************************
 *                                                                 *
 *                                                                 *
        @version:	0.1
        @author:	Rob Edwards
        @copyright:	bryce:FARRAH 2008
 *                                                                 *
 *                                                                 *
 *******************************************************************
 *                                                                 */ 







/*
 *******************************************************************
 *
 *	Top level elements and classes
 *
 *******************************************************************
 */
 
    body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 62.5%; /*Makes 1em == 10px, 1.2em == 12px etc.*/
        margin: 0pt;
        text-align: center;
        
        background: #EBEBEB;
    }
    
    
    h1 {
        color: #5A1000;
        font-size: 1.5em;
        margin-bottom: 15px;
        font-family: Arial, sans-serif;
    }
    
    
    h2 {
        color: #666666;
        font-size: 1.25em;
        font-weight: bold;
    }
    
    
    h3 {
        color: #333333;
        font-weight: bold;
    }
        
    
    p {
        color: #333333;
    }
    
    
    small {
        color: #FFFFFF;
        font-size: 0.75em;
    }
    
    
    strong {
        color: #333333;
        font-size: 0.875em;
        font-weight: bold;
    }
    
    a {
        color: #333333;
        text-decoration: none;
    }
    
    
    a:hover {
        color: #FF9900;
        text-decoration: none;
    }
        
    
    .clear {
        clear: both;
    }
    
    .hide {
        display: none;
    }
    
    .bfOrange {
        color: #E58C00;
    }
    
    
/* ================= */
/* = Form elements = */
/* ================= */    
    form {
    	margin: 15px;
    	color: #666666;
    }
    
    form label {
    	display: block;
    	float: left;
    	width: 25%;
    	text-align:right;
    	margin:5px;
    }
    
    form label.error {
    	color: #5A1102;
    	width: 65%;
    	margin: 0 0 0 30%;
    	text-align: center;
    }
    
    form textarea {
    	margin:5px;
    	width: 65%;
    	height: 100px;
    }
    
    form input {
    	display: block;
    	float: left;
    	width: 65%;
    	margin:5px;
    	font-family: 'Trebuchet MS',arial,verdana,sans-serif;
    	font-size: 1.6em;
    }
    
    form input.submit {
    	margin-left: 29%;
    	width: 60%;
    }
    
    form br {
    	clear: left;
    }
    
    form .form-row{
    	width: 95%;
    }
    
    form .over{
    	background-color:#DADADA;
	}
	
	form p.error {
		color: #5A1102;
		margin-bottom: 0;
		margin-left: 35%;
	}
    
    
    
/*
 *******************************************************************
 *
 *	Container
 *
 *******************************************************************
 */


    #container {
        margin: 0pt auto;
        text-align: left;
        width: 1000px;
        padding-bottom: 10px;
        background: white;
    }





/*
 *******************************************************************
 *
 *	Header with logo
 *
 *******************************************************************
 */
 
 
    #header {
        min-height: 75px;
        height: auto !important;
        height: 75px;
        width: 960px;
        margin-left: 20px;
    }


    #header a img {
        float: left;
        margin-top: 10px;
    }
    
    
    #header ul {
        float: right;
        list-style: none;
        padding-top: 60px;
        font-size: 1.4em;
    }


    #header ul li {
        float: left;
        height: 25px;
        text-align: right;
        width: 85px;
        text-align: center;
        font-size: 1.2em;
    }


    #header ul li a {
        border-right: 1px solid #5A1000;
        color: #5A1000;
        display: block;
        height: 19px;
        line-height: 19px;
        font-weight: 400;
        margin-bottom: 3px;
        margin-top: 3px;
        width: 79px;
    }


    #header ul li a:hover {
        color: #FF9900;
    }


    #header ul .lastNavigation {
        border-right: none;
        width: 90px;
    }


    
    
    
/*
 *******************************************************************
 *
 *	Banner
 *
 *******************************************************************
 */
 
 
    #banner {
        background: #5A1000 url('../images/bfBanner.jpg') no-repeat center center;
        min-height: 300px;
        height: auto !important;
        height: 300px;
        width: 960px;
        margin-left: 20px;
    }
    
    #bannerHome {
        background: #5A1000 url('../images/homeBanner.jpg') bottom center;
        min-height: 369px;
        height: auto !important;
        height: 369px;
        width: 960px;
        margin-left: 20px;
    }
    
    #bannerHome #bannerContent {
        float: left;
        width: 550px;
        height: 300px;
        
        font-size: 2.2em;
        padding-left: 20px;
        
    }
    
    
    #bannerHome #bannerContent h1 {
        color: white;
        font-family: "trebuchet ms", "arial", "verdana";
        font-weight: 100 !important;
        text-transform: uppercase;
        margin-top: 150px;
        text-align: left;
        padding-left: 30px;
    }
    
    #bannerHome #gallery {
        float: left;
        margin-top: 15px;
    }
    
    
    #bannerHome #gallery img {
        background: white;
    }
    
    
    #banner #bannerLinks{
        font-size: 2.2em;
        font-family: "trebuchet ms", "arial", "verdana";
        font-weight: 100 !important;
        text-transform: uppercase;
        padding-top: 60px;
        text-align: center;
        line-height: 25px;
    }
    
    #banner #bannerLinks li {
        display: inline;
    }
    
    #banner #bannerLinks li a {
        color: white;
    }
    
    #banner #bannerLinks li a:hover {
        color: #FF9900;
    }
    
/*
 *******************************************************************
 *
 *	Navigation
 *
 *******************************************************************
 */
 
 
    #navigation {
        width: 960px;
        height: 26px;
        margin-top: 15px;
        background: #EFEFEF url('../images/navCornerLeft.gif') no-repeat bottom left;
        margin-left: 20px;
        margin-bottom: 5px;
        font-size: 1.2em;
    }
    
    
    #navigation ul li img{
        float: left;
    }
    
    
    #navigation ul li a:hover {
        color: #5A1000;
    }
    
    #navigation ul li a.current {
        color: #5A1000;
    }

    #navigation ul .lastNavigation {
        border-right: none;
    }
    
    #navigation ul .navImg {
        width: 2px;
        padding: 0px;
    }
    
    #navigation #navigationRightCorner {
        float: right;
        clear: none;
        width: 11px;
        height: 100%;
        background: #EFEFEF url('../images/navCornerRight.gif') no-repeat bottom left;
    }
    
    /* Styles for the LavaLamp menu */
    .lavaLamp {
        height: 26px;
        width: 640px;
        text-align: center;
        margin: 0px auto;
        position: relative;
    }
    
    
    .lavaLamp li {
        float: left;
        list-style: none;
        height: 26px;
        margin-left: 25px;
    }

    .lavaLamp li.back {
        background: #e0e0e0 url('../images/lavaRight.gif') no-repeat right;
        z-index: 8;
        position: absolute;
        height: 18px !important;
        margin-top: 4px;
        margin-left: 0px !important;
    }
    .lavaLamp li.back .left {
        background: #e0e0e0 url('../images/lavaLeft.gif') no-repeat top left;
        margin-right: 9px;
        height: 18px !important;
    }

    .lavaLamp li a {
        position: relative;
        text-decoration: none;
        color: #504F54;
        top: 4px;
        z-index: 10;
        margin: 3px 8px;

        line-height: 19px;
        font-size: 1.4em;
    }
        
    .lavaLamp li a:hover {
        color: #5A1000;
    }
    
    /*Sub Navigation*/
    
    #subNavigation {
        width: 960px;
        height: 26px;
    }
    
    #subNavigation ul {
        width: 860px;
        height: 26px;
        margin-left: 100px;
        margin-bottom: 15px;
        font-size: 1.7em;
        
    }
    
    #subNavigation ul li {
        display: inline;
        
        margin-left: 20px;
    }
    
    #subNavigation ul li a {
        color: #999999;
        font-weight: 500;
    }
    
    #subNavigation ul li a:hover {
        color: #666666;
    }
    
    #subNavigation ul li.current a {
        color: #666666 ;
        
    }




/*
 *******************************************************************
 *
 *	Content
 *
 *******************************************************************
 */
 
 
    #content {
        min-height: 250px; 
        height: auto !important;
        height: 250px;
        width: 960px;
        margin-left: 20px;
        
        color: #333333;
        font-size: 1.6em;
        line-height: 1.4em;
        font-weight: 100 !important;
        font-family: 'Trebuchet MS', arial, verdana, sans-serif;
    }
    
    #content p {
        margin-bottom: 15px;
    }
    
    
    #contentLeft {
        width: 530px;
        float: left;
        margin-right: 20px;
    }
    
    
    #contentLeft em {
        font-style: italic;
    }
    
    
    #contentLeft a {
        color: #333333;
        text-decoration: underline;
    }
    
    
    #contentLeft a:hover {
        color :#FF9900;
    }
    
    
    #contentLeft p {
        text-align: justify;
        
    }
    
    
    #contentLeft ul {
        padding-left: 20px;
        margin-bottom: 15px;
        list-style-image: url('../images/bf-semicolon.gif');
    }
    
    
    #contentLeft ul.crosses {
        list-style-image: url('../images/bf-x.gif');
    }
    
    
    #contentLeft ul li {
        margin-bottom: 5px;
    }
    
    
    #contentLeft #contactDetails {
        list-style: none;
    }
    
    
    #contentRight {
        width: 410px;
        float: right;
    }
    
    
    #contentRight ul {
        margin-left: 30px;
        font-size: 1.2em;
        font-weight: lighter;
        font-family: Helvetica, Arial, sans-serif;
    }
    
    
    #contentRight ul li {
        margin-bottom: 10px;
    }
    
    
/*
 *******************************************************************
 *
 *	Copy
 *
 *******************************************************************
 */
 
 
    #copy {
        float: left;
        min-height: 250px;
        height: auto !important;
        height: 250px;
        width: 538px;
        padding-top: 5px;
        
    }
    
    
    #copy p {
        color: #333333;
        text-align: justify;
        line-height: 1.4em;
        font-weight: 100;
        
        margin-left: 10px;
        margin-right: 30px;
        padding-top: 0px;
        margin-bottom: 20px;
    }
    

/*
 *******************************************************************
 *
 *	Whats new
 *
 *******************************************************************
 */
 
 
    #whatsNew {
        border-left: 2px dashed #5A1101;
        border-right: 2px dashed #5A1101;
        float: left;
        min-height: 250px;
        height: auto !important;
        height: 250px;
        width: 220px;
        padding-top: 5px;
        
        font-family: arial, verdana, sans-serif;
    }
    
    
    #whatsNew h2 {
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        letter-spacing: -1px;
    }
        
    
    #whatsNew h2 span {
        color: #FF9900;
    }
        
    
    #whatsNew p {
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0px;
        text-align: justify;
    }
        
    
    #whatsNew img {
        display: block;
        margin-bottom: 0px;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0px;
    }
        
    
    #whatsNew h3 {
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
    }
        
    
    #whatsNew h3 span {
        padding-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0px;
        
        color: #FF9900;
    }
    
    #whatsNew a {
        color: #333333;
        text-decoration: underline;
    }
    
    
    #whatsNew a:hover {
        color :#FF9900;
    }
    
    
    
    
    
/*
 *******************************************************************
 *
 *	Links and Information
 *
 *******************************************************************
 */			
 
    
    #linksAndInfo {
        padding-top: 5px;
        float: right;
        min-height: 250px;
        height: auto !important;
        height: 250px;
        width: 185px;
    }
    
    #linksAndInfo h2 {
        padding-bottom: 5px;
        text-align: center;
        letter-spacing: -1px;
    }
    
    #linksAndInfo h2.inContent {
        padding-top: 10px;
    }
    
    #linksAndInfo #info {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 10px;
        
        background: #EFEFEF url('../images/productsTop.gif') no-repeat top center;
        
        text-align: center;
    }
    
    
    #linksAndInfo #info li {
        display: inline;
        text-align: center;
    }

    #linksAndInfo #infoBottom {
        display: block;
        height: 14px;
        width: 185px;
        background: #FFFFFF url('../images/productsBottom.gif') no-repeat top center;
    }	
    
    #linksAndInfo #info li a {
        color: #FFFFFF;
        font-weight: 400;
        font-size: 1.0em;
        
        text-transform: uppercase;
    }
    
    
    #linksAndInfo #info li a:hover {
        color: #FF9900;
    }
    
    #linksAndInfo #info li .selected {
        color: #FF9900;
    }
    
    #linksAndInfo #socialinks {
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
    }
    
    #linksAndInfo #socialinks li {
        display: inline;
    }




/*
 *******************************************************************
 *
 *	Portfolio
 *
 *******************************************************************
 */
    .portfolioItem {
    	float: left;
        width: 450px;
        min-height: 166px; 
        height: auto !important;
        height: 166px;
        margin: 15px 15px 10px 15px;
        padding: 0;
    }
    
    
    .portfolioItem #mainLink {
    	display: block;
    	width: 100%;
    }
    
    .portfolioItem .portfolioThumb {
        width: 224px;
        height: 146px;
        background: url('../images/dropShadow.gif') no-repeat bottom right;
        float: left;
    }
    
    .portfolioItem ul {
    	float: left;
    }
    
    .portfolioItem ul li {
        margin : 0px 10px 15px;
        border: 0px !important;
        color: #333333;
    }
    
    .portfolioItem ul li h3{
        color: #761B02;
        display: inline;
    }
    
    .portfolioMore {
        text-align: right;
        width: 100%;
        clear:both;
    }
    
    .portfolioMore a {
        color: #761B02;
    }
    
    .portfolioMore a:hover {
        color: #761B02; 
    }
    
    #portfolioMoreTop {
        text-align: left;
        margin-bottom: 35px;
    }
    
    
    /*Details*/
    
    #portfolioDetails ul {
        margin-bottom: 30px;
        list-style: none;
    }
    
    #portfolioDetails ul li h3{
        color: #761B02;
        display: inline;
    }
    
    #portfolioDetails h3 {
        color: #761B02;
        display: block;
        margin-top: 10px;
    }
 
    #portfolioDetails .portfolioList {
        margin-left: 15px;
        margin-bottom: 15px;
        list-style-image: url('../images/bf-semicolon.gif');
    }
    
    #imageBlock {
        text-align:center;
    }
   
    
    
/*
 *******************************************************************
 *
 *	Footer
 *
 *******************************************************************
 */
 
 
    #footer {
        margin-top: 30px;
        background: black;
        min-height: 22px;
        height: auto !important;
        height: 22px;
        width: 960px;
        margin-left: 20px;
    }
    
    
    #footer a {
        display: block;
        float: left;
    }   


    #footer a img {
        width:80px;
        height:16px;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 3px;
        border:0;
    }
    
    
    #footer p {
        color: #FFFFFF;
        display: block;
        float: right;
        line-height: 22px;
        font-size: 1.2em;
        margin-left: 10px;
        margin-right: 10px;
        
        font-family: arial, verdana, sans-serif;
    }
    
    
    #footer small {
       color: #FFFFFF;
       display: block;
       float: right;
       line-height: 22px;
       font-size: 1.0em;
       margin-left: 10px;
       margin-right: 10px;
    }
    
/*
 *******************************************************************
 *
 *	Contact Page
 *
 *******************************************************************
 */
    
    #contactDetails {
        width: 350px;
        
        min-height: 250px;
        height: auto !important;
        height: 250px; 
    }
    
    #contactDetails li {
        float: right;
        width: 250px;
        margin-bottom: 10px;
        
    }

    #contactDetails .method {
        float: left;
        width: 100px;
    }

    #contactDetails .clearer {
        width: 100%;
    }
    
    
    #map p {
        margin-bottom: 0;
        font-size: 0.9em;
    }
    
    #map input {
    }
    
    #map #getDirections {
    }
    
/*
 *******************************************************************
 *
 *	Contact form
 *
 *******************************************************************
 */
    
        
    #contact-overlay {
        background-color:#666;
        cursor:wait;
    }
    
    
    #contact-container {
        width:420px;
        left:50%;
        top:15%;
        margin-left:-210px;
        font-family:'Trebuchet MS', Verdana, Arial;
        font-size:16px;
        text-align:left;
    }
    
    
    #contact-container .contact-content {
        background-color:#BFBFBF;
        color:#000;
        padding-bottom: 10px;
    }
    
    
    #contact-container h1 {
        color:#5A1000;
        margin:0;
        padding:0 0 6px 12px;
        font-size:1.5em;
        font-weight: normal;
        text-align:left;
    }
    
    
    #contact-container .contact-loading {
        position:absolute;
        background:url(../images/contact/loading.gif) no-repeat;
        z-index:8000;
        height:55px;
        width:54px;
        margin:-14px 0 0 170px;
        padding:0;
    }
    
    
    #contact-container .contact-message {
        text-align:center;
    }
    
    
    #contact-container .contact-error {
        width:92%;
        font-size:.8em;
        background:#BFBFBF;
        font-size:0.8em;
        font-weight:bold;
        margin:0 auto;
        padding:2px;
    }
    
    
    #contact-container br {
        clear:both;
    }
    
    
    #contact-container form {
        padding:0; margin:0;
    }
    
    
    #contact-container label {
        clear:left;
        display:block;
        width:100px;
        float:left;
        text-align:left;
        padding-left:10px;
        font-size:0.9em;
    }
    
    
    #contact-container .contact-input {
        font-family:'Trebuchet MS', Arial, Verdana;
        float:left;
        padding:3px;
        margin:2px;
        background:#eee;
        border:0px;
        width:250px;
        color: #000;
    }
    
    
    #contact-container .contact-input:focus {
        border: 1px solid #5A1000 !important;
    }
    
    
    #contact-container textarea {
        height:84px;
    }
    
    
    #contact-container .contact-top {
        height:13px;
        background:url(../images/contact/form_top.gif) no-repeat;
        padding:0;
        margin:0;
    }
    
    
    #contact-container .contact-bottom {
        height:13px;
        background:url(../images/contact/form_bottom.gif) no-repeat;
        font-size:.7em;
        text-align:center;
        color:#5A1000;
    }
    
    
    #contact-container .contact-button {
        margin:4px 0 0 4px;
        cursor:pointer;
        height:24px;
        border:0;
        font-size:1em;
        font-weight:bold;
        color:#fff;
        text-align:center;
        vertical-align:middle;
    }
    
    
    #contact-container .contact-send {
        width:50px;
        background:url(../images/contact/send.png) no-repeat;
    }
    
    
    #contact-container .contact-cancel {
        width:65px;
        background:url(../images/contact/cancel.png) no-repeat;
    }
    
    
    #contact-container a.modalCloseX,
    #contact-container a.modalCloseX:link,
    #contact-container a.modalCloseX:active,
    #contact-container a.modalCloseX:visited {
        text-decoration:none;
        font-weight:bold;
        font-size:1.2em;
        position:absolute;
        top:-2px;
        left:400px;
        color:#5A1000;
    }
    
    
    #contact-container a.modalCloseX:hover {
        color:#7A3020;
    }
    
    
/*Stuff for the hampshire tender*/
div.hampshireLeft {
	width: 400px !important;
}
div.hampshireRight {
	width: 515px !important;
}