/* CSS Document */
/* 	Barkingweb Main CSS Document
*	Author:			Barkingweb.com - Nick Barling 
*	Date:			February 1 2006	
*	Version:		1.1
*	File:			barkingweb.css
*	Description:	CSS File to style site's global content	
*	Notes:			This is the file to alter to make site wide changes to styling.
*					Use the descriptive headers to identify the elements that you
*					wish to change.
*/

/************************************ start of css styling for the global site styling **********************************************/

/* background elements added here as well as in the body element because the blog page is rendered as an XML page and Mozilla browsers (Firefox, Netscape, Seamonkey) do not support the body element when XML data is rendered as xhtml */
html{ 
background-image: url(../images/background_grey_body.gif);
background-repeat: repeat;
}

body{
background-image: url(../images/background_grey_body.gif);
background-repeat: repeat;
color: #303030;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
text-align: center; /* This is added because WinIE 5.x does not support the auto value for the left and right margin in the #wrapper div*/
} 

a img{
border: none;
}

#wrapper{
width: 770px;
background-color: #cccccc;
margin: 10px auto;
border: 0;
text-align: left; /* This is added to realign the text to the left after using the text-align center in the #body div*/
background-image: url(../images/grey_stripe3_bg.gif);
background-repeat: repeat-y;
}

#banner{
height: 100px;
background-image: url(../images/barkingweb_banner_yellowtint_smaller.jpg);
background-repeat: no-repeat; 
}

#greystripe{
height: 30px;
background-image: url(../images/grey_stripe4_bg.gif);
background-repeat: repeat-y;
}

#home_button{
margin-left: 40px;
margin-top: 5px;
}

#design_button, #workflow_button, #portfolio_button, #pricing_button, #contact_button{
margin-left: 20px;
}

#home_button a:active{
color: #FF66CC;
}

#web_design{
position: relative;
top: 5px;
left:90px;
margin: 0;
padding: 0;
border: 1px solid black;
}

#ink_pen{
position: relative;
top: 5px;
left:90px;
margin: 0;
padding: 0;
}

.container #note{
color: rgb(255,255,53);
font-size: 75%;
margin-left: 130px;
margin-right: 100px;
}

#button_1{
position: relative;
margin-top: 6px;
margin-left: 20px;
}

#content{
margin-left: 20px;
}



#content p{
font-size: 80%;
margin: 20px;
}

#content p a:link {
color:rgb(200,210,122);
text-decoration: none;
border-bottom: 1px dotted #000;
}

#content p a:visited {
color:rgb(220,240,102);
text-decoration: none;
border-bottom: 1px dotted #000;
}

#content p a:hover {
color:rgb(240,240,183);
border-bottom-style: solid;
}

#content .external{
background: url(../images/external_link_pink.gif) no-repeat right top;
padding-right: 10px;
}

#content .external_green{
background: url(../images/external_link_green.gif) no-repeat right top;
padding-right: 10px;
}

#content h1{
font-size: 120%;
color: #333;
padding: 0;
margin: 20px;
}

#content h2, caption{
font-size: 110%;
color: #333;
padding: 0;
margin: 20px;
}

#content h3{
font-size: 90%;
color: #666;
padding: 0;
margin: 0;
}

#content h4{
font-size: 80%;
color: #666;
padding: 0;
margin: 0;
}

#content h4 a{
color: #333;
text-decoration: none;
}

#content h4 a:hover{
color: #699;
text-decoration: underline;
}

/* if you clear a float, you clear all floats */
/* therefore wrap content div in a container to get round this problem*/
.container{
width: 99%;
float: right;
}

.container ul li{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
margin-right: 10px; /* controls width in privacy policy page */
}

#column{
width: 250px;
float: right;
margin-top: 12px;
margin-right: 18px;
padding-top: 10px;
}

#column #date{
margin: 0 10px 20px 10px;
background-image: url(../images/grey_stripe_boxpara240.gif);
}

#column #date h2{
color:rgb(210,210,210);
font-size: 12px !important;
}

#column div{
margin: 0 10px 10px 10px;
color:rgb(240,240,240);
background-image: url(../images/grey_stripe_boxpara240.gif);
}

#column div h2{
margin: 0;
background-image: url(../images/grey_stripe_boxheader240.gif);
color:rgb(200,210,122);
font-size: 13px !important;
padding: 5px;
text-align: center;
}

#column div p{
margin: 5px 0; /* only vertical margins on the p */
padding: 5px 10px 5px 10px; 
}

#column div .bottom_border{
background-image: url(../images/grey_stripe_boxfooter230.gif);
color:rgb(240,219,92);
font-size: 13px !important;
}

#column div .p-divider{
border-top: 1px solid black;
padding-top: 5px;
}

#column #bookmark{
background-image: none;
}

#column #bookmark img{
border: 0;
}

.phase_list{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:rgb(240,219,92);
font-size: 80%;
font-weight:bold;
list-style: none;
line-height: 2.6em;
}

.phase_list a{
text-decoration: none;
color:rgb(240,219,92);
}

.phase_list a:hover{
color:rgb(240,233,128);
text-decoration: underline;
}

.phase_image{
float: right;
margin-right: 490px;
margin-top: -15px;
}


#content .build_tenets h3{
margin-bottom: 2px;
}

.show_hide_icon{
float: right;
margin-right: 600px;
margin-top: 2px;
}

#showHide1, #showHide2, #showHide3, #showHide4, #showHide5, #showHide6{
display: none;
padding-bottom: 4px;
}

#usa_night_space{
float: right;
margin-right: 50px;
margin-top:55px;
}

.leftimagekona{
float: left;
margin-top: 30px;
margin-right: 15px;
margin-bottom: 40px;
border: 0;
}

.leftimage{
float: left;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
border: 0;
}

.rightimage{
float: right;
margin-left: 15px;
border: 2px solid #000000;
width: 150px;
}

.rowimage1{
position: relative;
margin: 5px 10px 5px 20px;
padding: 0;
border: 1px solid #000000;
}

.rowimage2{
position: relative;
margin: 5px 10px 5px 10px;
padding: 0;
border: 1px solid #000000;
}

.rowimage3{
position: relative;
margin: 5px 10px 5px 10px;
padding: 0;
border: 1px solid #000000;
}

#pricing_table{
position: relative;
margin-left: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#cost_table, td{
color: rgb(240,219,92);
font-size: 80%;
border: 1px solid #333333;
border-collapse: collapse;
padding: 5px 10px;
}


#blog_table{
position: relative;
margin-left: 15px;
}

#blog_musing{
padding: 0.3em;
color: #333333;
border: 0;
}

#blog_content{
padding: 0.2em;
border: 0;
}

#blog_date{
padding: 0.2em;
color: #FFFF66;
text-align: right;
border: 0;
}

/*
.clearit{
display: block;
clear: both;
}*/

/* Code for adverts carried above the home page footer */

div#adverts .macromedia{ /* not in use */
float: right;
text-align: right;
padding-right: 7px;
}

div#footer{
clear: both;
height: 22px; /* Height and padding must add up to the same amount as the size of the background image gif */
text-align: center;
padding: 8px 0 0 0;
margin: 0;
background-image: url(../images/grey_stripe_footer.gif);
background-repeat: no-repeat;
font-size: 60%;
letter-spacing: 1px;
color: #A1A1A1;
}

div#footer p{
padding: 0;
margin: 0;
}

div#footer a{
color: #99CC99
}

div#footer a:hover{
color: #333333;
}

.navbar{
white-space: nowrap;
}

/************************zoom search css*********************************/

.highlight { background: #FFFF40; }

.searchheading { margin-top: 10px; font-size: 110%; font-weight: bold; }

.summary { font-size: 80%; font-style: italic; } 

.results { font-size: 85%; }

.category { color: #999999; }

.description { font-size: 100%; color: #f0db5c; margin-right: 20px;}

.context { font-size: 100%; margin-right: 20px;}

.infoline { font-size: 80%; font-style: normal; color: #808080; }

.sorting { text-align: right; }

.result_title { font-size: 90%; }

.result_title a { color: #1F1F1F; }

.result_title a:hover { color: #383838; }

.zoom_searchform { font-size: 80%; display: inline; }

.zoom_options { font-size: 80%; }

input.zoom_button { font-size: 80%; margin-top: 5px; }

input.zoom_searchbox { background-color: #E1E1E1; border: 1px solid black; vertical-align: top; margin-top: 4px; margin-left: 10px; }

/************************end of zoom search css*********************************/