@font-face { 
  	font-family: gothic;
    	src: url('../fonts/gothic.eot'); 
    	src: local("gothic"), 	url('www.graney.uk/fonts/gothic.ttf'); 
} 
@import url('http://fonts.googleapis.com/css?family=gothic')


html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{
background-color: #021053; 
	}

/* 
url(http://www.sandownbaptist.church/images/beachlight.png);
tell the browser to render HTML 5 elements as block */

header, nav, section, #menubar, #menubarfaq, #site_content, #menus
{ 
  display: block;
}

.tab
{ margin-left: 40px; }

.panel {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color: #FFFFFF;
}

p
{ font: bold 2.0em 'gothic';
  color: #000;
  letter-spacing: -1px;
  line-height: 2.2 em;
  padding: 20px 0px 0px 30px;
  
  margin: 0 0 5px 0;}

  p.upright1
{ font: bold 1.0em 'gothic';
  color: #000;
  letter-spacing: -1px;
  line-height: 2.2 em;
  padding: 20px 0px 0px 30px;
  
  margin: 0 0 5px 0;}

p.upright15
{ font: bold 1.5em 'gothic';
  color: #000;
  letter-spacing: -1px;
  line-height: 2.2 em;
   padding: 0px 20px 0px 0px;
  
  margin: 0 ;}

p.upright2
{ font: bold 2.0em 'gothic';
  color: #0000FF;
  letter-spacing: -1px;
  line-height: 2.2 em;
  padding: 0;
  
  margin: 0 ;}

.imageborder
{
    border-width: 20px;
    border-color: #ffffff;
}

.table100
{
font: bold 1.1em 'gothic';
color:  #000000;
background-color: transparent;
width: 100%;
 }






 
h1 { 
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; 
font-size: 15vh; 
font-style: normal; 
font-variant: normal; 
font-weight: bold; 
color: #950107;
} 

h2{
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; 
	font-size: 2.0em; 
	font-style: italic; 
	font-variant: normal; 
	font-weight: 700; 
	line-height: 2.3em;
}

h3
{ 
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; 
font-size: 3.5em; 
color: 950107;
font-style: normal; 
font-variant: normal; 
font-weight: 700; 
line-height: 2.3em;
margin: auto;

} 



h4 
{ font: bold 2.0em 'gothic';
  color: #000;
  letter-spacing: -1px;
  padding: 20px 0px 0px 30px;
  margin: 0 0 5px 0;}



h5
{ font: bold 1.5em 'gothic';
  color: #000;
  letter-spacing: -1px;
  padding: 20px 0px 0px 30px;
  margin: 0 0 5px 0;}



h6
{ font: bold 1.0em 'gothic';
  color: #000;
  letter-spacing: -1px;
  padding: 20px 0px 0px 30px;
  margin: 0 0 5px 0;}

.tabbody
{
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; 
font-size: 1.2em; 
font-style: normal; 
font-variant: normal; 
font-weight: bold; 

}

a:link
{ color: #0000ff;
  background: transparent;
  outline: none;
  text-decoration: none;}

  a:visited
{ color: blue;
  background: transparent;
  outline: none;
  text-decoration: none;}
  
  
  a:hover
{ color: #0000ff;
  background: #0000ff;
  outline: none;
  text-decoration: underline;}

nav
{ margin-left: auto; 
  margin-right: auto;
  width: 90%;
  height: auto;}  
  }


ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #header, #banner, #menubar, #menucarrier, #site_content, footer, 


#main
{ background: transparent ;
	height: 100%;
	width: 100%;
}

#header  
{ background: transparent ;
	height: auto;
	width: 100%;
}

 #site_content{ 
  background: #ffffff;  
  width: 96%;
  padding: 2vh 2vw 2vh 2vw;
  min-height: 50px;
  box-sizing: border-box;
  display: block;
  text-align: center;
  vertical-align: top;
  margin-right: auto; 
  margin-left: auto; 
  border-radius: 9px 9px 9px 9px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
       overflow: hidden;  /**for float containment**/}

 
#gallery
{ width: 100%;
  float: left;
  height: auto;
  margin: 0 auto;
 text-align: justify;
  justify-content: center;
  display: flex;
  
 
  padding: 0px 0px 0px 0px;
  background: transparent;} 
  
 
 
  
#menubar
{ 	 
 	background-color: #993304;
	
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}

#menubarfaq{ 	
	background-color: #021053 ;
	
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;
  }


#menubarwho{   
	background: #CC0000;
	
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}

#menubarwhy
{ 
  background: #FF4500;
	
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}
  
#menubarwhat
{ 
  background: #FF8C00;
	
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}

#menubarwhere
{ 
	background: #009900;
	
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}

#menubarwhen
{ 
  background: #0066FF;
 
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}

#menubarcontact
{
  background: #000099;
 
width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}
	
	#menubarlinks
{
  background: #660099;
  width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}


#menubarresources
{ 
  background: #999966;
    
	width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}

#menubarblack
{ 
  background: #000000;
  
  width: 90%;
	min-height: 50px;
	overflow: hidden;
	margin-left: auto; 
	margin-right: auto;
 	border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;}


   

  
  ul
{ margin: 2px 0 22px 30px;
  line-height: 1.7em;
  font-style: normal;
  font-size: 1.2em;}
  
  
ul#menuindex
{ margin:0;}

ul#menuindex li
{ padding: 0 0 -2 0px;
  font: bold 1.0em gothic;
  list-style: none;
  margin: 5px 5px 5px 5px;
  display:  block;
  background: transparent;}

ul#menuindex li a
{ float: left;
  justify-content: center;
  font: bold 1.0em gothic;
  height: 1.3em; 
  margin: 5px 5px 5px 5px;
  text-shadow: 0px 0px #000;
  padding: 3px 5px 0px 5px;
  background: transparent; 
  border-radius: 9px 9px 9px 9px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border: 9px 9px 9px 9px;
  color: #FFF;
  text-decoration: none;} 

ul#menuindex li:hover a
{ color: red; 
  background: yellow;
  }

ul#menuindex li.current a 
{ 	
	border-style: solid;
	border-width: medium;
	border-color: yellow;
}


ul#menus
{ margin:0;}

ul#menus li
{ padding: -2 0 0 0px;
  font: bold 1.2em gothic;
  list-style: none;
  margin: 0px 0 0 0;
  display: block;
  background: transparent;}

ul#menus li a
{ float: left;
  font: bold 1.2em gothic;
  height: 1.6em; 
  margin: 12px 0 0 10px;
  text-shadow: 0px 0px #000;
  padding: 0px 0px 0 12px;
  display: block;
  background: transparent; 
  border-radius: 9px 9px 9px 9px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border: 9px 9px 9px 9px;
 
  color: #FFF;
  text-decoration: none;} 

ul#menus li:hover a
{ color: red; 
	bsckground: #ffffff;
  text-shadow: 0px 0px #43A9FF;}

ul#menus li.current a 
{ color: #FFFF00; 
  text-shadow: 0px 0px #43A9FF;}




.slideshow
{ width: 90%; 
  float: center;
  box-sizing: border-box;
  height: 350px;
  text-align: center;
  vertical-align: top;
   height: 350px;
   margin-right: auto; 
  margin-left: auto; 
  background: #ffffff;
  border-radius: 9px 9px 9px 9px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;}

  
  
  
  
  }  
  
/* styling for the slideshow on the homepage */
ul.slideshow {
  list-style: none;
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  margin: 0;}
  
ul.slideshow li {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;}
 
ul.slideshow li.show {
  z-index: 500;}
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
ul img {
  border: none;}
 
#slideshow-caption {
  width: 100%;
  height: 38px;
  position: absolute;
  top: 0;
  left: 0; 
  z-index: 500;}
 
#slideshow-caption .slideshow-caption-container {
  padding: 10px 25px 10px 25px; 
  background: "transparent" /*url(../images/transparent.png)*/ repeat;  
  z-index: 1000;}
 
#slideshow-caption p {
  padding: 0;
  font: normal 120% gothic;
  color: #000;
  /* text-shadow: 1px 1px #000;*/}