/* 
Definition:	Screen CSS for Two Copywriters
Author:			Wil Linssen [http://wil-linssen.com/]
Revision:		00.00.00

----------------------------------
Table of contents
----------------------------------
	1.BODY
	2.GLOBALS ELEMENTS
	3.HEADINGS
	4.LINKS
	5.IMAGES & VIDEOS
	6.LAYOUT
	7.BRANDING/MASTHEAD
	8.NAVIGATION
	9.SITEINFO/FOOTER
	10.SCROLLBARS
	
	INDIVIDUAL PAGES
	--------------------------------
		11.HOME
		12.PORTFOLIO

----------------------------------
COLOURS
----------------------------------
  Grey:         #6d6e71
  Dark grey:    #231f20
  Light grey:   #a7a9ac
  Pinky:        #f3d0a3

*/

@import url(/styles/reset.css); /* RESET CSS */

/* 1 BODY
-------------------------------------------------------------------------------------------------------------------- */
body { background: url(/images/site/body-bg.jpg) repeat-x 0 0 #fff; font: 14px Helvetica, Arial, sans-serif; color: #6d6e71; line-height: 18px; }

/* 2 GLOBALS ELEMENTS
-------------------------------------------------------------------------------------------------------------------- */
p { margin-bottom: 14px; }
hr { border: none; color: #f3d0a3; background-color: #f3d0a3; margin: 6px 0 14px 0; clear: both; height: 1px; }

/* 3 HEADINGS
-------------------------------------------------------------------------------------------------------------------- */
h1#logo a { display: block; width: 304px; height: 77px; overflow: hidden; text-indent: -9999px; background: url(/images/site/two_copywriters-logo.png) 0 0 no-repeat; margin-bottom: 50px; clear: both;  }
h1#logo a:active { background-position: 0 1px;}
h3 { color: #231f20; }
h3.clients { font-weight: bold; font-size: 14px; margin-bottom: 2px; }

/* 4 LINKS
-------------------------------------------------------------------------------------------------------------------- */
a { font: italic 1em Georgia, serif; color: #a7a9ac; }
a:hover { color: #6d6e71; }

/* 5 IMAGES & VIDEO
-------------------------------------------------------------------------------------------------------------------- */

/* 6 LAYOUT
-------------------------------------------------------------------------------------------------------------------- */
div#wrapper { width: 950px; padding: 50px; margin: 0 auto; background-color: #fff; }

div.col { float: left; margin-right: 10px; }
div.col.last { margin-right: 0; clear: right; }
div.col.c1 { width: 150px; }
div.col.c2 { width: 310px; }
div.col.c3 { width: 465px; }

/* 7 BRANDING/MASTHEAD
-------------------------------------------------------------------------------------------------------------------- */

/* 8 NAVIGATION
-------------------------------------------------------------------------------------------------------------------- */
ul#nav { display: block; float: right; margin-top: -75px; height: 13px; line-height: 13px;  }
ul#nav li { display: inline; }
ul#nav li a { font: italic 13px Georgia, serif; display: block; margin-left: 20px; float: left; }
ul#nav li a:hover { color: #a7a9ac; }
ul#nav li a.home { width: 12px; height: 14px; background: url(/images/site/home.png) no-repeat 0 0; overflow: hidden; text-indent: -9999px; }
ul#nav li a.home:hover { background-position: 0 -29px; }

/* 9 FOOTER
-------------------------------------------------------------------------------------------------------------------- */
div#footer { clear: both; border-top: 1px solid #dddddd; padding: 5px 0 0; font-size: 12px; margin-top: 30px; color: #a7a9ac; }
div#footer a { font: 12px normal Helvetica, Arial, sans-serif; color: #a7a9ac;}

/* 10 SCROLLBARS
-------------------------------------------------------------------------------------------------------------------- */
.jScrollPaneContainer { position: relative; overflow: hidden; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #d9d9d9; margin-top: 20px; z-index: 30; }
.jScrollPaneDrag { position: absolute; background: #aaa; cursor: pointer; overflow: hidden; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }

/* 11 HOME
-------------------------------------------------------------------------------------------------------------------- */
body#home div.col.c3 { width: 390px; margin-right: 40px; }
body#home div.col.c3.last { width: 474px; margin-right: 0; border: 3px double #dddddd; padding: 20px; margin-bottom: 60px; }

div.vcard { clear: both; margin-bottom: 14px; font-size: 13px; line-height: 15px; }
div.vcard p { margin: 0; float: left; clear: left; }
div.vcard p.right { float: right; clear: right; }
div.vcard p.fn { color: #231f20; font-weight: bold; }
div.vcard p.right a { padding-right: 20px; background: url(/images/site/checkbox_pinky.png) no-repeat 100% 1px;  }
div.vcard p.right a:active { background-position: 100% -30px; }

div#testimonials { position: relative; }
div#testimonials blockquote { position: absolute; width: 454px; top: 0px; left: 0px; }
div#testimonials blockquote,
div#testimonials blockquote cite strong { font: italic 17px Georgia, serif; line-height: 23px; }
div#testimonials blockquote cite strong { color: #f3d0a3; margin-bottom: -25px;  display: block; }
div#testimonials blockquote cite { font: normal 12px Helvetica, Arial, sans-serif; color: #a7a9ac; }
div#testimonials ul.nav { position: absolute; top: 100%; margin-top: -15px; }
div#testimonials ul.nav li { display: inline; list-style: none; margin-right: 5px; }
div#testimonials ul.nav li.prev a,
div#testimonials ul.nav li.next a { color: #f3d0a3; }

p.clients { color: #a7a9ac; font-size: 14px;}

p.work_link a { display: block; height: 125px; width: 260px; padding: 30px 160px 0 20px; background: url(/images/site/typewriter.jpg) no-repeat 270px 0; font-size: 12px; clear: both; float: right; margin-top: -155px; }
p.work_link a strong { font-size: 25px; font-style: italic; font-weight: normal; display: block; }

/* 12 PORTFOLIO
-------------------------------------------------------------------------------------------------------------------- */
div#container { position: relative; height: 500px; overflow: hidden; padding: 20px 0; }

div.topper,
div.bottomer { position: relative; top: 20px; background: url(/images/site/fader.png) repeat-x 0 0; height: 20px; display: block; width: 100%; z-index: 20;  }
div.topper { margin-top: -40px; }
div.bottomer { top: -20px; background-position: 0 -20px; }

body#portfolio div.c2 { height: 194px; width: 304px; position: relative; overflow: hidden; z-index: 10; margin-bottom: 10px; }
body#portfolio div.c2 h3 { display: block; display: block; width: 284px; position: absolute; padding: 5px 10px 10px 10px; z-index: 999; color: #fff; background-color: #000; background-color: rgba(0,0,0,0.8); font-size: 13px; line-height: 23px; height: 40px; top: 100%; margin-top: 0px; }
body#portfolio div.c2 h3 em { float: right; font-style: normal; }
body#portfolio div.c2 img { position: absolute; top: 0px; left: 0px; }
body#portfolio div.c2 img.greyscale { filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5; -webkit-opacity: 0.5; }
body#portfolio div.c2 img.colour { display: none; }

div.media_text { display: block; width: 600px; padding: 20px; font: 13px Georgia, serif; color: #fff; }
div.media_text div.left { display: block; width: 230px; float: left; font-size: 16px; }
div.media_text div.right { display: block; width: 350px; float: right; }
div.media_text h3,
div.media_text h4 { color: #f3d0a3; }
div.media_text h4 { margin-bottom: 14px; font-size: 16px; }
div.media_text p.next_slide a { color: #f3d0a3; font-style: normal; font-size: 16px; display: block; background: url(/images/site/slide_arrow.png) no-repeat 100% 4px; float: left; clear: both; padding-right: 20px; margin: 6px 0 14px; }
div.media_text p.next_slide a:hover { color: #fff; background-position: 100% -20px; }
div.media_text p.categories { color: #58595b; clear: both; display: block; }
div.media_text p.categories a { color: #58595b; }
div.media_text p.categories a:hover { color: #a7a9ac; }

ul.filter_cats { width: 250px; float: left; }
ul.filter_cats li a { padding-left: 20px; color: #FFF; font-style: normal; background: url(/images/site/checkbox_pinky.png) no-repeat 0 -79px; }
ul.filter_cats li a:hover,
ul.filter_cats li a.current { background-position: 0 -111px; }