/*==============================================================
			Based on stylesheet for TWWOTVM, may contain unnecessary code
================================================================*/



body {
        background-image: url(http://ingridpitt.co.uk/images/backgrounds/book-canvas2.jpg); 
        background-repeat: repeat;
        font-family: Verdana, Geneva, Arial, sans-serif;
        font-size: 80%;
}    

#allcontent {
	width: 1024px;
	background-color: white;
        margin-left: auto;
        margin-right: auto;
}

/*==============================================================
			For equal-height columns, see http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
================================================================*/


#container2 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background-image: url(http://ingridpitt.co.uk/images/backgrounds/black-border-sides.jpg);
        background-repeat: repeat-y;
        background-position: right;
}

#container1 {
	float:left;
	width:100%;
	position:relative;
	right:665px;
	background:white;  /*left-column background color  */
}

#left-column {
	float:left;
	width: 359px;
	position:relative;
	left:665px;
	overflow:hidden;
}

#right-column {
	float:left;
	width:665px;
	position:relative;
	left:665px;
	overflow:hidden;
}


/*==============================================================
			end code for equal-height columns
================================================================*/

#left-column img {
        border-style: none;
}

.left60 {width: 60px;}
.left100 {width: 100px;}
.left200 {width: 200px;}
.left300 {width: 300px;}

.left60, .left100, .left200, .left300 {
        float: left;
        padding: 4px 15px 10px 20px;
}

.addthis {width: 125px;
           float: right;
           margin: 32px 55px 0 0;
           clear: right;}

.right200 {width: 200px;}

.right200 {float: right;
        margin: 2px 25px 0 10px;
        clear: right;
}

.right200 img {border-style: none;}

#left-content {
        margin: 0 25px 10px 27px;
        color: black;
        padding-top: 7px;
}

#left-content object {
        margin: 0 30px 0 0;
        overflow: hidden;
}

#left-content h1 {
        font-size: 160%;
}

#left-content b.bright {
        color:#1F859C;
}

#left-content a:link {color:#054007;} 

#left-content a:visited {color:#127815;}

#left-content a:hover {color: black; background-color:#B9F0BA;}

#menu, #header, #main-container {
        width: 665px;
        float: right;
}

#menu {
	background-image: url(http://ingridpitt.co.uk/images/backgrounds/title-horizontal665w.jpg);
        background-position: top;
        background-repeat: no-repeat;
}


/*==============================================================
			Modified version of Suckerfish Dropdowns, see http://htmldog.com/articles/suckerfish/dropdowns/example/ & add'l code in TWWOTVM comments
================================================================*/


#nav {
	background-color: transparent;
        position: relative;
        z-index: 100; /*-- otherwise lower list-items can't be clicked on */
}

#nav, #nav ul {
	list-style: none;
        padding: 85px 0 0 0; /* controls position of whole top-level list  */
	float: left; /* need this line */
	margin: 0; 
        max-width: 662px;
}

#nav li.first-level {
   border: 1px solid #ADADAD;
   padding: 30px 10px 10px 10px;
   float-left;
   text-align: center;
   min-height: 60px;
   font-size:12px;  
}

#nav a {
	display: block;  
	color: #383838;
        text-decoration: none;
}

#nav li {
	float: left;  /* need this line */
	padding: 0;
 
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	margin: 0;
        padding: 0;  /* moves second-level items up to base of first-level items */     
}

#nav li li {         /* second-level list item */
        padding: 10px;    
	width: 10em;   
        text-align: left;
        background-color: #E4E1B8;
        border: 1px solid #383838;
}

#nav li ul a {width: 10em;}  /* need this line -- puts second-level list items each on separate line */ 


/* need the following line -- affects display of second-level (and later if applicable) lists & inexplicably affects bg img of header below. */
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li:hover ul, #nav li li li.sfhover ul {
	left: auto;
} 


#nav li:hover, #nav li.sfhover {
	background: #E4E1B8;
}

#nav li li:hover, #nav li li.sfhover {
        background-color: #85ED88;
}

/*==============================================================
					END OF SUCKERFISH DROPDOWNS
================================================================*/


/*==============================================================
					START - FOR CALENDAR ON EVENTS PAGES
================================================================*/


h2.bright {color: #054007; font-size: 200%; text-align: center;}

.month { border-collapse: collapse; margin: 0 10px 10px 10px;}
.month td {border: 1px solid #383838; color: #383838;}
.month th {border: 1px solid #383838; color: white;}
.month thead { background-color:#054007; color:white; }
.month td { vertical-align: top; overflow: auto; background-color:white; }

td .day { width: 7em; min-height: 2em; overflow:auto; margin-top: 0; }

.month tbody .weekend { background-color:#CBCCC8; }
.month tbody .next, #month tbody .previous { background-color:#ddd; }
.rtop { display:block; background:#060; }
.rtop * { display: block; height: 1px; overflow: hidden; background:#fff; }
.r1{margin: 0 0 0 5px}
.r2{margin: 0 0 0 3px}
.r3{margin: 0 0 0 2px}
.r4{margin: 0 0 0 1px; height: 2px}

#month th { font: 1em  bold Arial, Helvetica, sans-serif; }
.date {font-weight:bold}

/*==============================================================
						END CALENDAR
================================================================*/

/*==============================================================
					START - FOR EVENTS TABLES
================================================================*/

.tailpiece-separated {
        background-image: url('http://ingridpitt.co.uk/images/backgrounds/black-tailpiece.jpg');
        background-repeat: no-repeat; 
        background-position: bottom center;
        padding-bottom: 15px;
}

.tailpiece-separated h2 {
        text-align: center;
}

.tailpiece-separated table {
        padding: 5px 20px;
}

td.question {
        font-weight:bold;
        font-size:120%;
        padding-right: 7px;
}

/*==============================================================
					END EVENTS TABLES
================================================================*/

#header h2 {
        text-align: center;
        font-size: 110%;
        position: 25%;
}

#right-column-content { 
        position: relative;
	background-image: url(http://ingridpitt.co.uk/images/backgrounds/black-border-top.jpg);  /* adds top image */ 
        background-position: top;
        background-repeat: no-repeat;
        margin: -20px 0 0 0; 
/*        min-height:942px;  /* to match height of left column so banner ad stays on bottom; s/b 100% not set px but can't get to work & not affected by right-column @ 100% either? */
/*        padding-bottom: 110px;   so bottom banner ad doesn't cover up text - not using banner ads now per Kevin */
}

#right-column {
        color: black;
}

#right-column h1 {
        font-size: 200%;
}

#right-column h1, #right-column h2, #right-column h3, #right-column p, #right-column ul, table.event {
        margin: 20px;
}

#right-column a:link {color:#054007;} 

#right-column a:visited {color:#127815;}

#right-column a:hover {color: black; background-color:#85ED88;}

blockquote {margin-left: 15px;}

.clipping-first {
        background-image: url('http://ingridpitt.co.uk/images/backgrounds/paper.jpg'); /* top clipping needs top edge matching main bg-color not clipping bg-color, hence jpg not transparency */
}

.clipping {
        background-image: url('http://ingridpitt.co.uk/images/backgrounds/paper.gif');
}

.clipping, .clipping-first {
        background-color: #EADFCD;
        padding: 70px 5px 10px 50px;
        margin: -12px 19px 0 19px;
        background-repeat: no-repeat; 
        background-position:top;
}

.bordered-plain {
        border: 1px solid #383838;
	background:#EAE1E0;
        padding: 7px;
        margin: 7px;
        color: #383838;
}

.caption, .subcaption {
        text-align: center;
        font-style: italic;
        font-weight: bold;
}

.caption {
        font-size: 80%;
        margin: 5px !important;
}

.subcaption {
        font-size: 65%;
        margin: 5px !important;
}


.spoiler {padding:3px;}
.spoiler .inner {padding:3px;margin:3px;}

#footer {
	background-color: white;
	clear: both;
	font-size: 80%;
        border-top: 1px solid #ADADAD;
}

#footer p { 
        color: black; 
        padding: 10px;
        text-align:center;
}

#footer img {
        border-style: none;
        margin: 5px; 
}

.text-content {display:none;}

.ads, .center {text-align: center;}
.right {text-align: right;}

.ads img {border-style: none;}

.stuck-to-bottom {
        position: absolute;
        bottom: 0;
        left: 50%; 
        margin-left: -234px !important;
}