/*
-----------------------------------------------------
Kellogg’s 'Microsite Name' (http://www.kelloggs.co.uk/whatson/micrositename) SCREEN style sheet
author:   mN -> hello@madebymn.co.uk
version:  2010.01
-----------------------------------------------------
CONTENTS:

	1. GLOBAL
	2. TYPOGRAPHY
	3. GENERAL LAYOUT
	4. HEADER
	5. NAVIGATION
	6. CONTENT
	7. FOOTER
----------------------------------------------------- */

/* 	=1. Global */

html {font-family: Arial, Verdana, sans-serif;}
a:focus { outline:none; }
.clearfix {*zoom:1;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}


/* 	=2. Typography */

h1,h2,h3,h4,h5 {font-family: Arial, Helvetica, Arial, sans-serif;}
p {font-size: 1em; }
strong {font-weight: bold;}
em {font-style: italic;}

/* 	=3. General Layout */

div#header, div#footer {width: 940px; margin:0 auto;}
div#container {width: 100%; margin: auto; background: url(../images/global/background.jpg) no-repeat #fff; background-position:center 59px; overflow:hidden; }

/* 	=4. Header */

div#header {position: relative; height: 55px; }
div#header p {position: absolute; top: 11px; left: 21px;}
div#header p a {background: url(../images/global/kelloggs.gif) ; width: 104px; height: 44px; display: block; text-indent: -9999px;}


div#breadcrumb {position: absolute; right: 0px; bottom: 10px; font-size: 1.1em;}
div#breadcrumb h5 {float: left; color: #666; font-weight: normal; font-family: Arial, Verdana, sans-serif;}
div#breadcrumb ul {float: left;}
div#breadcrumb ul li {float: left; margin: 0 0 0 5px; padding: 0 0 0 7px;background: url(../images/global/arrow_red.gif) no-repeat 0 50%;}
div#breadcrumb a {color: #666; text-decoration: none; float: left;}
div#breadcrumb a:hover {text-decoration: underline;}
div#breadcrumb ul li ul li ul li a {color: #d8040c;}

/* 	=5. Navigation */

div#navigation {width: 100%; float: left;}
div#navigation ul li {float: left; margin: 0 20px 0 0;}

/*	=6. Content */
#banner {width:100%; height:368px; margin:-57px 0 25px 0; text-align:center; min-width:940px; }
#banner h1 {width:100%; height:368px; background:url(../images/home/banner.png) no-repeat scroll center; text-indent:-9999px;}
#about #banner h1 { background:url(../images/about/banner.jpg) no-repeat scroll center; margin-top:37px; }


div#content {width: 940px; margin:0 auto; overflow:hidden; position:relative; }
div#content a { color:#13b2e3; text-decoration:none; }
div#content a:hover { text-decoration:underline; }
div#copy p {font-size:1.2em; line-height:1.3em; color:#6f6d66; margin:0 0 10px 0; width:387px; margin:0 0 10px 40px;}
div#copy p.intro {font-size:1.6em; color:#545743; font-weight:bold;} 
div#copy p.intro strong {color:#13b2e3;}
div#copy {float:left;}
div#copy p#polaroid { width:222px; float:left; margin-left:0; }
div#copy p.img-txt { float:left; margin-left:0; }
p span#to-donate { display:block; width:202px; height:38px; background:url(../images/home/txt-to-donate.gif) no-repeat; text-indent:-9999px; margin-left:15px; }
p a#SFA-link { display:block; width:206px; height:68px; background:url(../images/home/txt-goto-site.gif) no-repeat; text-indent:-9999px; margin:3px 0 0 15px; }
p a#find-out-more { display:block; width:215px; height:33px; background:url(../images/home/txt-find-out.gif) no-repeat; text-indent:-9999px; margin:0 0 30px 15px; }
div#video { position:absolute; width:453px; height:279px; background:url(../images/home/video.png) no-repeat scroll center; margin:10px 0 0 0; left:473px;}
div#video-player p {padding:20px 0 0 0;color:#798624; font-size:1.2em; line-height:1.2em; padding:100px 50px 0; text-align:center;}
div#video-player a {color:#fff; text-decoration:none;}
div#video-player a:hover {color:#fff; text-decoration:underline;}

#about div#content { position:static; }
#about div#copy p#polaroid { width:334px; float:none; margin-left:40px; }
#about #txt-panel { position:absolute; min-height:905px; width:559px; background:url(../images/about/txt-panel.png) no-repeat; top:87px; margin-left:365px; }
#about p span#to-donate { margin-left:40px; }
#about p a#SFA-link { width:278px; height:45px; background:url(../images/about/txt-goto-site.gif) no-repeat; margin:5px 0 20px 40px }

#about p.btn-previous {margin:0 0 60px 40px; clear: both; }
#about p.btn-previous a {display: block; text-indent: -9999px; width:214px; height:14px;background:url(../images/about/btn-previous.gif) no-repeat; }


#about div.copy { padding:20px 30px 20px 128px; font-size:1.15em; color:#545743; line-height:1.5em; }
#about div.copy h2 {width:100%; height:19px; background:url(../images/about/header-the-projects.gif) no-repeat scroll left; text-indent:-9999px;}
#about div.copy p { margin-bottom:2em; }
#about div.copy strong { font-weight:normal; color:#13b2e3;}
#about div.copy p#margaret {width:100%; height:33px; background:url(../images/about/margaret-ikiara.gif) no-repeat scroll right; text-indent:-9999px;}
/* 	=6. Footer */

div#footer {color: #666; padding: 8px 15px; margin-top:5px;}
div#footer a {color: #666; text-decoration: none; font-size: 1.1em;}
div#footer a:hover {text-decoration: underline;}
div#footer p#copyright {float: left; margin: 0 0 0 5px;}
div#footer ul#footernav {float: left; margin: 0 0 0 10px;}
div#footer ul#footernav li {float: left; margin: 0 0 0 8px; padding: 0 0 0 10px; background: url() no-repeat 0 50%;}