body {
	background-color: white;
	background-image: url(images/mainbackground2.jpg);
	background-repeat: repeat-x;	       	
	text-align: center;	
	font-family: Arial;
	color: white;
	font-style: normal;
	font-size: 100%;	
	margin-top: 1%;
}

#maincontainer {
    margin-left: auto;
	margin-right: auto;    
	border: 1px solid gray;
	height: auto;	
	background-color: black;
	text-align: left;
	width: 900px;
  /*  
     width:100%;//set default to liquid
    // in IE with javascript set to max , min, or page width minus left nav
    width:expression(document.body.clientWidth>1000?"900px":
        document.body.clientWidth<700?"530px":
        document.body.clientWidth-170);
    max-width:900px;//set min & max for mozilla
    min-width:530px
  */
}

#navigation {
	width: auto;
	height: auto;
}

#title {    
	width: auto;
	height:47px;	
	background-position: top center;
	background-color: black;
	background-image: url(images/title1.jpg);
	background-repeat: no-repeat;	
}

#header {
    width: auto;
	height:195px;	
    background-position: top center;		
	background-color: black;
	background-image: url(images/header1.jpg);
	background-repeat: no-repeat;
}

#content {
	width: auto;
	height: auto;
	background-position: top center;
	background-color: black;
	background-image: url(images/content1.jpg);
	background-repeat: no-repeat;
}

.cleardiv {
    clear: both;
    margin-bottom: 1%;
    padding: 0.25%;    
}

#bottom {
	width: auto;
	height:50px;	
	background-position: top center;
	background-color: black;
	background-image: url(images/bottom1.jpg);
	background-repeat: no-repeat;
}

#footer {
	text-align: center;
	clear: both;
}

#leftpanel, #rightpanel {    
    /*width: 45%;*/    
    margin-top: 0%;    
}

#leftpanel {
    float: left;
    margin-left: 1%;
    width: 69%;
}

#rightpanel {	
    float: right;       
    margin-right: 1%;    
    height: auto;
    width: 27%;    
}

#minheight {
    height: 500px;
    float: right;
    width: 1px;
}

#gallerythumbnailpanel {
    float: left;
    width: 25%;  
    margin-left: 1%;
}

 #galleryimagepanel {
    float: right;
    width: 70%; 
    margin-right: 1%;
}

#galleryimage {    
    width: 100%;    
    height: 100%;
    text-align: center;
}

#gallerythumbnails {
    width: 100%;    
    height: 100%;
}

#randomphoto {
    width: 100%;
    height: 270px;
    background-repeat: none;          
}

#checkmark, #xmark {
    width: 100px;
    height: 100px;
    background-repeat: none;
}

#checkmark {
    background-image: url(images/checkmark.gif);        
}

#xmark {
    background-image: url(images/xmark.gif);
}

#oldambulances {
    width: 179px;
    height: 173px;
    background-repeat: none;
    background-image: url(images/oldambulances.gif);
}
#newambulances {
    width: 194px;
    height: 155px;
    background-repeat: none;
    background-image: url(images/newambulances.gif);
}

#atwork {
    width: 170px;
    height: 159px;
    background-repeat: none;
    background-image: url(images/atwork.gif);
}

#atplay {
    width: 175px;
    height: 181px;
    background-repeat: none;
    background-image: url(images/atplay.gif);
}

#star {
    width: 32px;
    height: 32px;
    background-repeat: none;
    background-image: url(images/star.gif);
}


#slideshow {
    float: left;
    font-size: 60%;    
    /*margin-left: 10%;*/
}
    
#videoshow {
    float: right;
    font-size: 60%;
    /*margin-right: 10%;*/
}

.playbutton {
    width: 20px;
    height: 19px;
    background-repeat: none;
    background-image: url(images/playbutton.gif);
    float: left;   
}


/* general form CSS ***************/


.login {
    text-align: right;
}

.loginfield {
  	color: white;	
	border: 1px solid gray;
	font-family: Arial;
	font-weight: normal;
	font-size: 75%;
	width: 5%;			
	height: 10px;	
    background: gray;     
}

.loginbutton {
	color: black;
	font-family: Arial;
	font-weight: normal;
	font-size: 75%;
	text-align: center;
}

.logintext {
    text-align: right;
    display: block;
    font-family: Arial;
	font-weight: normal;
	font-size: 75%;
}



.inputinactive {
	color: gray;	
	border: 2px solid black;		
	width: 100%;			
	font-family: Arial;
	font-weight: normal;
	font-size: 75%;
	background: white;
}

.radio2, .input2 {
	color: white;	
	border: 2px solid black;		
	width: 100%;			
	font-family: Arial;
	font-weight: normal;
	font-size: 75%;
	background: black url(images/fieldbackground.jpg) repeat-y;    
}

.radio2 {
    font-size: 60% 
}

.textarea1, .input1, .inputfile, .select1, .radio1 {
	color: black;	
	border: 2px solid black;
	font-family: Arial;
	font-weight: normal;
	font-size: 75%;
	width: 100%;			
	/*background: black url(images/fieldbackground.jpg) repeat-y;*/
    background: white;
} 

.textarea1 {
	height: 100px;
} 

.input1 {
    height: 15px;
}

.select1 { /*none of the browsers support much CSS on a combo box. IE is the worst, you can't CSS any of its attributes so it always renders with a thick border */
    height: 19px; /*set this to min. 18-20px, otherwise the contents appear cut off in IE (firefox and Opera look fine) */
}

.inputfile {
    height: 19px;
    color: black; /*this is necessary for the file input box, which is not scriptable in any browser, save for the text color */
}

.submitbutton1, .submitbutton2 {    	
    /*background-image: url(images/fieldbackground.jpg);
	background-repeat: repeat-y;*/
	color: black;	
}         

.submitbutton1 {
    width: 40%;
	float: left;
}

.submitbutton2 {    
	float: right;
}     


.formcaption {
    font-size: 75%;
    color: gray;
    font-style: italic;
    font-weight: bold;    
    text-align: left;
    /*background-image: url("images/fieldbackground.jpg");
	background-repeat: repeat-y;*/
}
/* general form CSS ***************/


/* text CSS ***********************/
.spacer {
    padding: 1%;
}

.date {
	font-size: 60%;
	color: yellow;
}

.heading {    
    font-size: 75%; 
    font-weight: bold;	
	font-style: italic;	

	border: 1px solid black;
    background-color: gray;	
    text-align: left;
}

.title {
	font-weight: bold;
	font-size: 125%;
	font-style: italic
}
	
.copyright {
	font-weight: bold;
	font-size: 60%;
	color: gray;
	text-align: center;
}

.required {font-weight: bold}
.attention {font-weight: bold;}
.highlight {color: yellow; font-weight: bold}
.dark {color: gray; font-weight: bold; font-style: italic}

.bold {font-weight: bold;}
.bolder {font-weight: bolder;}

.smallest {font-size: 50%;}
.small {font-size: 60%;}
.medium {font-size: 70%;}
.normal {font-size: 75%;}
.large {font-size: 80%;}
.massive {font-size: 150%;}

.centered {text-align: center;}

.inline {display: inline;}
.block {display: block;}

    
/* text CSS ***********************/


/* link CSS ***********************/
A:link {text-decoration: underline; color: white;}
A:visited {color: white;}
A:active {color: white;}
A:hover {color: red}
/* link CSS ***********************/


/* Navigation (menu) CSS **********/
.solidblockmenu {
	margin: 0;
	padding: 0;
	float: left;
	font: normal 75% Arial;	
	width: 100%;
	border: 1px solid gray;	
	background: black url(images/blockdefault.gif) center center repeat-x;
	text-align: center;
	border-top: none;
	border-right: none;
	border-left: none;
}

.solidblockmenu li {
	display: inline;
}

.solidblockmenu li a {
	float: left;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	border-right: 3px solid black;
}

.solidblockmenu li a:visited {
	color: white;
}

.solidblockmenu li .current {
	color: white;
	background: transparent url(images/blockactive.gif) center center repeat-x;
}

.solidblockmenu li a:hover {
	color: white;
	background: transparent url(images/blockactive.gif) center center repeat-x;
}
/* Navigation (menu) CSS **********/


/* postcard image CSS *************/
.postcard {
    width: 100%;
    text-align: center;
    /*float: left;*/
}

.postcard img {	
    border: 2px solid black;
    /*float: left;*/    
}

.postcard a:hover img {
	border: 2px solid red;
}

.postcardinfo {
    text-align: left;    
    /*border: 1px solid gray;*/ 
}

.postcardinfoheading {       
    color: gray;    
    font-size: 75%; 
    text-align: left;
    font-weight: bold;
    border: 1px solid black;
}

.postcardinfocaption {
    font-size: 75%; 
    text-align: left;
}

#postcardinfoleft {
    float: left;
    width: 49%;
}

#postcardinforight {
    float: right;
    width: 49%; 
}
/* postcard image CSS *************/


/* thumbnails for main page *******/
.thumbnailtext {float: right; width:60%; text-align: left; font-size: 60%; background-image: url(images/gradient.gif); background-repeat: repeat-x; background-color: gray;}
.thumbnailphoto {float: left; width: 40%; text-align: left;}

.thumbnailcaptionheader {
    font-size: 60%;        
    color: gray;
	background-color: black;  
	border: 1px solid gray;
	border-bottom: none;

}
/* thumbnails for main page *******/


.rating {
    width: 100%;         
}

#ratingvalue {
    float: left;
    width: 25%;
    font-size: 150%;
    color: yellow;
    font-style: italic;    
    margin-right: 1%;
}

#ratingbar {   
    float: right;
    width: 70%;
}


/*
#thumbsup {
    width: 32px;
    height: 32px;
    background-repeat: none;
    background-image: url("images/thumbsup.gif");
}

#thumbsdown {
    width: 32px;
    height: 32px;
    background-repeat: none;
    background-image: url("images/thumbsdown.gif");
}

#thumbsmiddle {
    width: 32px;
    height: 32px;
    background-repeat: none;
    background-image: url("images/thumbsmiddle.gif");
}
*/


.commentheader {
    color: gray;
    font-size: 75%;
    text-align: left;
    border: 1px solid gray;    
    border-bottom: none;
    background-color: black;
}

.commenttext {float: right; width: 92%; text-align: left; font-size: 75%; }

.commentbubble {
    width: 25px;
    height: 25px;
    float: left;    
    background-repeat: none;
    background-image: url("images/chatbubble.gif");
    margin-right: 2%;
       
}

/* thumbnails for search results **/
.gallerythumbnail {
    display: inline;
}	

.gallerythumbnail img {	
    border: 2px solid black;
    /*float: left;*/    
}

.gallerythumbnail a:hover img {
	border: 2px solid red;
}
/* thumbnails for search results **/



/* news items CSS *****************/
.newsitem {
    width: 100%;
    display: block;
    
}

.newsitemdate {
    font-size: 60%;
    color: gray;  
    width: 100%;
    background-color: black;   
    margin-top: 20px;   
    font-weight: bold;
    border: 1px solid gray;
    border-bottom: none;
}

.newsitemtext {
    font-size: 75%;    
}


#mainpostcard,
#mainaboutsite,
#mainnews,
#mainsubmissioncount,
#mainthumbnails,

#contactinfo,
#contactform,

#aboutinfo,
#aboutphotosthen,
#aboutphotosnow,
#aboutphotosatwork,
#aboutphotosatplay,

#uploadform,
#uploadinfo,

#searchform,
#searchinfo,

#loginform,
#logininfo,

#changeaccountform,
#changeaccountinfo,

#forgotpasswordform,
#forgotpasswordinfo,

#viewerthumbnails,
#viewerimage,

#createaccountform,
#createaccountinfo,

#disclaimertext,
#disclaimerinfo,

#alertmessage,
#alertimage {padding:10px; width:92%; }



#memorialtext,
#memorialinfo,
#memorialtonys,
#memorialtheresab,
#memorialcarols,
#memorialandyg,
#memorialwendyt,
#memorialkimw,
#memorialshawnc,
#memorialmikeg {padding:10px; width:92%;}

#memorialtext, #memorialtext .sb-inner,
#memorialinfo, #memorialinfo .sb-inner,
#memorialtonys, #memorialtonys .sb-inner,
#memorialtheresab, #memorialtheresab .sb-inner,
#memorialcarols, #memorialcarols .sb-inner,
#memorialandyg, #memorialandyg .sb-inner,
#memorialwendyt, #memorialwendyt .sb-inner,
#memorialkimw, #memorialkimw .sb-inner,
#memorialshawnc, #memorialshawnc .sb-inner,
#memorialmikeg, #memorialmikeg .sb-inner { background:#222222 url(images/gradient.gif) repeat-x;}


.memorialphoto {float: left; text-align: left; width: 21%;}
.memorialtext {float: right; text-align: left; width: 78%;}




#mainpostcard, #mainpostcard .sb-inner,
#mainaboutsite, #mainaboutsite .sb-inner,
#mainnews, #mainnews .sb-inner,
#mainsubmissioncount, #mainsubmissioncount .sb-inner,
#mainthumbnails, #mainthumbnails .sb-inner,

#contactinfo, #contactinfo .sb-inner,
#contactform, #contactform .sb-inner,

#aboutinfo, #aboutinfo .sb-inner,
#aboutphotosnow, #aboutphotosnow .sb-inner,
#aboutphotosthen, #aboutphotosthen .sb-inner,
#aboutphotosatwork, #aboutphotosatwork .sb-inner,
#aboutphotosatplay, #aboutphotosatplay .sb-inner,

#uploadform, #uploadform .sb-inner,
#uploadinfo, #uploadinfo .sb-inner,

#searchform, #searchform .sb-inner,
#searchinfo, #searchinfo .sb-inner,

#loginform, #loginform .sb-inner,
#logininfo, #logininfo .sb-inner,

#changeaccountform, #changeaccountform .sb-inner,
#changeaccountinfo, #changeaccountinfo .sb-inner,

#forgotpasswordform, #forgotpasswordform .sb-inner,
#forgotpasswordinfo, #forgotpasswordinfo .sb-inner,

#viewerthumbnails, #viewerthumbnails .sb-inner,
#viewerimage, #viewerimage .sb-inner,

#createaccountform, #createaccountform .sb-inner,
#createaccountinfo, #createaccountinfo .sb-inner,

#disclaimertext, #disclaimertext .sb-inner,
#disclaimerinfo, #disclaimerinfo .sb-inner,

#alertmessage, #alertmessage .sb-inner,
#alertimage, #alertimage .sb-inner { background:#222222 url(images/gradient.gif) repeat-x; }