/*
Theme Name: One Small Planet
Theme URI: http://www.onesmallplanet.com.au/
Description: One Small Planet Site
Version: 1.0
Author: Abraham Beshara (HubOnline)
Tags: General Sitewide Layout
*/

/* Helpers
---------- */
.break,
.clear {
clear:both;
}
.right,
.alignright {
float: right;
}
.left,
.alignleft  {
float: left;
}
img.imageLeft,
img.alignleft {
float: left;
margin: 0 20px 20px 0;
}
img.imageRight,
img.alignright {
float: right;
margin: 0 0 20px 20px;
}
img.centered,
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.leftCol {
float: left;
width: 480px;
}
.rightCol {
float: right;
width: 480px;
}

/* Typography
------------- */
body {
font-size: 76%; /* Global font-size */
font-family: Tahoma, Geneva, sans-serif;
color: #000;
background-color: #242423;
}
p  {
font-size: 1em;
margin-bottom: 10px;
}
#content p {
padding: 0 6px;
}
dl,
ul,
ol,
form input, 
form textarea,
form select {
font-size: 1.1em;
font-family: Tahoma, Geneva, sans-serif;
}
ul,
ol {
list-style-position: outside;
margin: 0 0 10px 30px;
}
ul.blueList {
list-style:none;
list-style-image: url(images/bullet_blue.gif);
}
a:link,
a:visited {
color: #0075c3;
}
a:hover {
color: #00416c;
}
a.button:link,
a.button:visited {
display: block;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
background: transparent url(images/bg_button.gif) top left no-repeat;
color: #000;
text-decoration: none;
}
a.button:hover {
color: #0075c3;
}
/* Headings */
h1 {
color: #333;
font-size: 1.6em;
padding: 20px 6px 12px 6px;
margin: 0 0 30px 0;
background: transparent url(images/bg_hd_dash.gif) bottom left repeat-x;
}
h2 {
color: #0075c3;
font-size: 1.4em;
margin: 0 0 25px 0;
}
h3 {
color: #0075c3;
font-size: 1.2em;
margin: 0;
}
h4 {
color: #000;
font-size: 1em;
}

/* Structure
------------ */
#wrap {
background: #f4f0eb url(images/bg_body_sm.gif) top left repeat-x;
}
body#home #wrap {
background: #f4f0eb url(images/bg_body.gif) top left repeat-x;
}
.container {
width: 998px;
margin: 0 auto;
}
#header {
height: 65px;
margin: 0 0 1px 0;
}
#nav {
float: right;
padding: 0 10px 0 0;
}
#banner {
height: 330px;
}
#small-banner {
height: 150px;
}
#content {
padding: 27px 0;
}
#content #mainContent {
width: 557px;
float: left;
}
#content #subContent {
width: 431px;
float: right;
}
#footer {
text-align: center;
}

/* Header
--------- */
#header img#logo {
float: left;
margin: 0 0 0 10px;
}
#small-banner img#sm-ball {
display: block;
float: left;
margin: 0;
padding: 0;
}
#small-banner img#sm-convo {
display: block;
float: right;
margin: 45px 65px 0 0;
padding: 0;
}

/* Main Menu
------------ */
#nav .menu {
list-style: none;
margin: 0;
}
#nav .menu li {
float: left;
}
#nav .menu li a {
display: block;
height: 65px;
text-indent: -9999em;
background-position: top left;
background-repeat: no-repeat;
background-color: transparent;
}
#nav .menu li a#mm_blog {
width: 110px;
background-image: url(images/mm_blog.gif);
}
#nav .menu li a#mm_whoweare {
width: 112px;
background-image: url(images/mm_who.gif);
}
#nav .menu li a#mm_whatwedo {
width: 112px;
background-image: url(images/mm_what.gif);
}
#nav .menu li a#mm_howwedoit {
width: 101px;
background-image: url(images/mm_how.gif);
}
#nav .menu li a#mm_wherewedoit {
width: 123px;
background-image: url(images/mm_where.gif);
}
#nav .menu li a:hover,
#nav .menu li a.active {
background-position: bottom left;
}

/* Footer
--------- */
#footer ul.footerLinks {
list-style: none;
margin: 18px auto;
width: 700px;
padding: 0 20px 15px 20px;
background: transparent url(images/bg_footer_lines.gif) bottom left repeat-x;
}
#footer ul.footerLinks li {
display: inline;
}
#footer ul.footerLinks li a {
color: #666665;
text-decoration: none;
margin: 0 5px;
}
#footer ul.footerLinks li a:hover {
color: #fff;
}
#footer ul.footerLinks li.first a {
margin-left: 0;
}
#footer ul.footerLinks li.last a {
margin-right: 0;
}
#footer #footerLogo {
margin: 0 auto;
}
#footer p.copyright {
width: 220px;
font-size: x-small;
color: #7c7c7b;
padding: 0 40px 15px 40px;
margin: 0 auto 18px auto;
background: transparent url(images/bg_footer_lines.gif) bottom left repeat-x;
}
#footer p.follow {
color: #4c4c4b;
font-size: x-small;
}
#footer p.follow img {
display: inline;
vertical-align: middle;
margin: 0 5px;
}
#footer p.follow a {
color: #4c4c4b;
text-decoration: none;
}

/* Homepage
----------- */
body#home h1 {
background: none;
margin-bottom: 0;
border-bottom: 1px solid #d0ccc8;
}
body#home .managementWrap {
width: 431px;
background: transparent url(images/bg_management_centre.gif) top left no-repeat;
}
body#home .managementWrap .managementInner {
padding: 20px 17px;
height:1%;
background: transparent url(images/bg_management_centre_bottom.gif) bottom left no-repeat;
}
body#home .managementWrap .managementInner h2 {
font-size: 1.8em;
}
body#home .managementWrap .managementInner img {
display: block;
margin: 0 0 15px 0;
}
body#home .managementWrap .managementInner ul {
margin: 0 0 0 20px;
}
body#home .managementWrap .managementInner ul li {
margin: 0 0 15px 0;
}
body#home .managementWrap .managementInner a.button {
float: right;
}
body#home .homeBox {
float: left;
width: 242px;
padding: 0 18px;
}
body#home .homeBox img {
margin: 18px 18px 0 0;
}
body#home .row {
border-bottom: 1px solid #d0ccc8;
overflow:auto;
}
body#home .homeBox h3 {
height: 50px;
margin: 30px 0 0 85px;
}
body#home .homeBox p {
clear:both;
padding:0;
}

/* Who We Are
------------- */
body#whoweare .tweet {
clear:both;
margin: 0 35px;
}
body#whoweare .tweet.tweetRight {
float: right;
}
body#whoweare .tweet img.avatarImage {
float: left;
border: 1px solid #9d9d9b;
display: block;
margin: 5px 6px 0 0;
}
body#whoweare .tweet.tweetRight img.avatarImage {
float: right;
margin: 5px 0 0 6px;
}
body#whoweare .tweetWrap {
width: 470px;
float: left;
margin: 0 0 20px 0;
background: transparent url(images/bg_tweet_bubble_left.gif) top left no-repeat;
}
body#whoweare .tweet.tweetRight .tweetWrap {
float: right;
background-image: url(images/bg_tweet_bubble_right.gif);
}
body#whoweare .tweetWrap .tweetInner {
padding: 31px 31px 31px 55px;
background: transparent url(images/bg_tweet_bubble_left_bottom.gif) bottom left no-repeat;
}
body#whoweare .tweet.tweetRight .tweetWrap .tweetInner {
padding: 31px 55px 31px 31px;
background-image: url(images/bg_tweet_bubble_right_bottom.gif);
}
body#whoweare .tweetWrap .tweetInner h2 a {
text-decoration: none;
}
body#whoweare #content .tweetWrap .tweetInner p {
padding: 0;
font-size: 1.1em;
}

/* What We Do
------------- */
body#howwedoit .whereBubble {
margin: 0 35px;
float:left;
}
body#howwedoit .whatBubble.whatRight {
float: right;
}
body#howwedoit .whatBubble p {
display: inline;
}
body#howwedoit .whatBubble img.alignnone {
float: left;
border: 1px solid #9d9d9b;
display: block;
margin: 5px 6px 0 0;
}
body#howwedoit .whatBubble.whereRight img.alignnone {
float: right;
margin: 5px 0 0 6px;
}
body#howwedoit .whatWrap {
width: 396px;
float: right;
margin: 0 0 20px 0;
background: transparent url(images/bg_what_bubble_right.gif) top left no-repeat;
}
body#howwedoit .whatBubble.whatLeft .whatWrap {
margin: 0 30px 20px 0;
width: 516px;
float: left;
background-image: url(images/bg_what_bubble_left.gif);
}
body#howwedoit .whatWrap .whatInner {
padding: 31px 31px 31px 55px;
background: transparent url(images/bg_what_bubble_right_bottom.gif) bottom left no-repeat;
}
body#howwedoit .whatBubble.whatLeft .whatWrap .whatInner {
padding: 31px 55px 31px 31px;
background-image: url(images/bg_what_bubble_left_bottom.gif);
}
body#howwedoit .whatWrap .whatInner img.alignnone {
float: none;
border: none;
margin: 0;
}
body#howwedoit .whatWrap .whatInner h2 a {
text-decoration: none;
}
body#howwedoit #content .whatWrap .whatInner p {
padding: 0;
font-size: 1.1em;
}
body#howwedoit #whatWrapper {
margin: 0 35px;
position: relative;
}
body#howwedoit #whatWrapper img.twitterImage {
margin: 40px 0 20px 0;
}
body#howwedoit #tweetFeed {
position: absolute;
z-index: 200;
left: 141px;
width: 388px;
background-color: #2d2d2d;
border-left: 1px solid #5a5a5a;
border-bottom: 1px solid #3a3a3a;
}
body#howwedoit #tweetFeed .hashTweet {
padding: 4px;
border-bottom: 1px solid #242424;
border-top: 1px solid #393939;
}
body#howwedoit #tweetFeed .hashTweet img {
float: left;
margin: 0 10px 0 0;
}
body#howwedoit #tweetFeed .hashTweet strong a {
color: #aaa;
text-decoration: none;
margin: 0 5px 0 0;
}
body#howwedoit #tweetFeed .hashTweet em {
color: #aaa;
font-size: 0.9em;
font-style: normal;
font-weight: bold;
}
body#howwedoit #tweetFeed .hashTweet p {
margin: 5px 0;
font-size: 0.9em;
padding: 0;
color: #fff;
}
body#howwedoit #tweetFeed .hashTweet p a {
color: #b4b9ee;
}

/* How We Do It
--------------- */
body#whatwedo .howWrap {
position: relative;
margin: 0 0 20px 0;
height:100%;
}
body#whatwedo .howWrap h2.howCircle {
background: transparent url(images/bg_how_middle_circle.gif) top left no-repeat;
width: 146px;
height: 86px;
padding: 74px 15px 0 0;
text-align: center;
margin: 0;
font-size: 1.6em;
}
body#whatwedo #content .bubble {
width: 233px;
background: transparent url(images/bg_how_bubble_top.gif) top left no-repeat;
position: relative;
}
body#whatwedo #content .bubble .bubbleInner {
background: transparent url(images/bg_how_bubble_bottom.gif) bottom left no-repeat;
position: relative;
padding: 30px;
}
body#whatwedo #content .bubble .bubbleInner p {
margin: 0;
padding:0;
}

/* Top Bubble */
body#whatwedo #content .bubble.topBubble .bubbleArrow {
background: transparent url(images/bg_how_bubble_arrow_top.gif) bottom left no-repeat;
height: 33px;
width: 28px;
position:absolute;
bottom: -28px;
left: 10px;
}
body#whatwedo #content .bubble.topBubble {
margin: 0 0 28px 0;
}

/* Bottom Bubble */
body#whatwedo #content .bubble.bottomBubble .bubbleArrow {
background: transparent url(images/bg_how_bubble_arrow_bottom.gif) bottom left no-repeat;
height: 35px;
width: 25px;
position:absolute;
top: -30px;
right: 10px;
}
body#whatwedo #content .bubble.bottomBubble {
margin: 30px 0 0 0;
}

/* Left Bubble */
body#whatwedo #content .bubble.leftBubble .bubbleArrow {
background: transparent url(images/bg_how_bubble_arrow_left.gif) bottom left no-repeat;
height: 25px;
width: 34px;
position:absolute;
right: -29px;
top: 10px;
}
body#whatwedo #content .bubble.leftBubble {
margin: 0 29px 0 0;
}

/* Right Bubble */
body#whatwedo #content .bubble.rightBubble .bubbleArrow {
background: transparent url(images/bg_how_bubble_arrow_right.gif) bottom left no-repeat;
height: 25px;
width: 32px;
position:absolute;
left: -27px;
top: 10px;
}
body#whatwedo #content .bubble.rightBubble {
margin: 0 0 0 27px;
}

/* Benefits Boxes */
body#whatwedo #benefits.howWrap {
height: 460px;
}
body#whatwedo #benefits.howWrap h2 {
position: absolute;
left: 395px;
top: 170px;
}
body#whatwedo #benefits.howWrap .boxOne {
position: absolute;
top:0;
left: 450px;
}
body#whatwedo #benefits.howWrap .boxTwo {
position: absolute;
top: 130px;
left: 130px;
}
body#whatwedo #benefits.howWrap .boxThree {
position: absolute;
top: 280px;
left: 130px;
}
body#whatwedo #benefits.howWrap .boxFour {
position: absolute;
top: 160px;
right: 130px;
}
body#whatwedo #benefits.howWrap .boxFive {
position: absolute;
top: 290px;
right: 160px;
}

/* Services Boxes */
body#whatwedo #services.howWrap {
height: 550px;
}
body#whatwedo #services.howWrap h2 {
position: absolute;
left: 395px;
top: 170px;
}
body#whatwedo #services.howWrap .boxOne {
position: absolute;
top:0;
left: 450px;
}
body#whatwedo #services.howWrap .boxTwo {
position: absolute;
top: 130px;
left: 130px;
}
body#whatwedo #services.howWrap .boxThree {
position: absolute;
top: 280px;
left: 130px;
}
body#whatwedo #services.howWrap .boxFour {
position: absolute;
top: 160px;
right: 130px;
}
body#whatwedo #services.howWrap .boxFive {
position: absolute;
top: 290px;
right: 160px;
}
body#whatwedo #services.howWrap .boxSix {
position: absolute;
top: 390px;
left: 240px;
}

/* Where We Do It
----------------- */
body#wherewedoit .row {
margin: 0 0 20px 0;
overflow:auto;
clear:both;
height:1%;
}
body#wherewedoit .whereBubble {
width: 570px;
margin: 0 35px;
float:left;
}
body#wherewedoit .whereBubble.whereRight {
float: right;
}
body#wherewedoit .whereBubble img.alignnone {
float: left;
border: 1px solid #9d9d9b;
display: block;
margin: 5px 6px 0 0;
}
body#wherewedoit .whereBubble.whereRight img.alignnone {
float: right;
margin: 5px 0 0 6px;
}
body#wherewedoit .whereWrap {
width: 470px;
float: left;
margin: 0 0 20px 0;
background: transparent url(images/bg_tweet_bubble_left.gif) top left no-repeat;
}
body#wherewedoit .whereBubble.whereRight .whereWrap {
float: right;
background-image: url(images/bg_tweet_bubble_right.gif);
}
body#wherewedoit .whereWrap .whereInner {
padding: 31px 31px 31px 55px;
background: transparent url(images/bg_tweet_bubble_left_bottom.gif) bottom left no-repeat;
}
body#wherewedoit .whereBubble.whereRight .whereWrap .whereInner {
padding: 31px 55px 31px 31px;
background-image: url(images/bg_tweet_bubble_right_bottom.gif);
}
body#wherewedoit .whereWrap .whereInner img {
float: none;
border: none;
margin: 0;
}
body#wherewedoit .whereWrap .whereInner h2 a {
text-decoration: none;
}
body#wherewedoit #content .whereWrap .whereInner p {
padding: 0;
font-size: 1.1em;
}


/* Popup Form
------------- */
body#form {
background-color: #fff;
}
body#form h1 {
padding:0;
margin:0;
background: none;
color: #000;
font-weight: normal;
margin: 10px 0;
}
body#form span input {
background: transparent url(images/bg_form_input.gif) top left no-repeat;
width: 299px;
height: 30px;
line-height: 30px;
border: none;
color: #929292;
padding: 8px 10px;
}
body#form span input#messageinput {
float:left;
}
body#form input.submit {
background: transparent url(images/bg_form_button.gif) top left no-repeat;
border: none;
width: 82px !important;
height: 30px;
margin: 9px 0 0 5px;
float:left;
color: #555454;
}

/* Staff Page */
#content .staff-member {
border-top: 1px solid #d0ccc8;
padding: 20px 0;
}
#content .staff-member.first {
border: none;
padding-top: 0;
}
#content .staff-member p {
padding: 0;
} 
#content .staff-member .staffimage img {
padding: 10px;
border: 1px solid #d0ccc8;
background-color: #fff;
float: left;
}
#content .staff-member .staff-content {
margin: 0 250px 0 210px;
padding-top: 20px;
}
#content .twitterfeed {
background: transparent url(images/staff_twitter.gif) top right no-repeat;
float: right;
width: 180px;
height: 145px;
padding: 45px 20px 20px 20px;
margin: 10px 0 0 0;
}
#content .twitterfeed p {
color: #666;
}
#content .twitterfeed h3 {
margin-bottom: 10px;
}
#content .twitterfeed span {
font-size: 0.9em;
color: #9d9fa2;
}

/* Blog */
#generalContent {
width: 750px;
float: left;
}
#sideContent {
width: 220px;
float: right;
}
/* POSTS */
#generalContent .post h2.entry-title {
margin: 0 0 3px 6px;
}
#generalContent .post p .date {
font-size: 0.9em;
color: #5a5a5a;
}
#generalContent .post {
padding: 0 0 20px 0;
margin: 0 0 20px 0;
background: transparent url(images/bg_hd_dash.gif) bottom left repeat-x;
}
#generalContent .postmetadata strong {
color: #5a5a5a;
}
#sideContent h3 {
margin: 40px 0 10px 20px;
}
#sideContent ul {
padding: 0 0 40px 0;
margin: 0 0 0 20px;
list-style: none;
list-style-position: outside;
background: transparent url(images/bg_hd_dash.gif) bottom left repeat-x;
}
#sideContent ul li.cat-item-3,
#sideContent ul li.cat-item-5 {
display: none !important;
}
#sideContent .quick_subscribe {
background: transparent url(images/blog_subscribe.gif) top right no-repeat;
width: 180px;
height: 55px;
padding: 20px;
margin: 30px 0 0 0;
}
#sideContent .quick_subscribe h3 {
margin: 0 0 5px 0;
}
#sideContent .quick_subscribe input#QS_user_email_widget {
width: 130px;
}
/* Begin Comments*/
h3#comments {
margin: 0 6px;
}
.alt {
margin: 0;
padding: 10px;
}
.commentlist {
padding: 0;
margin:0;
text-align: justify;
font-size: 1em;
}
.commentlist .commentmetadata {
margin: 0 0 0 6px;
}
.commentlist cite {
margin: 0 0 0 6px;
}
.commentlist img {
float: right;
}
.commentlist li {
margin: 15px 0 10px;
padding: 5px 0 10px 0;
list-style: none;
border-bottom: 1px solid #d8d4bf;
}
.commentlist p {
margin: 10px 0 10px 0;
}
#commentform p {
margin: 5px 0;
}
#commentform label {
display: block;
float: left;
width: 180px;
margin-right: 10px;
margin-bottom: 5px;
}
#commentform input {
width: 250px;
}
#commentform textarea {
width: 540px;
}
#commentform p {
clear: both;
}
#commentform input#submit {
width: auto;
margin: 0 0 0 190px;
}
/* End Comments */

#content .clientlogo {
padding: 10px;
border: 1px solid #d0ccc8;
background-color: #fff;
float: left;
margin: 5px 5px 5px 0;
}