/* @override http://localhost:8888/dev/meridian/templates/jbmeridian/css/theme.css */

/* These styles set the background colour and any other style you want to attach to the rows int he theme.  
 Body and Outer Wrapper
-----------------------------------------------------------------------------*/
body {
color:#777
}

#fontHeadings {
float:left;
width:100%
}

/* Common rules that use the bevel image
-----------------------------------------------------------------------------*/
.gridWrap1,.gridWrap2,.gridWrap3,.gridWrap4,.gridWrap5,.gridWrap6,#mainWrap,.jbMeta,.blog_more ul li a,#breadcrumb,.mbWrapFlat,.jb_left45,.jb_right45,.sidebar .moduletable,.sidebar .moduletable-panelmenu,.moduletable-slide,#above,#below {
background:url(../images/bevel.png) repeat-x left top;
margin-left:-40px;
padding-left:40px;
padding-right:40px
}

#shadow,#hiddenPanel {
-moz-box-shadow:0 0 8px #787878;
-webkit-box-shadow:0 0 8px #787878;
box-shadow:0 0 8px #787878;
float:left;
width:100%;
border:1px solid #fafafa
}

.containerBG {
background:#fff url(../images/mainBG.jpg)
}

/* Top Row - For top1 to top4 positions
-------------------------------------------------------------------s----------*/
.topRow {
background:url(../images/topRightGrunge.png) right top no-repeat;
min-height:140px;
color:#fff
}

.topRow .containerBG {
background:none;
padding:8px 0 0
}

.topRow .moduletable h3 {
color:#fff
}

/* Header and Logo Row - For when logo is in the header row and for header1 to header4 positions
-----------------------------------------------------------------------------*/
.logoRow .containerBG {
background:none;
color:#fff
}

.logoRow .containerBG h3 {
color:#fff
}

/* Logo Div and Tagline
-----------------------------------------------------------------------------*/
#logo h2 a,#nav ul li a {
color:#666
}

#tagline span {
color:#666;
text-shadow:1px 1px 0 #fefefe
}

/* Nav row - for the menu position. See below for superfish styling
-----------------------------------------------------------------------------*/
.navRow {
margin-top:-60px;
background:url(../images/paintSplatter.png) no-repeat 10% 0
}

.navRow .containerBG {
padding-bottom:30px
}

/* Banner Row - For the banner position
-----------------------------------------------------------------------------*/
.bannerRow .containerBG {
color:#fff;
padding:10px 0 0
}

.thread,.bottomthread {
background:url(../images/thread.png) repeat-x left 0;
padding-bottom:12px;
float:left;
width:100%;
margin-left:-40px;
padding-left:40px;
padding-right:40px
}

#banner {
float:left;
width:100%;
margin-left:-1px;
background-position:left bottom;
padding:10px 40px 0
}

.bottomthread,.bottomRow .thread {
background-position:left bottom
}

.bottomRow .thread {
margin:0;
padding:10px 0 0
}

.bottomRow .bottomthread {
background-position:left top;
margin:0;
padding:0 0 12px
}

#banner .moduletable {
padding-top:20px;
padding-bottom:10px
}

#banner h3 {
color:#fff;
font-size:3em
}

/* Grid1 Row - Grid modules 1 to 4
-----------------------------------------------------------------------------*/
.grid1Row .containerBG,.grid2Row .containerBG,.grid3Row .containerBG,.grid4Row .containerBG,.grid5Row .containerBG {
padding:0
}

.gridWrap1,.gridWrap2,.gridWrap3,.gridWrap4,.gridWrap5,.gridWrap6,#mainWrap {
padding:20px 40px
}

/* Main Content
-----------------------------------------------------------------------------*/
.mainRow .containerBG {
padding-top:0;
padding-bottom:0
}

#mainWrap {
padding-top:0;
padding-bottom:0
}

#mainContent {
width:98%;
padding:30px 30px 30px 20px
}

#mainContent.twoR {
margin-left:-40px;
padding-left:40px;
padding-right:40px;
width:93%
}

#mainContent.twoR .jbMeta {
margin-left:-40px;
padding-left:40px;
padding-right:42px
}

#mainContent.one {
width:100%;
margin-left:-40px;
padding-left:40px
}

#mainContent.one .jbMeta {
margin-left:-40px;
padding-left:40px;
padding-right:41px
}

#mainContent.threeLR {
width:auto;
margin:0 0 0 20px;
padding:30px 40px 0 0
}

#mainContent.threeLR .jbMeta {
padding-right:40px;
width:100%
}

/* LeftCol Variations
-----------------------------------------------------------------------------*/
#leftCol,#rightCol,#centerCol {
margin-left:-40px;
padding-left:40px;
background:url(../images/vertBevel.png) repeat-y right top;
margin-bottom:0;
padding-top:30px
}

.mbWrap img,img.border,.navRow.bottomBorder,#logo.bottomBorder,.mbImageFlat,a img.prettyBox {
box-shadow:0 0 3px rgba(0, 0, 0, .2);
-moz-box-shadow:0 0 3px rgba(0, 0, 0, .2);
-webkit-box-shadow:0 2px 3px rgba(0, 0, 0, .3);
background:#fff;
border:0
}

img.prettyBox {padding: 4px;}

#rightCol {
background-position:left top
}

/* Sidebar List classes - for left, center and right
-----------------------------------------------------------------------------*/
.sidebar .moduletable,.sidebar .moduletable-panelmenu {
background-position:left bottom;
float:left;
width:100%;
margin:0 0 30px -40px;
padding:0 38px 20px 40px
}

.sidebar ul li#current a {
color:#333
}

.sidebar span.separator.open,.sidebar span.separator.close {
cursor:pointer
}

.sidebar span.separator.open,h3.open {
background:url(../images/smallUpArrow.png) no-repeat left center;
padding-left:30px
}

.sidebar span.separator.close,h3.close {
background:url(../images/smallDownArrow.png) no-repeat left center;
padding-left:30px
}

/* Above Main Content
-----------------------------------------------------------------------------*/
#above {
background-position:left bottom;
padding-top:30px;
margin-bottom:0
}

/* Advert4 to Advert6
-----------------------------------------------------------------------------*/
#belowcontent .moduletable,#abovecontent .moduletable {
padding:20px
}

/* Advert1 to Advert3
-----------------------------------------------------------------------------
 Below Main Content
-----------------------------------------------------------------------------*/
#below {
padding-top:30px
}

/* Breadcrumbs
-----------------------------------------------------------------------------*/
#breadcrumb {
width:100%;
font-size:90%;
background-position:left bottom;
margin:0 0 0 -41px;
padding:8px 40px
}

.pathway img {
margin:6px 2px 0
}

/* Grid6 Row - Grid modules 21 to 24
-----------------------------------------------------------------------------*/
.grid6Row .containerBG {
padding:0 0 20px
}

.gridWrap6 {
padding:20px 40px 0
}

/* Bottom Row - Bottom1 to bottom4 modules
-----------------------------------------------------------------------------*/
#bottomGrunge {
padding-top:25px;
float:left;
margin-top:100px
}

.bottomRow .containerBG {
background:none;
color: #fff;
}

.bottomRow .moduletable h3 {
color:#fff;
font-size:1.3em
}

.bottomRow .moduletable {
background:url(../images/bottomVertSep.png) repeat-y right top;
padding-right:30px
}

.bottomRow #bottom4 .moduletable {
background:none
}

.bottomRow ul li {
list-style-type:none;
margin:0;
padding:3px 0
}

.bottomRow a {
color:#bbb
}

/* Footer Row - Footer Position
-----------------------------------------------------------------------------*/
.footerRow {
color:#fff
}

.footerRow .containerBG {
border:0;
background:0;
padding:10px 0 20px
}

.footerRow p {
margin:0
}

.footerRow ul {
margin:0
}

.footerRow ul li {
list-style-type:none;
float:left;
margin:0 20px 0 0
}

.footerRow .moduletable h3 {
color:#fff
}

/* Hidden Panel
---------------------------------------------------*/
#paneltab {
color:#333;
height:30px
}

/* Overlay Styles
---------------------------------------------------*/
#overlay {
position:fixed;
width:100%;
height:100%;
z-index:100;
cursor:pointer;
left:0;
top:0;
display:none;
background:url(../images/whiteOverlay.png)
}

/* Hidden Panel Container
---------------------------------------------------*/
#hiddenPanel h3 {
color:#fff;
border:none;
background:none
}

#hiddenPanel {
z-index:100;
display:none;
overflow:hidden;
color:#fff;
background:url(../images/bg/creamCloth.jpg);
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border:0;
margin:0
}

#hiddenPanelInner {
z-index:101;
margin-top:10px;
margin-right:20px;
float:left;
padding:25px
}

#hiddenPanel a {
color:#eee
}

/* Buttons etc
-----------------------------------------------------------------------------*/
button.validate,input.button,button.button {
border:0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
margin:6px 0 0 20px;
padding:8px
}

input.button,button.button {
margin:0
}

button.validate:hover,input.button:hover,button.button:hover {
cursor:pointer
}

.form-login input.button {
display:block;
margin-top:10px
}

.form-login input {
display:block
}

/* Search
-----------------------------------------------------------------------------*/
#search .inputbox,#search_searchword {
font-size:13px;
color:#333;
float:left;
width:94%;
margin:10px 0;
padding:12px 12px 0
}

#searchForm .button {
margin-top:8px
}

.results ol {
margin-left:20px
}

form.search_result h3 {
clear:both;
margin-top:20px;
float:left;
width:100%;
padding-top:20px
}

form.search_result .display {
font-size:90%;
font-style:italic;
color:#999
}

.moduletable-slide {
background-position:left bottom;
padding-right:38px;
width:100%;
padding-bottom:30px;
clear:both
}

/* Typography
-----------------------------------------------------------------------------*/
a {
color:#333
}

p {
margin:8px 0
}

/* Headings */
h1,.componentheading {
color:#333
}

h2,.contentheading,h2 a {
color:#535353;
text-shadow:1px 1px 0 #fff;
line-height:1.4em;
font-size:1.2em;
padding-bottom:0;
margin-bottom:4px
}

h3,.moduletable h3 {
color:#444;
font-size:1.4em;
margin:0;
padding:0
}

.contentheading {
font-size:1.6em;
line-height:1.2em
}

h4 {
color:#333
}

h5 {
color:#fff;
background:#333;
padding:2px 0 2px 4px
}

h6 {
color:#fff;
background:#999;
padding:2px 0 2px 4px
}

.k2Title {
margin-left:-20px;
width:100%;
padding-right:33px
}

#logo h2 {
padding-bottom:0;
margin:0
}

.jb_left45,.jb_right45 {
border:0 !important
}

/* Menu
----------------------------------------------------------------------------- */
#nav ul li,#nav ul li span {
color:#666;
text-transform:lowercase;
font-size:1.1em;
text-shadow:1px 1px 0 #fefefe
}

#nav ul li a:hover,#nav li#current a,#nav li.active a {
background:url(../images/bevel.png) repeat-x left bottom
}

#nav ul li li a:hover,#nav li#current li a,#nav li.active li a,#nav li.active li#current.active a {
border:none;
background:none
}

/* Top Row parents */
#nav ul li.parent {
background:url(../images/navParent.png) no-repeat 8px 6px;
padding-left:15px
}

#nav ul li li.parent {
background:url(../images/navParent.png) no-repeat 8px center;
text-indent:0;
padding-left:25px
}

#nav ul li li.parent.active {
background:url(../images/navParent.png) no-repeat 8px center
}

/*  Em applied to menu items*/
#nav em,.moduletable-superfish em,#paneltab em {
font-size:11px
}

#nav ul {
float:right;
padding-top:17px
}

/* Top Level hovers 
 Active top level states 
 Sublevel a and spans reset */
#nav ul li li,#nav ul li li span {
text-shadow:none
}

#nav ul li ul li span {
font-size:14px
}

/* Input Styling */
.sidebar ul li.parent.active li span {
background:none
}

/* Input Styling */
.inputbox,input#email {
font-size:13px
}

/* Overrides 
 Page classes 
 Pdf Buttons etc 
 Page Classes and Overrides
-----------------------------------------------------------------------------*/
#jbArticle {
position:relative
}

.jbCategory,.jbSection,.jbFrontPage {
float:left;
width:100%
}

/* PDF Buttons
-----------------------------------------------------------------------------*/
div.buttons {
position:absolute;
right:30px;
top:-28px
}

/* JB Meta Div
-----------------------------------------------------------------------------*/
div.jbMeta {
position:relative;
width:100%;
margin:0 0 0 -20px;
padding:8px 33px 10px 20px
}

.jbCreatedate {
float:left
}

.introtext {
padding-top:10px
}

a.jbReadon {
clear:both;
float:right
}

/* Section and Categories
-----------------------------------------------------------------------------*/
div.jbSectCat {
float:left;
margin-left:20px;
font-size:90%;
font-style:italic
}

/* Author and Date Styling
-----------------------------------------------------------------------------*/
div.jbAuthorDate {
font-size:90%;
color:#999;
font-style:italic
}

/* ModifyDate
-----------------------------------------------------------------------------*/
span.jbModifydate {
float:left;
font-size:90%;
color:#999;
font-style:italic;
clear:both;
display:block;
width:100%
}

/* Reset for Modify date
-----------------------------------------------------------------------------*/
span.jbModifydate span.dateday,span.jbModifydate span.datemonth,span.jbModifydate span.dateyear {
font-size:1em;
width:auto;
display:inline
}

/* Author Tag
-----------------------------------------------------------------------------*/
span.jbAuthor {
float:right
}

/* Page navigation
-----------------------------------------------------------------------------*/
th.pagenav_next {
text-align:right
}

ul.pagination li a,th.pagenav_next a,th.pagenav_prev a {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:0;
padding:4px 8px
}

ul.pagination li a:hover {
border:0
}

.blog_more ul li a {
border:0;
margin:0;
padding:4px 0
}

/* Polls
---------------------------------------------------*/
.poll dd {
margin:0 0 10px
}

.poll dt {
padding:4px 0
}

.poll select {
display:block
}

/* Edit Icon
---------------------------------------------------*/
span.hasTip {
position:absolute;
z-index:10;
margin-top:10px
}

/* Back to top
-----------------------------------------------------------------------------*/
#toTop {
background:url(../images/smallUpArrow.png) no-repeat left center;
color:#333;
border:0;
text-align:left;
text-indent:-9999em;
width:10px;
bottom:15px;
padding:0 0 0 30px
}

/* Social Icons Layouts
-----------------------------------------------------------------------------*/
#topIcons {
margin-right:-40px
}

#topIcons ul {
float:right;
margin:0
}

#topIcons ul li {
float:left;
list-style-type:none
}

/* Tab Layouts
-----------------------------------------------------------------------------*/
.jbtab_container {
float:left;
width:100%;
padding-top:30px
}

.tabRow .containerBG {
padding-top:0
}

ul.jbtabs {
background-position:left bottom;
width:100%;
border-top:1px solid #fff;
margin:0 0 0 -40px;
padding:0 80px 0 0
}

ul.jbtabs li {
background:#ededed;
text-align:center;
text-transform:lowercase;
font-size:1.2em;
text-shadow:1px 1px 0 #fefefe;
border-right:1px solid #a7a7a7;
border-left:1px solid #fefefe;
height:44px;
margin:0;
padding:0
}

ul.jbtabs li.active {
background:url(../images/mainBG.jpg) repeat-y right top
}

ul.jbtabs li.active a,ul.jbtabs li:hover {
background:url(../images/mainBG.jpg)
}

ul.jbtabs li a {
color:#666;
background:url(../images/bevel.png) repeat-x right bottom;
float:left;
margin-bottom:0;
padding:12px 65px
}

ul.jbtabs li.jbtab1 {
border-left:0
}

ul.jbtabs li.jbtab4.active {
border-right:0
}

/* Slideshow Nav Buttons
-----------------------------------------------------------------------------*/
.ssPager.indexNav a {
text-indent:-1000px;
height:0;
border:0 !important;
padding:4px !important
}

.slideshowContent {
font-size:2.3em;
line-height:1.5em;
font-family:georgia
}

.indexNav {
padding:4px 0 4px 4px
}

.slideshowTitle h2 a {
color:#fff;
text-shadow:none
}

#banner h2 a,#banner h3 {
text-align:center;
display:block
}

/* Microblog
-----------------------------------------------------------------------------*/
.mbRow h2 {
display:block
}

ul.mbList li a {
border-bottom:0
}

.mbMoreCols a {
background:url(../images/brown/readmore.png) no-repeat left center;
text-indent:20px;
float:right
}

.microdateFlat {
color:#fff;
float:left;
width:auto;
margin-bottom:10px;
margin-top:3px;
padding:0 8px
}

.mbitemCols {
margin-top:30px;
position:relative
}

.mbitemCols h2 {
float:left;
font-size:1em
}

.mbitemFlat h2 {
float:left
}

.mbFlatIntrotext {
display:block
}

.mbWrapFlat.last {
background:none;
margin-bottom:0;
padding-bottom:0;
border:0
}

.mbWrapFlat {
background-position:left bottom;
padding:20px 40px 30px
}

.mbDateCols {
position:absolute;
float:left;
width:auto;
top:-16px;
left:4px;
padding:0 4px
}

.mbWrap img {
border:0
}

/* jTweet
-----------------------------------------------------------------------------*/
.tweet {
background:url(../images/icons/twitter.png) no-repeat left center;
padding-left:40px;
width:100% !important;
font-size:1.3em
}

.tweet .tweet_list li,.jTweet ul.tweet_list li.tweet_first {
padding:0;border: 0;
}

span.tweetDate {
font-size: 0.7em
}