/* 	BOXES OF WIDTH <50% :
	line 604, 126, 332 622 658 692

	BOXES OF WIDTH <40% :
	LINE 246 #front 33%, 
	     426 .rightcolor 35%
	     609 .leftthird, .rightthird 

	BOXES OF WIDTH >50% :
	line  	702 .twothirds 55% 
 
	BOXES OF WIDTH >70% : 
	line 169 .maincol, 
		188 .helpmain
		604 .narrowform, 
		1132 .padweather

http://steepturnpikechurch.inmatlock.com/whats_on_index.php
NEED TO SEPARATE TD (BOTTOM)
    body #whatson
    div .fullwidth
    div .smaller
    div .lefthalf
    div .noticeboardwhite
    table .sundaytable
    tbody
    tr
    td


LIST OF STYLES 
= must describe USE of section, (not what it looks like, which may change)
righthelpbar
Verdana, "Times New Roman", Times, serif
Arial, Helvetica, sans-serif


ADD ** NORMALISATION ** FOR INTERNET EXPLORER
--------------------------------------------------------------------------
CONVENTIONS - 
1. No Hyphens
2. No capitals
-----------------------
COLOUR-SCHEME (not written)
colormain, colorsecond, colorthird, colorfourth
bgcolorfirst, bgcolorsecond, bgcolorthird, colorfourth
bgimage1, bgimage2, bgimage3, (eg. for christmas stars, or shaded nav bars)
highlight, bg1, bg2, g1border, bg2border, barh3 (rename= standout)
-----------------------
NAVIGATION 
primary-nav, secondary-nav, third- , inpage-nav, footer-nav (and links styles
accociated)
------------------------
CONTENT (not written)
branding (rename from header)
content (can be what is now maincol. the article includes contentsub)
contentItem1, contentItem2,f 
title (was .centerbox ), titlesub1, titlesub2,
relatedlink, caption (for image), attribute (for text), quoteboxes, infoboxes
-----------------------------
PLACEMENT (not recommended but useful!!)
center, left, right (both text-align) - ? change to textleft, textright (vs.
floatleft etc)
half, third, 
 (not written) floatright, floatleft
---------------------------
regular stuff:
usual elements, heaaders, tables, etc
-------------------------

USING SERIF:
  .baritalic 
  .bigitalic
  .quotebox
  .quotebox2

 @@@ RE-NAME @@@

red (to color1, or whatever)

topnav to
 primary-nav (not necessarily at top)

BARH3 to
 .standout

righthalf, lefthalf, 
 change to 
half (written below, BUT check the widths all add up!! with maincol etc)
-------------------------
rightthird, left third
 change to 
third (written below, BUT check the widths all add up!! with maincol etc)
------------------------
*/
html {font:14px Arial, Helvetica, sans-serif;}
body {font:1em Arial, Helvetica, sans-serif;
font-style:normal; font-weight:normal;
color:#000;background:#fff; 
border-right:15px solid #ffffcc;
border-left:15px solid #ffffcc;
margin:0; padding:0 15px;
}

img, img.wideimg {position:relative; display:inline; 
outline:none; border:none; padding:1em; 
}
/*
.fullwidth img, img.mw, .noticeboardwhite img, .noticeboard img, .lefthalf img, .righthalf img, .footer img, .twothirds img, .leftthird img, .rightthird img, .third img, .half img, .helpmain img { max-width:98%; }
*/


.footer img, img.mw { max-width:98%; }

img a, img a:link, img.wideimg {outline:none; border:none; margin:0;
padding:0; 
}
img.floatleft, img.floatright {position:relative; display:block;
outline:none; border:none; margin:0; padding:1em; 
 float:left; 
}
img.floatright {float:right;}
img.wideimg {position:relative;display:block; width:100%;
float:left; margin:0; border:none; padding:0;}
  

 


p {border:none; margin:.8em 0 .8em 0; padding:0;}

/* HEADERS  */
h1, h2, h3 {display:block; clear:both;  
font:1em Arial, Helvetica, sans-serif;
font-weight:bold; 
text-align:left;
line-height:100%;
}

h1 { font-size:120%; color:#9F3400;
letter-spacing:.1em; 
text-align:center;
line-height:1.1em;
}

h2 { font-size:105%; color:#9F3400; 
margin-top:1.4em; margin-bottom:.4em; padding:0; 
}

h3 { font-size:100%; color:#000;
}

h1.plain {color:#909090; font-weight:normal; 
letter-spacing:.1em; 
font-size:100%; text-align:center;
}

blockquote {font-style:italic; margin:1% 2%;}

blockquote.song {display:block; width:96%;
margin-left:2%; margin-right:2%;
padding:0; 
font:1.1em Arial, Helvetica, sans-serif; 
font-style:italic;
font-weight:normal; 
letter-spacing:.1em; 
line-height:1.2em; 
}


/* BOXES */
/* url("http://steepturnpikechurch.inmatlock.com/corner.gif")
no-repeat; 
font:normal 1em Arial, Helvetica, sans-serif;
*/
.maincol {display:block; float:left;  overflow:visible;
min-width:12em; width:56%; 
margin-top:170px; margin-left:200px;
padding:0 15px 15px 30px;
background:#fff;
}
.fullwidth {display:block; 
width:92%; 
clear:both;
margin:0 1%;margin-top:5.5em; 
padding:1% 3%;
color:#000; background:#fff;
text-align:left;
}
.frontcol {display:block;
width:auto;
padding:5px 5px 1px 30px;
margin-top:110px; margin-left:180px;
color:#000;background:#fff;
text-align:left;
}

.half, .contentItem1, .contentItem2, .contentItem3, .contentItem4,
.contentItem5, .contentItem6, .contentItem7, .contentItem8, .contentItem9, .contentItem10, .contentItem11, .contentItem12, .contentItem1a, .contentItem2a, .contentItem3a, .contentItem4a,
.contentItem5a, .contentItem6a,  .contentItem7a, .contentItem8a, .contentItem9a, .contentItem10a, .contentItem11a, .contentItem12a { display:block; float:left;
background:transparent;
min-width:12em; width:45%;
margin:0;
padding:5px 15px 5px 5px;
}

.third {position:relative; display:block; float:left;
min-width:12em; width:30%;
height:auto;
background:transparent;
text-align:justify;
margin:0.75em;
}

.cim { display:block; width:282px; float:left; margin:0; padding:0;  padding:0; }
p.savedstep { font-weight:bold; margin:0; padding:0; }
#cim h2  { display:block;height:3em; }
#cim h2, #cim h2 em { font-weight:bold; }
#cim a {display:block; height:38em;  width:282px;  float:left; margin:0; padding:5px;  padding:0;
color:#000; }
#cim em {display:block; text-align:left; font-weight:normal; font-style:normal; margin:0; padding:5px;  }
#cim em.step, #cim em.stepname {display:block; font-weight:bold; font-style:normal;  }
#cim em.stepname { display:block; height:3em;
font-size:1.1em;  }
#cim img {display:block; width:272px; margin:0; padding:0;  }

/* url("http://steepturnpikechurch.inmatlock.com/corner.gif")
no-repeat; */
.helpmain {display:block; 
min-width:12em; width:70%; 
float:left;
margin:180px 0 0 20px;
padding:0 20px 20px 25px; 
background:#fff;
font:normal 1em Arial, Helvetica, sans-serif;
}

.footer {padding-top:5%; font-size:80%;}
.footstrip {font-size:80%; padding-bottom:10%;}

#front {display:block; min-width:12em; width:33%;}
/* border:0.3em solid #9F3400; */
.bluestars {display:block; position:relative;
text-align:center;
margin:1em 0;
padding:2.5em;
border:7px solid #000;
background:#000
url(http://steepturnpikechurch.inmatlock.com/star_sky_bckgrd.jpg) repeat; 
color:yellow;
width:94%; 
}
.whitestarbg {border:4px solid yellow; display:block; 
overflow:visible; 
height:auto; width:auto;
color:#000; background:#fff
url(http://steepturnpikechurch.inmatlock.com/star-gill2.gif) 100% 0 no-repeat;
margin:0; padding:.4em; 
} 

/* standout is used on your-kids.php / parents-info.php */
.standout, h2.standout {display:block; position:relative;
border:0.3em solid #9F3400;
text-align:center;
margin:1.5em 0em 1.5em 0em;
padding:0em 1em 0em 1em;
background:#fff28e;
}

h2.standout { padding:1em; }

/* rename = ????? */
.baritalic {display:inline; position:relative;
font:italic 200% Verdana, "Times New Roman", serif;
text-align:center;
color:#330066;
padding:0.5em 0 0.5em 0;
border:0; margin:0;
}

#youth .youth {
font:1em Arial, Helvetica, sans-serif; 
font-weight:bold;
color:white; 
background:blue; 
text-decoration:none;
}

#car {display:block; position:relative;
border:2px solid #9F3400; background:#fff28e;
margin:5% 0 5% 0; padding:3% 3% 4% 3%; 
}
#car h3 {display:inline; margin:0; padding:0 1em 0 0; 
line-height:2.5em; letter-spacing:.1em;
}
#car h3 em { clear:both; padding-top:2em; letter-spacing:1em;}
#car h3 img { margin:0; padding:0; float:right; }

.sidelinktop {display:block; position:relative;
padding:0.5em 0 0.5em 0;
border-top:1px solid #9F3400;
border-bottom:1px solid #9F3400;
font:1em Arial, Helvetica, sans-serif;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    despair.php -walking-wounded box
       L A R G E I T A L I C        */
.bigitalic {font:italic 180% verdana, "Times New Roman", serif;
 text-align:center;
 color:#330066;
 padding:0.5em 0 0.5em 0;
 border:0;
 margin:0;
}

/* rename = secondary-nav-link */
.sidelink {display:block; position:relative;
font:1em Arial, Helvetica, sans-serif;
padding:0.5em 0 0.5em 0;
border-bottom:1px solid #9F3400;
font:1em Arial, Helvetica, sans-serif;
}

.righthalf {display:block; 
font:1em Arial, Helvetica, sans-serif;
min-width:12em; width:44%; 
float:right;
margin:0; padding:.5%;
}
.lefthalf {display:block; 
min-width:12em; width:44%; 
float:left;
background:transparent;
margin:0; padding:.5%;
font:1em Arial, Helvetica, sans-serif;
}

/* ~~~~ CHANGE NAME ~~~~ */
.leftitemleftcream {position:absolute; 
display:block; 
width:170px; float:left;  
top:200px;
overflow:hidden;
color:#9F3400; 
 text-align:left;
 padding:2px 20px 2px 10px;
 margin:0;
border:0;
 background:#ffffcc;
font:.9em Arial, Helvetica, sans-serif;
}
.leftitemleftcream h1 {font-size:1.2em; font-weight:bold;
}
.rightitemleft {display:block;
 width:168px; 
 text-align:left;
 border:3px double #999900;
 padding:20px 5px 20px 5px;
 margin:0; 
font:1em Arial, Helvetica, sans-serif;
} 

#helpsites, .rightitemcenter {display:block;
 width:168px;
 text-align:center;
 border:thick double #999900;
 margin:30px 10px 10px 0;
 padding:10px;
}
#helpsites p, .rightitemcenter p {display:block; text-align:center; border:none;} 

#helpsites p a, .rightitemcenter p a {display:block; text-align:center;
}
.logobox2 {
 width:17em;
margin:0;
padding:1px 0 1px 8px;
font:bold 80% Arial, Helvetica, sans-serif;
text-align:left;
color:#9F3400;
}
/* LINK */
.logobox2 a {color:#9F3400;}

/*  @@ERROR  */
#TOP {display:inline; color:#9F3400;
padding:0 158px 0 0;
text-align:center;
font:normal 150% Arial, Helvetica, sans-serif;}

.top {display:inline; color:#9F3400;
padding:0 158px 0 0;
text-align:center;
font:normal 150% Arial, Helvetica, sans-serif;}

.topcenterbox {display:inline; color:#9F3400;
padding:0 158px 0 0;
margin:0;
font:normal 150% Arial, Helvetica, sans-serif;
top:20px;
}
/* LINK */
.topcenterbox a {color:#9F3400;}
.centerbox2 {margin:0; border:0;}

.rightcolor {position:relative; display:block; float:right;
min-width:12em; width:35%;
color:#000;
background:#fff;
border-top:8px solid #FFF59F;
border-right:8px solid #f7ffc2;
border-bottom:8px solid #eedd99;
border-left:8px solid #EED986;
text-align:left;
margin:.5em 2px .1px 1px;
padding:1em 1.2em 1.2em 1.2em;
}

.first_quarter {position:relative; display:block; float:left;
width:12%; height:auto;
text-align:center;
font-size:70%; font-weight:bold;
padding:0 1em 0 1em; margin:0 0 0 21%;
clear:left;
}
.last_quarter {position:relative; display:block; float:left;
width:12%; height:auto;
text-align:center;
font-size:70%;
font-weight:bold;
padding:0 1em 0 1em; margin:0 21% 0 0;
clear:right;
}
.quarter {position:relative; display:block; float:left;
width:12%; height:auto;
text-align:center;
font-size:70%; font-weight:bold;
padding:0 1em 0 1em; margin:0;
}
/* EXPLANATORY POPUPS */
.popup {color:#9f141a; text-decoration:none;}

/* LINE 421:  LINKS (without ids or classes) */
a:link {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif; color:#330099;
text-decoration:none;
outline:none;border:0;
}
a:active {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif;
color:#330099; 
text-decoration:none;
border:0;border-bottom:1px dotted #330099;
}
a:visited {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif; color:#0000cc; text-decoration:none;
border:0;border-bottom:1px dotted #330099;
}
a:hover {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif;  color:#330099; text-decoration:none;}

/* HEADER, LISTS, NAVIGATION LISTS */
ul {margin-left:2em; list-style-position:inside; }
ul li {margin-left:1em;}
ul.nobullet {list-style-type:none;} 
#instructions li, ul.instructions li  {margin:0; margin-bottom:1em; padding:0; }

/* HEADER ABSOLUTE POSITION */
.header {position:absolute;top:0;right:0;left:0;width:96%;height:auto;
margin:0; padding:0 4px 0 4px; 
text-align:center;background:#ffffcc;
border-right:4px solid #9F3400;
font-size:1em;
}

.header h1 { display:block;float:left; width:12em; margin:0 15px 0 0; padding:0; overflow:visible; text-align:center;
font-size:.8em;
background:#fff;
border:none;
}
.header img { width:150px; margin:0; padding:4px 0 0 0; }
.header img a:link { display:block; border:none; outline:none;
width:100%; margin:0; padding:0;
text-align:center;
}

.header h1 a:link, .header h1 a:visited, .header h1 a:hover, .header h1 a:active, .header h1 a:focus { display:block; float:left; 
font:1em Arial, Helvetica, sans-serif; 
font-weight:bold;color:#9F3400;background:transparent;
text-decoration:none;margin-bottom:0;
text-align:center;
border:none; outline:none;
}

em#logo {display:block; width:100%; float:left; overflow:visible;
clear:right;
margin:0; padding:0;
font-size:.8em;
font-style:normal;
text-align:center;
font-size:1em;
border:none; outline:none;
}
em#logohome { display:block; text-align:center; font-size:.7em; font-style:normal; font-weight:normal; }

ul.navigation {display:block; width:auto; 
margin:1% 0 5% 0;   
padding:0 .1%;  
clear:both; 
text-align:center;
}
ul.navigation li {display:block; overflow:visible;
width:6em; 
float:left; 
margin:0 0 1% 0; padding:0; 
text-align:center;
}

ul.navigation li a { margin:0 1%; padding:1% 6%; }
ul.navigation li a:link, ul.navigation li a:visited, ul.navigation li a:hover, ul.navigation li a:active, ul.navigation li a:focus {display:block; width:86%; 
text-align:center;
text-decoration:none;
outline:none;border:none;
border-right:1px solid #666;
}

.whitetop {  margin:0; border-top:8px solid #fff; }
/*  the margins allow the link to be a tab 
#whitetop
ul#centerul {display:block; text-align:center; }
*/
.header ul {display:block; width:auto;  margin:0 auto 0 1%; padding:0;
font-size:1em;
border:none;
}
.header li {display:block; overflow:visible;
width:5em; 
height:2.5em;
float:left;
margin:0; padding:0 1em;
text-align:center;
font-size:1em;
border:none;
} 
 

/* THIS ENCOMPASSES  .header ul#navhoriz 
    + CONTAINS THE 'YOU ARE HERE'  */         
.header li a:link, .header li a:visited, .header li a:hover, .header li a:active, .header li a:focus {display:block; 
width:100%; height:100%; overflow:visible;
margin:0; padding:8% 20%;
font:1em Arial, Helvetica, sans-serif; 
font-weight:normal;
color:#00f; background:#ffffcc;
text-align:center;
text-decoration:none;
outline:none; 
}
.header li a:visited { color:#000;  background:#ffffcc;
text-decoration:none;
border:none;
outline:none;
}

/* PAGE  HIGHLIGHTING 
   Requires page# + link#  to coincide. 
    (the page id limits the background colour change 
    to the times when the page is actually being viewed)  */
#index .index, #home .home, #about .about, #matlock .matlock, #kids .kids, #yourkids .yourkids, #help .help, #how .how, #youth .youth, #christmas_events .christmas_events, #christmas_resources .christmas_resources, #christmas_sense .christmas_sense, #christmas_real .christmas_real, #christmas_cards .christmas_cards, #christmas_shop .christmas_shop, #christmas_dec .christmas_dec, #christmas_fun .christmas_fun, #christmas_help .christmas_help, #beth_gall .beth_gall, #christmas .christmas, #cfun .cfun, #realchristmas .realchristmas, #service .service, #sun_eve .sun_eve, #sundayclub .sundayclub, #sundays .sundays, #special .whatson, #special .special, #general .general, #diary .diary, #hol .hol, #trip .trip, #baptism .baptism, #youth_activities
.youth_activities, #youth_links .youth_links, #index .sermons, .sermonslink, #sermonslink,#yourkidslink,.yourkidslink { 
color:#000; background:#fff;
}



.header ul#contactul {display:block; width:5em; float:right;
overflow:visible;
margin:0 1em 0 0; padding:0;
color:#9F3400; background:#ffffcc;
text-align:right;
font-size:1em;
border:none; outline:none;
}
.header ul#contactul li {display:block; overflow:visible;
width:6.5em; 
clear:both;
height:auto;
float:none;
margin:.3em .2em .5em 0; padding:0;
text-align:right; 
color:#ffffcc; background:#9F3400;
font-size:1em;
border:none; outline:none;
}


.header ul#contactul li img { width:100%; height:auto; margin:0 0 1px 0; padding:0; border:none; outline:none; }  

.header ul#contactul li  a:link, .header ul#contactul li a:visited, .header ul#contactul li a:hover, .header ul#contactul li a:active, .header ul#contactul li a:focus { margin:1px; padding:5px; 
border:1px solid #330099;
color:#9F3400; background:#fff;
text-align:right;
font-size:1em;
text-decoration:none;
outline:none;
}
#contact .contact { color:#fff; background:#9F3400; 
outline:none;}

li#contactli {float:right; text-align:right; margin:0; margin-right:0; padding:0; 
border:none; outline:none;
}
a#contactlink { font-size:1em; font-weight:bold; 
outline:none; 
border:1px solid #330099;}
/* ~~~  "YOU ARE HERE" HIGHLIGHTING   ~~  
    NOT  #site_info .site_info, 
    color:#fff; background:#9F3400;      */




/* INPAGE NAVIGATION
   USED FOR matlock page */
.padweather {display:block; 
width:70%;
float:left; 
margin:1% 0 0 0;  
padding:0;  
} 



 

table.fronttable td {margin:1em; padding:.5em 1em;
}

/* .goodpage can replace .noticeboardwhite (pretty box advert for a page)
#homeintro can replace .noticeboardwhite (no other style yet) */
.noticeboard p, .noticeboardwhite p, .goodpage p { 
margin:0 0 .8em 0;
padding:0; 
}

.noticeboard h1, .noticeboard h2, .noticeboard h3, 
.noticeboardwhite h1, .noticeboardwhite h2, .noticeboardwhite h3, 
.goodpage h1, .goodpage h2, .goodpage h3 { 
line-height:1em;  margin:0 0 .2em 0; padding:0;
}
.noticeboardwhite h1, .goodpage h1, .noticeboard h1 
{ margin:0 0 .5em 0;}
h1.noticeboard { border:none; margin-top:1%; padding:0;
font-size:1.1em; text-align:center; 
}
h1.noticeboard {border:none; margin-top:1%; padding:0;
font-size:1.1em; text-align:center;
}

h2.center, 
.noticeboard h2, .noticeboardwhite h2, 
.lefthalf h2, .righthalf h2, .righthalf h3, 
.dadhalf h2 { margin-top:1.2em; border:none; font-size:1em;
}

table.fronttable td {margin:1em; padding:.5em 1em;}

.lefthalf h3, .righthalf h3, .noticeboard h3, .noticeboardwhite h3, .goodpage h3 { color:#330099; }
.noticeboardwhite h3 a, .goodpage h3 a, .noticeboard h3 a { color:#330099; font-weight:bold; 
border-bottom:1px dotted #330099;
}

/* added 6 nov 2011  */
#index .righthalf img {display:block; float:right; max-width:200px;
}
#index .lefthalf img {display:block; float:left; max-width:200px;
}
/* ~~~~~~~~~~~~ FOR FORMS ~~~~~~~~~~~~~~~~ */
form {  width:40%; min-width:12em; max-width:38em; text-align:center; }
legend {font-size:90%;} 

.textarea {  width:98%; min-width:12em; max-width:38em;
 border:1px solid #9F3400;
 background:#ffffcc;
text-align:left;
}
textarea:hover, .textarea:hover {background:#ff6;
 margin:.2em; }

text, .text { width:98%; min-width:12em; max-width:38em;
 border:1px solid #9F3400;
 background:#ffffcc; 
 margin:.2em;
text-align:left;
}
text:hover, .text:hover {background:#ff6;}

.button {width:auto;
 border:1px solid #9F3400;
 background:#ffffcc;
}
.button:hover {border:1px solid #9F3400; background:#ff6;}
.feedbutton {width:auto;
 border:1px solid #9F3400;
 background:#ffffcc;
}
.feedbutton:hover {border:1px solid #ff6; background:#ff6;}
.submit {width:auto;
 border:1px solid #9F3400;
 background:#ffffcc;
}
.submit:hover {border:1px solid #9F3400; background:#ff6;}

label { display:block;
width:8em;
 float:left;
 margin:.2em;
 text-align:left;
}
 
form#fullw {display:block; min-width:12em; width:98%;  max-width:28em;
margin:0 0 1% 0; padding:0 1% 5% 1%;
}
form#fullw .formside { display:block;
width:14em;
float:left;
margin:0 0 3% 0;  
}
/*
form#fullw label, form#fullw textarea, form#fullw text { 
width:98%;
text-align:left;
}
*/

#rsvp h1, #rsvp h2 { text-align:center; font-size:1.5em; line-height:1.2em; }

/* RSVP FORM */

form#rsvpform  { display:block; min-width:12em;  width:44%; max-width:38em;  float:left;
background:white url(/images/orange-ragged.jpg)top left repeat-x;
margin:0; padding:2% 0 0 0;
font:1em Arial, Helvetica, sans-serif;
border-left:2px solid #CF4C0C;
border-right:2px solid #CF4C0C;
}
form#rsvpform fieldset { margin:.1% 2% 0 2%; padding:0 1% 0 1%;}


form#rsvpform textarea, form#rsvpform text { display:block; min-width:12em;  width:98%; max-width:38em; margin:.1%; padding:1%; }

form#rsvpform .formend {display:block; width:100%; overflow:visible;
margin:1% 0 0 0; padding:0 0 8% 0;
background:white url(/images/orange-ragged-bottom.jpg)bottom left repeat-x; }
/* RSVP CHECKBOX */ 
form#rsvpform checkbox  { display:block;   
width:2em; 
float:left;clear:left;
margin:.1% 0; padding:.1%;
 }
form#rsvpform radio {display:block; width:1em; float:left; 
clear:left; 
margin:.1% 0; padding:0;}

form#rsvpform label { display:block; float:left; width:6em; clear:right;
overflow:visible; margin:.1%; padding:0; 
margin-left:0;
} 
form#rsvpform input text { display:block; float:left; width:20em; clear:right;
overflow:visible; margin:.1%; padding:0; 
margin-left:0;
} 
/* LABEL for rsvp checkbox */ 
 form#rsvpform label.checkbox, form#rsvpform label.radio, 
form#rsvpform label.textarealabel
{ display:block; float:left; width:90%; clear:right;
overflow:visible; margin:.1%; padding:0; 
margin-left:0;
/*min-width:12em;  
width:98%; max-width:38em; 

background:#F15619;
*/ 
} 
form#rsvpform label.checkbox, form#rsvpform label.radio  { float:right; }
input#rsvpSend { display:block; width:4em;float:right;  background:#F15619 url(/images/orange-ragged.jpg)0 0 repeat; 
color:#fff; 
font-size:1em; font-weight:bold;
border:2px solid #F15619;
margin-top:-.5em;
margin-right:.8em;  padding:0 .2em 0 .2em;
 }
/* for text box and its label 
#attending label.numbers { display:block; width:13em; float:left;
clear:none;
margin:0; margin-left:0; padding:0; }
 */ 
input#numbers  { display:block; width:1.2em; float:left; clear:none;
margin:0 1em 0 0;margin-right:0; padding:0; padding-left:0;}

form.bbc { display:block; width:12em; float:right;
margin:.5em; padding:.2em;
text-align:left;
border:0;
}

form.bbc label {display:block; width:14em; height:.1em; float:left;
}
form.bbc textarea { display:block; 
width:11em; height:5em; 
float:left;
clear:right;
margin:.1em;
margin-bottom:1em;
padding:.5em;
text-align:left;
}
form.bbc input { display:block;  width:1px; height:1px; 
border:0; color:#fff;
margin:0; padding:0; 
 }
form.bbc input#bbcbutton, input#bbcbutton {display:block; overflow:visible;
font-size:70%;
width:4em; 
margin-top:.1em;  
margin-left:1em; 
margin-right:10em;
padding:.2em; 
height:1.8em;
color:#9F3400; 
background:#ff6;
border:2px solid #9F3400;
font-weight:bold;
}

.narrowform {width:78%; font-size:90%; margin:0;}
.textnarrow {width:100%; float:left; text-align:left; 
background:#ffffcc; margin:0 0 .8em 0;}
.textareanarrow {width:100%; float:left; text-align:left;
background:#ffffcc;}

/* ~~~~~~~~~~~~ END FORMS ~~~~~~~~~~~~~~~~ */

/* BOXES OF WIDTH <50%
   - thirds USED ON support feedback page  */
.leftthird {position:relative; display:block; float:left;
min-width:12em; width:30%;
height:auto;
background:transparent;
text-align:justify;
margin:.75em;
}
.rightthird {position:relative; display:block; float:right;
min-width:12em; width:28%;
height:auto;
background:transparent;
text-align:justify;
margin:.5em;
}
/* USED ON statement of faith page */
.rightnewboxcream {position:relative; display:block; float:right;
min-width:12em; width:40%;
color:#ad0018;
background:#FFF59F;
text-align:left;
margin:1em 0 .5em .1em;
padding:0px 1.2em .75em 1.2em;
}
.dadhalf {position:relative; display:block; float:right;
min-width:12em; width:45%;
background:#fff url(/images/finger-fade.jpg) 145% 5em no-repeat;
text-align:left;
margin:.5em .2em .4em .2em;
}
.halfinsert {position:relative; display:block; float:left;
min-width:12em; width:45%; height:auto;
background:transparent;
text-align:left;
margin:.5em .2em .4em .2em;
}
/* for despair.php */
.creambox {position:relative; display:block; float:right;
min-width:12em; width:38%;
color:#ad0018;background:#FFF59F;
text-align:center;
margin:0 0 1em 1.5em;padding:0 0.75em 1em 0.75em;
border:0;
}
/* USED FOR passover story */
.righthalfright {position:relative; display:block; float:right;
min-width:12em; width:43%;
background:#ffffff;
text-align:right;
padding:0.1em 1em 0.5em 1.2em;
margin:0;
}
.rightcolor#announce {position:relative; display:block; 
font-size:1.2em;text-align:center; 
border:none; 
margin:0 15px 0 0; padding:.5em 1em 0.5em 1em;
color:#9F3400; background:#fff28e;
}
#front {display:block; min-width:12em; width:49%;}
.twothirds { display:block; min-width:12em; width:55%; float:left;}
.quotebox {position:relative; display:block;
width:30%;float:right;
font:italic 1.25em verdana, "Times New Roman", serif; 
text-align:center;
color:#ad0018;
border-top:medium solid #CF4C0C;
border-bottom:medium solid #CF4C0C;
margin:0.5em 0 0.5em 1em;
padding:0.5em 0 0.3em 0;
}
.groupright {display:block; float:right;}
.quotebox2 {position:relative; display:block; 
width:23%; float:right;
font:italic 1.1em verdana, "Times New Roman", serif;
text-align:center;
color:green;
border-top:medium solid green;
border-bottom:medium solid green;
margin:0.5em 0 0.5em 1em; padding:0.8em 0 0.8em 0;
}
.box, .boxwider {display:block; 
min-width:10em; width:20%; 
border:2px solid #CF4C0C; 
background:#fff28e; 
margin:0 30% 0 38%;padding:1.5em;
font:1em Arial, Helvetica, sans-serif;
}
.boxwider { min-width:10em; width:40%;
margin:0 28% 0 28%;
}
.boxwider h2, .boxwider h1 { line-height:1.5em; padding:.5em 0 .8em 0; }
.picbox { display:block; 
width:158px;  float:left; 
margin:3px;padding:0;
border:none;  
text-align:center;
}
.picbox img { width:152px; margin:0;padding:0; }
.caption {display:block; overflow:visible;
width:88%;height:20%;
margin:0;padding-right:29px;
font-size:0.9em;font-style:italic;text-align:right;
}
q, q.green{ font-size:0.9em; font-style:italic;}
q.green{ color:green;}

table.weekly {vertical-align:top; padding:0; margin-top:0;}
.weekly td {vertical-align:top; padding:1em; margin-top:1.2em;}
.tdright {text-align:right; font-weight:bold;}

.noticeboard {border:2px solid #CF4C0C; font-size:90%; padding:.5em 1em;
background:#fff28e;}
.noticeboardwhite, .goodpage {border:2px solid #CF4C0C; font-size:90%; padding:.5em 1em; background:#fff;}
.blackboard {display:block; overflow:visible; 
font:normal 1em "comic-sans", sans-serif;
text-align:center; 
border:solid 3px #000; 
color:#000; background:#fff;
margin:1em 0 0 0; padding:1em 5em 2em 1em
}
img#bboard {display:block; float:right; overflow:visible; 
margin-top:-2.2em;margin-right:-10em; padding:0; 
border:10px solid #fff; border-left:0;
font:1em Arial, Helvetica, sans-serif;
}
.theatrebg {border:2px solid #CF4C0C; font-size:90%; padding:.5em
1em; background:#000
url(http://steepturnpike-youththeatre.inmatlock.com/images/drama-bg-400.jpg) top center no-repeat; }
#theatre h1 {display:block; width:100%; padding:.2em 1em 10em 0; margin:0;
color:#fff; 
background:#000
url(http://steepturnpike-youththeatre.inmatlock.com/images/drama-bg-400.jpg)
bottom center no-repeat;
}
#theatre h1 em {display:block; width:6em; float:right; margin:0;
padding:0; margin-right:20%;
font-size:65%;
text-align:center;
color:#fff; 
background:transparent;}
#overtheatre {display:block; width:100%; padding:0; margin:0; margin-top:-20%; }
#overtheatre h1 {color:#fff;}

.fizz {color:#FF7700;font-weight:bold;} /* OrangeRed#FF4500,#884400 */
.letterspace {position:relative; display:block; letter-spacing:.3em; 
line-height:1.6em;
}

h1.letterspace, h1.center, h1.centerbox2 {position:relative; display:block; 
font-size:1.2em; 
letter-spacing:0.3em;
text-align:center; 
}
/* also see noletterspace in overrides */  

/* ~~~~~~~ 6th April 09 */
 #goog-wm li.search-goog {display:block;}
.other-things {display:none;}
h2.midway {display:block; clear:both;}
h2.midway a:link {display:block; margin-top:2em;}
h2.midway a img {display:block; margin-top:-2em; float:left;}

/* border-collapse:collapse; */
.plan table {border:1px solid #666; margin:.1em 2em; padding:0;}
.plan td {margin:0; padding:.3em .5em; border:1px solid #666;}

/* dec 2010 */
.frontcol {display:block; position:relative; width:90%;
margin:10em 1em 1em 1em;padding:2em;
}
#starsky .navhoriz, hr {border:none;}
#starsky .topcenterbox {margin:0; margin-bottom:5%; 
}
#starsky .topbar {display:block; width:90%; margin:0; margin-left:5%; 
padding:0;}
#starsky h2 {display:block; text-align:center; margin:0; padding:0;}
#starsky p {display:block; margin:0; padding:.4em 0 .4em 0;}


td a, td a:link,td a:visited, td a:active, td a:hover, td a:focus {
font-weight:bold; border-bottom:1px dotted #777;}

td a.bglink {font-weight:normal; border-bottom:1px dotted #777;}

tbody td.strong {border-top:14px solid #fff; 
margin:2px; 
padding-top:16px; padding-bottom:16px; padding-left:20px;
 font:normal 1.1em Arial, Helvetica, sans-serif; font-weight:bold;
}
 
#sundays .maincol {display:block; overflow:visible; 
min-width:12em; width:60%; 
float:left; 
margin-top:6em;
margin-right:1em;
padding-top:1.8em;
padding-right:1em; }

#sundays table.sundaytable {display:block; overflow:visible;  padding:10px; margin-bottom:10px;}

#sundays table.sundaytable, #sundays table.sundaytable td, #sundays table.sundaytable th {padding:1em; 
}

#sundays table.sundaytable tr { margin-bottom:1.5em; 
 }

#sundays table.sundaytable tbody tr {margin:2px; 
background:#F6F9ED;
border-top:14px solid #fff;
 padding-top:16px; padding-bottom:16px;
}
#sundays table.sundaytable td {min-width:200px;}
/* also see line 1035 */
tbody td.bebold, tbody tbody td .bebold, .bebold tbody td {font:normal 1.1em
Arial, Helvetica, sans-serif; color:#000; font-weight:bold;
}

 
/* biblegateway search 
form#bgw {display:block; width:96%; margin:0; padding:0;} 
form#bgw table {display:block; margin:0; padding:3px; border:1px solid #600;} */

form#bgw {display:block; width:188px; 
overflow:hidden; margin:0; padding:0;
background:#F6F9ED;
}

form#bgw table {display:block; width:178px;
overflow:hidden; 
margin:0; padding:5px;
background:#F6F9ED;
}
form#bgw table tr {display:block; width:186px; margin:0; padding:0 5px;
background:#F6F9ED;
}

form#bgw table th.th1 {display:block; width:165px; margin:5px 0; padding:2px 5px; 
background-color:#600; color:#fff; text-align:center; 
}

form#bgw table td.th2 {display:block; width:155px; margin:5px 0; padding:2px 5px; 
background:#F6F9ED;
color:#000; text-align:center; 
}


form#bgw table td.th2 input {display:block; width:145px; margin:5px 0; padding:2px 5px; 
border:3px solid #600;
font-size:1.2em; 
}

td.th2 input#bgwsub {display:block; 
height:2em;
width:4.8em!important; 
float:right; 
color:#fff; background:#600;
font-size:.8em!important; font-weight:bold;
margin-top:.1em; margin-bottom:.5em; padding:.1em .2em;  
}

form#bgw table img {display:block; clear:both; 
border:0; outline:0;
width:146px; height:44px;
margin:0; padding:0; 
}

a#pale {font:normal .8em Arial, Helvetica, sans-serif; color:#ccc;
font-weight:normal;
border:0; text-decoration:none; 
}



.lists {display:block;
min-width:12em; width:60%; 
overflow:visible; float:right; margin:0;
 padding:0; 
}
.lists h2 {margin:1em 0 0 0; padding:0; padding-bottom:1em;}
/* .lists p {padding-bottom:1em;} 

,#e100list, #jule100list1,#auge100list1,#sepe100list1,#octe100list1,#nove100list1, #dece100list1

,#e100list2,#jule100list2,#auge100list2,#sepe100list2,#octe100list2,#nove100list2,#dece100list2 


*/
.e100list1, .openq {display:block;  width:auto; margin:0; padding:0 35px 20px 35px;
background:#fff url(http://christmas.inmatlock.com/images/openquote.gif) top left no-repeat; 
text-align:left; 
} 
.openq {padding:0 0 0 35px;
}

.e100list2, .closeq {display:block;  width:auto; 
margin:0; padding:0 35px 0 35px;
text-align:left;
background:#fff url(http://christmas.inmatlock.com/images/closequote.gif) bottom right no-repeat; 
} 
.closeq { padding:0 35px 0 0;
}
/*
#e100 ol { margin:0; padding:0; text-align:left;
}
#e100 ol li {vertical-align:top; margin:0; padding:0;
 padding-bottom:1em;
}
*/


#e100 .noticeboardwhite ol {list-style-type:decimal;}
a:focus#listen {border:solid 10px #660;} 

.e100list1 ul, .e100list2 ul {
list-style-type:none;  
margin:0; margin-top:0; padding-top:0; padding:0; 
text-align:left; 
}
.e100list1 ul li, .e100list2 ul li {vertical-align:top; margin:0; padding:0 0 .5em 0;
line-height:1.2em; 
}
.e100list1 ul li a:link, .e100list2 ul li a:link,
.e100list1 ul li a:visited, .e100list2 ul li a:visited, 
.e100list1 ul li a:hover, .e100list2 ul li a:hover, 
.e100list1 ul li a:active, .e100list2 ul li a:active,
.e100list1 ul li a:focus, .e100list2 ul li a:focus
{ 
margin:0; padding:0 .6em;
text-decoration:none; border:none;
}
#e100 .noticeboardwhite {text-align:left;}
#e100 .noticeboardwhite ul {margin:0; padding:0; text-align:left;}
#e100 .noticeboardwhite li {margin:1em 0 1em 1em; padding:0;}
/* rename = third-nav  
.rightbar {display:inline; 
background:transparent;
margin:0;
padding:0 0 0 15px;
right:5px;
}

rename = secondary-nav 

SIDEBARS
----------
RIGHTBAR NOW LISTED AT END 
TO AVOID CASCADE PROB WITH LINKS
*/
.leftbar {display:block;  
width:160px; 
margin:200px 0 0 0; padding:0; 
}

.righthelpbar, .rightbar4full {display:block; width:198px; float:left; 
background:#fff;
margin:180px 5px 10px 0; 
padding:0 0 0 20px;
}
.righthelpbar img, .rightbar img {display:block; width:150px; padding:0;
margin:0; border:0;} 

.rightbar, #sundays .rightbar {display:block; width:200px; float:right; margin-top:1%; padding-top:7%;}

.rightbar h2, .righthelpbar h2, .rightbar4full h2 {display:block; text-align:center; font-size:.9em;}

 
.helpbox {display:block; width:188px; text-align:center;
 background:#efe6da;
 border:3px double #999900;
 margin:10px 3px;
 padding:0;
 font:normal 1.1em Arial, Helvetica, sans-serif;
 font-weight:bold; 
 color:#000; 
}

/*img 223px */
.newhelpbox {display:block; width:188px; 
 margin: 10px 3px; padding:0;
 border:3px double #999900;
 text-align:center;  
 background:#f7eee7
url("/images/angelo.jpg") no-repeat;
 font:normal 1.1em Arial, Helvetica, sans-serif;
 font-weight:bold; 
 color:#000; 
}

.scripturebox, .boxright, .scriptureboxleft, .boxleft { display:block; width:200px;  float:right; 
margin:1% 0 1% 2%;  padding:1%; 
} 
.scripturebox, .scriptureboxleft {  
border:3px double #999900;
text-align:center;  
background:#f7eee7
url("/images/angelo.jpg") no-repeat;
font:normal 1.1em Arial, Helvetica, sans-serif;
}
.scriptureboxleft, .boxleft {float:left; margin:1% 2% 1% 0;}

.scripturebox h2, .scriptureboxleft h2 { display:block; 
text-align:center; 
padding-bottom:60px; 
}
 

.ref { display:block; width:90%; margin-left:10%; font-size:90%; text-align:right; float:right;
}
.newhelpbox p {position:relative; display:block;  margin:0; padding:0; 
 background:transparent;}

.newhelpbox p a {display:block;
margin:0;
padding:80px 0 25px 0;
font:.9em Arial, Helvetica, sans-serif;
font-weight:bold; 
color:#6f6168; 
/*#3F3B3D
#6F6168 */
text-decoration:none;
 background:transparent;
}
 
.newhelpbox p a em {display:block; 
margin:0;
padding:0 0 15px 0; 
}
/* added 3 mar 2011 -- ed 27 April 2011*/
#sundays table th.date {width:5em;}
#sundays table td.date {width:5em; font-weight:bold;} 

.weather {display:block; 
width:25%; max-width:12em;
float:right; 
margin:1% 0 0 0; padding:9px;  
font-size:85%;
 border:3px solid #330099; 
}
.weather h1 {color:#330099;}
.weather a {margin:0; padding:0;}
.weather a em {display:block;  text-decoration:none; 
border:none;
text-align:right;
margin:0; padding:0;}

/* for @media (small screen)
 topnav2
display:none 
 li class="dt4" 
*/
/* GENERAL MODIFIERS - POSITION, BLOCK, FLOAT */
.block {position:relative; display:block;}
.blocklink {position:relative; display:block;}
.inline {display:inline;}
.floatright {float:right;}
.floatleft {float:left;}
.floatcenter {display:block; margin-left:auto; margin-right:auto;}

/* GENERAL MODIFIERS - CLEARING */
.clearleft {clear:left;}
.clearright  {clear:right;}
.clear {display:block; clear:both;}
br .cl {clear:left;}

/* GENERAL MODIFIERS - TEXT POSITION */
.strong, .heavy {font-weight:bold;}
strong a {font-weight:bold;}
.strong, a.strong .strong a, .strong a:link, a .strong {font-weight:bold;}
.center, strong.center, em.center {display:block; text-align:center;}
em.block {position:relative; display:block; font-style:normal;}
.blocklinkcenter {position:relative; display:block; text-align:center;}
.left, h1.left, h2.left, p.left, strong.left {text-align:left;}
.right {text-align:right;}
.righttext {text-align:right;}
#lefttext {text-align:left;}
.nobreak {white-space:nowrap;}
.noletterspace {letter-spacing:0;}
.em { font-style:italic; }
/* GENERAL MODIFIERS - SIZE */
.small {font-size:85%;}
.smaller {font-size:75%;}
.smallest {font-size:70%;}
.big {font-size:1.2em;}
.bigger {font-size:1.5em;}
.biggest {font-size:1.8em;}
.mini {font-size:30%;}
.sk, .shrink {display:block; height:1px; width:1px; margin:0; padding:0; border:none; overflow:hidden;}


/* GENERAL MODIFIERS - COLOUR */
.comp {color:#FF7700;}
.compB {color:#FF4500;}
.compC {color:#884400;}
.compD {color:teal;}
.compbold {color:#FF7700; font-weight:bold;}
.black {color:#000;}
.bg1 {background-color:#fff;}
.bg2 {background-color:#ffffcc;}
.red {color:#9F3400; background:transparent;}
 .burgundy {color:#ad0018;}
.groupright {display:block; float:right;}
.green {color:green;}

 

.border {border:2px solid #CF4C0C;}
.bordery {border:3px solid yellow; padding:1em;}
.borderpad {border:2px solid #CF4C0C;padding:1em;}
.pad { padding:1em;}
#border {border:1px solid #000; padding:.1em 1em;}
#spaced {letter-spacing:1.2em;}
#spacedmed {letter-spacing:.2em;}
.spacedmed {letter-spacing:.2em;}
.spaced {letter-spacing:1.2em;}
#bigger {font-size:1.2em;}

/* @@@ REQUIRED to match print.css @@@
( use .hide {display:inline;} or {display:block;} in print.css)
*/
.hide {display:none;}
/* not used yet - wrap it outside another div that needs hiding online
@@@ REQUIRED to match print.css sheet @@@
( use .printhide {display:none;} in print.css)
INVISIBLE ON WEBPAGE - only shows on printed page
*/
.printhide {display:inline;}
.printhideblock {display:block;}

/*
#goog-wm ul, #goog-wm li.search-goog, li.search-goog form,
li.search-goog input#goog-wm-qt, input#goog-wm-sb {
display:block; 
width:18em!important; 
margin:0!important; padding:0!important; 
}
input#goog-wm-sb { display:block!important; 
width:1.9em!important; 
color:#fff;  background:#CF4C0C!important; 
float:left!important; 
margin:0!important;
 margin-right:0!important;
text-align:right!important;
font-size:1em!important;
height:1.5em!important;
padding-top:.1em!important;
padding-right:.1em!important;
padding-bottom:.1em!important;
padding-left:.1em!important;
}
#goog-wm ul form { margin-bottom:2em!important;
padding-bottom:3em!important;
}

*/

#liend a { border-right:none; }
.grey { color:#666; }
/* #330099 */
blockquote.grey { margin:0 2em 1.8em 2em; }
blockquote.grey a { color:#220077;
}

ol.num, ol.steps {list-style-type:decimal; list-style-position:inside;
margin-left:1em;font-size:.9em;  }
ol.steps li strong, ol.steps li strong a { font-size:1.1em; 
font-weight:bold;  
}
/* 
ol.steps li em { font-weight:normal; 
}
 ol.steps li, ol.steps a {  
font-weight:bold; 
padding-left:1em;
}
*/ 
.mob, #special .mob  {display:block; float:left; width:30%; max-width:30em; min-width:12em; margin:1%; padding:.5%;
background:transparent; border:none;
}
#special .mob  { width:40%; max-width:30em; min-width:12em;  }
.mob img, #special .mob img {display:block; float:left; width:180px; margin:1%; padding:.5%; }
#special .mob img { width:120px; }
.mob ul, #special .mob ul { display:block; margin:.1em; padding:0; }
img.fullwidth, img.mw { width:98%; }
ul.itemsclear li {  display:block; clear:both; margin:.1em; }
ul.itemsclear li img {  float:left; }
ul.itemsclear li a em { display:block; width:6em; float:right; padding-top:2em; }

.sermons h3 { font-size:1.1em; }

.sermons #sermonlist p { margin-left:1em; }

/* // PHP_URL_FRAGMENT

//  ??? THIS FUNCTION DOESN'T WORK WITH RELATIVE URLS. 

CLASS TO BE SHOWN ONLY IF there the fragment or query matches
fragment #12345
OR 
query ?12345 
is part of the URL --- AND 
matched using a PHP script ) 
*/
.sermonhighlight  { background:yellow; border-bottom:none;  padding:2em;
margin-bottom:2em; border-left:solid 6px red;
font-size:1.1em;}