/*
Theme Name: Jon Oliver Communications 2.1
Theme URI: http://www.jonoliver.com/
Description: Custom theme for JOC
Author: Mitchell Renton
Author URL: http://www.cellardoor-design.co.uk/
*/

@import "style/reset.css";


/* ==========   COLOURS   ==========   

Green			#008676


/* ==========   TYPOGRAPHY   ========== */

h2, h3, h4, h5 {
	padding-bottom: 22px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	font-weight: bold;
}

h2 {
	color: #008676;
	font-size: 2.1em;
	}
	
h3 {
	font-size: 1.8em;
}

h4 {
	font-size: 1.3em;
}

h5 {
	border-bottom: 1px dotted #8D8D85;
	font: 1.3em Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #8D8D85;
	padding: 0;
}

p {
	padding-bottom: 15px;
	font-size: 1.2em;
	line-height: 18px;
}

a {
	text-decoration: none; 
	color: #24b09f; 
}

a:hover {
	color: #74c9bf;
	border-bottom: 1px dotted #4dbaad;
}

ul {
	margin-bottom: 15px;
}

li {
	font-size: 1.2em;
	list-style-type: disc;
	padding-bottom: 8px;
	line-height: 18px;
}

address {
	font-size: 1.2em;
	line-height: 18px;
	padding-bottom: 15px;
}

#sidebar .widget blockquote p, #content blockquote p {
	padding: 10px;
	font: 1.5em "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-style: italic;
	color: #fff;
	background: #008676;
}

#sidebar .widget #twitter blockquote p {
	padding: 5px;
	font-size: 1.2em;
	color: #333;
	background: #eeecec;
}

#sidebar .widget #twitter h3 {
	padding: 0 0 0 35px;
	background: url(images/twitter.png) no-repeat left;
}

/* ========== STRUCTURE ========== */

body {
	color: #5C5C56;
	font: 62.5% Arial, "Helvetica Neue", Helvetica, sans-serif;	
}

#container { 
	position: relative; 
	width: 712px;
	height: 100%; 
	padding: 0 125px 0 120px; 
	margin: 50px auto 0; 
}

.inside {
	padding: 20px;
}

/* ========== HEADER ========== */

#header {
	width: 712px;
	height: 101px;
}

#logo {
	float: left;
}

#logo h1 {
	width: 272px;
	height: 51px;
	}

#logo h1 a {
	width: 272px;
	height: 51px;
	display: block;
	text-indent: -9999px;
	background: url(images/logo.jpg) no-repeat;
	border: none;
}

#telephone {
	float: right;
	font-size: 1.2em;
	font-weight: bold;
}

#header dl dt {
	float: left;
	width: 23px;
	height: 17px;
	display: block;
	text-indent: -9999px;
	background: url(images/telephone.gif) no-repeat;
}

#header dl dd {
	float: left;
	margin: 3px 0 0 7px;
}


/* ========== NAVIGATION ========== */

#navigation {
	margin-bottom: 10px;
}

#navigation ul {
	margin: 0;
}

#navigation ul li {
	display: inline;
	margin-right: 12px;
}

#navigation ul li a {
	font: 1.25em Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	padding: 0 0 5px 33px;
	font-style: italic;
	border: none;
	color: #565858;
}

#navigation ul li a:hover, #navigation ul li.current_page_item a, body#about #navigation ul li.page-item-4 a, body#product ul li.page-item-16 a, body#working-with-joc ul li.page-item-76 a, body#contact ul li.page-item-78 a, body.single #navigation ul li.page-item-4 a, body.archive #navigation ul li.page-item-4 a  {
	background: url(images/bean.gif) no-repeat left; color: #008676;
}

#menu { 
	position: absolute; 
	top: 150px; 
	left: 0; 
	width: 100px; 
	font-style: italic;
	text-align: right; 
}

#menu ul {
	margin: 0;
}

#menu ul li {
	list-style-type: none;
}

#menu ul li a {
	color: #565858
}

#menu ul li.current_page_item a, body.single #menu ul li.page-item-478 a, body.archive #menu ul li.page-item-478 a {
	color: #008676;
}

#menu ul li a:hover {
	color: #008676;
	border: none;
}

#menu ul li ul {
	padding-top: 5px;
}

#menu ul li ul li a {
	color: #CE303B;
	font-size: 0.9em;
}

/* ========== CONTENT ========== */

#content {
	width: 710px;
	background: url(images/contentBg.gif) repeat-y;
	border: 1px solid #DCDCDC;
}

body.page-id-84 #content {
	background: none;
}

#post {
	float: left;
	width: 433px;
}

body#home #content #post ul {
}

#content #post ul li {
	clear: both;
	list-style-type: none;
	padding: 0 0 3px 22px;
	background: url(images/bullet.gif) 0 3px no-repeat;
}

.teamMember {
	float: left;
	width: 147px;
	margin: 0 10px;
}

.teamMemberImg {
	width: 139px;
	height: 77px;
	padding: 3px;
	margin-bottom: 5px;
	border: 1px solid #ccc;
}

.teamMember p {
	font-size: 1.1em;
}

.teamMember p span {
	color: #008676;
	font-weight: bold;
	font-size: 1.2em;
}

a.more-link {
	padding: 3px 0 2px 20px;
	background: url(images/callToAction.png) no-repeat left;
}

a.more-link:hover {
	border: none;
}


/* ========== SIDEBAR ========== */

#sidebar {
	float: right;
	width: 215px;
}

#slideshow {
	position: relative;
	width: 187px;
	height: 167px;
	padding: 3px;
	border: 1px solid #ccc;
}

#slideshow img {
    position:absolute;
    top:3;
    left:3;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}


#sidebar .widget {
	padding: 0 0 24px 20px;
}

#sidebar .widget h3 {
	margin-bottom: 12px;
	padding: 0;
}

#sidebar .widget p, #sidebar .widget h4 {
	margin-top: 7px;
	padding: 0;
}

#sidebar .widget h5 {
	font-size: 1.2em;
}

#sidebar .widget p, #twitter ul li {
	font-size: 1.1em;
	line-height: 15px;
	color: #8D8D85;
}

#sidebar ul li {
	border-bottom: 1px dotted #ccc;
	padding: 4px 0;
	list-style-type: none;
}

#sidebar select {
	padding: 5px;
	width: 185px;
}




/* ========== BLOG ENTRIES ========== */

div.postTitle {
	margin-bottom: 20px;
}

div.postTitle h2 {
	padding: 0 14px 4px 0;
}

div.postTitle h3 {
	
}

#post blockquote {
	float: right;
	width: 150px;
	margin: 15px 0 15px 15px;
}

.alignleft, .alignright {
	padding: 3px;
	border: 1px solid #ccc;	
}

.alignleft {
	float: left;
	margin: 15px 15px 15px 0;
}

.alignright {
	float: right;
	margin: 15px 0 15px 15px;
}

.wp-caption {
	border: 1px solid #ccc;
	text-align: center;
	padding-top:5px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	font-size: 1em;
	line-height: 17px;
	font-weight: bold;
	padding: 3px;
	margin: 0;
}

div.previous {
	float: left;
}

div.next {
	float: right;
}

div.previous a:hover, div.next a:hover {
	border: none;
}

/* ========== FOOTER ========== */

#footer {
	width: 300px;
	margin: 15px auto;
	font-size: .9em;
	text-align: center;
}