/*This style sheet controls how the textboxes will look
The only thing that you might want to change will be the color
of the borders. They are set at #000066 at the moment.
The background color is set to ffffff (white), however if you
decide to change it you can. Just remember, if you do, it will affect EVERY
textbox on your site. To change only one, copy and paste the class here in the style sheet,
and alter the color. Change the name also... so the new class may be called
full-width-box-blue for eg. Then the new color can be called with your new class name.
*/



/*** right column Full width box.
Change the colors to suit. The standard box has a white background, and the
box2 has a colored background ***

IE has difficulty with dashed and dotted. Dotted will show as dashed, and dashed can be dodgy anyway. 
So you are far better to use the solid property, as I have done here. At least you know you will get the same display in
every browser. Maybe Microsoft will produce a decent standards compliant browser ones day...but I doubt it*/

div.full-width-box {
   background-color: #ffffff;
	margin: 15px 5px 0px 5px;
	padding: 2px;
   border: 2px transparent;
   height: auto;
   
}
div.full-width-box-a {
   background-color: #ffffff;
	margin: 15px 0px 0px 0px;
	padding: 2px;
   border: 2px solid #e8d2e8;
   height: auto;
   
}

div.full-width-box-cloud {
   background: url(../images/clouds2.png) top center no-repeat;
	margin:0px 0px 0px 0px;
	padding: 2px;
   border: 2px #e8d2e8;
   width: auto;
   height: auto;
}

div.full-width-box-cloud-1 {
   background: url(../images/clouds2.png) repeat;
	margin:0px 0px 0px 0px;
	padding: 2px;
   border: 2px #e8d2e8;
   width: auto;
   height: 110;
   
}
/***backgroud box for promises***/
div.full-width-box-1 {
   background-color: #ffffff;
	margin: 0px 0px 0px 0px;
	padding: 15px;
   border: 2px solid #e8d2e8;
   height: 105px;
/***end background box for promises***/ 
  
}
/*promises box, that needs to add picture on index page*/
div.full-width-box-2 { 
   background-color: #ffffff;
	margin: 0px 10px 0px 10px;
	padding: 5px;
   border: 2px solid #e8d2e8;
   height: 60px;
   
}

.text-2{
font-family:  verdana, sans-serif;
font-size: 98%;
font-weight:normal;
color:#000;
background-color:transparent; 
border-left:1px solid #fff; 
border-right:1px solid #fff; 
text-align:left; 
padding-left:5px; 
padding-right:5px;

}
.text-1{
font-family:  verdana, sans-serif;
font-size: 100%;
font-weight:normal;
color:#000;
background-color:transparent; 
border-left:1px solid #fff; 
border-right:1px solid #fff; 
text-align:left; 
padding-left:5px; 
padding-right:5px;
margin: 15px 0px 10px 100px;
}
/***end promises boxes at bottom of pages***/

/***this box has a background image***/
div.full-width-box-p4 {
   background: url(../images/4-edwrdn-120.jpg) left center no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 5px;
   border: 2px solid #e8d2e8;
   height: 100;
}



/***these are for the prayer boxes with a large letter in the background***/

div.center-half-width-box-bg-b{/*this box has a background image-top-centered*/
   background: url(../images/b-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;
}

div.center-half-width-box-bg-o{/*this box has a background image-top-centered*/
   background: url(../images/o-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;
}
  
div.center-half-width-box-bg-h{/*this box has a background image-top-centered*/
   background: url(../images/h-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;   
}
   
div.center-half-width-box-bg-g{/*this box has a background image-top-centered*/
   background: url(../images/g-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;  
}
   
div.center-half-width-box-bg-f{/*this box has a background image-top-centered*/
   background: url(../images/f-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;
}
   
div.center-half-width-box-bg-a{/*this box has a background image-top-centered*/
   background: url(../images/a-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;  
}
   
div.center-half-width-box-bg-s{/*this box has a background image-top-centered*/
   background: url(../images/s-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;        
}
   
div.center-half-width-box-bg-j{/*this box has a background image-top-centered*/
   background: url(../images/j-purp-edw-i-108.gif) top center no-repeat;
	margin: 10px 10px 10px 10px;
	padding: 30px 20px 20px 20px;
   border: 3px solid #e8d2e8;
   height: auto;
   width: 100%;        
}   
/*text box for the above boxes*/
.text-b{
font-family:  verdana, sans-serif;
font-size: 95%;
font-weight:normal;
color:#000;
background-color:transparent; 
border-left:3px transparent /*#e8d2e8*/; 
border-right:3px transparent/* #e8d2e8*/; 
text-align:center; 
padding-left:5px; 
padding-right:5px; 
/*end text for bg image box*/  
}
   
/*text box for misc, smaller text*/
.text-c {
font-family:  verdana, sans-serif;
font-size: 85%;
font-weight:normal;
color:#000;
background-color:transparent; 
border-left:3px transparent /*#e8d2e8*/; 
border-right:3px transparent/* #e8d2e8*/; 
text-align:left; 
padding-left:5px; 
padding-right:5px; 

}
/*end text for bg image box*/  

/***End for the prayer boxes with a large letter in the background***/   

div.center-box {
   width: 50%;
   background-color: #ffffff;
	margin-left:auto;
	margin-right:auto;
	padding: 15px;
   border: 1px solid #000066;
	
}

div.center-box-2 {
   width: 50%;
   background-color: #ffffe1;
	margin-left:auto;
	margin-right:auto;
	padding: 15px;
   border: 1px solid #000066;
	}

div.center-box-2a {
   width: 80%;
   background-color: #ffffe1;
	margin-left:auto;
	margin-right:auto;
	padding: 15px;
   border: 1px solid #000066;
	
}

div.center-box-2c {
   width: 80%;
   background-color: #ffffff;
	margin-left:auto;
	margin-right:auto;
	padding: 15px;
   border: 1px solid #ffffff;
	
}

div.center-box-2d {
   width: 90%;
   background-color: #ffffff;
	margin-left:auto;
	margin-right:auto;
	padding: 15px;
   border: 1px solid #ffffff;
	
}

div.center-box-3 {
   width: 40%;
   background-color: #ffffe1;
	margin-left: auto;
	margin-right:auto;
	padding: 10px;
	align: right;
   border: 1px solid #000066;
	
}

div.center-box-3a {
   width: 100%;
   background-color: #ffffe1;
	margin-left: auto;
	margin-right:auto;
	padding: 5px;
	align: left;
   border: 1px solid #000066;
   	
}

div.full-width-box2 {
   background-color: #ffffcc;
	margin: 15px 0px 10px 0px;
	padding: 15px;
   border: 2px solid #e8d2e8;
	
}
	
/*** right column Half of width box left ***/
div.half-width-box-left {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 2px solid #e88d2e;
	padding: 10px;
	width: 50%;
	float: left;
	
}

div.half-width-box-left-1 {
   background-color: #ffffe1;
	margin: 10px 10px 10px 10px;
	border: 2px solid #ebd6eb;
	padding: 10px;
	width: 38%;
	float: left;
	
}

/*** right column Half of width box right ***/
div.half-width-box-right {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 2px solid #e8d2e8;
	padding: 10px;
	width: 50%;
	float: right;
	
}

div.half-width-box-right-1 {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 2px solid #e8d2e8;
	padding: 10px;
	width: 40%;
	float: right;
	
}
div.half-width-box-right-2 {
   background-color: #ffffe1;
	margin: 5px 5px 5px 5px;
	border: 2px solid #e8d2e8;
	padding: 10px;
	width: 40%;
	float: right;
	
}

/* the border of the image inside your half width textbox can be changed.
Its set to #5F8B8C at the moment. You can also change the solid
to either dashed or dotted if you want to*/

/*** Picture inside the text ***/
.img-float-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 2px transparent;
	
}

.img-float-left-1 {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 2px transparent;	
	
}
.img-float-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px transparent #e8d2e8;
}	
.img-float-right-1 {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px #e8d2e8;
	
	
	
	
	
}
/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}
/***for rounded nav boxes this is the main heading***/
div.round-container{
text-align:center;
font-family:  verdana, sans-serif;
font-size: 110%;
font-weight:bold;
background-color:#d9e1ff; 
color:#674ea7;
width: auto;
padding:0px;
margin-right:auto;
margin-left:auto;
/***end for main heading for rounded nav boxes***/
}

.top-right-image{
background-image: url(../images/tr-blue-rnd.gif);
background-repeat: no-repeat;
background-position:top right;
}
.top-left-image{
background-image: url(../images/tl-blue-rnd.gif);
background-repeat: no-repeat;
background-position:top left;
}
.bottom-right-image{
background-image: url(../images/br-blue-rnd.gif);
background-repeat: no-repeat;
background-position:bottom right;
}
.bottom-left-image{
background-image: url(../images/bl-blue-rnd.gif);
background-repeat: no-repeat;
background-position:bottom left;
}
.text{
font-family:  verdana, sans-serif;
font-size: 90%;
font-weight:normal;
color:#000;
background-color:#fff; 
border-left:1px solid #d9e1ff; 
border-right:1px solid #d9e1ff; 
text-align:left; 
padding-left:2px; 
padding-right:1px;
}
.text2{
font-family:  verdana, sans-serif;
font-size: 100%;
font-weight: normal;
color:#000;
background-color: #fff;
background-image: url(../image-files/clouds.gif);
background-repeat: repeat-x; 
border-left:1px solid #d9e1ff; 
border-right:1px solid #d9e1ff; 
text-align:left; 
padding-left:5px; 
padding-right:5px;
}

/***end rounded nav boxes***/

/***begin for little informational boxes***/
div.round-container-sm{
text-align:center;
font-family:  verdana, sans-serif;
font-size: 100%;
font-weight:bold;
background-color:#d9e1ff; 
color:#674ea7;
width: 25%;
padding:0px;
margin-right:auto;
margin-left:auto;
/***end for main heading for informational boxes***/
}

.top-right-image{
background-image: url(../images/tr-blue-rnd.gif);
background-repeat: no-repeat;
background-position:top right;
}
.top-left-image{
background-image: url(../images/tl-blue-rnd.gif);
background-repeat: no-repeat;
background-position:top left;
}
.bottom-right-image{
background-image: url(../images/br-blue-rnd.gif);
background-repeat: no-repeat;
background-position:bottom right;
}
.bottom-left-image{
background-image: url(../images/bl-blue-rnd.gif);
background-repeat: no-repeat;
background-position:bottom left;
}
.text{
font-family:  verdana, sans-serif;
font-size: 90%;
font-weight:normal;
color:#000;
background-color:#fff; 
border-left:1px solid #d9e1ff; 
border-right:1px solid #d9e1ff; 
text-align:left; 
padding-left:2px; 
padding-right:1px;
}
.text2{
font-family:  verdana, sans-serif;
font-size: 100%;
font-weight: normal;
color:#000;
background-color: #fff;
background-image: url(../image-files/clouds.gif);
background-repeat: repeat-x; 
border-left:1px solid #d9e1ff; 
border-right:1px solid #d9e1ff; 
text-align:left; 
padding-left:5px; 
padding-right:5px;

}

.text3{
font-family:  verdana, sans-serif;
font-size: 75%;
font-weight:normal;
color:#000;
background-color:#fff; 
border-left:1px solid #d9e1ff; 
border-right:1px solid #d9e1ff; 
text-align:left; 
padding-left:2px; 
padding-right:1px;
}
/***end for little informational boxes***/



/***for main-nav this is the main heading***/
div.nav-main{
text-align:left;
font-family:  verdana, sans-serif;
font-size: 110%;
font-weight: bold;
background-color: transparent; 
color: #674ea7;
border-bottom: 3px solid #d9e1ff; 
width: auto;
padding:3px;
margin-right:6px;
margin-left:6px;

}
.text-nav{
font-family:  verdana, sans-serif;
font-size: 96%;
font-weight:normal;
color:#000;
background-color:#fff; 
text-align:left; 
padding-left:2px; 
padding-right:1px;
margin-left:5px
}
/***end of nav-main info***/

/***beginning large quote marks box***/
div.quote-box {
background-color: transparent;
	margin: 5px 0px 0px 0px;
	padding: 15px;
   border: 2px solid #e8d2e8;
   height: auto;
}

.top-left-image-q{
background-image: url(../images/quote-gry-2-264.jpg);
background-repeat: no-repeat;
background-position:top left;
}
.bottom-right-image-q{
background-image: url(../images/quote-gry-2-264.jpg);
background-repeat: no-repeat;
background-position:bottom right;
}
/***end large quote marks box***/

/***quote box with background image***/
div.full-width-box-quote {/*this box has a background image*/
   background: url(../images/quote-gry-1-45.gif) top left no-repeat; 
   background-color: transparent;
	margin: 0px 0px 0px 0px;
	padding: 5px;
   border: 2px solid #e8d2e8;
   height: 100px;
}
/***end for box with quote background image***/

/***for quote boxes with two quote marks top and bottom***/
div.quote-container {
text-align:center;
font-family:  verdana, sans-serif;
font-size: 110%;
font-weight:bold;
background-color:transparent; 
color:#674ea7;
width: auto;
padding:0px 0px 0px 0px;
margin: 1px;
border:2px solid #ffffff;

}

.top-left-image-quote{
background-image: url(../images/quote-gry-1-45.gif);
background-repeat: no-repeat;
background-position:top left;

}

.bottom-right-image-quote{
background-image: url(../images/quote-gry-2-45.gif);
background-repeat: no-repeat;
background-position:bottom right;

}

.text-q{
font-family:  verdana, sans-serif;
font-size: 84%; 
font-weight:normal;
color:#000;
background-color:transparent; 
border-left:1px solid transparent; 
border-right:1px solid transparent; 
text-align:center; 
padding-left:5px; 
padding-right:5px;

}

/***end quote boxes***/




/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */<!-- Hide entire CSS code from IE6 -->
<![if !IE 6]>



.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 175px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}

</style>

<![endif]>


The XHTML: 
<div class="sidebox">
	<div class="boxhead"><h2>Test Headline</h2></div>
	<div class="boxbody">
		<p>This is a short sample paragraph.</p>
		<p>And another one.</p>
	</div>
</div>
The CSS: 
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

div.sidebox {
	margin: 0 auto; /* center for now */
	width: 17em; /* ems so it will grow */
	background: url(sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url(sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}


.formbody {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12 px;
	
}



/* set the image to use and establish the lower-right position */ 
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
    background: transparent url(../images/clouds.png) no-repeat bottom right; 
} 
.cssbox { 
    width: auto !important; /* intended total box width - padding-right(next) */
    width: auto; /* IE Win = width - padding */
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto; /* use to position the box */ 
} 

/* set the top-right image */ 
.cssbox_head { 
    background-position: top right; margin-right: -15px; /* pull the right image over on top of border */
    padding-right: 40px; /* right-image-gap + right-inside padding */ 
} 

/* set the top-left image */ 
.cssbox_head h2 { 
    background-position: top left; 
    margin: 0; /* reset main site styles*/ 
    border: 0; /* ditto */ 
    padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */ 
    height: auto !important; height: 1%; /* IE Holly Hack */ 
} 

/* set the lower-left corner image */ 
.cssbox_body { 
    background-position: bottom left; 
    margin-right: 25px; /* interior-padding right */ 
    padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */ 
} 
/**this if for the box that comes down with a message as the page opens***/
#dropinboxv2cover{
width: 250px; /*change width to desired */
height: 150px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;

}

#dropinboxv2{
width: 230px; /*change width to above width-20. */
height: 130px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid #ccc; /*Customize box appearance*/
/*background: transparent url(../images/clouds.png) no-repeat bottom right;*/
background-color:#ffffe8;
padding: 45px 30px 15px 30px;
font-family:  verdana, sans-serif;
font-size: 85%;
font-weight:normal;
color:#000;
position:absolute; /*Don't change below 3 rules */
left: 0;
top: 0;

}
/***end drop in box***/