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


/*** fixed background image***  To use, call the div tag with its class right above the main H1 heading, and close it with the closing div
at the end of column.*** this one is the house picture***/

div.bgimage3 {
background-image: url(../images/LCMS-house-bgimg-small.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position:center center;
} 
</div>



/*** 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 0px 10px 0px;
	padding: 15px;
   border: 1px solid #000066;
	
}

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

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


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

/*** left column Half of width box left dashed boder***/
div.half-width-box-left-dashedborder {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px dashed #000066;
	padding: 10px;
	width: 50%;
	float: left;
	
}

/*** left column Half of width box left without border ***/
div.half-width-box-leftNOborder {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 0;
	padding: 10px;
	width: 50%;
	float: left;
	
}

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

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

/*** right column Half of width box right dashed boder***/
div.half-width-box-right-dashedborder {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px dashed #000066;
	padding: 10px;
	width: 50%;
	float: right;
	
}



/*** left column Quarter of width box left ***/
div.quarter-width-box-left {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 25%;
	float: left;
	
}


/*** right column Quarter of width box right ***/
div.quarter-width-box-right {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 25%;
	float: right;
	
}

/*** left column Half of width box left with colored background***/
div.half-width-box-left-colored-background {
   background-color: #ccffcc;
	margin: 5px 5px 5px 5px;
	border: 1px solid #666666;
	padding: 10px;
	width: 50%;
	float: left;
	
}


/*** right column Half of width box right with colored background***/
div.half-width-box-right-colored-background {
   background-color: #ccffcc;
	margin: 5px 5px 5px 5px;
	border: 1px solid #666666;
	padding: 10px;
	width: 50%;
	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 solid #000000;
}

/*** without border ***/
.img-float-leftNoborder {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 0;
}

/*** mint-green color in the box ***/

.img-float-left-color {
	float: left;
	padding: 2px;
	margin-left: 5px;
	border: 2px solid #666666;
	background-color: #ccffcc;
}
/*** mint-green color in the box ***/

.img-float-right-color {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px solid #666666;
	background-color: #ccffcc;
}

.img-float-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px solid #000000;
}

/*** without border ***/
.img-float-rightNoborder {
	float: right;
	padding: 2px;
	margin-right: 5px;
	border: 0;
}

/*** with dashed border ***/
.img-float-rightDashedborder {
	float: right;
	padding: 2px;
	margin-right: 5px;
	border: 2px dashed #000000;
}

/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}

/* ------ bubblewrap button effect ------ */


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.bubblewrapMain{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrapMain li{
display:inline;
width: 328px;
height:95px;
}

.bubblewrapMain li img{
width: 299px; /* width of each image.*/
height: 86px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrapMain li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>



/* ------ bubblewrap button effect ------ */


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.bubblewrapMainSmall{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrapMainSmall li{
display:inline;
width: 99px;
height:99px;
}

.bubblewrapMainSmall li img{
width: 77px; /* width of each image.*/
height: 77px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrapMainSmall li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>



/* this is the style that I found on my own for Curly Corner Container from Dynamic Drive Css Library*/

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}

.curlycontainer .innerdiv{
background: #cccccc url(../images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}

</style>

/* this is the style that I found on my own for drop shadow box from Dynamic Drive Css Library*/

<style type="text/css">

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



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

.shadowcontainer{
width: 675px; /* 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: -9px; /*shadow depth*/
top: -9px; /*shadow depth*/
}

</style>

<![endif]>