/* Stylesheet content listed in order of DOM hierarchy, e.g. html -> body -> div */

/*

html 
{


	border:9px navy ridge;   was Individually commneted out
	border-top:9px navy ridge;
	border-left:9px navy ridge;
	border-right:9px navy ridge;
	margin:0px;
	padding:0px;
	width:98%;
	height:96%;
}

*/


/* Define the base styles of the Cape web site (e.g. what's the 'reading'/snippit text font to be (unless specialised lower down the hierarchy)) */
/* The following affects the 'sub-menu disappearing issue' */
/* (See 'li:hover .sub-level, left)' */
/* Body tags removed from html */
body
{
	font-family:"Arial";
	/*font-size:20px;*/
	/*width:150px;*/

	/* Part of 'keep footer at bottom of page' */
	height:100%;
}


h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:100%; text-indent:0px;}
/* Header for Content section */
h3
{
	font-size:75%;
}
h6 {text-align:center;font-size:65%}


/* The dot (.) effectively means, "any DOM object which employs this class of style, e.g. <div class="center" > 
SB: 11 Nov 2011: There's no reference to 'center' in any Cape Website file

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

*/



label
{
	width:10px;    /*Or however much space you need for the form’s labels*/
	float:left;
}


form
{
/*
	margin:  3em auto;
	width:  30%;
	height: 50%;
	font-size: 50%
*/

	float: right; /* Required to ensure login form is on same line as Edinburgh Cape Society heading (and doesn't drop to next line) */
}

/* There's no point in this (normal): you need to specialise with these custom styles: inheritance passes Arial on from 'body' */
DIV.normal_text
{
	font-family:"Arial";
}


/* Hyperlink colour
	Note <a></a> is the tag for a hyperlink and after the colon (:) comes any of it's 'standard' attributes: we're overriding here
	http://www.w3schools.com/css/tryit.asp?filename=trycss_link2
	Order of definition is important: http://www.w3schools.com/css/tryit.asp?filename=trycss_link_decoration
*/

/*
begin(Comment out)

a:link
{
	COLOR: navy;
}

a:visited 
{
	COLOR: white;
}

a:hover
{
	COLOR: navy;
	text-decoration:underline;

	COLOR: white;
}

a:active
{
	COLOR: navy;
}

end(Comment out)
*/


div.header
{
	text-align:left
	background-color:navy;
/*	color:white; */
	height:20px;
	position:relative;
	top:5px;
	left:5px;
	z-index:2;

	/* http://www.w3schools.com/css/css_boxmodel.asp */

	width:500px;
	padding:10px;
	border:1px solid gray;
	margin:10px;
}


div.background
{
	width:500px;
	height:250px;
	background:url('regalia.gif');
	repeat;
	border:2px solid black;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

/* Scalable background image */
#background
{
background-attachment: fixed;

	width:100%;
	height:100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left:0;
}

/* begin(Subscript text) */
#subtext
{
	font-family: "Arial", cursive;
	position: relative;
	top: 0.5em;
	color: navy;
	font-size: 0.3em;
}
/* end(Subscript text) */

#header
{
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 200%;
	color:white;
	background-color:navy;
	background-image: linear-gradient(navy, azure);
	border-bottom:1px solid gold;
}

/* Color gradient 
div {
	padding:5px 3%;
	margin:5px 3%;
	width:90%
}
*/


#container
{
	font-size: 150%;

	/* Part of 'keep footer at bottom of page' */
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


#navigation
{

	/* The following affects the 'sub-menu disappearing issue' */
	/* (See 'li:hover .sub-level, left)' */
	float: left; /* Required to ensure 'content' is to the left (and not below) 'navigator' (the menu)

/* font-size:1em; width:300px; */

	font-family: "Arial", cursive;

	/* The following affects the 'sub-menu disappearing issue' */
	/* (See 'li:hover .sub-level, left)' */
	/* If this font-size is too small, gaps appear between menu and sub-menu leading to the sub-menu disappearing befor the mouse reaches it */
	/* How can we reduce the font size yet avoid this? */
	font-size: 17px;
	background-color: navy;
	color: white;

	/* Push the right-hand edge of the menu box beyond the end of the menu text */
	/* Side-effect of this is the Cape Logo also has visible blue to the right of it */
/*	padding-right: 5px;*/


	color:white;
	background-color:navy;
	background-image: -moz-linear-gradient(left top, left bottom,
                          from(azure),
                          to(navy));
	background-image: -webkit-gradient(linear, left top, right bottom,
                   	 	  color-stop(0.00, azure),   
                  		  color-stop(1.00, navy));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=azure, endColorstr=navy,
	GradientType=0);    /* Fade from left to right: 1   Fade from top to bottom: 0 */

	/* This 'margin' command creates the 'gap-border-like' effect around the left hand meu */
	margin:5px;

	/* Push the menu down a bit so the white writing is closer to the navy background */
	padding-top:0px;

	/* Expand the bottom of the column past the content */
	min-height: auto;
	height: auto;

	/* Expand the navy a bit past the bottom of the menu */
	padding-bottom: 5px;
}


#content
{
	/* display: inline;    including this makes no difference to render but removing it from "function getAbout()" mucks all up ?? */
	margin-top:5px; /* Align the top of the gold border to the left of 'content' with the top of 'menu' */
	padding-left:6em; /* Push the text in 'content' away (to the right) from the border on the left of 'content' */
	float:right;
	font-size: 100%;
	color:navy;
	border-left:1px solid gold;

	/* Part of 'keep footer at bottom of page' */
	overflow:auto;
	padding-bottom: 20px;  /* must be same height as the footer */

	/* http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html */
	/* where the top left hand corner of an element should be located with respect to its parent element */
	/* Also read http://www.w3schools.com/css/css_positioning.asp */
	position: absolute;
	z-index: -1; /* Stops gold border on right of menu appearing on top of (running through) sub-menus */  

}

#footer
{
	font-family: "Arial", cursive;
	font-size: 75%;
	background-color: navy;
	color: white;


/*	border:5px azure solid; */
	color:white;
	background-color:navy;
	background-image: -moz-linear-gradient(left top, left bottom,
                          from(navy),
                          to(azure));
	background-image: -webkit-gradient(linear, left top, right bottom,
                   	 	  color-stop(0.00, navy),   
                  		  color-stop(1.00, azure));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=navy, endColorstr=azure,
	GradientType=0);    /* Fade from left to right: 1   Fade from top to bottom: 0 */



	/* Part of 'keep footer at bottom of page' */
	position: relative;
	margin-top: -20px; /* negative value of footer height */
	height: 20px;
	clear:both;
}




/* begin(Pop-up menu) */


/* #navigation {font-size:0.75em; width:150px;}  */


#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 

ul.top-level {/*background:navy;*/}
ul.top-level li {
/*
 border-bottom: navy solid;
 border-top: navy solid;
 border-width: 0px;
*/
}

#navigation a {
 color: white;
 cursor: pointer;
 display:block;
 height:20px;
 line-height: 25px;
 /* The following affects the 'sub-menu disappearing issue' */
 /* (See 'li:hover .sub-level, left)' */
 /* Text-indent may be used as a workaround to stop the sub-menu appearing 'outside' the main menu (meaning the sub-menu disappears when the mouse leaves the parent menu's 'space'  */
 /* For instance, change it to 15px and watch the problem resurface: 19 is the lowest working value */
 text-indent: 19px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
// font-style: italic;
}

#navigation li:hover {

 background: navy; /* Required to ensure l1 menu doesn't disappear when cursor attempts to move to it (from l0) */

	background-image: -moz-linear-gradient(left top, left bottom,
                          from(navy),
                          to(azure));
	background-image: -webkit-gradient(linear, left top, right bottom,
                   	 	  color-stop(0.00, navy),   
                  		  color-stop(1.00, azure));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=navy, endColorstr=gold,
	GradientType=0);    /* Fade from left to right: 1   Fade from top to bottom: 0 */

	/* Required to ensure sub menus appear vertically (not horizontally along top of element) */
	position: relative;
}




ul.sub-level {
    display: none;
}
li:hover .sub-level {

    background: navy; /*Required to ensure l1 menu doesn't disappear when cursor attempts to move up or down it (within l1) */


	background-image: -moz-linear-gradient(left top, left bottom,
                          from(navy),
                          to(azure));
	background-image: -webkit-gradient(linear, left top, right bottom,
                   	 	  color-stop(0.00, navy),   
                  		  color-stop(1.00, azure));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=navy, endColorstr=gold,
	GradientType=0);    /* Fade from left to right: 1   Fade from top to bottom: 0 */



/*
    border: #fff solid;
    border-width: 1px;
*/
    display: block;
    position: absolute;

    /* The following affects the 'sub-menu disappearing issue' */
    /* (See 'li:hover .sub-level, left)' */
    /* This value need carefully set with consideration of the number and width of characters used to create the menu words */
    /* To far left and sub-menus will disappear before they are reached by the mouse (due to a gap between parent and child menu) */
    /* How far right of the menu should the start of the sub-menu appear */
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    /* This value affects the width of the 'box' in which a single sub-menu item appears (there's no effect on the main menu) */ 
    width:200px;
}



/*Second Level*/
#navigation .sub-level {
/*    background: navy; */
}

/*Third Level*/
#navigation .sub-level .sub-level {
/*    background: navy; */
}


/*RESET STYLES*/
li:hover .sub-level .sub-level {
	display:none;
}
.sub-level li:hover .sub-level {
	display:block;
}

/* end(Pop-up menu) */


/* begin(Calander format) */

dl.event
{
	margin: 2em 0;
	padding: 0;
	font-family: georgia, times, serif;
	border-bottom: 1px solid gold;
}

.event dt
{
	position: relative;
	left: 0;
	top: 1.1em;
	width: 8em;
	font-weight: bold;

	margin: 0 0 0 -1.5em; /* Gives the event date sufficient space to avoid overlapping the vertical gold 'separator' */

}

.event dd
{
	border-left: 1px solid gold;
	margin: 0 0 0 9em; /* 6em pushes the vertical border to the right of the calendar dates */
	padding: 0 0 .5em .5em;
	font-size: 0.75em;
	width: 40em; /* This controls the width of the main text column */
}

/* end(Calander format) */


/* begin(About page format) */

/* Indents watchwords section */
div.watchword
{
	margin-left: 1em;
}

dl.about
{
	margin: 2em 0;
	padding: 0;
	font-family: georgia, times, serif;
}

.about dt
{
	position: relative;
	left: 0;
	top: 1.1em;
	width: 8em;
	/* font-weight: bold; */
}

.about dd
{
	border-left: 1px solid gold;
	margin: 0 0 0 9em; /* 6em pushes the vertical border to the right of the calendar dates */
	padding: 0 0 .5em .5em;
	font-size: 0.75em;
	width: 40em; /* This controls the width of the main text column */
}

/* end(About page format) */




/* begin(Summary, detail section) */


dl.summary
{
	margin: 2em 0em; 
	padding: 0;  
	font-family: georgia, times, serif;

}


.summary dt
{
	/* position: relative;   only relevant to the 'event' class: stops the 'detail' appearing below the 'heading' */
	/*left: 0;     seems to have no effect*/
	/*top: 1.1em;    seems to have no effect */
	/*width: 10em;  Width of the header*/
	font-weight: bold;
}

.summary dd
{
	padding: 0 0 .5em .5em;
	font-size: 0.9em;
	/* Controls width of 'detail'. I'd prefer this was undefined and automatically handled but if you comment this out the descriptions move below the menu: need to figure out why. Also need to reduce gap on left. This should be governed by 'Content' not 'Navigation/Menu' */
	/*width: 30em;*/
}

/* end(Summary, detail section) */


/* begin(message pictures vertically aligned on right of message.html) */
div.msgimg
{
	margin-left: 20px;
	display:inline;
	float:right;
	vertical-align: baseline;
}
/* end(message pictures vertically aligned on right of message.html) */


/* begin(Curent Member) */

/* The outer container */
div.member_list
{
/*	font-size: 100%;  Bizzarely seems to affect the absolute positioning of "member_list", making it look like it has a huge 'margin-top' */
	color: navy;

	margin: 0 0 0 0;
	padding: 0 0 0 0;

	font-family: georgia, times, serif;
}

div.single_entry
{
	margin: 0.5em;
	padding: 1em;

	/* Required to ensure the 'div.single_entry' element expands to stay around the outside of 'div.detail' (rather than it's bottom cutting through it) */
	/*height: 100%;*/
	overflow: auto;
}

div.picture_left
{
	margin-right: 2px;
	float: left;
}

div.picture_right
{
	margin-left: 2px;
	float: right;
}

h3
{
	/* Bring the detail of the description up, closer to the heading (Knight's name) */
	margin: 0px;
}

div.detail
{
	/* Unlike the example in the development/reference area for 'html' (see 'member.current.html'), width is required here to bring the text on to the same line as the picture
	Even this isn't full-proof since making the size of the overall window smaller again pops the text below the picture
	Still trying to figure out why behaviour differs between the two */
	width: 85%;
	float: right;
}

/* Keeps each member's profile in the same line and stops the following from filling space left by the profile above */
div.separator
{
	/* As per 'div.detail, width' comment, this clear works well in the example but not on the live site
	Including it places the second entry beneath the level of the left hand menu. There may be some properties in
	#navigation behind these issues */

	clear: both;
}

/* end(Curent Member) */


/* begin(History) */
div.history
{
	font-size: 100%;
	color: navy;
}

dt.history
{
	margin: 1em;
}

div.historywidth
{
	/* Stop hitory text from running off the right-hand side of the screen */
	width: 60%;
}
/* end(History) */

/* begin(Gallery)
div.pictureview
{
	text-align: center;
}

div.thumbnail
{
	text-align: center;
	width 200px;
}
/* end(Gallery)


/* begin(meeting.manor.index.html) */
.perimeter div
{
	display: inline;
	float: left;
}

.perimeter div.toggle .bigbox
{
	display: none;
}

/*
.perimeter div.toggle:hover
{
	background-color: navy;
	color: azure;
}
*/

.perimeter div.toggle:hover .bigbox
{
	display: block;
	/*font: 50px Verdana, sans-serif;*/


	/* This is the absolute position of the Big Block */
	position: relative; /* See the effect of changing this to 'relative' */
	top: +10px;
	left: +10px;
}

.toggle
{
	margin-left: 5px;
}

.manorindeximage
{
	margin: 5px;
	height: 5px;
	width: 5px;

/*
	margin: 5px;
	height: 7em;
	width: 7em;
*/
}

div.manormonth
{
	color: navy;
	background-color: azure;
	text-decoration: underline;
}
/* end(meeting.manor.index.html) */


/* begin(meeting.manor.index.delete.me.html) */

div.year {float:left; padding: 2px;} 
div.month {float:left; margin-left: 1px; font-family: "century gothic"; padding-left:8px; padding-right:2px; border:0px solid azure;/*background-color: azure;*/ font-size:0.86em;} 
div.clear {clear: both;} 
div.panel {display:none; border-bottom: 1px solid gold; margin-bottom: 2px} 
img.tabpic {height:30px; width:40px; border:0px solid azure;/* vertical-align: middle; */} 

/* end(meeting.manor.index.delete.me.html) */