@charset "utf-8";
/* CSS Document */

/*  
Theme Name: Ocean Mist
Theme URI: http://www.edmerritt.com/
Description: Ocean Mist 1.2<br /> This release fixes some minor bugs with smileys and embedding videos into a post.<br />By default posts are now displayed in the wider format and pages are listed across the top as tabs.
Version: 1.2
Author: Ed Merritt
Author URI: http://www.edmerritt.com/
*/

/* Colours used in my images 
Header Backgroud image #ad0202
Bg_footer-top cc0000
bg_main cc0000 for the border fd3f3f for the right hand side of the page
gray for the sidebar f0f0f0

*/


/* layout */
* {font-size: 100%; margin: 0; padding: 0; line-height: 1.4em;}
/* This covers the border on the OUTSIDE of the page, the background image for the body and the colour of the text */
body {position: relative; background: #f0f0f0; font: 70% Verdana, Arial, Helvetica, sans-serif; color: #4B5D67; text-align: center;}

/* This defines the gray-like colour for the right hand sidebar */
#page {display: block; width: 750px; background: url(images/bg_main.jpg) #F0F0F0 top repeat-y; text-align: left; margin: 0 auto;}
#header {position: relative; float: left; display: block; width: 750px; background: url(images/bg_header.jpg)  top no-repeat;  min-height: 355px; padding: 0;}
* html #header {height: 355px;}

/* This defines the gap between the header block and the left hand side. It has been set to 5px because that is the width of the coloured border on the image that gives the page the border on the left. Anything less and the whole of the head will start to intrude on that */
#content {float: left; display: block; width: 543px; margin: 0 0 0 5px;}

/* this sidebar bit controls the margins, but not the width of the actual coloured header. */
#sidebar {float: left; display: block; width: 198px; margin: 0 0 3px 3px;}
* html #content, * html #sidebar {position: relative; left: -7px;}
.post {float: left; display: block; width: 525px; margin: 0 0 0 18px;}
.page {float: left; display: block; width: 507px; margin: 0 0 0 10px;}
.archive {float: left; display: block; width: 507px; margin: 0 0 18px 18px; border-bottom: 1px solid #ccc;}
#sidebar .post {display: block; width: 157px; margin: 0 0 0 18px;}

/* For some reason this .title is the only one that actually controls the width. Took me fucking ages finding it. Mainly because everytime I changed it, dreamweaver dropped everything else to the bottom of the page. I thought I'd bust it but hadn't*/
.title {float: left; display: block; width: 545px; background: url(images/bg_h2.jpg) bottom repeat-x #FF0000; margin: 0 0 10px 0;}
#sidebar .title {float: left; display: block; width: 195px; height: 37px; background: url(images/bg_h3.jpg) bottom left repeat-x #CADFED;}
.entry {float: right; display: block; width: 350px; margin: 0;}
.postinfo {float: left; display: block; width: 157px; margin: 0 0 18px 0;}
.wideposts .entry {float: left; display: block; width: 525px; margin: 0 0 18px 5px;}
.wideposts .postinfo {float: left; display: block; width: 525px; margin: 0 0 18px 0;}
.archive .postinfo {margin-left: 0;}
.archive .entry {margin-right: -24px;}
* html .post, * html #sidebar .post, * html .archive  {margin-left: 0; position: relative; left: 18px;}
p img {float: left; margin: 0 18px 12px 0;}
p img.wp-smiley {float: none; margin: 0;}
embed {float: left; margin: 0 18px 12px 0;}

/* typography */
h1 {font: 2.2em Tahoma, Verdana, Arial, sans-serif; color: #FFF; letter-spacing: -1px; padding: 45px 37px 0 37px; margin: 0 0 -5px 0;}
h1 a, h1 a:visited {color: #fff; text-decoration: none;}
.description {color: #CADFED; margin: 0 37px 25px 37px;}
.title h2 {font: 1.05em Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 9px 24px 12px 24px; color: #ffffff}
#content .postwrapper .title h2 {font: 1.4em Arial, Helvetica, sans-serif; text-transform: none; }
#sidebar .title h2 {font: 1.05em Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 9px 0 12px 24px; background: none; color: #ffffff;}
.title small {float: right; padding: 14px 24px 0 0; color: #ffffff;}
h2 a, h2 a:visited {}
h3 {font: bold 1.3em Verdana, Arial, Helvetica, sans-serif; margin: 0 0 0.5em 0;}
p {margin: 0 0 18px 0; padding: 0;}
.entry p {padding-right: 24px;}
.postinfo p {padding: 0 6px;}
.req {padding-left: 3px; color: #CC0000;}
blockquote {padding: 0 0 0 12px; border-left: 3px solid #ccc;}

/* lists */
ul {margin: 0 0 24px 9px;}
ol {margin: 0 0 24px 9px;}
ul li {margin: 0 24px 0 14px;}
ol li {margin: 0 24px 0 14px;}
.buttons {float: left; display: block; width: 100%; list-style: none; margin-left: 0; margin-bottom: 21px;}
*:first-child+html .buttons {float: none;}
.buttons li {float: left; margin: 0 18px 3px 0; padding: 0;}
.buttons ul {margin: 3px 0 0 0; list-style: none; padding-bottom: -5px;}
.buttons ul a, .buttons ul a:visited {padding: 3px 6px 4px 6px; font-weight: normal;}
* html .buttons li {margin: 0;}
.buttons a, .buttons a:visited {display: block; width: 145px; padding: 6px; text-align: center; background: url(images/menu.gif) bottom left no-repeat; border-top: 1px solid #D1E0F0; font-weight: bold;}
#sidebar .buttons a {text-align: left;}
.buttons a:hover {background-position: bottom right;}
p.pages {flont-weight: bold;}
p.pages a {display: block; padding: 3px; width: auto; background: url(images/menu.gif) bottom left no-repeat; border-top: 1px solid #D1E0F0; border-right: 1px solid #D1E0F0;}
.catlist {float: left; list-style: none; margin: 0 0 18px 0;}
*:first-child+html .catlist {border-bottom: 18px solid #fff;}
.catlist li {float: left; margin: 0 18px 0 0; border-bottom: 1px solid #CAD6E1;}
* html .onecol li {margin: 0;}
.catlist ul {display: none;}
.catlist li:first-child, .catlist li:first-child+li, .catlist li:first-child+li+li {border-top: 1px solid #CAD6E1;}
.onecol li:first-child+li, .onecol li:first-child+li+li {border-top: none;}
*:first-child+html .onecol {border-bottom: 0;}
.catlist a, .catlist a:visited {display: block; width: 145px; padding: 1px 6px 2px 6px; margin: 1px 0;}
.catlist a:hover {background: #F2F2F2;}
#themeswitcher {list-style: none; margin: 0 0 18px 0;}
#themeswitcher li {margin: 0;}
#sidelist {list-style: none;}
#sidelist li {margin: 0;}
#sidelist li li {margin: 0 24px 0 8px;}
#sidelist ul {list-style-type: disc; }

.borderleft 
{
border: 1px solid #000000;
img-align: left;
margin-right: 5px;
} 


.borderright 
{
border: 1px solid #000000;
img-align: right;
margin-left: 5px;
} 
/* links */
a, a:visited {color: #7f1d1d; text-decoration: none;}
p a:hover, ul a:hover {background-color: #BFD3E0;}
#content p a:hover, #content ul a:hover {background-color: #E2EBF8;}


/* main image */
#mainpic {position: absolute; bottom: 0; float: left; background: url(http://www.practical-martial-arts.co.uk/images/pma_logo3.jpg) no-repeat; display: block; width: 745px; height: 235px; margin: 10px	0px 0px 5px; border-top: 3px solid #cc0000; border-bottom: 3px solid #cc0000;}


/* forms */
form {margin: 0 0 18px 0;}
#searchsubmit {position: absolute;}
#s {width: 130px; padding: 2px; border: 1px solid #B9C3D1; background: #CAD6E1; color: #32474B; margin-right: 2px;}
select, .field {width: 157px; margin: 0 0 4px 0; color: #32474B;}
.field {padding: 2px; width: 153px;}
textarea {padding: 2px; width: 308px; font: 1em Verdana, Arial, Helvetica, sans-serif;}
select option {padding: 1px;}
#submit {padding: 3px;}


/* calendar */
/* This is the bar at the top of the calendar I have made it black, with the text being white, the bottom border is off-blue */
#wp-calendar caption {width: 157px; text-align: center; background: #ad0202; color: #fff; border-bottom: 2px solid #e6eef7;}
#wp-calendar { border-collapse:collapse; width: 155px; text-align: center;}
#wp-calendar thead tr {background: url(images/cal_bkg.gif) bottom right no-repeat;}
#wp-calendar thead th {background: url(images/cal_single.gif) top left no-repeat;}
#wp-calendar tbody td {background: url(images/cal_single2.gif) top left no-repeat; padding: 2px 0;}
#wp-calendar #today {background: url(images/cal_single_today.gif) top left no-repeat; color: #000;}
#wp-calendar tbody .pad { background: url(images/cal_pad.gif) top left no-repeat;}
#wp-calendar a {padding: 2px 0; font-weight: bold;}
#wp-calendar tfoot td {padding: 3px 0; background: url(images/cal_pad.gif) top left no-repeat;}
#wp-calendar #next {text-align: right; padding-right: 10px;}
#calendar_wrap {display: block; width: 156px; background: url(images/cal_bkg.gif) bottom right no-repeat; padding: 0 1px 1px 0; margin: 0 0 18px 0;}

/* page tabs These are the links to the pages that hover over the mainpic */
#pagetabs {position: absolute; bottom: 3px; left: 0px; display: block; float: left; padding: 0; margin: 0px 0px 0px 75px; list-style: none;}
#pagetabs ul {display: none;}
#pagetabs li {float: left; border-bottom: 1px solid #FF0000; margin: 0 5px 0 0; padding: 0;}

/* This is for when you hover over the page tabs */
#pagetabs li:hover {border-bottom: 1px solid #ad2020;}

/* This is the background colour of the tab, and the colour for the bottom, which is darker than the border of the next section */
#pagetabs a {float: left; display: block; padding: 5px 5px 3px 5px; background: #f12a3d; color: #fff; font-weight: bold; border-bottom: 2px solid #4B5D67 ;}

/* This is the background colour for when people mouseover the page buttons, I set the colour to black, the text is white */
#pagetabs a:hover {background: #000000; border-bottom: 2px solid #4B5D67; color: #fff;}
.pagetabstitle {border-bottom: none !important; color: #fff; font-weight: bold; position: relative; top: 4px;}

/* footer */
#footer {clear: both; display: block; width: 750px; background: url(images/bg_footer.jpg) bottom no-repeat; border-bottom: 20px solid #f0f0f0; text-align: center;}
* html #footer {margin-top: 18px;}
#footer-top {display: block; width: 750px; height: 15px; background: url(images/bg_footer-top.jpg) top no-repeat;}
#footer p {color: #798892; padding: 0 37px 7px 37px;}
#footer a, #footer a:visited {color: #B05255;}