/*
STYLE SHEET FOR JAKARNA
Created by Bevivid
www.xxxxxxxx.co.uk
ToC
	1.  defaults
	2.  structure
	3.  links and navigation
	4.  fonts
	5. 	forms
	6.  images
	7.  hacks
Notes
*/

/* ------- 1. defaults ------- */

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	/* background-color: #FFFFFF; */
	font-size: 13px;
	background:  #F5EEDB url(../images/background.jpg) no-repeat fixed bottom center;
	text-align: center;
}

/* ------- 2. structure ------- */

#container {
	margin: 10px auto;
	min-height: 1200px;
	width: 900px;
	border: solid 1px #432E2A;
	background-color: #FFFFCC;
}


.Slide { /* slide show that sits behind the masthead */
height: 210px;
overflow: hidden; /* This is so that the images don't display down the page while the page has finished loading */
position: relative;
z-index: 0;
}


#masthead {  /* top of site containing logo, login, and main site nav */
width: 900px;
height: 210px;
/* background-color: #F3E5B1; */
position: relative;
/* z-index: 3000; */
margin-top: -210px;
}

#login {
float: right;
margin-right: 25px;
width: 296px;
height: 40px;
}

#navigation {
float: right;
/* background: url(../images/nav_background.png) no-repeat bottom right; */
width: 900px;
height: 24px;
position: relative; 
z-index: 0;
}

#focus_area { /* area including tabbed sub nav and Africa graphic */
background: url(../images/tab-area-bkgrd.jpg) no-repeat left center #61433D;
height: 300px;
width: 900px;
position: relative; 
z-index: 0;
}

#focus_inner { /* content area for all except news in focus area */
/* background: url(../images/africa-map.png) no-repeat left center; */
height: 300px;
width: 900px;
overflow: hidden;
}

.focus_inner {
margin-left: -10px;
}

#content_area {  /*  Main central content box  */
margin-top: 10px;
}

#left { /* Links to RSS, Image Gallery, video, enews sign up etc */
width: 250px;
margin-left: 10px;
float: left;
}

.left_header { /* headings for all boxes on the left */
width: 230px;
height: 20px;
/* background-color: #666633; */
background: url(../images/left-header-grad.gif) repeat-x #6F924C;
margin-bottom: 10px;
padding: 5px 10px;
}

.left_box { /* content for all boxes on the left */
width: 230px;
background-color: #412405;
margin-bottom: 10px;
padding: 10px;
}

.video_box { /* displays video in left column without padding and background-color */
width: 230px;
margin-bottom: 10px;
}

#content {
float: left;
margin-left: 10px;
background-color: #E5DEAF;
width: 600px;
min-height: 845px;
padding: 10px;
}

.news_articles { /* loop on news page */
border-bottom: solid 1px #412405;
width: 580px;
}

.news_headlines { /* appears in focus area */
float: left;
width: 150px;
margin: 10px 10px 0 30px;
}

.steps { /* appears in focus area */
float: left;
width: 150px;
margin: 5px 10px 0 30px;
}



#sub_footer { /* Logos area */
clear: both;
height: 100px;
width: 900px;
background: url(../images/sub-footer-background.jpg) no-repeat;
}

#footer { /* general site links and credits */
background: url(../images/footer_background.jpg) no-repeat top center;
width: 900px;
height: 50px;
}

#analytics {

}

#copyright {
width: 900px;
margin: 0 auto;
text-align: left;
}

#copyright img {
float: left;
}

#copyright p {
float: left;
font-size: 9px;
color: #412405;
padding-top: 5px;
}

.seperator {
	clear: both;
	height: 0;
}

/* ------- 3. links and navigation ------- */

a {
	font-family: Arial, Helvetica, sans-serif;
}

a:visited {
}

a:hover {
}

a:active {
}

#content a {
font-weight: 600;
text-decoration: none;
color: #412405;
}

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

#login a {
font-size: 9px;
text-decoration: none;
color: #ffffcc;
float: left;
margin-left: 20px;
}

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



.content a { /* links for news in focus area */
color: #FFFFCC;
text-decoration: none;
font-weight: 600;
font-size: 12px;
}

.content a:hover {
text-decoration: underline;
}

.content #address a {
color: #412405;
text-decoration: none;
font-weight: 600;
font-size: 12px;
}

.content #address a:hover {
text-decoration: underline;
}

#facebox table.address_table {
width: 400px;
height: 250px;
}

.left_box a { /* links in body text in left column */
color: #FFFFCC;
text-decoration: none;
font-weight: 600;
font-size: 12px;
}

.left_box a:hover {
text-decoration: underline;
}

.left_box a.basket { /* go to checkout link in left column */
color: #432E2A;
text-decoration: none;
background:url(../images/basket.png) no-repeat left center;
font-weight: 600;
padding: 20px 0 20px 53px;
}

.left_box a.basket:hover { /* go to checkout link in left column */
background:url(../images/basket-hover.png) no-repeat left center;
}

.news_articles a { /* links on news page */
color: #412405;
text-decoration: none;
}

.news_articles a:hover {
text-decoration: underline;
}

#navigation ul {
list-style-type: none;
margin: 0;
float: right;
}

#navigation ul li {
display: inline;
float: left;
padding: 4px 0;
}

#navigation ul li a {
color: #ffffff;
text-decoration: none;
padding: 0px 12px;
border-left: solid 1px #FFFFFF;
font-weight: bold;
font-size: 11px;
}

#navigation ul li a:hover {
color: #FFD429;

}

ul.gallery-nav {
margin: 0;
padding: 0;
list-style-type: none;
float: right;
}

ul.gallery-nav li {
display: inline;
}

ul.gallery-nav li a {
float: left;
color: #412405;
text-decoration: none;
padding: 0 10px;
border-left: solid 1px #412405;
}

#footer ul {
list-style-type: none;
margin: 15px 0 0 0;
float: right;
}

#footer ul li {
display: inline;
float: right;
padding: 2px 0;
}

#footer ul li a {
color: #FFFFCC;
text-decoration: none;
padding: 0px 20px;
border-left: solid 1px #FFFFFF;
font-weight: bold;
}

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

#footer p a { /* Bevivid credit */
color: #FFFFCC;
text-decoration: none;
}

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

.back {
background: url(../images/left-arrow.png) no-repeat left center;
padding: 25px 0 25px 55px;
font-weight: 600;
font-size: 12px;
color: #412405;
text-decoration: none;
border: none;
cursor: pointer;
height: 20px;
display: block;
}

.back:hover {
background: url(../images/left-arrow-hover.png) no-repeat left center;
}

.next {
background: url(../images/right-arrow.png) no-repeat right center;
padding: 25px 55px 25px 0;
font-weight: 600;
font-size: 12px;
color: #412405;
text-decoration: none;
border: none;
cursor: pointer;
}

.next:hover {
background: url(../images/right-arrow-hover.png) no-repeat right center;
}

a.leftdonate {
width: 142px;
height: 38px;
background:url(../images/donate-now-btn.png) no-repeat 0 -38px;
float: right;
text-decoration: none;
}

a.leftdonate:hover {
text-decoration: none;
background:url(../images/donate-now-btn.png) no-repeat 0 0;
}

#content a.go {
float: right;
background: url(../images/send-btn.png) no-repeat 0 -32px;
border: none;
width: 30px;
height: 25px;
display: block;
cursor: pointer;
padding: 4px 29px 0px 16px;
color: #ffffcc;
font-weight:600;
font-size: 12px;
margin-left: 10px;
}

#content a.go:hover {
background: url(../images/send-btn.png) no-repeat 0 0;
text-decoration: none;
}

#content ul.home {
list-style-type:none;
}

#content ul.home li {
width: 500px;
margin-left: 25px;
clear: both;

}


/* -------4. fonts ------- */

h1, h2, h3, h4, p, ul, table {
	font-family: Arial, Helvetica, sans-serif;
}

.focus_inner h1 {
font-size: 16px;
font-weight: 600;
color: #ffffcc;
margin-bottom: 15px;
}

.focus_inner h1 a {
font-size: 16px;
}

.focus_inner h2 {
font-size: 14px;
font-weight: 600;
color: #412405;
margin-bottom: 10px;
}

.focus_inner .steps h2 {
font-size: 14px;
font-weight: 600;
color: #ffffcc;

}

#content h1 {
color: #412405;
font-size: 18px;
margin-bottom: 10px;
}

#content h2 { /* news page article headings */
font-size: 14px;
margin-top: 10px;
color: #412405;
}


.left_header h2 {
color: #ffffff;
font-size: 14px;
}

.news_articles h2 { /* news page article headings */
font-size: 14px;
margin-top: 10px;
}

.left_box h3 {
color: #ffffcc;
font-size: 12px;
margin-bottom: 5px;
}

#content h3 { /* news page article headings */
font-size: 14px;
margin: 5px 0;
color: #412405;
}

h4{
}

#focus_area p {
color: #ffffcc;
width: 300px;
float: left;
font-size: 11px;
line-height: 16px;
}

#focus_area p.intro {
width: 530px;
margin-left: 30px;
margin-bottom: 5px;
}

#focus_area .news_headlines p { /* appears in focus area */
width: 150px;
}

#focus_area .steps p {
color: #ffffcc;
width: 150px;
float: left;
font-size: 11px;
line-height: 16px;
}


.left_box p {
color: #F2F0BF;
font-size: 11px;
margin-bottom: 5px;
}

#content p {
color: #412405;
margin-bottom: 20px;
line-height: 20px;
}

.focus_inner ul {
color: #ffffcc;
font-size: 11px;
/* margin: 5px 0 5px 15px; */
float: left;

}

#focus_area .content ul li {
border-bottom: none;
}

.left_box ul {
color: #ffffcc;
font-size: 11px;
margin: 5px 0 5px 15px; 
/* float: left; */

}

#left_box ul li {
border-bottom: none;
}

#content ul {
margin-left: 15px;
margin-bottom: 15px;
color: #412405;
}

#content ul li {
line-height: 18px;
padding-bottom: 20px;
}

#footer p { /* Bevivid credit */
margin: 18px 0 0 10px;
color: #FFFFCC;
font-weight: 600;
float: left;
}


ul {
}


ol {
}

hr {
}

.left_box table p {
color: #412405;
}

#copyright p.credit {
float: right;
}

#copyright p.credit a {
color:#412405;
text-decoration: none;
}

#copyright p.credit a:hover {
color:#ffffcc;
text-decoration: none;
}
/* ------- 7. Shop Basket ----------*/

.left_box table { /* basket preview in left habd column */
background-color: #ffffcc;
}

.left_box tr {
height: 25px;
}

table.basket_table {
font-family: Arial, Helvetica, sans-serif;
}

table.basket_table th {
background: url(../images/left-header-grad.gif) repeat-x;
padding: 10px;
color: #FFFFFF;

}

table.basket_table td {
padding: 10px;
}

.left_box table p {
color: #412405;
padding: 5px;
}

.bb1ddgrey {

}

.new-summary {
border: solid 1px #cccccc;
background-color: #FFFFFF;
padding: 5px;
}

.new-summary th {
color: #412405;
padding: 5px;
background-color: #ccc;
}

.new-summary td {
padding: 5px;
}

.completed-summary {
border: solid 1px #cccccc;
background-color: #FFFFFF;
padding: 5px;
}

.completed-summary th {
color: #412405;
padding: 5px;
background-color: #ccc;
}

.completed-summary td {
padding: 5px;
}

/* ------- 6. forms ------- */

#login form {
margin: 10px 0 0 10px;
position: absolute;
top: 10px;
width: 280px;
}

.textfield {

border: solid 1px #705431;
color: #ffffcc;
margin-bottom: 10px;
}

#login .textfield { 
background-color: #432E2A;
width: 180px;
padding: 5px;
}

.left_box .textfield { /* enews sign up */
background-color: #412405;
width: 180px;
padding: 5px;
}

.textfield:hover {
border: solid 1px #ffffcc;
}

.submitbutton {
background: url(../images/submitbutton.jpg) no-repeat bottom center;
width: 63px;
height: 18px;
border: none;
color: #ffffcc;
font-weight: 600;
cursor: pointer;
}

.submitbutton:hover {
background: url(../images/submitbut_hover.jpg) no-repeat bottom center;
}

#enquiry {
width: 500px;
margin: 0 auto;
}

#enquiry label {
font-family: Arial, Helvetica, sans-serif;
color: #412405;
float: left;
}


#enquiry .textfield {
width: 400px;
color: #412405;
padding: 5px;
float: right;
border: solid 1px #009900;
text-align: left;
}

#enquiry .textfield_error {
width: 400px;
color: #412405;
padding: 5px;
float: right;
border: solid 1px #009900;
margin-bottom: 10px;
text-align: left;
}

#enquiry .textarea {
width: 400px;
color: #412405;
padding: 5px;
float: right;
margin-bottom: 10px;
border: solid 1px #009900;
height: 140px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: left;
}

#enquiry .textarea:hover {
border: 1px solid #ffffcc;
}

#enquiry .textfield:hover {
border: 1px solid #ffffcc;
}

.notice {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #412405;
float: right;
}

.trash {
float: left;
margin-top: 15px;
}

#content p.error {
color: #009900;
}

.submitbutton2 {
float: right;
background: url(../images/send-btn.png) no-repeat 0 -30px;
border: none;
width: 75px;
height: 30px;
display: block;
cursor: pointer;
padding: 0 25px 4px 0;
color: #ffffcc;
font-weight:600;
font-size: 12px;
}

.submitbutton2:hover {
background: url(../images/send-btn.png) no-repeat 0 2px;
}

form.donate {

}

form.donate .donatesubmit {
width: 142px;
height: 38px;
background:url(../images/donate-now-btn.png) no-repeat 0 -38px;
float: right;
text-decoration: none;
border: 0;
cursor: pointer;
}

form.donate .donatesubmit:hover {
text-decoration: none;
background:url(../images/donate-now-btn.png) no-repeat 0 0;
}


/* ------- 7. images ------- */

a img {
	border: 0;
}

#masthead img { /* positions logo */
float: left;
margin: 18px 0 18px 65px;
}

.news_headlines img { /* images for news section in focus area */
border: solid 2px #ffffff;
}

#focus_inner img.map {
float: left;
margin-top: 20px;
}

.focus_inner img { /* all other images in focus area */
float: left;
border: solid 2px #ffffff;
margin: 0 15px 0 30px;
}

.left_box img {
border: solid 1px #ffffcc;
width: 100px;
margin: 2px 10px 10px 0;
float: left;
}

.left_box img.video {
border: solid 1px #ffffcc;
width: 230px;
margin: 2px 10px 10px 0;
float: left;
}

#focus_inner .steps img.step {
border: none;
margin: 0 0 5px 5px;
}


/* -------8. hacks ------- */

body {/*IE 5 centring bug fix */
text-align: center;
}

#container {
text-align: left;
}

* html #left { /* removes extra margin on left column in IE6 */
margin-left: 5px;
}

* html .news_headlines { 
margin: 10px 10px 0 20px;
}

* html .focus_inner {

}

* html .steps {
margin: 0 5px 0 15px;
}

* html #focus_area p.intro {
margin-left: 15px;
}

img, div, li, a, input { behavior: url(iepngfix.htc) }