/* CSS for spamandbeans.com
all content copyright of Mike Fraser 2009
*/

/* Overall styles & typography */

body {
    font-family: Arial, Helvetica,  sans-serif;
    padding: 1px;
    margin: 0px;
    background-image: url(images/Background.jpg);
}

p {
    font-size: 12px;
}
h1 {
    font-family: Arial, Helvetica,  sans-serif;
}
h2 {
    font-family: Arial, Helvetica,  sans-serif;
    line-height: 30px;
}
a { color: #222; }
a:hover { color: #850; }
a img { border: none;}

.position {
    position: absolute;
}
.hideShow {display:none;}

/*
* Layouts / Background images
*/

/* Homepage specific styles for layout */

#LogoH { width: 493px; height: 521px; }
#CFH { left: -470px; top: -200px; width: 499px; z-index: 10; }
#GlassH { left: 493px; top: -1px; width: 747px; height: 230px; background-image: url(images/HomePageSliced_03.jpg); }
#NotesH { left: 493px; top: 229px; width: 420px; height: 254px; background-image: url(images/HomePageSliced_07.jpg); }
#NotesH .ec3_events { left: 240px; top: 60px; }
#TeamH { left: 943px; top: 229px; width: 255px; height: 80px; background-image: url(images/HomePageSliced_08.jpg); }
#PaulDebbyH { left: 493px; top: 483px; width: 450px; height: 335px; background-image: url(images/HomePageSliced_11.jpg); }
#NotepaperH { left: 36px; top: 521px; width: 457px; height: 72px; background-image: url(images/HomePageSliced_13.jpg);}
#PostBoxH {
    left: 36px; top: 581px; width: 457px;
    background: url(images/HomePosts2.png) no-repeat bottom;
    padding: 0px 0px 35px 0px;
}
#PostListH {
    background-image: url(images/HomePosts1.png);
    padding: 0px 15px 10px 20px;
}
#PostListH p { line-height: 16px; }

/* Cat & post & page specific styles for layout */

#LogoP { width: 257px; height: 283px; }
#GlassP { left: 257px; top: 0px; width: 748px; height: 228px; background-image: url(images/CatPostPageSliced_04.jpg); }
#NotesP { left: 707px; top: 228px; width: 193px; height: 279px; background-image: url(images/CatPostPageSliced_07.jpg); }
#NotesP .ec3_events { left: -425px; top: -160px; }
#PaulDebbyP { left: 707px; top: 506px; width: 275px; height: 205px; background-image: url(images/CatPostPageSliced_12.jpg); }
#NotepaperP { left: 257px; top: 228px; width: 450px; height: 55px; background-image: url(images/CatPostPageSliced_06.jpg); }

#PostBoxP { left: 28px; top: 283px; }

/* Gallery & Pictures & Videos specific styles for layout */

#LogoG { width: 266px; height: 245px; z-index: 3; }
.G #CFH { left: 250px; top: -200px; width: 499px; z-index: 10; }
#GlassG { left: 266px; top: 0px; width: 785px; height: 217px; background-image: url(images/GalleryPicsVidsSliced_04.jpg); }
#Notes1G { left: 15px; top: 245px; width: 212px; height: 208px; background-image: url(images/GalleryPicsVidsSliced_11.jpg); z-index: 2; }
#Notes1G .ec3_events { left: 550px; top: -205px; }
#Notes2G { left: 30px; top: 487px; width: 197px; height: 229px; background-image: url(images/GalleryPicsVidsSliced_14.jpg); z-index: 1; }

#PostBoxG { left: 266px; top: 213px; }

/*
* General Layout Elements / Repeated Elements
*/

/* Logo */
.logo { left: 0px; top: 0px; }
.logo h1 { margin: 0px; padding: 0px; }

/* POSTS */

.postBox { 
    padding: 0px 0px 38px 0px;
    width: 679px;
    background: url(images/PostBase.png) no-repeat bottom;
}
#PostList {
    background-image: url(images/PostBack.png);
    padding: 3px 15px 5px 20px;
}
#PostList p {
    line-height: 16px;
}
.post {
    clear: both;
    padding-bottom: 15px;
}
.post h2 {
    font-size: 20px;
    margin-left: 72px;
}
.entry table {
    width: 104px;
    height: 102px;
    background-image: url(images/eventTag.gif);
    font-size: 14px;
    text-align: center;
    font-family: Arial Black, Arial, Helvetica,  sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}
.postDate {
    position: relative;
    left: -20px;
    width: 72px;
    height: 40px;
    float: left;
    font-size: 13px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-family: Arial, Helvetica,  sans-serif;
    background-image: url(images/miniDate.png);
}
.readOn {
    float: right;
    font-size: 13px;
    font-family: Arial, Helvetica,  sans-serif;
    font-weight: bold;
}
.navigation {
    text-align: right;
    font-size: 14px;
    font-family: Arial, Helvetica,  sans-serif;
    font-weight: bold;
}

/* MENU */

.menu {
    margin: 0;
    padding: 0;
    display: block;
    text-decoration: none;
    background-position: top;
}
.menu:hover { background-position: bottom; }

.show { background-image: url(images/show.png); width: 144px; height: 19px; }
.productions { background-image: url(images/productions.png); width: 144px; height: 20px; }
.story { background-image: url(images/about.png); width: 167px; height: 17px; }
.diary { background-image: url(images/Blog.png); width: 128px; height: 19px; }
.events { background-image: url(images/events.png); width: 128px; height: 32px; }
.pics { background-image: url(images/pictures.png); width: 155px; height: 22px; }
.video { background-image: url(images/video.png); width: 155px; height: 23px; }
.contact { background-image: url(images/contact.png); width: 167px; height: 48px; }

.Notes {
    line-height: 17px;
    padding: 25px 0px 20px 30px;
}
.G {
    padding: 15px 0px 20px 18px;
}
.Notes h2{
    display: none;
}
.Notes ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    font-family: Arial, Helvetica,  sans-serif;
    font-size: 12px;
}
.Notes ul li {
    padding: 5px 0px 0px 0px;
    line-height: 12px;
    width: 160px;
}
.Notes .ec3_events {
    position: absolute;
    width: 210px;
    z-index:5;
}
.Notes .ec3_events li{
    width: 195px;
}
.Notes .ec3_events li ul li{
    width: 195px;
}
.Notes .ec3_events img {
    display: inline;
}
/* Menu - contact form specific */
.cform { height: 465px; background-image: url(images/contactBack.gif);
    padding: 20px 35px 35px 35px;
    z-index: 20;
}
.cform h2 { display: block; }
.contactform {
    width: 350px;
}
.contactform label {
    float: left;
    clear: left;
    width: 79px;
    font-size: 12px;
    font-family: Arial, Helvetica,  sans-serif;
    margin: 3px;
}
.contactform input {
    float: left;
    margin: 3px;
}

/* Comment form styles */

#comments, #respond {
    padding: 15px 0px 0px 20px;
}

.comments-template {
    margin: 10px 0 0;
    padding: 10px 0 0;
}

.comments-template ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comments-template ol li {
    width: 602px;
    line-height: 12px;
    margin: 0px 10px 15px 15px;
    background: url(images/commentsTop.png) top no-repeat;
}

.comments-template ol li div.commenttext {
    width: 572px;
    padding: 0px 15px 2px 15px;
    background-image: url(images/commentsBack.png);
}

.commentbase {
    width: 602px;
    height: 30px;
    background-image: url(images/commentsBase.png);
}

.comments-template h2, .comments-template h3{
    font-family: Georgia, Sans-serif;
    font-size: 16px;
}

.commentmetadata{
    font-size: 12px;
    padding: 15px 10px 0px 65px;
    width: 517px;
}

.comments-template p.nocomments{
    padding: 0;
}

.comments-template textarea{
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
}
.commentformtop {
    width: 602px;
    height: 39px;
    background: url(images/commentsTop.png) top no-repeat;
}
.commentformtext {
    width: 562px;
    padding: 1px 15px 1px 25px;
    background-image: url(images/commentsBack.png);
}