/* ------------------------------------------
READING ROOM
Stylesheet: Global Styles
Author: Reading Room
Updated: 5 March 2009
------------------------------------------ */

/* ------------------------------------------------------------------------------------
-- RESET STYLES
------------------------------------------------------------------------------------ */

html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite,
em, img, q, samp,
small, strike, strong, sub, sup,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	padding:0; border:0; margin:0; font-size:100%; vertical-align:baseline; background:transparent;
}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}

strong {font-weight:bold;}
em {font-style:italic;}

table {border-collapse:collapse; border-spacing:0;} /* tables still need 'cellspacing="0"' in the markup */

/* body {line-height:1;} */



/* ------------------------------------------------------------------------------------
-- BASE STYLES
------------------------------------------------------------------------------------ */

body {font-family:Arial, Helvetica, sans-serif; font-size:62.5%; font-size:100.01%; color:#666; text-align:center; background:#c2c2c2 url(../images/bgGlobal.gif) center top no-repeat;}

img {border:0;}

h1 {font-size:1.25em; margin:0 0 1em;}
h2 {font-size:1em; margin:0 0 0.5em;}
h3 {font-size:0.875em; margin:1.5em 0 0.7857em;}
h4 {font-size:0.75em; margin:1.5em 0 1em;}
p, ul, ol, dl, table {margin-bottom:1em;}
p, li, dt, dd {font-size:0.6875em; line-height:1.4em;}
p.dark{color:#222;}

ul, ol {margin-left:15px;}
ul li {margin-bottom:1em;}

li li, li p, li input {font-size:1em;}

abbr {border:0;}
address {font-style:normal;}

a {font-weight:800; color:#1a7a80; text-decoration:none;}
a:hover, a:active, a:focus {text-decoration:underline;}

#pagination ul {list-style:none;}

p.cta {margin:2em 0 0; background:#040404 url(../images/cta-bg.png) repeat-x 0 0;}
p.cta a {display:block; padding:3px 3px 3px 20px; border:1px solid #000; border-bottom-color:#999; text-transform:uppercase; color:#fff; background:url(../images/cta-arrow.png) no-repeat 8px 50%;}



/* ------------------------------------------------------------------------------------
-- CONTAINERS
------------------------------------------------------------------------------------ */

#uberWrapper {position:relative; max-width:53em; min-width:740px; margin:0 auto;}
body.wider #uberWrapper {min-width:848px;}
#wrapper {padding-left:4px; background:url(../images/bgLeftGradient.png) left bottom no-repeat;}
#innerWrapper {padding-right:4px; background:url(../images/bgRightGradient.png) right bottom no-repeat;}
#pageBody {padding:0 20px; text-align:left; background:#fff url(../images/bgHeader.gif) left top repeat-x;}

#navSkip {position:absolute; left:-9000em;}



/* ------------------------------------------------------------------------------------
-- HEADER
------------------------------------------------------------------------------------ */

#header {clear:both; position:relative; width:100%;}

#logo {float:right; margin:0 0 20px;}
	#logo h1 {margin:0;}
	#logo img, #logo a {display:block;}
#logo span {position:absolute; left:-9999px;}

#getInTouch {padding-top:10px; font-size:0.75em;}



/* ------------------------------------------------------------------------------------
-- NAVIGATION
------------------------------------------------------------------------------------ */

#topNav {clear:both; position:relative; list-style:none; width:100%; padding:0 0 1px; border-bottom:1px solid #aaa; margin:0; background:#fff;}

/* LEVEL 1
------------------------------------------ */

#topNav li {/*position:relative;*/ float:left; padding:0; margin:0 1px 0 0; font-size:0.8125em;}
#topNav li a {position:relative; display:block; padding:2px 10px; text-transform:uppercase; overflow:hidden; text-align:center; color:#222;}
#topNav li a:hover, #topNav li a:active, #topNav li a:focus, #topNav li a.on {-moz-border-radius:3px 3px 0 0; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; text-decoration:none; color:#fff; background:#222;}

/* LEVEL 2
------------------------------------------ */

#topNav #subNav {position:absolute; width:100%; /*width:490px; top:22px;*/ left:0; /*background:#fff url(../images/bgSubNavLeft.gif) no-repeat left bottom;*/}
/*#topNav .aboutUs #subNav {left:-54px;}*/

#topNav #subNav ul {clear:both; list-style:none; float:left; padding:0; border:1px solid #aaa; border-top:0; margin:2px 0 0; /*background: url(../images/bgSubNavRight.gif) no-repeat right bottom;*/ background:#eee;}
	#topNav #subNav li  {position:static; float:left; padding:0; border-right:1px solid #ddd; margin:0; font-size:0.9231em; line-height:1.2em; /*background:url(../images/bltSeperator.gif) right .5em no-repeat;*/}
	#topNav #subNav li.last {padding:0; border:0; background:none;}

#topNav #subNav li a {display:block; padding:4px 1em; -moz-border-radius:0; -webkit-border-radius:0; margin:0; font-weight:800; text-transform:none; color:#222; background:none;}
#topNav #subNav li a:hover, #topNav #subNav li a:focus, #topNav #subNav li a:active {background:#ddd;}
#topNav #subNav li a.on {color:#b33156;}



/* ------------------------------------------------------------------------------------
-- FOOTERS
------------------------------------------------------------------------------------ */

#copyright {clear:both; width:80em; width:100%; padding:1em 0 0.5em 0; text-align:right; background:url(../images/bgStripes.gif) left top repeat-x;}
#copyright p {margin:0; line-height:2.27em;}

/* SOS children's logo - 29/07/2008 */
#copyright .sos {float:left; font-size:0.6875em; line-height:2.27em;font-weight:normal;}
#copyright .sos img {vertical-align:middle;margin-right:3px;}
#copyright .sos a {font-weight:normal;}

#footer {clear:both; width:100%; padding:0 0 1.6em;}
#footer p {margin:0;}

#footerNav {list-style:none; float:left; width:52%; padding:1em 0 0 24px; margin:0; text-align:left; background:#c2c2c2 url(../images/bgBotLeftGradient.png) left top no-repeat;}
	#footerNav li {float:left; padding:0 0.5em 0 0; margin:0; text-transform:lowercase; background:url(../images/bgSlash.gif) right center no-repeat;}
	#footerNav li a {padding:0 0.25em; color:#666; text-decoration:none;}
	#footerNav li a:focus, #footerNav li a:hover {color:#fff; background:#1a7a80;} 

#footerCoDetails {list-style:none; padding:1em 24px 0 0; text-align:right; background:url(../images/bgBotRightGradient.png) right top no-repeat;}
	#footerCoDetails p {font-size:0.6875em; color:#666;}

#footer abbr {border:0;}



/* ------------------------------------------------------------------------------------
-- ARTICLE CLIPPING
------------------------------------------------------------------------------------ */

#myClippingsInner {clear:both; width:100%;padding:0;}
	
	#myClippingsContent {width:100%;}
	#myClippingsContentInner {width:100%;}


#myClippings h3 {clear: both;margin: 1.5em 0 .5em 0;padding: 0;color: #333;font-size:0.75em;}
#myClippings ul.clips {list-style: none; margin:0;padding:0;}
#myClippings ul.clips li {clear: both; width:100%; margin-bottom: .35em;font-weight: 800;border-bottom: 1px solid #bcbcbc;}
#myClippings ul.clips span.seperate {position: absolute;left: -9999px;}
#myClippings ul.clips li a.clip {/*float: left;*/display: block;padding: 0 90px 0 0;}
#myClippings ul.clips li a.clip span {float:left; padding:0 0 0 20px; background: #fff url(../images/icnClipBtn.gif) left center no-repeat; line-height: 2.6em;}
#myClippings ul.clips li a.remove {float:right;display: block;width: 76px;padding: 0;margin-left:-76px;}


#myClippings div.controlsContainer {width:100%;}
#myClippings ul.controls {width:100%;list-style: none;background: none;margin:0;padding: 1.5em 1.5em 2em 0;}
#myClippings ul.controls a {color: #fff;}
	
#myClippings li.createPDF {float: left;}

#myClippings li.close {float: right;width: 61px;height: 23px;border: 1px solid #000;background: url(../images/bgMyClipsBtns.gif) left center repeat-x;}

.viewclips {display: block;background-color: transparent;background-repeat: no-repeat;background-attachment: scroll;background-position: left center;line-height: 2em;padding-left: 1.2em;margin-right: 0.5em;}

#articleTools li.viewclips a, #articleTools li.viewclips span { display: block; background: url(../images/icnMyClip.gif) left center no-repeat; line-height: 2em; padding-left: 2em;  margin: 0 .5em;}

#mainContent h1.page404, #mainContent h1.holdingPage { margin: 1em 0; }



/* ------------------------------------------------------------------------------------
-- SELF-CLEARING
------------------------------------------------------------------------------------ */

#featuresContainer:after,
#pagination:after, /* remove when pagination updated */
.pagination:after,
.portfolioRow:after,
#myClippings ul.clips li:after,
#topNav:after,
#footer:after,
#footerNav:after,
#copyright:after,
.genericForm .frmRow:after,
.genericForm .frmRowCheckBox:after,
#contactAddress:after,
.portfolioItem:after,
.newsblock:after,
#filterResults:after,
#filterLinksContainer:after,
#articleTools:after,
li.clipArticle:after,
.portfolioContainer:after,
.caseStudy:after,
.newsList li:after {
	clear:both; display:block; content:"."; height:0; font-size:0; line-height:0; visibility:hidden;
}

/* ------------------------------------------------------------------------------------
-- Blog feed, twitter, newsletter
------------------------------------------------------------------------------------ */
#blog_feed a:hover, 
#blog_feed a:focus, 
#twitter a:hover, 
#twitter a:focus, 
#newsletter a:hover, 
#newsletter a:focus { background-position: -22px 0; }

/* ------------------------------------------------------------------------------------
-- Blog feed 
------------------------------------------------------------------------------------ */

#blog_feed { position: absolute; right: -18px; top: 102px; }
#blog_feed a { display: block; width: 22px; height: 160px; background: url(/images/blog.png) no-repeat top left; text-indent: -99999px; outline: 0; }

.popup{z-index:1000;}

/* ------------------------------------------------------------------------------------
-- TWITTER
------------------------------------------------------------------------------------ */

#twitter { position: absolute; right: -18px; top: 185px; }
#twitter a { display: block; width: 22px; height: 130px; background: url(/images/twitter.png) no-repeat top left; text-indent: -99999px; outline: 0; }

.popup{z-index:1000;}

/* ------------------------------------------------------------------------------------
-- Newsletter - 21.04.2010 - EG
------------------------------------------------------------------------------------ */

#newsletter { position: absolute; right: -18px; top: 320px; }
#newsletter a { display: block; width: 22px; height: 160px; background: url(/images/newsletter.png) no-repeat top left; text-indent: -99999px; outline: 0; }

.popup{z-index:1000;}

/* Gallery */
#topNav li.theGallery { float: right; }

#topNav li.theGallery #subNav { width: 800px; }
#topNav li.theGallery #subNav ul { float: right; }

#galleryDetails { border-top: 1px solid #b2b2b2; float:left; clear:both; margin: 30px 0 0 0; min-height:8em; width:100%; }
#galleryDetails p { color: #000; font-size: 14px; margin: 1em 0 1em 0; }
#galleryDetails img { float:right; margin: 1em 0 0 0; }