/* Structure and Layout
--------------------------------------- */

body {
	background: #D5F0FC url(/images/pagetopbk.png) repeat-x;
	color: #666;
	text-align: center;
	line-height: 1.5em;
	font: 100%  helvetica, sans-serif;
	margin: 0;
	padding: 0;
	}

.hide {display: none}

#frame, #footerframe {
	text-align: left;
	margin: 0 auto;
	width: 760px;
	}

#wrapper {background: #fff;margin: 0 0 0 9px ; width: 740px !important}

#maincol {
	float: left;
	display: inline;
	width: 590px !important;
	padding: 0;
	font-size: 80%;
	}	


#rightcol {
	float: right;
	display: inline;
	width: 148px;
	color: #5b584c;
	font-size: 80%;
	margin: 0 0 10px 0;
	}


#footer {
	clear: both !important;
	background: #7D7E7E url(../images/pagebotbk.png) repeat-x;
	color: #5b584c;
	font-size: 80%;
	min-height: 150px
	}

a {text-decoration: none}
a:focus, a:hover {color: #000 !important;}
#footer a:focus, #footer a:hover {background: #FFEA00}

#logolink h1 {margin: 0; padding: 0}
#logolink a {display: block; background: url(../images/logo.jpg) top left no-repeat; width: 80px; height: 100px; position: relative; top: 3px; left: 15px}
#logolink h1 span {display: none}
/* Main Col Blocks
--------------------------------------- */

#maincol .block {background: #fff url(../images/maincoltop.png) top left no-repeat; width: 570px; display: block; margin: 10px 0 0 0; float: left}
#maincol .block p {margin: 0; padding: 0.5em 10px}
#maincol .blockbottom {background: #fff url(../images/maincolbot.png) bottom left no-repeat; width: 570px; display: block;  float: left}

/* General formatting
--------------------------------------- */
#maincol h1 {margin: 0; padding: 10px 0 0 0; font-size: 160%; color: #E5761C; font-weight: normal !important}
#maincol h2 {margin: 0; padding: 10px 0 0 0; font-size: 160%; color: #8CC63E; font-weight: normal !important}
#maincol h2#contact {margin: 6px 26px 0 0; padding: 0; font-size: 100%; float: right; font-weight: normal; color: #fff}

a {color: #E5761C; text-decoration: none;}
#maincol ul {width: 520px;}
#maincol li {margin: 5px 0; list-style: circle}
#maincontent {display: block; padding: 10px 5px 10px 15px}
#maincontent p {padding: 0 5px 0 0}

#maincontent .left {float: left; margin: 0 10px 5px 0}
#maincontent .right {float: right; padding: 0 0 5px 10px}
.webblerimage {border: 2px solid #C5C4C2}

/* Gifts
--------------------------------------- */
#maincol .gift {display: block; width: 165px; float: right; padding: 0 0 0 10px; margin: 10px 0 0 0}
#maincol .gift .add a {display: block; background: url(../images/add_off.png) top left no-repeat; width: 118px; height: 28px; color: #fff; padding: 10px 0 0 30px; font-weight: bold;}
#maincol .gift .image {margin: 10px 0 0 0}

/* Primary Nav
--------------------------------------- */
#primarynav{
padding: 0;
background: transparent;
position: absolute;
top: 110px;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#primarynav ul{
font-weight: bold;
margin:0 0 0 10px;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}

#primarynav li{
display:inline;
padding:0;
}

#primarynav a{
float:left;
color: #E5761C;
margin:0;
padding:18px 14px 16px 13px;
text-decoration:none;
font-size: 14px;
}

/*
#primarynav a span{
float:left;
display:block;;
padding:3px 9px 3px 6px;
}

#primarynav a span{
float:none;
}

#primarynav a:hover span{
color: #000
}
*/

#primarynav a:hover{
background: url(../images/navon.png) top left repeat-x;
color: #000
}

#primarynav .this a{ /*currently selected tab*/
background: url(../images/navon.png) top left repeat-x;
color: #000
}

/* Rightcol
--------------------------------------- */
#rightcol h4.big {font-size: 140% !important}
#rightcol .basket {display: block; float: left; width: 148px; background: #8CC63E url(../images/bskt_top.png) top left no-repeat; margin: 20px 0 0 0}
#rightcol .basket_bot {display: block; float: left; width: 148px; background: url(../images/bskt_bot.png) top left no-repeat; }
#rightcol .basket h4 {font-size: 120%; color: #fff; margin: 0; padding: 10px 0 5px 10px}
#rightcol .basket a {color: #fff; display: block; width: 138px; padding: 2px 0 2px 10px}
#rightcol .basket a:hover, #rightcol .basket li.this {background: #fff}
#rightcol .total {font-size: 110%; color: #fff; margin: 0; padding: 10px 0 5px 10px; font-weight: bold}

#rightcol .secondarynav {display: block; float: left; width: 148px; background: #AAE1FA url(../images/right_top.png) top left no-repeat; margin: 5px 0 0 0}
#rightcol .secondarynav_bot {display: block; float: left; width: 148px; background: url(../images/right_bot.png) top left no-repeat}
#rightcol .secondarynav h4 {font-size: 120%; color: #E5761C; margin: 0; padding: 10px 0 5px 10px}
#rightcol ul {margin: 0; padding: 0}
#rightcol li {margin: 0; padding: 0; list-style: none}
#rightcol .secondarynav a {color: #333; display: block; width: 138px; padding: 2px 0 2px 10px}
#rightcol .secondarynav a:hover, #rightcol .secondarynav li.this {background: #fff}

#rightcol .quotes {display: block; float: left; width: 148px; background: #8CC63E url(../images/bskt_top.png) top left no-repeat; margin: 0}
#rightcol .quotes_bot {display: block; float: left; width: 148px; background: url(../images/bskt_bot.png) top left no-repeat; }
#rightcol .quotes .content {font-size: 180%; color: #fff; margin: 0; padding: 10px 0 5px 10px}

#rightcol .maf{
display: block;
background: url(../images/mail_friend.png) top left no-repeat;
width: 148px;
height: 92px;
float: left;
padding: 0 0 0 10px
}

#rightcol .maf h4 {
color: #fff;
font-size: 14px;
margin: 10px 0;
padding: 0
}

#rightcol .maf a {
color: #fff
}
/* Listings
--------------------------------------- */
#listings .item {float: left; padding: 10px 15px 5px 10px}
#listings .item a:hover {border: 0 important!; background: transparent !important}

#listings .item ul {margin: 0; padding: 0}
#listings .item li {list-style: none; float: left; margin: 0 5px 0 0; padding: 0}
#listings .item h4 {margin: 0; padding: 0}
#listings .item li a img {border: 0 !important}

/* eCards
--------------------------------------- */
#cardlistings {display: block; margin: 20px 0}
#cardlistings .item {display: block; float: left; margin: 0 10px 10px 0; width: 275px; }
#cardlistings img {border: 1px solid #C0C0C0;}
#cardlistings .text {display: block; background: #D5F0FC; padding: 0.5em;  height: 40px}
#cardlistings .bottom {background: url(../images/ecard_tab_bot.png) bottom left no-repeat; display: block; width: 275px; height: 6px}
#maincontent .cardfooter {display: block; width: 538px; background: #8CC63E; padding: 3px 10px; margin: 0 0 5px 0; color: #fff}
#maincontent .cardfooter a {color: #333;}

#maincontent .step1 {display: block; width: 560px; height: 38px; background: url(../images/steps_1.png) top left no-repeat; margin: 25px 0 0 0; text-indent: -2000px}
#maincontent .step2 {display: block; width: 560px; height: 38px; background: url(../images/steps_2.png) top left no-repeat; margin: 25px 0 0 0; text-indent: -2000px}
#maincontent .step3 {display: block; width: 560px; height: 38px; background: url(../images/steps_3.png) top left no-repeat; margin: 25px 0 0 0; text-indent: -2000px}
#maincontent .step4 {display: block; width: 560px; height: 38px; background: url(../images/steps_4.png) top left no-repeat; margin: 25px 0 0 0; text-indent: -2000px}

#imagelinks {display: block}
#imagelinks .item {display: block; float: left; margin: 0 0 0.5em 0}
#imagelinks .image {display: block; float: left}
#imagelinks .image img {border: 0 !important}
#imagelinks .text {display: block; float: right; width: 470px}
#imagelinks .item p {margin: 0; padding: 0}
#imagelinks h2.green {color: #8CC63E}
#imagelinks h2.orange {color: #E5761C}
#imagelinks h2.red {color: #CB3301}
#imagelinks h2.blue {color: #3B5998}

#ecardform {float: left; }
#ecardform form {padding: 0; margin: 0}
#ecardform legend {color: #666; font-weight: bold; margin: 0 !important; padding: 0 !important;}
#ecardform fieldset {border: 0 !important; margin: 0 !important; padding: 0 !important}
#ecardform span.formradio {margin: 0 0 0 100px;}
#ecardform .required {color: red;}
#ecardform .elements .required {color: red; margin: 0 0 0 -8px; padding: 0}
#ecardform input.inputitem {font-size: 9px; border: 1px solid #ccc; width: 295px}
#ecardform label {text-align: left; width: 250px; padding: 5px 10px 5px 0; display: block; float: left; margin-bottom: 10px;}
#ecardform .label2 {text-align: left; width: 560px; padding: 15px 0 5px 0; display: block; float: left; margin-bottom: 10px; border-bottom: 1px dashed #E5761C}
#ecardform br {clear: left;}
#ecardform textarea {border: 1px solid #ccc; margin: 5px 0; float: left; width: 295px}
#ecardform #shopbutton3 button {border: 0 !important; float: right; margin: 0; padding: 0; background: transparent url(../images/add_off.png) top left no-repeat; width: 148px; height: 48px; font-weight: bold; color: #fff}
#ecardform #shopbutton3 button:hover {color: #000; cursor: pointer}
#ecardform #shopbutton3 button span {display: block; width: 148px; text-align: center; padding: 10px 0 0 0 !important; margin: 0 !important; height: 48px}
#ecardform p.noindent {margin: 0; padding: 5px 0 8px 0 !important}
#ecardform p.clear {display: block; clear: both; }
#ecardform p.orange {color: #E5761C}
#ecardform .small {font-size: 11px}

#ecardform #shopbutton3 a {border: 0 !important; float: right; margin: 0; padding: 0; background: transparent url(../images/add_off.png) top left no-repeat; width: 148px; height: 48px; font-weight: bold; color: #fff}
#ecardform #shopbutton3 a:hover {color: #000; cursor: pointer}
#ecardform #shopbutton3 a span {display: block; width: 148px; text-align: center; padding: 10px 0; }

/* Sitemap
--------------------------------------- */

#sitemap .trunktitle { font-size: 110%; font-weight: bold; border-bottom: 1px solid #F0F0F0; padding: 0 0 5px 10px; margin: 15px 0 5px 0 } 
#sitemap .branchmapitem a { margin: 0; padding: 0 0 0 10px;font-weight: bold;
background: url(../images/aropink.png) 1% 5px no-repeat; }
#sitemap .branchmap ul.leafmap { margin: 0 0 6px 12px; padding: 0;}
#sitemap .branchmap ul.leafmap li { display: block; background: none; padding: 0; margin: 2px 0 0 0;}
#sitemap .branchmap ul.leafmap li a,
#sitemap .branchmap ul.leafmap li a span { padding: 0 0 0 10px; margin: 0; background: none; text-decoration: none;}
#sitemap .branchmap ul.leafmap li a:hover,
#sitemap .branchmap ul.leafmap li a:hover span { text-decoration: underline;}

#maincol .pageimage {margin: 4px 0 8px 10px}
#maincol .pageimage a:hover {background: transparent !important}

/* Forms
--------------------------------------- */
#form legend {color: #666; font-weight: bold}
#form fieldset {margin: 10px; border: 1px solid #ccc}
span.formradio {margin: 0 0 0 100px;}
.required {color: red; font-weight: bold; }
.elements .required {color: red; margin: 0 0 0 -8px; padding: 0}
input.inputitem {display: block;	float: left;margin: 5px 0;border: 1px solid #ccc;font-size: 9px; width: 200px}
label {	text-align: left; width: 150px; padding: 5px 10px 5px 0; display: block; float: left; margin-bottom: 10px;}
br {clear: left;}
#form select {border: 1px solid #ccc; font-size: 9px; width: 202px}
#form textarea {border: 1px solid #ccc; margin: 5px 0; float: left}
#form .formsubmit a {margin: 0 0 0 11px; border: 1px solid #ccc; padding: 5px; float: left}

/* Footer links
--------------------------------------- */
#footerframe {background: #7D7E7E url(http://www.caregifts.org.uk/images/footer.jpg) top left no-repeat; padding: 0; min-height: 42px;}
#footerframe .content { position: relative; display: block; float: left; width: 740px}
#footerframe .left {float: left; margin: 30px 0 0 26px; color: #fff}
#footerframe .right {position: absolute; bottom: 0; right: 0; color: #fff}
#footerframe .left a {color: #FFF200}
#footerframe .right a {color: #FFF200}

/* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}
