/*  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, 
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
-------------------------


 @@@   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)
------------------------
-------------------------

---------------------------

*/

body  {
font: normal 1em Arial, Helvetica, sans-serif;
color:#000;
background:#ffffcc;
}
img, img.floatleft, img.floatright, img.wideimg {  position:relative;
display:inline; outline:none; border:none;  padding:1em;   }
img.floatleft a, img.floatright a, img a, img a:link, img.wideimg  {
position:relative;   outline:none; border:none; margin:0; padding:0; }
p { border:none; }
img.wideimg {  position:relative;display:block; width:100%;
float:left; margin:0; border:none; padding:0; }
blockquote {  font-style:italic;   }
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;  }

.half, .contentItem1, .contentItem2,  .contentItem3,  .contentItem4, .contentItem5,  .contentItem6 { display:inline;  float:left;
background:transparent;
 width:45%;
margin:0;
padding:5px 15px 5px 5px;
}

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

/*  @@@  REQUIRED to match print.css  @@@
( use  .hide {display:inline; } or {display:block;}   in print.css)
*/
.hide { display:none; }

.bg1 {background-color:#fff;}
.bg2 {background-color: #ffffcc;}
.center, strong.center, em.center { display:block; text-align:center;}
.red {color:#9F3400; background: transparent;  }
.clear {clear:both;}


/*  ##########        A L R E A D Y   I N    U S E   ################  */
.maincol {display:block;
padding:10px 230px 0 40px;
margin:120px 0 0 200px;
width:auto;
background:#ffffff url("http://steepturnpikechurch.inmatlock.com/corner.gif") no-repeat;
}
.helpmain {display:block;
padding:5px 20px 20px 25px;
margin:122px 198px 10px 20px;
width:auto;
background:#ffffff url("http://steepturnpikechurch.inmatlock.com/corner.gif") no-repeat;
}

.footer  { font-size:80%; }
.footstrip  { font-size:80%; }


/*
.frontcol { display:block;
width:auto;
background:#fff url("http://steepturnpikechurch.inmatlock.com/corner.gif") no-repeat;
color:#000;
margin:123px 0px 10px 180px;
padding:25px;
text-align:left;
}
*/
.frontcol {display:block;
width:auto;
padding:5px 5px 1px 30px;
margin-top:110px;
margin-left:180px;
color:#000;
background:#fff url("http://steepturnpikechurch.inmatlock.com/corner.gif") no-repeat top left;
text-align:left;
}

.header { position:absolute;
   background: #ffffcc;
    top:0;
    right: 0;
    left: 0;
    width:100%;
    height:auto;
    padding:5px 5px 20px 5px;
    margin:0;
    text-align:center;
}

.topbar {display:block; top:90px; }

/*  rename = standout  
.barh3  {display:block; position:relative;
border:0.3em solid #9F3400;
	text-align:center;
	margin:1.5em 0;
	padding:.5em 1em;
	background:#fff28e;
font-size:1.2em;
line-height:1.5em;
}
*/

.car  {display:block; position:relative;
border:2px solid #9F3400;
	text-align:left;
	margin:4% 0 2% 0;
	padding:0% 3% 4% 3%;
	background:#fff28e;
}

#front {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; height:auto; width:auto; color:#000; background:#fff url(http://steepturnpikechurch.inmatlock.com/star-gill2.gif) 100% 0 no-repeat; overflow:visible; margin:0; padding:.4em; } 

/*  standout is used on your-kids.php / parents-info.php  */
.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;
}

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

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

h1, h2, h3  {  color:#9F3400; font:normal 1em Arial, Helvetica, sans-serif; font-weight:bold;}
h1  { letter-spacing:.1em;  font-size:140%;    
        text-align:center;  line-height:1.1; }
h2  {  font-size:125%; 
         text-align:left;  }
h3  { color:black;
        font-size:115%;
        text-align:left; }
h1.plain  {  color:#909090;  font-weight:normal;  letter-spacing:.1em;  font-size:100%;    
        text-align:center; }
.sidelinktop  {  display:block; position:relative;
padding:0.5em 0 0.5em 0;
border-top:1px solid #9F3400;
border-bottom:1px solid #9F3400;
}
/*     despair.php -walking-wounded box
 L A R G E    I T A L I C    */
.bigitalic { font: italic 180% verdana, "Times New Roman", Times, 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:normal 1em Arial, Helvetica, sans-serif;
padding:0.5em 0 0.5em 0;
border-bottom:1px solid #9F3400;
}

.righthalf {display:inline; float:right;
 width:45%;
margin:0;
padding:5px;
}
.lefthalf { display:inline;  float:left;
background:transparent;
 width:45%;
margin:0;
padding:5px;
}

/*  rename = secondary-nav */
.leftbar { width:160px; margin:0; }

/*  rename = third-nav */
.rightbar { top:125px; 
         position:absolute; overflow:hidden; display:inline; float:right;
background:transparent;
width:194px;
margin:0;
padding:0 0 0 15px;
right:5px;
}

.righthelpbar {  position:absolute; display:inline; float:right;
background:#fff;
width:194px;
padding:0 0 30px 0;
margin:0;
top:120px; 
right:10px;
}
.righthelpbar img, .rightbar img { display:block; width:100%; padding:0; margin:0; border:0; } 

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

/*  ~~~~ CHANGE NAME  ~~~~   */
.leftitemleftcream {top:125px;
         position:absolute; overflow:hidden;
         width:150px;
         height:auto;
         color:#000;
         text-align:left;
         padding:2px 20px 2px 10px;
         margin:0 0 0 .1px;
  background:#ffffcc;
border:0;
 font-size:0.9em;
     }

.rightitemleft
     {
     width:152px;
     height:auto;
     text-align:left;
     border:thick double #999900;
     padding:20px 10px 20px 10px;
     margin:0;   
}  

.rightitemcenter
{
     width:152px;
     height:auto;
     text-align:center;
     border:thick double #999900;
     padding:20px 10px 20px 10px;
     margin:10px 0 0 0;
}
.rightitemcenter p { border:none; }

.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;  }

#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:inline;  float:right;
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;
}

.helpbox { position:relative;
     width:90%;
     background: #efe6da;
color:#000;
     height:auto;
     text-align:center;
     border:thick double #999900;
     padding:0;
     margin:0;
     font:normal 1.1em Arial, Helvetica sans-serif;
	font-weight:bold;
     }

.newhelpbox { position:relative;
     width:90%;
     background: #efe6da url("http://steepturnpikechurch.inmatlock.com/images/angelo.jpg") no-repeat;
color:#000;
     height:auto;
     text-align:center;
     border:thick double #999900;
     padding:0;
     margin:0;
     font:normal 1.1em Arial, Helvetica sans-serif;
	font-weight:bold;
     }

.first_quarter { position:relative;  display:inline; 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:inline; 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:inline; 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;  }

/*  LINK  */
a:link {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif; color: blue; text-decoration: none;}
a:active {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif; color: blue; text-decoration: none;}
a:visited {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif; color: #0000cc; text-decoration: none;}
a:hover {font-weight:bold; font:normal 100% Arial, Helvetica, sans-serif; color: #330099; text-decoration:underline;}
/*  LINK  */
#home .home, #about .about, #about .about, #contact .contact, #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 .special, #general .general, #diary .diary, #hol .hol, #trip .trip, #baptism .baptism, #youth_activities .youth_activities, #youth_links .youth_links
{ font: 100% Arial, Helvetica, sans-serif; color: white; background: #0001cc; text-decoration: none; }

/*  ~~~~~~~~~~~~   FOR FORMS   ~~~~~~~~~~~~~~~~  */
form {width:90%;}
legend {font-size:90%;}
.counter {width:4em;}
.textarea { width:65%;
    border: 1px solid  #9F3400;
    background:  #ffffcc;
}
.textarea:hover { background: #ff6; }
.text { width:65%;
    border: 1px solid  #9F3400;
    background:  #ffffcc;
}
.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: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
   text-align:left;
}
br .cl { clear: left; }
.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;}
.left, h1.left, h2.left, p.left, strong.left {text-align:left; }
/*  ~~~~~~~~~~~~   END   FORMS   ~~~~~~~~~~~~~~~~  */

/* thirds used on support feedback page  */
.leftthird { position:relative; display:inline; float:left;
width:30%;
height:auto;
background:transparent;
text-align:justify;
margin:0.75em;
}

.rightthird { position:relative;  display:inline; float:right;
width:28%;
height:auto;
background:transparent;
text-align:justify;
margin:0.5em;
}

/*  used on statement of faith page  */
.rightnewboxcream { position:relative; display:inline;  float:right;
width:40%;
color:#ad0018;
background:#FFF59F;
text-align:left;
margin:1em 0 0.5em 0.1em;
padding:0px 1.2em 0.75em 1.2em;
}

.dadhalf { position:relative; display:inline; float:right;
width:45%;
/* background: #fff url("http://steepturnpikechurch.inmatlock.com/finger.jpg") no-repeat; */
background: #fff url(/images/finger-fade.jpg) 145% 5em no-repeat;
/* background-position:3em 4.5em; */
text-align:left;
margin:0.5em 0.2em 0.4em 0.2em;
}

.halfinsert { position:relative; display:inline; float:left;
width:45%; height:auto;
background:transparent;
text-align:left;
margin:0.5em 0.2em 0.4em 0.2em;
}


/*  for despair.php  */
.creambox {  position:relative; display:inline;  float:right;
width:38%;
color:#ad0018;
background:#FFF59F;
text-align:center;
margin:0 0 1em 1.5em;
padding:0 0.75em 1em 0.75em;
border:0;
}

/* for passover story  */
.righthalfright { position:relative;  display:inline;  float:right;
width:43%;
background:#ffffff;
text-align:right;
padding:0.1em 1em 0.5em 1.2em;
margin:0;
}

/*  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;}

.floatright   { float: right; }
.floatleft   { float: left; }
.floatcenter {
    display: block;
    margin-left: auto;
    margin-right: auto }


.rightcolor#announce { 
display:block; 
font-size:1.2em;
position:relative;
border:none;
	text-align:center;
	margin:0 15px 0 0;
	padding:.5em 1em 0.5em 1em;
	background:#fff28e;
color:#9F3400;
}

#front { width:50%; }

.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%; }
.twothirds { width:55%; float:left;}


.quotebox {  display:inline;  position:relative;
font:italic 1.25em  verdana, "Times New Roman", Times serif; 
float:right;
text-align:center;
color:#ad0018;
width:30%;
border-top: medium solid #CF4C0C;
 border-bottom: medium solid #CF4C0C;
padding:0.5em 0 0.3em 0;
margin:0.5em 0 0.5em 1em;
}

.burgundy { color:#ad0018; }
.groupright {display:inline;  float:right;}
.green { color:green; }

.quotebox2 {  display:inline;  position:relative;
font:italic 1.1em  verdana, "Times New Roman", Times serif; 
float:right;
text-align:center;
color:green;
width:23%;
border-top: medium solid green;
 border-bottom: medium solid green;
padding:0.8em 0 0.8em 0;
margin:0.5em 0 0.5em 1em;
}
.heavy {font-weight:bold; }
.box { display:block; width:20%; border: 2px  solid #CF4C0C; 
	background:#fff28e; 
padding:1.5em;
margin:0 30% 0 38%;
}
.fullwidth {display:block;
width:auto;
padding:.5% 4%;
margin:0;
margin-top:110px;
color:#000;
background:#fff url("http://steepturnpikechurch.inmatlock.com/corner.gif") no-repeat top left;
text-align:left;
}
.righttext { display:inline; text-align:right; float:right; }

#lefttext { display:inline; text-align:left; }
.border { border: 2px  solid #CF4C0C; }
.nobreak {white-space:nowrap;}
#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;}
.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 { border: 2px  solid #CF4C0C;  font-size:90%;   padding:.5em
1em; background:#fff; }

.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; }
/*
#theatre h1 em { display:block;  width:20%; float:right; margin:0;
padding:0;  margin-right:20%;
font-size:70%;
color:#fff;  
background:transparent; }
*/

#overtheatre  {display:block; width:100%; padding:0; margin:0; margin-top:-20%;
}
#overtheatre h1 { color:#fff; }


h1.noticeboard { border:none; font-size:140%; text-align:center; margin-top:1%; padding:0; }
.noticeboard h2 { border:none; font-size:100%; }

.sundaytable  {padding:1.5em; }
.sundaytable table, .sundaytable td   { margin:1em; padding:1.5em; }

 
table.fronttable td { margin:1em; padding:.5em 1em; }
 
.fizz { color:#FF7700; font-weight:bold; }  /* OrangeRed  	#FF4500   / #884400*/
.comp { color:#FF7700; }
.compB { color:#FF4500; }
.compC { color:#884400; }
.compD { color:teal; }
.compbold { color:#FF7700;  font-weight:bold; }
.navigation {
	overflow:visible;
	display:block;
	margin:0;
	padding:0;
	left:0;
	right:0;
	font:normal 100%  Arial, Helvetica, sans-serif;
	font-weight:bold;
	height:auto;
	text-align:center;
}
.navigation ul { 	list-style:none; text-align:center;
}
.navigation li {  color:#000;
	display:inline; 
	white-space:nowrap;
 }
.navigation a:link, .navigation a:visited, .navigation a:hover, .navigation a:active, .navigation a:focus   {
	margin:0; padding: .4em 1em;
color:#000; text-decoration:none; 
	background:#fff;
	font-weight:normal;
	text-decoration:none;
	line-height:2em; /* was 2.8 */
}
.navigation a:link, .navigation a:visited { color:#000;   }
.navigation a:hover, .navigation a:active, .navigation a:focus { color:#000; text-decoration:underline;  }

li.here { display:inline; }
li.here a:link, li.here a:visited, li.here a:hover, li.here a:active, li.here a:focus {
	background:#fff;
	padding:4px 5px;
	font-weight:bold;
	text-decoration:none;
}
li.here a:link	{ color:#fdfaf4; background:#fff;}
li.here a:visited, li.here a:hover, li.here a:active, li.here a:focus { color:#204546; }

ul.nobullet { list-style-type: none; } 

.black { color:#000; }

.blocklink  { position:relative; display:block; }
.blocklinkcenter  { position:relative; display:block; text-align:center; }

.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.7em; letter-spacing:0.3em;  line-height:1.5em; text-align:center; }

.noletterspace { letter-spacing:0;  }

/*  ~~~~~~~  6th April 09 */
  #goog-wm { }
  #goog-wm h3.closest-match { }
  #goog-wm h3.closest-match a { }
  #goog-wm h3.other-things { }
  #goog-wm ul li { }
  #goog-wm li.search-goog { display: block; }
.other-things { display: none; }

a.strong { font-weight:bold; }

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; }