/* Content

1. 	General
2. 	Structure
3. 	Links
4. 	Nav
5. 	Header
6. 	Banner
7. 	Content
		7.1 Type
		7.2 Lists
		7.3 Images
		7.4 Forms
		7.5 Metadata
8. 	Sidebar
8. 	Navigation
10. Footer

*/

/* Colour Guide (Please update if changes are made)

Dark grey					#595959 (ex. main text)
Dark brown					#44311b (ex. headings)
Very light grey				#f4f4f4 (ex. footer background)

Cyan						#3ea3cd	(ex. link :link)

*/

@import url(reset.css);

/* Not being used for now
--------------------------------------------------------------------------------
@font-face {
	font-family: QuicksandBook;
	src: url("../fonts/Quicksand_Book-webfont.eot");
	src: local("Quicksand Book"), url("../fonts/Quicksand_Book-webfont.woff") format("woff"), url("../fonts/Quicksand_Book-webfont.ttf") format("truetype"), url("../fonts/Quicksand_Book-webfont.svg#webfont") format("svg");
	font-weight:normal;
	font-style:normal;
}
*/

/* 1. General
-------------------------------------------------------------------------------- */

body { font:13px/1.5 Verdana, Geneva, sans-serif; text-align:center; color:#333333; background:#ffffff; padding-bottom:40px; }

.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; } /* ie.css */

.left { float:left; margin:0 20px 20px 0; }
.right { float:right; margin:0 0 20px 20px; }

/* 2. Structure
-------------------------------------------------------------------------------- */

.inner { margin:auto; width:940px; text-align:left; position:relative; }

#header { height:80px; clear:both; border-bottom:1px solid #c1b8b1; }

#banner .inner { height:398px; }

#content { padding-top:20px; }

	#main { float:left; width:620px; }
	
		.case #main { width:100%; float:none; } /* Add this class to the #content div when it's a Case study */
	
	#aside { float:right; width:300px; }
	
#footer { clear:both; border-top:1px solid #c1b8b1; }
	
#footer .inner { clear:both; overflow:hidden; padding:20px 0; }

	#footer .col1, #footer .col2, #footer .col3 { float:left; width:140px; }

/* 3. Links
-------------------------------------------------------------------------------- */

a:link, a:visited { color:#3ea3cd; text-decoration:none; }
a:hover, a:focus, a:active { color:#527732; text-decoration:underline; }

.slider a:link, .slider a:visited,
.tweet a:link, .tweet a:visited { color:#ffffff; text-decoration:underline; }
.slider a:hover, .slider a:active, .slider a:focus,
.tweet a:hover, .tweet a:active, .tweet a:focus { text-decoration:underline; color:#ffffff; }

.tweet .follow a:link, .tweet .follow a:visited { padding-left:16px; background:url(../images/twitter-footer.png) no-repeat left center; color:#3ea3cd; text-decoration:underline; }
.tweet .follow a:hover, .tweet .follow a:active, .tweet .follow a:focus { color:#527732; text-decoration:underline; }

/* 4. Nav
-------------------------------------------------------------------------------- */

/* 5. Header
-------------------------------------------------------------------------------- */

#logo a { display:block; width:123px; height:40px; background:url(../images/logo.gif) no-repeat left center; text-indent:-100000px; padding:20px 0; }

#search { position:absolute; right:0; top:50%; margin-top:-30px; }
#s { border:1px solid #b4b4b4; -moz-border-radius:50%; -webkit-border-radius:20px; border-radius:50%; padding:4px 4px 4px 28px; font-size:11px; background:#ffffff url(../images/search.gif) no-repeat 5px center; color:#b4b4b4; }
#s:focus { color:#333333; }
#search span { clear:both; display:block; text-align:right; font-size:10px; padding-top:4px; }

/* 6. Banner
-------------------------------------------------------------------------------- */

.banner-1 { background-color:#e8c0a2; background-image:url(../images/banner-dailycalif.jpg); background-position:center top; background-repeat:no-repeat;}
.banner-2 { background-color:#dee9e4; background-image:url(../images/banner-penfed.jpg); background-position:center top; background-repeat:no-repeat;}
.banner-3 { background-image:url(../images/banner-penfed.jpg); }

.slider1 { padding:10px 20px 10px 30px; height:76px; overflow:visible; background:#323232;opacity:0.9;filter:alpha(opacity=90); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; width:460px; color:#ffffff; position:absolute; left:-10px; bottom:40px; }
.slider2 { padding:10px 20px 10px 30px; height:76px; overflow:visible; background:#323232;opacity:0.9;filter:alpha(opacity=90); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; width:500px; color:#ffffff; position:absolute; left:-33px; bottom:40px; }

.slider1 a.prev, .slider1 a.next { position:absolute; background:rgba(255,255,255,.1) no-repeat center center; height:96px; top:0; width:16px; text-indent:-100000px; }
	.slider1 a.prev { left:0; background-image:url(../images/highlight-arrow-prev.png); -moz-border-radius:4px 0 0 4px; -webkit-border-top-left-radius:4px; -webkit-border-bottom-left-radius:4px; border-radius:4px 0 0 4px; }
	.slider1 a.next { right:0; background-image:url(../images/highlight-arrow-next.png); -moz-border-radius:0 4px 4px 0; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; border-radius:4px 0 0 4px; }
	.slider1 a.prev:hover, .slider1 a.next:hover { background-color:rgba(255,255,255,.2);}
	.slider1 h3 { padding-bottom:4px; color:#ffffff; }
	
.slider2 a.prev, .slider2 a.next { position:absolute; background:rgba(255,255,255,.1) no-repeat center center; height:96px; top:0; width:16px; text-indent:-100000px; }
	.slider2 a.prev { left:0; background-image:url(../images/highlight-arrow-prev.png); -moz-border-radius:4px 0 0 4px; -webkit-border-top-left-radius:4px; -webkit-border-bottom-left-radius:4px; border-radius:4px 0 0 4px; }
	.slider2 a.next { right:0; background-image:url(../images/highlight-arrow-next.png); -moz-border-radius:0 4px 4px 0; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; border-radius:4px 0 0 4px; }
	.slider2 a.prev:hover, .slider2 a.next:hover { background-color:rgba(255,255,255,.2);}
	.slider2 h3 { padding-bottom:4px; color:#ffffff; }
	
/* 7. Content
-------------------------------------------------------------------------------- */

.highlight { position:relative; padding:0 20px 0 20px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ecebea)); background:-moz-linear-gradient(-90deg,#ffffff,#ecebea); margin-bottom:20px; }
#highlight-home { padding-top:5px; padding-left:255px; margin-bottom:40px; }

.box { width:300px; float:left; margin-right:20px; position:relative; }
.box:last-child { margin-right:0; }

.inline-box { width:300px; background:#f4f4f4; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:10px; } /* These boxes are used on Case studies */

.lines { border:1px solid #c1b8b1; border-width:1px 0 1px 0; padding:20px 0 10px 0; margin-bottom:20px; clear:both; }

	/* 7.1 Type
	---------------------------------------------------------------------------- */
	
	h1, h2, h3, h4, h5, h6 { color:#44311b; }
	h1 { font-size:30px; padding-bottom:18px; }
	h2 { font-size:24px; padding-bottom:18px; }
	h3 { font-size:18px;  padding-bottom:14px; }
	h4 { font-size:14px; font-weight:bold; padding-bottom:14px; }
	h5 { font-size:14px; text-transform:uppercase; padding-bottom:14px; }
	h6 { font-size:13px; font-weight:bold; padding-bottom:14px; }
	
	p + h2 { padding-top:18px; }
	p + h3, p + h4, p + h5 { padding-top:14px; }
	
	p { padding-bottom:10px; }
	
	.case h1 { font-size:46px; }
	
	.highlight h2 { font-size:18px; margin-left:-5px; font-weight:bold; }
	
	#footer h3 { font-size:14px; }
	#aside .box h3,
	.inline-box h3 { font-size:16px; background:#dbdbdb; padding:7px 10px; -moz-border-radius:4px 4px 0 0; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; border-radius:4px 4px 0 0; }
		#aside h3,
		.inline-box h3 { margin:-10px -10px 10px -10px; }
		#aside h3 { margin:-10px -95px 10px -10px; }
		#aside #a-nativeapps h3 { margin:-10px -9px 10px -10px; }
	
	.box p:last-child { padding-bottom:0; }
	
	p.copy { color:#898989; clear:both; font-size:11px; padding-bottom:0; padding-top:20px; margin:0 0 0 20px; }
	
	p.intro { color:#666666; font-size:18px; font-style:italic; }
	
	blockquote { padding-left:20px; border-left:2px solid #cccccc; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; margin:18px 0; }
		blockquote :last-child { padding-bottom:0; }
	
	/* 7.2 Lists
	---------------------------------------------------------------------------- */
	
	#main ul, #main ol { margin:18px 25px; }
	#main ul { list-style-type:square; }
	#main ol { list-style-type:decimal; }
	#main li { margin-bottom:4px; }
	
	/* 7.3 Images
	---------------------------------------------------------------------------- */
	
	.img-highlight { position:absolute; left:-10px; top:-8px; }
	.img-isites { position:absolute; bottom:0; right:15px; }
	.img-nativeapps { position:absolute; bottom:-10px; right:13px; }
	
	/* 7.4 Forms
	---------------------------------------------------------------------------- */
	
	/* 7.5 Metadata
	---------------------------------------------------------------------------- */

/* 8. Sidebar
-------------------------------------------------------------------------------- */

#aside .box { width:auto; background:#f4f4f4; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:0 0 40px 0; padding:10px; }
#aside #b-isites { padding-right:125px; }
#aside #b-nativeapps { padding-right:95px; }


/* 8. Navigation
-------------------------------------------------------------------------------- */
#emptyblock {clear: both; margin-bottom: 20px;}
/* 10. Footer
-------------------------------------------------------------------------------- */

.tweet { position:absolute; width:311px; height:117px; background:url(../images/tweet.png) no-repeat left top; right:0; top:20px; text-align:center; line-height:1.4; color:#ffffff; font-size:12px; padding-top:10px; }
	.tweet p { padding:0 10px; }
	.tweet a.timestamp { padding-top:7px; display:block; }
	.tweet p.follow { position:absolute; font-size:13px; text-align:right; right:45px; top:105px; }