/*---------------------------------
 CSS for Bloom Box website
 created  by James Strachan
 ----------------------------------*/


br {clear:both;}
  
html, body{
	text-align:center;
	font-family: Arial, non-serif;
	width:100%;height:100%;
	font-size:12pt;
}
h1{
	color:#333;
	font:22pt Georgia, "Times New Roman", Times, serif; 
	font-weight:900;
	font-style:italic;
	margin:20px 0;
}
h2{
	color:#333;
	font:18pt Georgia, "Times New Roman", Times, serif;
	font-weight:400;
	font-style:italic;
	margin:20px 0px;
	clear:both;
}
h3{
	color:#333;
	font:12pt Georgia, "Times New Roman", Times, serif;
	font-weight:900;
	font-style:italic;
	margin:20px 10px;
}
p{
	margin:5px 20px 10px 10px;
	text-align:justify;
}
.error{
	background-color:#fed;
	color:#a52;
	padding:10px 15px;
}
#lcol p{margin-left:0;margin-right:0;}
ul{
	margin:20px;
}
li{
	margin-top:5px;
}
a{ text-decoration:none; color:#345;}

h2 img, h1 img{
float:right;
margin:-30px 10px 10px 10px;

}

/*----------------------------------------- Labels  -----*/
div.label p{
font:12pt Georgia, "Times New Roman", Times, serif;
font-weight:900;
font-style:italic;
color:#267c47;
}
div.label div.img{
float:left;
background:url('images/icons/spanner.png') no-repeat transparent;
width:50px;height:50px;
margin:-5px -15px 0 0;
}

/*----------------------------------------- Dropdown  -----*/
div.dd{
position:relative;
margin:10px 10% 100px 10%;
border-top:1px dotted #61aa50;
clear:both;
}
#pricelist div.dd{
margin-bottom:30px;
}
div.dd div.rght{
float:right;
margin-top:-1px;
background-color:#61aa50;
padding:1px 4px 1px 1px;
}
div.dd select{
padding: 2px 1px;
border:0px solid white;
background-color: white;
color:black;
float:left;
}
div.dd div.rght div.img{
float:left;width:33px;height:22px;background:url("images/links/trolleypic.png") center center no-repeat #61aa50;
}
div.dd div.rght a.link{
color:white;
}
/* ---------------------------------------- Trolley  ----*/
#pricelist tr.subtot td, #pricelist tr.tot td{
	padding-top:20px;
	text-align:right;
}
#items_st, #extras_st{
	font-weight:bold;
	text-align:right;
}
#total{
	font-size:14pt;
	text-align:right;
}
#pricelist td.price{
	text-align:right;
}

/* ---------------------------------------- Article List  ----*/
#articles li{
margin:15px 0;
}
#articles li h3{
margin:0px;
}

/* ---------------------------------------- Price List  ----*/
#pricelist{
width:600px;
}
#pricelist tbody tr td{
padding:0px 5px;
vertical-align:middle;
}
#pricelist tbody tr.desc td{
padding:2px 100px 2px 30px;
text-align:justify;
}
#pricelist tbody tr.head td{
	color:#333;
	font:18pt Georgia, "Times New Roman", Times, serif;
	font-weight:400;
	font-style:italic;
	padding-bottom:20px;
	padding-top:20px;
}
#pricelist tbody tr td.name {
	color:#333;
	font:14pt Georgia, "Times New Roman", Times, serif;
	font-weight:400;
	font-style:italic;
	padding-left:50px;
}
#pricelist tbody tr td.price2  {
	color:#666;
}
/* ----------------------------------------  Gallery  ----*/
#thumbox{
margin:10px 30px 30px 30px;
overflow:hidden;
padding-bottom:20px;
}
#thumbox a.thumb{
display:block;
width:150px;
height:150px;
margin:4px;
cursor:pointer;
}
#thumbox a.thumb:hover{
border-bottom:1px solid #ec8a49;
height:149px;
}



/* ---------------------------------------- Form Stuff  ----*/
form.form input, form.form textarea, form select{
	display:inline;
	margin:1px 0;
	background-color:white !important;
	border:2px outset green;
	color:#456;
	width:290px;/*DEFAULT VALUE*/
	padding:4px;

}
form.form input.button{
	cursor:pointer;
	padding:0px;
	background-color:#328739 !important;
	width:56px;/*DEFAULT VALUE*/
	height:22px;/*DEFAULT VALUE*/
	background-color:green !important;
	color:white;
	text-align:center;
}
form.form input.submit{
	width:auto;
}
form.form textarea {
	height:150px;/*DEFAULT VALUE */
	overflow:auto;
}
form.form label{
	display:block;
	width:100%;
	padding:7px 10px 0 0;
}

form.form input.newsubmit{
	position:relative;
	bottom:0;
	right:0px;

}

form.form div.selectpanel{
background-color:#dde;
border:1px solid #ccd;
padding:5px;
height:26px;
overflow:hidden;
margin-bottom:5px
}
form.form div.selectpanel .checkbox{
width:auto;
}
form.form div.selectpanel label.checkbox{
float:left;
width:80%;
margin-top:-5px;
}

form.form div.input input, form.form div.input textarea{
width:50%
}
form.form div.input textarea{height:100px;}
form.form div.input  input.narrow{
width:50px;float:left;margin-left:17px;
}
form.form div.input label{
clear:left;
float:left;
width:40%;
text-align:left;
}
form.form div.input p.notes{
clear:left;
float:left;
text-align:left;
margin:3px;
font-style: italic;
font-size:10pt;color:gray
}
form.form div.input{
width:90%;
padding:2px 5%;
text-align:right;
clear:both
}
form.form div.input input.button{
}
/* ------------------------------  Invoice */
#invoice{width:100%;border:1px solid black;}
#invoice table{width:100%;clear:both;}
#invoice table tr.column_title td{text-align:center;font-size:10pt;color:black;}
#invoice table td{
/*background-coolor:#acc;*/
padding:5px 8px;
}
#invoice .details{width:45%;clear:none;}
#invoice .address{float:left;}
#invoice .ino{float:right;}
/* ------------------------------  orderform */
table.orderform{
padding:10px;
border:1px solid #ccd;
margin:10px auto;
}
table.orderform tr.column_title{
font-weight:bold;
color:#345;
background-color:#eef;
}
table.orderform tr:hover{
background-color:#eef;
}
table.orderform td{
padding:3px 6px;
border:1px solid #ccd;
}
table.orderform td input.narrow{
width:50px;
}
#colorpick{width:80%;margin:10px auto; height:60px;
}
#colorpick div.option{
background-color:#dde;
border:1px solid #ccd;
padding:5px;
height:26px;
margin:2px;
width:28%;
text-align:left;
float:left;
}
#colorpick div.option input{
width:20px;margin-top:6px;
}
#colorpick div.option label{
margin-top:-3px;margin-left:4px;display:inline;
}
/* ------------------------------  hints */
.hintbox{
background-color:#ffc;
border:1px solid #fc9;
color:#fc9;
font:10pt ariel normal;
position:relative;
bottom:0px;
right:0px;
cursor:pointer;
}
/* ------------------------------  Links */
.link {
	text-decoration:none;
/*	padding-bottom:-2px;*/
	overflow:visible;
	border-bottom:1px solid #267c47;
	color:#456;
	cursor:pointer;
	padding:1px 2px;

}
.link:hover {
	color:#ec8a49;
	border-bottom-color:#ec8a49;
}


/*------------------------- Contact Form */
#contactform{
	width:300px;
	text-align:center;
	margin:10px 0;
	left:150px;
}

#contactform #email, #contactform #subject, #contactform #message, #contactform #clear, #contactform #send{
	
}

#contactform #clear, #contactform #send{
	float:left;
	margin-left:0px;


}
#contactform #send {
	float:right;
	margin-right:0px;
}

#contactform input{
	position:relative;
}


/*========================================================================Page CSS ======================*/
/*-------------------------------------------Page*/
#page{
margin:0px auto;
width:790px;
border-color:blue;
text-align:left;
overflow:visible;
min-height: 100%;
height: auto !important;
height: 100%;



}
/*  ------------------------------------------Three sections*/
#top{
width:1000px;
background:url('images/bgswirls.jpg') 0px 0px no-repeat transparent;
position:relative;
margin:0px -110px 20px -110px;
z-index:5;
height:213px;
}
#mid{
margin:0px 25px;

}
#foot{
position:absolute;
width:1000px;
height:69px;
left:-110px;
bottom:0px;
z-index:5;
}


/*-------------------------------------------Section:Top*/

#top div.panel {
width:1000px;
background:url('images/top.png') top center no-repeat transparent;
height:213px;
}
#top a div.logo,#top a.logo {
position:absolute;
top:0px;
left:100px;
width:128px;
background:url('images/logo.png') top left no-repeat transparent;
height:140px;
cursor:pointer;
}
#top a:hover div.logo, #top a.logo:hover {
background-position:top right;
}
#top div.num {
position:absolute;
top:79px;
left:231px;
width:254px;
background:url('images/phone_number.png') top left no-repeat transparent;
height:43px;
}




#topbar{
position:absolute;
right:100px;top:3px;
width:260px;
}
#topbar a{
display:block;
float:left;
margin-left:15px;
height:21px;
background-position:bottom left;
cursor:pointer;
}

#trolley_count{
color:white;font-size:12px;position:absolute;left:15px;top:-3px;width:16px;text-align:center;
}

#menu{
position:absolute;
top:132px;left:120px;
width:800px;

}
#menu #sub {
margin:2px auto 0px auto;
}
#menu a{
display:block;
float:left;
margin-left:25px;
height:32px;
background-position:bottom left;
cursor:pointer;
}
#menu #sub a{
height:21px;
margin-left:10px;
}
#menu a:hover, #topbar a:hover{
background-position:top left;
}
/* ============== top bar */
#topbar #trolleypic{width:23px;background-image:url('images/links/trolleypic.png');}
#topbar #trolley{width:61px;background-image:url('images/links/trolley.png');margin-left:-5px;}
#topbar #contact{width:69px;background-image:url('images/links/contact.png');}
#topbar #help{width:49px;background-image:url('images/links/help.png');}

/* ============== main menu */
#menu #about{width:238px;background-image:url('images/links/about.png');}
#menu #about2{width:84px;background-image:url('images/links/about2.png');}
#menu #services{width:154px;background-image:url('images/links/services.png');}
#menu #products{width:162px;background-image:url('images/links/products.png');}
#menu #prices{width:120px;background-image:url('images/links/prices.png');}
#menu #gallery{width:92px;background-image:url('images/links/gallery.png');}
/* =========about: */
#menu #concept{width:75px;background-image:url('images/links/concept.png');}
#menu #background{width:104px;background-image:url('images/links/background.png');}
#menu #press{width:50px;background-image:url('images/links/press.png');}
#menu #goals{width:132px;background-image:url('images/links/goals.png');}
#menu #terms{width:166px;background-image:url('images/links/terms.png');}
/* ========services */
#menu #maintenance{width:112px;background-image:url('images/links/maintenance.png');}
#menu #planting{width:132px;background-image:url('images/links/planting.png');}
/* now gardening */
#menu #gardening{width:91px;background-image:url('images/links/gardening.png');}
#menu #landscaping{width:111px;background-image:url('images/links/landscaping.png');}
#menu #lawn{width:91px;background-image:url('images/links/lawn.png');}
#menu #cleaning{width:155px;background-image:url('images/links/cleaning.png');}
#menu #handyman{width:95px;background-image:url('images/links/handyman.png');}
#menu #clearance{width:85px;background-image:url('images/links/clearance.png');}
/* ========products */
#menu #gardens{width:154px;background-image:url('images/links/gardens.png');}
#menu #baskets{width:140px;background-image:url('images/links/baskets.png');}
#menu #planters{width:75px;background-image:url('images/links/planters.png');}
#menu #boxes{width:125px;background-image:url('images/links/boxes.png');}
#menu #irrigation{width:154px;background-image:url('images/links/irrigation.png');}
#menu #gifts{width:47px;background-image:url('images/links/gifts.png');}
/* ========prices */
#menu #offers{width:118px;background-image:url('images/links/offers.png');								display:none;}





/*-------------------------------------------Section:Mid*/

#sinkhole{
float:right;
width:190px;height:224px;
margin:20px -55px 20px 20px;
z-index:5;
color:white;
}
#sinkhole div.panel{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:url('images/in.png') top center no-repeat transparent;
}
#sinkhole div.bg{
position:absolute;
left:8px;
top:8px;
width:175px;
height:209px;
background:url('images/bgbox.jpg') -30px -30px no-repeat transparent;
}
#sinkhole div.title{
position:absolute;
top:30px;
left:45px;
width:102px;
height:25px;
background-image:url('images/links/callback.png');
}
#sinkhole div.form{
text-align:center;
margin:60px 20px;
}
#sinkhole form input{
padding:5px;
width:140px;
height:21px;
margin:30px auto;
border:none;
background:url('images/icons/call_back_number.png') no-repeat transparent!important;
color:black;
}
#sinkhole form div.button{
background:url("images/icons/call_back_button.png") no-repeat transparent;
width:135px;
height:30px;
margin-left:10px;
padding-top:5px;
cursor:pointer;
color:white;
}
/*-------------------------------------------Section:Foot*/

#foot div.panel {
position:absolute;
background:url('images/bot.png') bottom center no-repeat transparent;
height:69px;
width:1000px;
}
#foot div.bg {
position:absolute;
background:url('images/bgswirls.jpg') -10px -10px no-repeat transparent;
margin-top:8px;
height:60px;
width:1000px;
}
#foot #banner{
position:absolute;
left:150px;
top:46px;
width:700px;
color:white;
font:10pt Arial, sans; 
text-align:center;
}


/*------------------------------------------Section: Specifics */

#buttons{width:790px;margin:20px 0 0 0;}
#buttons a{
  margin-right:4px;
}

#big_list{
background:url('images/justaddwaterfade.png') right repeat-y white;
width:416px;
border-left:1px solid #ccc;
overflow:visible;
}
#big_list table{margin-right:5px;}
#big_list table td{
padding:5px;
font-size:10pt;
text-align:justify;
}
#big_list table td.l{
	text-align:right;
	color:#357;
	font:18pt Georgia, "Times New Roman", Times, serif;
	font-weight:400;
	font-style:italic;
	margin:20px 0px;
}

#orderonline{
	margin:auto -75px auto 20px;
	float:right;
	clear:right;
	display:block;
	width:213px;
	height:95px;
	background:url('images/icons/orderonline.png') top left no-repeat white;
	z-index:10;
}

#news a.block {
	display:block;
	padding:8px 10px;
	border-bottom:1px dotted #aaa;
}
#news a.block:hover{
	background-color:#eee;
	border-bottom:1px solid #357;
}
#news a.block span.date{
	display:block;
	font-size:8pt;
	text-align:right;
	float:left;
	margin:0 6px 0 4px;
	color:#aaa;
	width:30px;
	overflow:hidden;
}




/*-------------------------------------------Section:Tools*/
.cb{clear:both;}
a.all{display:block;cursor:pointer;}
.c{width:100%;text-align:center;}
.ar{text-align:right;}

/* Decals */
.dcl_flower_br{	background:url('../images/decalflowerbr.gif') bottom right no-repeat;}

/* Tools */

.pointer{
	cursor:pointer;
}
.tab{margin-left:100px;}
.left{ float:left;clear:none;}
.right{ float:right;}
.clear{ clear:both;}
.aright{ text-align:right;}
.aleft{ text-align:left;}

.soon{background:url('images/soon.png') bottom!important;}
.cover{position:absolute;top:0;left:0;width:100%;height:100%;}
.inline{display:inline;}
.hidden{visibility:hidden;}
/*.fade{opacity:0.5;filter:alpha(opacity=50);}*/
.relative{position:relative;}
.block{display:block;}
.small{font-size:10pt;}

.fancy{font-family: Georgia, "Times New Roman", Times, serif; font-style:italic;}
.bright{color:#ec8a49;}
.big{font-size:18pt;}
span.highlight{color:#456;font-weight:bold;}