@import url("reset.css");
@import url("grid.css");
@import url("typograpy.css");
@import url("forms.css");
@import url("comments.css");

/*

Bring the Hope Color

Brown: #4c261d
Orange #CC5500
Pale Lime Green: #CDD797
Sage Green: #CDD797

*/


/* -----> BASIC LAYOUT <----- */

li{
	line-height:15px;
	margin-bottom:15px;
}

li span.label{
	display:inline-block;
	width:100px;
	font-weight:bold;
}

body {
background-color: #4c261d;
background-image: url(../img/bg.jpg); 
background-repeat: no-repeat;
height:100%;
}

#wrap {
margin:0 auto;
width: 770px;
background-color:#FFFFFF;
position:relative;
overflow:hidden;
}


.box{
border: 1px solid coral; 
padding: 10px; 
position: relative;  
background-color: #f3f3f3;
margin:0 10px 20px 10px;
}



#threesteps{
width:770px;
height:129px;
}

#greenbox {
	width: 770px;
	height: auto;
	background-color:#CDD797;
	clear:both;

}

#footer {
clear:both;
display:block; 
background:#CAD1A8; 
height:40px; 
width:770px; 
margin:0 auto; 
text-align:center;
}

/* -----> Panels  <----- */

.single_col{
padding:30px 200px 30px 30px;
}

.single_col_wide{
padding:30px 30px 30px 30px;
}

.col{
  clear:both;
  padding:15px 30px 15px 30px;
}

.col_left_wide{
  float:left;
  padding:15px 15px 15px 30px;
  width:410px;
}

.col_right_slim{
  float:right;
  padding:15px 30px 15px 15px;
  width:270px;
}

.col_left_slim{
  float:left;
  padding:15px 15px 15px 30px;
  width:270px;
}

.col_right_wide{
  float:right;
  padding:15px 30px 15px 15px;
  width:410px;
}

div.block{
border: 1px solid #CC5500; 
padding: 5px; 
position: relative;  
background-color: #f3f3f3;
margin:0 0 0 0;
}


.panel{
width:470px;
border:solid 1px #999999;
min-height:300px;
}

.panel h2{
display:bock;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
padding:5px;
margin: 0 0 0 0;
background-color:#666633;
}

.panel_content{
padding: 15px;
}

/* -----> Forms  <----- */

form li{
margin: 5px 0 5px 0;
}

input{
border:solid 1px #000000;
}

label{
display: inline-block;
width:150px;
font-weight:bold;
}

fieldset{
margin: 0 0 15px 0;
}

legend{
font-weight:bold;
color:#cc6600;
padding:0 0 10px 0;
}

.button{
display:block;
border:solid #976600 2px;
padding:10px;
float:right;
text-decoration:none;
color:#fff;
background-color:#CC6600;
margin:15px 0 30px 15px;
font-weight:bold;
}

a:hover.button{
display:block;
border:solid #CC6600 2px;
padding:10px;
float:right;
text-decoration:none;
color:#fff;
background-color:#976600;
margin:15px 0 30px 15px;
font-weight:bold;
}


/* -----> BASIC TYPOGRAPHY <----- */

body, p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
margin-bottom:15px;
}

p.quote{
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #CC6600;
margin:0 0 15px 0;
}

hr.gray{
	border: 0;
	color:#CCC;
	background-color: #ccc;
	height: 1px;
}

h1{
display:none;
}

h2 {
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #CC6600;
	font-weight:bold;
	margin:0 0 15px 0;
}

h3 {
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CC6600;
	font-weight:bold;
	margin:0 0 15px 0;
}

h3.block{
  display:block;
  font-size:12px;
  font-weight:bold;
  color:#FFFFFF;
  padding:5px;
  margin: 0 0 10px 0;
  background-color:#CC5500;
  }
  
h4{
  margin:3px 0 6px 0;
  font-weight:bold;
}

a{
color:#CC5500;
}

.bigorangelink{
	font-size: 14px;
	color: #CC6600;
	margin:15px 0 15px 0;
}

a:hover
{
	color: #FF6600
}

span.citation{
font-weight:normal;
}

.tinytext{
font-size: 10px;
}

.biggreentext{
	font-size: 14px;
	color: #839102;
	font-weight:bold;
	margin:15px 0 15px 0;
}


#footer a {
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

input{
border:solid #999999 1px;
}

/* -----> Errors  <----- */
.error{
padding:15px;
margin:0 10px 20px 10px;
border: solid 1px #FF0000;
}

.error h2{
color: #FF0000;
}

.error ul{
list-style:circle;
margin:0 0 0 25px ;
}

.error li{
margin-bottom:5px;
}

.response{
color: #CC6600;
}


/* -----> Navigation  <----- */


#nav{
position:relative;
}

#menu_main {
width:415px;
height:29px;
}

#menu_main li{
float:left;
margin-bottom:0px;
}

#main_shop a{
display:block;
width:40px;
height:0; padding-top:29px;
background:url(../img/buttons_shop.jpg) no-repeat; 
overflow:hidden;
}

#main_vote a{
display:block;
width:39px;
height:0; padding-top:29px;
background:url(../img/buttons_vote.jpg) no-repeat; 
overflow:hidden;
}

#main_submit a{
display:block;
width:56px;
height:0; padding-top:29px;
background:url(../img/buttons_submit_messages.jpg) no-repeat; 
overflow:hidden;
}

#main_contests a{
display:block;
width:63px;
height:0; padding-top:29px;
background:url(../img/buttons_special_contests.jpg) no-repeat; 
overflow:hidden;
}

#main_news a{
display:block;
width:51px;
height:0; padding-top:29px;
background:url(../img/buttons_news.jpg) no-repeat; 
overflow:hidden;
}

#main_dogood a{
display:block;
width:62px;
height:0; padding-top:29px;
background:url(../img/buttons_do_good.jpg) no-repeat; 
overflow:hidden;
}

#main_answers a{
display:block;
width:61px;
height:0; padding-top:29px;
background:url(../img/buttons_get_answers.jpg) no-repeat; 
overflow:hidden;
}

#main_login a{
display:block;
width:43px;
height:0; padding-top:29px;
background:url(../img/buttons_login.jpg) no-repeat; 
overflow:hidden;
}

#main_logout a{
display:block;
width:43px;
height:0; padding-top:29px;
background:url(../img/buttons_logout.jpg) no-repeat; 
overflow:hidden;
}

#main_account a{
position:absolute;
right:15px;
top:8px;
z-index:10;
}

#menu_footer{
padding:5px 0 0 0;
}

#menu_footer li{
display:inline;
margin: 0 5px 0 5px;
}

/* -----> Newsletter  <----- */

#newslettersignup{
width:355px;
height:29px;
position:absolute;
top:0px;
right:0px;
background:url(../img/buttons_newsletter.jpg) no-repeat; 
overflow:hidden;
}

#newsletter input
{
position:relative;
left:110px;
top:4px;
}


/* -----> login.php  <----- */

#login{

}


/* -----> login_soft.php  <----- */

#softlog h2{
width:770px;
height:35px;
text-indent:-1000em;
margin: 5px 0 15px -30px;
}

#softlog{ 
padding:15px 30px 30px 30px;
background:url(../img/test_bg.gif) no-repeat;

}

#softlog div.box{ 
float:left;
width: 400px;
height:auto;
margin-bottom:30px;

}

#softlog #instructions{ 
display:block;
width:225px;
float:left;
margin-left:30px;
}

/* -----> index.php  <----- */

#fp_featured h2{
width:770px;
height:35px;
background:url(../img/header_featured_shirts.gif) no-repeat;
text-indent:-1000em;
margin: 0 0 0 0px;
}

#fp_more h2{
width:770px;
height:35px;
background:url(../img/header_more_shirts.gif) no-repeat;
text-indent:-1000em;
margin: 0 0 0 0px;
}

a.buynow{
display:block;
width:68px;
height:26px;
background:url(../img/buynowbutton.gif) no-repeat;
text-indent:-1000em;
margin:0 auto 5px auto;
}

#greenbox{
padding:15px 30px;
height:200px;
}

#greenbox div#greenbox_left{
width:355px;
display:block;
float:left;
}

#greenbox div#greenbox_right{
width:355px;
display:block;
float:left;
}

#greenbox div#greenbox_left h2{
width:360px;
height:29px;
background:url(../img/header_contests_and_community.gif) no-repeat;
text-indent:-1000em;
}

#greenbox div#greenbox_right h2{
width:360px;
height:29px;
background:url(../img/header_do_some_good.gif) no-repeat;
text-indent:-1000em;
}



/* -----> shop.php  <----- */


#cat_menu ul{
width:732px;
height:180px;
margin: 25px auto 50px auto;
}

#cat_menu li{
float:left;
margin:2px;
}

#Guys{
display:block;
width:173px;
height:180px;
background:url(../img/guys.gif) no-repeat bottom;
text-decoration:none;
font-size:14px;
font-weight:bold;
}

#Girls{
display:block;
width:173px;
height:180px;
background:url(../img/girls.png) no-repeat bottom;
text-decoration:none;
font-size:14px;
font-weight:bold;
}

#Kids{
display:block;
width:173px;
height:180px;
background:url(../img/kids.gif) no-repeat bottom;
text-decoration:none;
font-size:14px;
font-weight:bold;
}

#group{
display:block;
width:173px;
height:180px;
background:url(../img/group.gif) no-repeat bottom;
text-decoration:none;
font-size:14px;
font-weight:bold;
}

/* -----> show_cat.php  <----- */

ul.product_list{
display:block;
margin:0 15px;

}

li.product{
width:178px;
height:250px;
float:left;
margin:15px 3px 0 3px;
}

li.product img{
border: 1px solid black;
}

li.product p{
text-align:center;
margin: 2px 0 3px 0;
}

li.product h2{
width:770px;
height:35px;
background:url(../img/header_more_shirts.gif) no-repeat;
text-indent:-1000em;
margin: 0 0 0 0px;
}

a.buynow{
display:block;
width:68px;
height:26px;
background:url(../img/buynowbutton.gif) no-repeat;
text-indent:-1000em;
margin:0 auto 5px auto;
}

/* -----> show_product.php  <----- */

#product_details #display_left{
width:440px;
margin-left:15px;
float:left;
}

#product_details #display_left h2{
display:bock;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
width:430px;
padding:5px;
margin: 15px 0 15px 0;
background-color:#ff9900;
}

#product_details #display_left img{
margin-bottom:15px;
}

#product_details #display_right{
width:285px;
margin-left:15px;
float:left;
}

#product_details #display_right h2{
display:bock;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
width:275px;
padding:5px;
margin: 15px 0 15px 0;
background-color:#666633;
}

#product_details #display_right h3{
font-size:12px;
font-weight:bold;
color:#666633;
}

#product_details #options{
border:solid 1px #999999;
padding:5px;
margin-bottom:15px;
}

#product_details span.price{
font-size:16px;
font-weight:bold;
}

#product_details #options a.buynow{
margin:0;
}

.front, .back{
display:block;
width:128px;
float:left;
}

.back{
display:block;
width:128px;
float:left;
margin-left:15px
}

#product_details .front p, #product_details .back p{
margin: 5px 0 5px 0;
}

#product_details .front a, #product_details .back a{
margin: 5px 0 0 0;
}

/* -----> show_cart.php  <----- */

#my_order{
border:solid 1px #999999;
}

#my_order h2{
display:bock;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
padding:5px;
margin: 0 0 15px 0;
background-color:#666633;
}

#my_order div{
border:solid 1px #000;
margin:15px;
}

#my_order table{
width:100%;
}

#my_order td{
padding:10px;
vertical-align:middle;
}

#order_total{
padding:15px 30px 15px 30px;
text-align:right;
}

/* -----> checkout.php  <----- */

#yourdetails{
border:solid 1px #999999;
margin-top:30px;
}

#yourdetails h2{
display:bock;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
padding:5px;
margin: 0 0 15px 0;
background-color:#666633;
}

#shippingaddress{
border:solid 1px #999999;
margin-top:30px;
}

#shippingaddress h2{
display:bock;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
padding:5px;
margin: 0 0 15px 0;
background-color:#666633;
}

#yourdetails ul, #shippingaddress ul{
margin:15px;
}

#yourdetails ul li, #shippingaddress ul li{
margin: 0 0 15px 0;
}

#yourdetails ul li label, #shippingaddress ul li label{
display: inline-block;
width:170px;
}

#shipping_form{
margin:30px 0;
text-align:center;
}

#purchase_form{
margin:30px 0 0 30px;
}

#purchase_form li{
list-style:none;
}

#purchase_form input{
margin-right:10px;
}

/* -----> vote.php  <----- */

#vote h2{
width:770px;
height:35px;
background:url(../img/header_vote.gif) no-repeat;
text-indent:-1000em;
margin: 5px 0 5px -30px;
}

#vote{ 
padding:15px 30px 30px 30px;
}

#vote div.box{ 
float:left;
width: 200px;
height:auto;
margin-bottom:30px;

}

#votingbooth{ 
display:block;
width:440px;
float:left;
margin-left:20px;
}

#wisdom{ 
width:450px;
height:250px;
float:left;
background:url(../img/brickwall.gif) no-repeat;
display:table-cell;
vertical-align:middle;
}

#wisdom p{
text-align:center;
font-size: 15px;
color: #fff;
font-weight:bold;
margin:0 30px 0 30px;
}

#lever input{
margin: 10px;
}

/* -----> submit.php  <----- */

#submit h2{
width:770px;
height:35px;
background:url(../img/header_submit_messages.gif) no-repeat;
text-indent:-1000em;
margin: 5px 0 15px -30px;
}

#submit{ 
padding:15px 30px 30px 30px;

}

#submit div.box{ 
float:left;
width: 400px;
height:auto;
margin-bottom:30px;

}

#submit #instructions{ 
display:block;
width:225px;
float:left;
margin-left:30px;
}

/* -----> contests.php  <----- */

#contests h2{
width:770px;
height:35px;
background:url(../img/header_contests.gif) no-repeat;
text-indent:-1000em;
margin: 5px 0 15px -30px;
}

#contests{ 
padding:15px 30px 30px 30px;
}

/* -----> news.php  <----- */

#news h2{
width:570px;
height:35px;
background:url(../img/header_news.gif) no-repeat;
text-indent:-1000em;
margin: 5px 0 15px -30px;
}

#news{ 
padding:15px 200px 30px 30px;
background:url(../img/community_bg.gif) repeat-y 0 0;
}

/* -----> dogood.php  <----- */

#dogood h2{
width:570px;
height:35px;
background:url(../img/header_do_good.gif) no-repeat;
text-indent:-1000em;
margin: 5px 0 15px -30px;
}

#dogood{ 
padding:15px 200px 30px 30px;
background:url(../img/do_good_bg.gif) repeat-y 0 0;
}

/* -----> answers.php  <----- */

#answers h2{
width:770px;
height:35px;
background:url(../img/header_get_answers.gif) no-repeat;
text-indent:-1000em;
margin: 5px 0 15px -150px;
}

#answers{ 
padding:15px 50px 30px 150px;
background:url(../img/answers_bg.jpg) repeat-y 0 0;
}

.questionheaders {
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #CC6600;
	margin:25px 0 5px 0;
}

.return {
margin:5px 0 5px 0;
}

#answers ul{
list-style:disc;
margin:25px 0 25px 25px;
}

#answers ul li{
	margin-bottom:0px;
}

/* -----> profile_wisdom.php  <----- */

#wisdom_panel{
 padding:50px;
 text-align:center;
 background-color:#CC5500;
 border: solid 2px #4c261d;
 color:#FFFFFF;
 font-size:16px;
 font-weight:bold;
}

#voting_booth ul{
  text-align:center;
  }
  
#voting_booth li{
  display:inline;
  }

#voting_booth input{
  width:125px;
  height:30px;
  background-color:#CC5500;
  color:#fff;
  font-weight:bold;
  }
 

/* -----> account and admin layout  <----- */

#left{
float:left;
padding:0 15px 30px 0;
}

#right{
float:right;
padding: 0 0 30px 15px;
}

/* -----> account.php  <----- */

#accountmenu ul{
display:block;
width:200px;
border:solid 1px #ccc;

}

#accountmenu ul li{
	margin-bottom:0px;
}

#accountmenu ul li a{
display:block;
width:200px;
text-align:center;
padding: 8px 0;
background-color:#f1f1f1;
border-top:solid 1px #ccc;
text-decoration:none;
font-weight:bold;
font-size:12px;
}

#accountmenu ul li.accountmenu_header{
display:block;
width:200px;
height:42px;
text-indent:-1000em;
background:url(../img/my_bth_header.jpg) no-repeat;
}

#accountmenu ul li.accountmenu_admin a{
background-color:#CC6600;
color:#fff;
}

/* -----> account_my_wisdoms.php  <----- */
#user_wisdoms{
margin:0 0 30px 0;
}

#user_wisdoms li{
margin:30px 0 30px 0;
}

.my_wisdom_list{
font-size:14px;
margin:3px 0 10px 0;
}

.wisdom_status{
font-weight:bold;
margin: 3px 0 3px 0;
}

.wisdom_status_approved{
color:#00FF00;
margin-right:25px
}

.wisdom_status_pending{
color:#FF0000;
}

.wisdom_status_yes{
color:#00FF00;
}

.wisdom_status_no{
color:#FF0000;
}

/* -----> admin.php  <----- */

#adminmenu ul{
display:block;
width:200px;
border:solid 1px #ccc;
}

#adminmenu ul li a{
display:block;
width:200px;
text-align:center;
padding: 8px 0;
background-color:#f1f1f1;
border-top:solid 1px #ccc;
text-decoration:none;
font-weight:bold;
font-size:12px;
}

#adminmenu ul li{
	margin-bottom:0px;
}

.submenu{
display:block;
width:200px;
border:solid 1px #ccc;
margin-top:15px;
}

.submenu li a{
display:block;
width:200px;
text-align:center;
padding: 8px 0;
background-color:#CC6600;
border-top:solid 1px #ccc;
text-decoration:none;
font-weight:bold;
font-size:12px;
color:#fff;
}