/*Basic general styles for New Life Church Bristol */

/* Note the two main NLC colours:
   NLC blue is #333399
   NLC pink is #ff0099
*/   

/* Some magic so that the pages display better on smartphones, ie text does not have minimum font */
/* div, p, a, li, td .pod-title .pod-subtitle { -webkit-text-size-adjust:none; } */

@media only screen and (max-device-width: 480px) {      
        div, p, a, li, td .pod-title .pod-subtitle { -webkit-text-size-adjust:100% }               
}

/* Define the color and font size of the main body of the site */
body{
background-color: gray;
font-family: "Arial";
font-size:11pt;
}

/*firefox fix for dodgy scrollbars*/
html {
overflow: -moz-scrollbars-vertical;
}

h1, h2 {color:#333399}

h3 {color:#ff0099}
  
/* Hyperlinks to be underlined when simply viewed, and the underline disappears when hovered over */
a{
text-decoration: underline;
color:blue;
}

a:hover{
text-decoration: none;
}

img {
	border-width:0
}



/* This is for the special hyperlinks at the bottom of each page. We don't want underlines or any specific visual behaviour */
.footerlinks {
	text-align:center;
	font-size:11pt;
	margin-top:5px;
}

.footerlinks a {
	color:#333399;
	text-decoration:none;
}

.nlc-text {
	color:#ff0099;
	font-weight: bold;
}

.nlc-pink {
	color:#ff0099
}

.nlc-blue {
	color:#333399;
}

.nlc-background-color {
	background-color:#333399;
}

.pod-title {
	font-size:120%;
	color:#333399;
	font-weight:bold;
}

.pod-subtitle {
	color:#ff0099;
}

.warning-box {
	border-style:solid;
	border-width:1px;
	border-color:red;
	padding:5px;
}


/*main structure of page*/

/* All pages will have the NLC banner at the top which contains the logo and text for mapping hyperlinks onto of */
#bannerdiv{
position:relative;width:960px;height:120px;margin-right:auto;margin-left:auto;background-color:white;
}

/* The footer also has a blank banner. Currently achieved by setting the background but later we may prefer to use an image */
#footer-bannerdiv{
position:relative;width:960px;height:50px;margin-right:auto;margin-left:auto;margin-top:50px;clear:both;
}

/* This is the width of the page, inside of which everything else is placed. It ensures that the grey unused space doesn't creep into smaller areas */
#pagediv{
position:relative;background-color:white;width:960px;margin-right:auto;margin-left:auto;clear:both;
}

/* This is a general purpose div for ensuring the correct width, in case you want to centre things on the page */
#contentdiv{
position:relative;background-color:white;width:768px;margin-right:auto;margin-left:auto;clear:both;
}

/* This is a special content div when you want the content to span the full width of the page, ie. no margins. */
#full-width-contentdiv{
position:relative;background-color:white;width:960px;margin-right:auto;margin-left:auto;clear:both;
}

/* This is a general purpose div for sub components within "content" so that if you have columns and pictures
   spread around the page it allows sections to spread across the whole width and avoid interleaving. */

#content-sub-div{
position:relative;background-color:white;width:768px;margin-right:auto;margin-left:auto;clear:both;
}


/* The history page needs some careful layout so that it overlays on top of the footprints image
   The z-index is used to ensure that the text lies on top of the two alternating images */
#historydiv {
position:relative;margin-top:-440px;left:186px;width:550px;
}


/* We need to set the size of the wordles so that the text that follows goes in the correct place */
.wordles { height: 210px; width: 768px; margin: auto }

/* If we want to use a breadcrumb, then this will set its style. The goal is to place
   the breadcrumb on top of the banner under the main links, but try to make it look very subtle */

#breadcrumbdiv{
position:relative; top:-50px; left:100px; width:500px; height:20px; margin-left:5px; background-color:#333399; color:silver; font-size:10pt;
}

.breadcrumblink{
color:gray;
text-decoration: underline;
}

.breadcrumblink:hover{
color:gray;
text-decoration: none;
}


/* Now some css for validating forms */
form.cmxform label.error, label.error {
	/* remove the next line when you have trouble in IE6 with labels in list */
	color: red;
	font-style: italic;
	font-size:8pt;
	padding-left:5px;
}

/* Don't use these as it makes the form move around as you change from one form box to the next
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }
*/