/***************************************
****************************************
    GENERAL STYLES
    ------------------------------------
    PLEASE ADD NEW STYLE RULES TO THE
    APPROPRIATE SECTION ONLY. DO NOT
    REMOVE SECTION HEADERS EVEN IF THEY
    ARE NOT IN USE.


    Reminder: If you're setting a width
    and a padding/margin you're looking
    for trouble with ie6
    http://css.maxdesign.com.au/listamatic/about-boxmodel.htm


    Colors
    ---------


****************************************
***************************************/


/***************************************
    TEMPLATE VIEW
    ------------------------------------
    Styles to make the template easy to
    view - please remove.
***************************************/
div
{
    /*border:dotted 1px gray;*/
}

/***************************************
    MEDIA STYLES
    -----------------------------------
    Add any styles here that only
    need to appear on a certain device.
***************************************/
/*If a title has an image instead of text then this
 will display the text rather than the image*/
@media handheld
{    
    .hidetext
    {
        text-indent:0px;
        background: none;
        display:block;
        text-align:left;
    }   
}



@media print 
{
    /*more styles in tripoli/print.css*/
    div#lhs,
    div#rhs,
    div#globalnav
    {
        display:none;
    }
}

/***************************************
    USEFUL ONE LINERS
    -----------------------------------
    Any useful simple one liners here.
***************************************/
.bold{font-weight:bold;}
.italic{font-style:italic;}
.floatright{float:right;}
.floatleft{float:left;}
.clear,.clearboth{clear:both;}
.clearleft{clear:left;}
.clearright{clear:right;}
.cleanedges{border:none;margin:0;padding:0;}
.marginbottom{margin-bottom:40px;}
.nomargin{margin:0;}
.hidetext{text-indent:-9000px; overflow:hidden;}
.alignright{text-align:right;}
.alignleft{text-align:left;}
.border{ border:2px solid #CD4400;}
.center{text-align:center;}
/*html{ overflow:-moz-scrollbars-vertical;}*/



/***************************************
    GLOBAL STYLES
    ------------------------------------
    Style rules with a global effect.
***************************************/
*
{
    
}
body
{
    background-color:#ffffff;
    color:#333333;
}

div#bg 
{
    background:#ffffff;
    height: auto !important;
    height: 850px;
    min-height: 850px;
    
    
    
}


a
{
    color:#000;
    text-decoration:none;
}

#content a:link{color:#003399;text-decoration:none;}
#content a:visited{color:#003399;text-decoration:none;}
#content a:hover{color:#235ED2;text-decoration:none;}
#content a:active {color:#4482FF;text-decoration:none;}



address
{
    margin-left:23px;
}

#container
{  
}

h3
{
    font-weight:normal;    
    text-transform:none;
}

h4
{
    color:#000;
    text-align:left;
    text-transform:none;
}

/*help with other projects*/
#content a#cta
{
    
    background: url(../images/small_diy_logo.gif) top right no-repeat;
    width:665px;
    padding-bottom:6px;
    padding-top:26px;
    color:#C43309;
    text-decoration:none;
    display:block;
    font-size:1.2em;    
    padding-left:10px !important;    
    padding-left:0;
    
}

    #content a#cta:hover
    {    
        background-position:right -351px;
        
        color:#D66240;
    }


#flashcontent{height:120px;}

#content #cta
{
    padding: 0 0 10px 0;
    clear:both;        
}



/*contact us*/
#content #ctacontact .call,
#content #ctacontact .mail
{
    padding:0;
    margin:10px 0 0 0;
    
    color:#F95E00;
    text-decoration:none;
    font-size:1.4em;
    font-weight:bold;
    
    display:block;
    float:left;
    
    width:320px;
    display:inline;/*ie6*/
    
    padding-left:40px;
    background:  url(../images/callusnow.gif) no-repeat 0px -1px;
    
    height: auto !important;
    height:35px;
    min-height:35px;
    text-align:left;
    
}


#content #ctacontact .mail{background-image: url(../images/emailusnow.gif)}




    #content #ctacontact .call span,
    #content #ctacontact .mail span
    {
        color:#CC0000;
        font-size:.7em;
        font-weight:normal;
    }


/*forces a div with floating image inside
 it to pull down to the end of the image*/
hr.clear {display: block; clear: left;
padding: 0;padding-top:0px;
visibility: hidden;width:1px;}

/***************************************
    HEADER STYLES: #header
    ------------------------------------
    Style rules for the header
    area only.
***************************************/
#header
{    
	background:#ffffff url(../images/solutions_in_planning.gif) no-repeat scroll center left;
	position:relative;
	margin-top:20px;
}

    #header #logo
    {
      float:right;
      margin-top:10px;
   
    }


    #header .contact
    {
        color:#fff;
        font-size:1.4em;
        
        padding:71px 0 0 93px;
        
        text-align:left;
    }
    #header .contact div
    {
    }
    #header .telephone
    {
        background: url(../images/icontel.gif)   0% 50% no-repeat;
        padding-left:22px;
    }

    #header .email
    {
        background: url(../images/iconemail.gif)  0% 50%  no-repeat;
        padding-left:19px;
        
    }
    #header .email a
    {
        color:#fff;
    }

    #header .email a:hover
    {
        color:#F17317;
    }    
    #header .email  a:hover{color:#C3E4F5;}	
    
    #header .contact address
    {
        font-style:normal;
        
    }

div#lowerheaderimg
{    
   background-position: center top;
   background-repeat:no-repeat;
   background-color:transparent;
}

div#tagline
{    
    
}

#header_image{
position:relative;

}


.head_home{

width:750px;
height:110px;
 
margin-top:5px;
}

.head_team{

background: url(../images/header_2.jpg) top left no-repeat;
width:750px;
height:114px;
 
margin-top:5px;
}


.head_projects{

background: url(../images/header_3.jpg) top left no-repeat;
width:750px;
height:114px;
 
margin-top:5px;
}

#search{
bottom:13px;
left:14px;
position:absolute;
}

#search input[type="text"], input[type="password"]{

    height:15px;
    width:160px;

}


#search .search_box {
    width:165px;
    height:20px;
    border:1px solid #000000;
    }
    
    
#search .search_button {
vertical-align:middle;
border:0px;
background: url(../images/search.gif) no-repeat center;
width:54px;
height:20px;
}

#search .search_button:hover {
vertical-align:middle;
border:0px;
background: url(../images/search_over.gif) no-repeat center;
width:54px;
height:20px;
}


/***************************************
    GLOBAL NAVIGATION STYLES: #globalnav
    ------------------------------------
    Style rules for the *global*
    navigation.
***************************************/
#skipmenu{display:none;}


#globalnav
{
	width:750px;
	font-size:1.1em;
	padding:0;
	height:auto !important;
	height:35px;
	min-height:33px;
	background: url(../images/nav_bg.gif) top left repeat-x;
	border-bottom:1px solid #fff;
	position:relative;

}

#globalnav .end_nav {

       height:37px;
	min-height:37px;
	background: url(../images/end_nav.gif) top left no-repeat; 
	width:33px;
position:absolute;
right:-17px;
top:0px;



}

    #globalnav .hidetext
    {
        font-size:0px;
        height:0;
        text-indent:-9000px;
    }


	
	 #globalnav #menu ul 
	{
	    margin:0 0 0 0;
	    padding-left:0;
	    text-shadow: 0px 0px 3px black;
	    letter-spacing:0.9px;

	}
	
	    #globalnav ul li 
        {
            display:inline;
            float:left;
           

        }        
	    #globalnav ul li  a
        {
            text-align:center;
            line-height:33px;
            display:block;
            background: url(../images/nav_sep.gif) center left no-repeat; 
        }        
    	    
	    #globalnav ul ul li 
        {            
	        text-shadow: none;
        }        
    	    

	        #container #globalnav #menu ul li:hover
	        {    
	             background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;
	        }
            #globalnav #menu li.AspNet-Menu-Selected, #globalnav #menu li.AspNet-Menu-ChildSelected
            {    
                background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;	
            }
	           
	           
	            #container #globalnav #menu ul ul li
	            {    
	                background:none;	
	            }
    	        
	            #container #globalnav #menu ul ul li:hover
	            {    
	                background:none;
	            }
    	        

	        
	        
    #globalnav a
    {
        color:#fff;
       /* background: top right no-repeat url(../images/globalnav_side.gif);*/
     }
/***************************************
    DROP DOWN GLOBAL (.simpleMenu)
    ------------------------------------
    This is a drop down menu
    ie6: BrowserSpecific/IEMenu6.css
***************************************/


#menu
{
    position:absolute;/*ie fix only for template eg*/
    font-family:Lucida Sans, Arial, Sans-Serif;
}

/* link background and size */
#globalnav #menu ul.AspNet-Menu ul
{    
    background:transparent url(../images/menubg.png) top left no-repeat; /*could have a background image here */   
    padding:0px;    
    border-bottom:#C84402 10px solid;
    padding-top:25px;
    padding-bottom:8px;
    /* margin-top:18px;*/
    top:25px;
    
    width:186px;    
}
#menu ul.AspNet-Menu ul li
{     
    padding:4px;    
    display:block;
    float:none;
    font-size:0.85em;
    margin-left:10px;
    margin-right:10px;
    
}
#menu ul.AspNet-Menu ul li a
{
    color:#D3500F;
    background:transparent; /*could have a background image here */
    padding:1px;    
    background-image:none;
    line-height:1.2em;
}
#menu ul.AspNet-Menu ul li a:hover
{    
    color:#6D6D6D;
    background-image:none;
}



/* selected */
a.AspNet-Menu-Selected
{
    text-decoration:none;
}

    #container #globalnav  li  li.AspNet-Menu-Selected a
    {    
        color:#000;
    }

    #container #globalnav  li  li.AspNet-Menu-Selected a:hover
    {    
        color:#6D6D6D;
    }

/***************************************
    BREADCRUMB STYLES: #breadcrumb
    ------------------------------------
    Style rules for the breadcrumb
    only.
***************************************/
#breadcrumb
{
    margin-bottom:10px;
}




/***************************************
    MAIN AREA STYLES: #main
    ------------------------------------
    Style rules for the main page area
    (all content areas).
***************************************/
#main
{    
    background:  url(../images/main_bg.jpg) repeat-y  center top;
}
    #main .something
    {
        
    }

/***************************************
    RHS AREA STYLES: #rhs
    ------------------------------------
    Style rules for the RHS column.
***************************************/
#rhs
{
   border-right:1px solid #CCCCCC;
font-size:14px;
text-align:left;
}

#rhs a.cta
    {
        background: url(../images/cta.gif)  top left;
        display:block;
        width:100px;
        height:50px;
        margin:10px auto;
        
    }
    #rhs a.cta:hover
    {
        background: url(../images/cta.gif)  bottom left;
    }

	
	#rhs .newsbox
	{
	    background:#D2D2D2;
	    font-size:10px;
	    width:189px;	
	    margin-bottom:30px;
	    margin-left:26px;
	    text-align:left;
	}
	    #rhs .newsbox div
	    {
	       padding:0;	
	    }
    	
	    #rhs .newsbox .readmore
	    {
	        font-weight:bold;
	    }
    	
	
	#rhs p 
	{
	    margin:10px;
	}
		

	#rhs .top
	{
	    background:url(../images/newsbox_top.gif) top  no-repeat;
	    height:8px;
	    width:189px;  
	    margin:0;
	    padding:0; 
	}
	
	#rhs .bottom
	{
	    background:url(../images/newsbox_bottom.gif) bottom  no-repeat;
	    height:8px;
	    width:189px;  
	    margin:0;
	    padding:0;
	}
	
	#rhs img
	{	    
	    clear:both;
	    margin-top:20px;
	    margin-left:-1px;
	}
	

	
	#lhs ul {margin:0px 0px 10px 0px;}
	#lhs ul li{border-bottom:1px dashed #DCDCDC;font-size:0.95em;}
	#lhs a:link {color:#999;display:block;padding:2px 5px 2px 6px;}
	#lhs a:hover {color:#04276E; background:#CDD4E2;}
	#lhs a:visited {color:#999;display:block;padding:2px 5px 2px 6px;}
	
	#casestudy{font-size:11px;margin-left:8px;width:530px;}
	
	#casestudy ol li {margin-bottom:10px;}
	#casestudy span {color:#000000;font-weight:bold;line-height:25px;}
	#casestudy ol li p {margin:0px;padding:0px;}
	.more {margin-left:15px;padding-right:20px;background:url(../images/purple_arrow.gif) no-repeat  right;}
	a.more  {padding:10px 25px 10px 5px;}
	a:link.link  {color:#817171;}
	
	#team_con {height:254px; overflow:auto;margin-right:10px;margin-bottom:20px;}
    #clients_con {height:453px; overflow:auto;margin-right:10px;margin-bottom:20px;}
   	#team_con2 {height:278px; overflow:auto;margin-right:10px;margin-bottom:-20px;position:relative;}
    
    
    #content #clients_con p {text-align:left;}
	
	#team {margin-bottom:90px;}
	
	#team img{float:left;margin:0px 20px 0px 0px; }
	#team h3{margin-bottom:15px}
	#team .details{}
	#team .block {height:100px;width:90px;}
	#team .info {float:right;width:395px;padding-right:16px;}
	#team .member{height:260px;}
	#team ul {margin:15px 0px;padding:0px;}
	
	
	
/***************************************
    CONTENT STYLES: #content
    ------------------------------------
    Style rules for the primary
    content area only.<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="js/jquery.media.js" type="text/javascript"></script><!-- Load swf,rm,mov etc  http://malsup.com/jquery/media/ --> 
<script src="js/thickbox_mgz.js" type="text/javascript"></script><!-- Lightbox/Thickbox  http://jquery.com/demo/thickbox/ -->
<script src="js/smoothscroll.js" type="text/javascript" ></script><!-- Smooth scroll on anchors-->	
<script src="js/jquery.innerfade.js.js" type="text/javascript"></script><!-- Transition effects  http://medienfreunde.com/lab/innerfade/-->	

<script src="js/scripts.js" type="text/javascript"></script><!-- General code  -->	

***************************************/
div#content
{
   
   
}
    #content .contentrightcorner
    {

    }

    #content .contentwrapper
    {
      float:right;
       width:570px; 
       border: solid 1px #c2c2c2;
       background:#f7f7f7 url(../images/content_bg_main.gif) no-repeat bottom center;
       padding-top:10px;
       position:relative;
          height:auto !important;
    height:473px;
    min-height:473px;
    margin-bottom:5px;
    }
    
    
    #content_corner {
    

    background:transparent url(../images/content_corner.gif) no-repeat bottom right;
height:20px;
position:absolute;
bottom:-1px;
right:-1px;
width:23px;

    
    }

    #content h1
    {
            
    }
       
    #content h2
    {
        font-family: "Lucida Sans", Arial, Sans-Serif;
        color:#003366;
        font-size:1.35em;
        font-weight:normal;   
        text-transform:none;
        margin-top:12px;
        margin-left:14px;
        clear:both;
    }
       
    #content .bubble h3
    {
        font-family: Arial, Sans-Serif;
        color:#C43309;
        font-size:1.15em;
        font-weight:normal;   
        text-transform:none;
        margin-top:0px;
        margin-bottom:1px;
        margin-left:8px;
    }      

	#content p
	{
	    margin:0  15px 1em;
	    text-align:justify;	    
	}

    #content img
    {
             
    }
    
    
    /* Pop up box */
    .popup
    {
        position:absolute;
        width:350px;
        background:#244386 url(../images/putl.gif) top left no-repeat;
        display:none;
        top:48px;
        right:8px;
        
    }

    #content .popup h2
    {
        color:#fff;
        margin:0;
        padding:0;
        background:url(../images/putr.gif) top right no-repeat;
        padding:20px 20px 10px ;
        font-size:1.5em;
        font-weight:bold;
        
    }

    #content .popup h2 span /*line*/
    {
        display:block;
        border-bottom:1px solid #fff;
        font-size:0px;
        height:10px;
        
    }

    #content .popup p 
    {
        margin:4px 20px;
        
    }



    .popup .info
    {
        color:#fff;
        padding:0px 0px 10px;
        background:url(../images/publ.gif) bottom left no-repeat;
        height:auto !important;
         height:120px;
         min-height:120px;
        
        overflow:hidden;
    }
    
    .popup .close
    {
        position:absolute;
        top:9px;
        right:9px;
        background:url(../images/popupclose.gif) top left no-repeat;
        width:15px;
        height:15px;
    }

    .popup .arrowleft
    {
        position:absolute;
        top:50%;
        left:-13px;
        background:url(../images/popuparrow.gif) bottom left no-repeat;
        width:13px;
        height:25px;
    }
    
    .popup .bottomright
    {
        position:absolute;
        bottom:0;
        right:0;
        background:url(../images/pubr.gif) bottom left no-repeat;
        width:9px;
        height:9px;
    }

	#content hr
	{
	    width:80%;    
	    margin:0 auto;  
	}
	
	#content .clear
	{
	    clear:both;
	}
	/*
	    left / right floating things
	    use for images etc
	*/
	#content .floatleft
	{
	    float:left;
	    display:block;
	    margin: 5px 10px 5px 0;
	}
	
	#content .floatright
	{
	    float:right;
	    display:block;
	}

	/*#content blockquote
	{
	    border:none;
	    height:92px;
	    background:url(../images/content_quote_bg.gif) top left no-repeat;
	    color:#000000;
	    font-size:24px;
	    text-align:center;
	    padding-top:30px;
	    margin:20px 0 20px 15px;
	    clear:both;
	}
*/
    /*float left and right images with padding for */
    #content img.left
    {
        display:block;
        float:left;
        padding:0 8px 8px 0;

    }    
    
    #content img.right
    {
        display:block;
        float:right;
        padding:0 0 8px 8px;
    }
    
   #ctl00_project_man .project_man a,#ctl00_site_app .site_app a,#ctl00_dev_po .dev_po a,#ctl00_eco_dev .eco_dev a,#ctl00_strategic .strategic a, #ctl00_planningapp .planningapp a,#ctl00_local .local a, #ctl00_resident .resident a,#ctl00_planning_ap .planning_ap a,#ctl00_listed_building .listed_building a, #ctl00_rural_dev .rural_dev a,#ctl00_retail_impact .retail_impact a,#ctl00_eco_impact .eco_impact a,#ctl00_live_work .live_work  a,#ctl00_edu_rel .edu_rel a, #ctl00_sports .sports, #ctl00_spec_acom .spec_acom, #ctl00_sports .sports a ,#ctl00_spec_acom .spec_acom a    {color:#04276E}

    
    #ctl00_dev_po .dev_po {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_eco_dev .eco_dev {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_project_man .project_man {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_site_app .site_app {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_strategic .strategic {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_planningapp .planningapp {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_planning_ap .planning_ap {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_local .local {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_resident .resident {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_listed_building .listed_building {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_rural_dev .rural_dev {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_retail_impact .retail_impact {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_eco_impact .eco_impact {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_live_work .live_work {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_edu_rel .edu_rel {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_sports .sports {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #ctl00_spec_acom .spec_acom {background:#CDD4E2 none repeat scroll 0 0;color:#04276E;}
    #container #ctl00_nav_ctl06_link:hover {background:transparent url(../images/google_maps_nav.gif) no-repeat scroll -1px -1px;}
    #container #ctl00_nav_ctl06_link {background:transparent url(../images/google_maps_navo.gif) no-repeat scroll right -1px; text-align:center;}
    #ctl00_home .home {background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;}
    #ctl00_team .team {background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;}
    #ctl00_projects .projects {background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;}
    #ctl00_contact .contact {background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;}
    #ctl00_news .news {background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;}
    #ctl00_clients .clients {background:transparent url(../images/nav_bg_on.gif) repeat-x scroll 0 0;}
    #ctl00_google_maps .google_maps {background:transparent url(../images/google_maps_nav.gif) no-repeat scroll right -1px; }
 
 
 
    #ctl00_google_maps #container #ctl00_nav_ctl06_link {background:transparent url(../images/google_maps_nav.gif) no-repeat scroll right -1px; }

    /*image with caption*/
    #content a.caption      {text-align:center;display:block;}
    #content a.caption img  {border:none;outline:none;}
    #content a.caption span {display:block;}
    
    #globalnav ul li.home {width:107px;}
    #globalnav ul li.team {width:107px;}
    #globalnav ul li.projects {width:107px;}
    #globalnav ul li.contact {width:107px;}
    #globalnav ul li.news {width:107px;}
    #globalnav ul li.clients {width:101px;}
 
    #globalnav ul li.google_maps {width:114px;}

/*transitions*/		
#content ul#imagetransition
{
    width:520px;
    margin:0 auto;	    
}

#content ul#imagetransition img
{
    border:none;
    padding:0;
    margin:0 auto;	    
}
/*tripoli fix*/
#content ul#imagetransition li { text-indent: 0; margin-left: 0; }
#content ul#imagetransition li:before { content:''; }


#content ul#quotestransition 
{
    
    list-style:none;
    width:auto;
    padding:0;
    margin:0;
    color:#EF6459;
    font-size:2em;
    text-align:center;
    margin:0 auto;
    width:520px;      
}	
#content ul#quotestransition  li
{
    list-style:none;
    padding:0; 
    width:100%;
}
	
#content ul#quotestransition  li cite
{
    display:block;
    padding:0;
    margin:0;    
}
/*tripoli fix*/
#content ul#quotestransition li { text-indent: 0; margin-left: 0; }
#content ul#quotestransition li:before { content:''; }


	


/*cms fix*/
#content .cms *[style],
#content .cms *[style] *[style],
#content .cms *[style] *[style] *[style],
#content .cms *[style] *[style] *[style] *[style]
{
    color:inherit !important;
    font-size:inherit !important;
}




	
	
/* Tables */
#content table
{
    width:100%;
        
}
    #content table caption
    {
        caption-side:bottom;
        font:0.8em italic;
    }
    
    #content table thead
    {
        
    }
    
    #content table tbody
    {
        
    }

    #content table td
    {
    }

    #content table th
    {
        background:#ddd;
    }

    #content table .odd
    {
        background: #FFF4E9;
    }
    
    
    
/* Lists */
#content ol
{
}
#content ul
{
}   
    #content li
    {
        
    }


/***************************************
    FORMS STYLES: #content form
    ------------------------------------
    Style rules for form
    areas only.
***************************************/
#content form{}
#content form fieldset {}
#content form fieldset ledgend{}

#content form fieldset p /*for descriptions*/
{
    clear:both;
    font-size:0.8em;
}
#content form ol
{
    list-style: none;
    list-style-type:none;
    list-style-position:inside;
    padding:0;
    margin:0;
}
#content form ol.formrows li
{
    list-style-type:none;
    clear:both;
    list-style: none;
    padding:3px;
    list-style-position:inside;
}


#content form .required{color:#f00;}

#content form input, #content form select
{
    display:block;
    float:left;
}



#content form .half label
{
    width:49%;
}
#content form .half input, #content form .half select
{
    width:40%;
}

#content form input.radiobox, #content form input.checkbox
{
    display:block;
    float:left;
}

#content form label
{
    width:12em;
    display:block;
    float:left;
    text-align:right;
    margin-right:0.5em;
}

/*display radio buttons etc in a row*/
#content form div.inline *
{
    display:inline;
    float:none;
}

#content form textarea
{
    margin-top:1em;
    width:63%;
}



/*to add variance to the forms by wrapping whatever elemnts in a div, add a new one for 33% for 3 cols etc*/
#content form div.half
{
    float:left;
    width:50%;
}
#content form .marginleft{margin-left:5px;}
#content form .marginright{margin-right:5px;}


#content form .validation
{
    background:#EF6459;
    border:1px solid #AF3F36;
    padding:1em;
    font-size:0.8em;
}
    #content form .validation li
    {
        margin:0;
        padding:0;
    }


/***************************************
    FOOTER STYLES: #footer
    ------------------------------------
    Style rules for the footer
    area only.
***************************************/
#footer
{
    background:url(../images/footer.gif) top left no-repeat;
    text-align:center;
    color:#fff;
  
    line-height:1.4em;
    
}



#footer a{color:#fff; }
#footer a:hover{color:#C3E4F5;}	


#footer .footerleft
	{
	    float:left;
	    text-align:left;
	    display:inline;
	}

	#footer .footerright
	{
	    width:40%;
	    float:right;
	    text-align:right;
	    height:10px;
	    display:inline;
	    font-size:14px;
	    font-weight:bold;
	}
		
	
	
	
	/*xhtml accessiblity and css validation logos*/
	#footer #xhtml, #footer #access, #footer #css
	{
	    
	}


/***************************************
    SINGLE PAGE STYLES: #page
    ------------------------------------
    Style rules for specific pages.
    Replace the id #container with a
    unique id to do this.
***************************************/

/* news */
.Image
{
    margin:0 15px 5px 5px;
    float:right;
}

.ShortDesc,
.Title
{
    margin-left:15px;
}

.LongDesc
{
    margin-left:15px;
}
#content .LongDesc p,
#content .ShortDesc p
{    
    margin-left:0;
}

.Date
{
    font-size:80%;
    margin-left:15px;
}

#content .LongDesc ul,
#content .ShortDesc ul 
{
    list-style:disc none outside;
}
    #content .LongDesc ul li,
    #content .ShortDesc ul li
    {
        
    list-style:disc none outside;
    }

.pager
{
    text-align:center;
    padding:10px 0;
}

.pager a,
.pager span
{
    padding:4px;
}




/* hardwood decking */
.multiplestyles
{
    text-align:center;
    width:540px;
    margin:0 auto;
}



/*sitemap*/
#sitemap
{
    margin-left:27px;
    margin:0 27px 27px;
}

div#content div#sitemap *
{
    visibility:visible;
    margin:0;
    padding:0;
    float:none;
    display:block;    
    position:static;
    width:auto;
    height:auto;
    border:0;
    background:none;
}
    div#content div#sitemap  li
    {
        padding-left:0px;
        margin-top:4px;
        margin-bottom:4px;
    }
    div#content div#sitemap  li li
    {
        margin-left:20px;
        margin-left:10px;
        padding-left:35px;
    }
    div#content div#sitemap  ul
    {
        margin-left:0px;           
        margin-top:15px;
    }
    div#content div#sitemap  a
    {  
    }
    div#content div#sitemap  a:hover
    {
    }




/*tripoli fix*/
#content #sitemap li { text-indent: 0; }
#content #sitemap li:before { content:''; }


/*bubble pages*/
.bubblewrap
{
    padding:0px 167px 0px 0px ;
    background:#fff url(../images/diyman_1.jpg) top right no-repeat;
    margin:15px 0;
    text-align:justify;
    
    height: auto !important;
    height:265px;
    min-height:265px;    
    
    margin-right:-20px;
    
}
/*add these classes to .bubblewrap divs*/
#content .diyman1
{
    background-image:url(../images/diyman_1.jpg);
}
#content .diyman2
{
    background-image: url(../images/diyman_2.jpg);
}
#content .diyman3 /*too wide*/
{
    background-image: url(../images/diyman_3.jpg);
}
#content .diyman4
{
    background-image: url(../images/diyman_4.jpg);
    height: auto !important;
    height:365px;
    min-height:365px;    
}













    #content .bubblewrap p
    {
        margin:0;
        padding:8px;
    }

    .bubblewrap .bubbletop
    {
        background: url(../images/bubble_top.gif)   2px 0px no-repeat;
        font-size:0px;
        height:21px;
    }

    .bubblewrap .bubblebottom
    {
        background: url(../images/bubble_bottom.gif)  2px 0px no-repeat;
        font-size:0px;
        height:21px;
        
    }

    .bubblewrap .bubble
    {
        
        background: url(../images/bubble_mid.gif) top left no-repeat;
        padding:0px 78px 0px 15px;
        height: auto !important;
        height:120px;
        min-height:120px;
    }











/*products*/

#content ul.products
{
    margin-left:-18px;
    
}
    ul.products li
    {
        display:block;
        float:left;
        width:200px;
        margin-left:28px;
        text-align:center;
        margin-bottom:15px;
        margin-top:10px;
    }

        ul.products li a
        {
            display:block;
            width:200px;
            border:2px solid #CD4400;
            margin-right:10px;
            padding-top:133px;
            text-align:center;
            background-position:0 0;
            background-repeat: no-repeat;
        }

        ul.products li a:hover
        {
            border-color:#E1781C;
        }
        
        
        

        ul.products li a.hardwood
        {
            background-image:url(../images/hardwood_link.jpg);
        }
        
        ul.products li a.softwood
        {
            background-image:url(../images/softwood_link.jpg);
        }
        
        
        ul.products li a.deckingtiles
        {
            background-image:url(../images/deckingtiles_link.jpg);
        }
        

/*tripoli fix*/
#content ul.products li { text-indent: 0; }
#content ul.products li:before { content:''; }







/*prodcuts subpages*/
.imagescentered
{
    text-align:center;
    border-top:solid 1px #E1781C;
    border-bottom:solid 1px #E1781C;
    padding: 20px 10px;
}


.imagesleft
{
    float:left;
    width:200px;
    
}


.imagescentered img
{
    margin:0 15px;
}






/*fittings (#films extends this)*/
#fittings 
{
    
}
    #fittings 
    {
        
    }
    #fittings ul
    {
        margin-left:-29px;
    }
        #content #fittings ul li
        {
            display:inline;
            width:410px;
            float:left;
            margin-left:50px;            
            height:250px;
        }
        #content #fittings ul li li
        {
            height:auto;
            margin:0;
        }
            #content #fittings ul li p, #content #fittings ul li li
            {
                font-size:0.9em;
            }
        
            #content #fittings ul li .large 
            {
                font-size:1em;
            }
        
            #content #fittings ul li strong,  #content #fittings ul li .orange
            {
                color: #CB4400;
                font-weight:bold;
            }    
            #content #fittings ul li h3
            {
                color:#CB4400;
                font-weight:bold;
                font-size:1.3em;
                border-bottom:dashed 1px #999999;
                padding-bottom:12px;
                margin-bottom:10px;
            }
                #content #fittings ul li h3 span
                {
                    color:#999999;
                    font-weight:normal;
                    font-size:0.8em;
                }
            #content #fittings ul li h4
            {
                font-size:1.1em;
                color:#CB4400;
                font-weight:bold;
            }
            #content #fittings ul li ul
            {
            }
                #content #fittings ul li ul li
                {
                    float:none;
                }
        #content #fittings ul li .imgwrapper
        {
            width:136px;
            height: auto !important;
            min-height:190px;
            height:190px;
            float:left;
            text-align:center;
        }
            #content #fittings ul li img
            {
                border:none;
                padding:0;
                margin:0;
            }
            #content #fittings ul li img.border
            {
                border:2px solid #CD4400;
                padding:0;
                margin:0;
            }
            
            
            

/*tripoli fix*/
#content #fittings ul li { text-indent: 0;  }
#content #fittings ul li:before { content:''; }




/*films*/
#content #films  #fittings
{
    width:750px;
}


#content #films #fittings  ul
{
    margin-left:-17px;
}


div#films #fittings ul li 
{
    width:317px;
    margin:0 0 0 35px;
}
/***************************************
    JAVASCRIPT STYLES
    ------------------------------------
    Style rules for specific javascript
    files.

***************************************/


/***************************************
    FUTURE CSS
    ------------------------------------
    For testing css2/css3 selectors
    that don't work with all browsers.
***************************************/
/* E.g. This style rule will place an north east arrow after any link on your site to an external site. */
/*a[href^="http://"]:not([href*="smashingmagazine.com"])::after {content: "\2197";content: "\2197";*/







/***************************************
    END
***************************************/


#homebg {
background:url(../images/people.jpg) no-repeat bottom right;
height:287px;
padding-right:340px;
}


#assestsbg {
background:url(../images/manage.jpg) no-repeat bottom right;
height:220px;
padding-right:340px;
}

#dealersbg {
background:url(../images/meeting.jpg) no-repeat right;
height:294px;
padding-right:200px;
}

#customersbg {
background:url(../images/customers.jpg) no-repeat right;
height:250px;
padding-right:200px;
}

#contactbg {
background:url(../images/contact_bg.jpg) no-repeat top right;
height:281px;
padding-right:200px;
}

#productsbg {
background:url(../images/products_bg.jpg) no-repeat top right;
height:377px;
padding-right:200px;
}