/* Cascading Style Sheet */

/* stylesheet for 21sqscouts.org.uk */

/* colours used

Main Background -------------- #6D7B8D - "Light Slate Gray"
Page Container Border -------- #CCCCCC - A light grey
Page Container Background ---- #CCCCFF - A lighter grey
Page Container Text Colour --- #000000 - "Black"
H2 Text Colour --------------- #FCD116 - "Sign Yellow"
Header Content Text Colour --- #FCD116 - "Sign Yellow"
Photo Banner Background ------ #FFFFFF - "White"
Navigation Bottom Border ----- #FAF8CC - A very light yellow
Navigation Font Colour ------- #FAF8CC - A very light yellow
Navigation Hover Font Col ---- #FFFFFF - "White"
Navigation Hover Background -- #333333 - A dark Grey

list incomplete at this time..

*/

/* force items to sit top left */

*{ padding: 0; margin: 0;}

/* ----------attributes for the whole page----------- */

body
{
background-color: #6D7B8D;
padding-top: 1em; /* places the page slightly down from the top */
text-align: center;
}
/* page container */
div#wrap
{
text-align: left;
background-color: #CCCCFF;
/*margin-left: 230px;*/
/* margin-left: 10%; */
margin: 0 auto;
padding: 0;
width: 800px;
background-image: url(images/tp.jpeg);
background-repeat: repeat-x;
font-size: 1em;
font-family: "Trebuchet MS", Verdana, sans-serif;
color: #000000;
border-style: outset;
border-color: #CCCCCC;
border-width: 3px;
}
h2 {
color: #FCD116;
}

/*Images*/
/* float pictures to the right */
 img.right {float: right; margin-left: 10px;} 
/* float sponsor banner  */
 img.center {margin-left: 600px;}

/* ------------------------------------------------ */




/* --------attributes for the header--------------- */


div#header
{
height: 100px;
text-align: left;
}
div#header_content
{
margin: 0 auto;
padding: 0;
position: relative;
}

div#header_content h1#pagetitle
{
position: absolute;
margin: 0 0 0 1em;
padding: 0;
font-size: 2em;
font-family: "Trebuchet MS", Verdana, sans-serif;
color: #FCD116;

}

div#header_content h2#subtitle
{
position: absolute;
margin: 0 0 0 5em; /* change margin to place text*/
padding: 0;
font-size: 1.5em;
font-family: "Trebuchet MS", Verdana, sans-serif;
color: #FCD116;
}


/* the style attributes for the menu in the header for going to the area's for each section */

div#header_content ul
{
position: absolute;
margin: -0.75em 0 0 25em;
padding: 0;
list-style-type: none;
}

div#header_content li
{
display: inline;
}

div#header_content li a
{
text-decoration: none;
}


/* each section has a different banner photo eg. cubs, beavers, hall, etc*/
/* photo banner for main section */
div#photobanner
{
/*margin: 0 auto;*/
margin-left: 0px; /*force ie 5.5 to position correctly */
width: 800px;
height: 200px;
background: #FFFFFF url(/images/bridges_banner.jpg) no-repeat center;
}


/* --- photo banner 2 depreciated, change on actual page instead ----*/

/* photo banner for cub section */
div#photobanner2
{
margin-left: 0px; /*force ie 5.5 to position correctly */
width: 800px;
height: 200px;
background: #FFFFFF url(/images/web_bannercubs2.jpg) no-repeat center;
}

/* photo banner for scout section */
div#photobanner3
{
margin-left: 0px; /*force ie 5.5 to position correctly */
width: 800px;
height: 200px;
background: #FFFFFF url(/images/web-bannerscouts.jpg) no-repeat center;
}

/* photo banner for explorer section*/
div#photobanner4
{
width: 800px;
height: 200px;
background: #FFFFFF url(/images/web_bannerexpl.jpg) no-repeat center;
}





/* ---------------------------------- */





/* -----------navigation-------------- */

li#cat a:visited
{
background-image: url(/images/nav_base2.jpg) !important;
color: #FFFFFF;
}

li#cat a:link
{
background-image: url(/images/nav_base2.jpg) !important;
color: #FFFFFF;
}

li#cat a:hover
{
background-image: none;
background-color: darkgreen !important;
}


/* the main site navigation style attributes. The html is outputed with the modx snippet Wayfinder */

div#navigation /* navigation container attributes */
{
float: left;
width: 130px;
font-size: 12px;
font-family: "Trebuchet MS", Verdana, sans-serif;
}

div#navigation ul /*navigation list style */
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

div#navigation ul ul {   /*navigation list style necessary for ie 5.5*/
list-style-type: none;
padding: 0px;
margin: 0px;
}

div#navigation li { /* the attributes for a list item in the main directory */
border-bottom: 1px solid #FAF8CC;
padding: 0px;
margin: 0px;
}

div#navigation li a:link, #navigation li a:visited /* the attributes for a list item in the main direcory which is a link */
{
display: block;
width: 95px;
text-decoration: none;
color: #FCD116;
background-image: url(/images/nav_base.jpeg);
background-repeat: repeat-x;
padding: 3px 5px 3px 10px;

}

div#navigation li a:hover { /* the hover attributes for a list item in the main direcory which is a link */
background-image: none;
background-color: darkgreen;
color: #FFFFFF;
}

div#navigation ul ul { /* the navigation list style for a sub-directory- used to replace the depreciated "sub" class */
border-top: 1px solid #FAF8CC;
width: 95px;
}


div#navigation ul ul li { /* the attributes for an item in sub-directory */
width: 95px;
padding: 0px;
margin: 0px;
}

div#navigation ul ul a:link, #navigation ul ul a:visited /* the attributes for an item in sub-directory which is a link */
{
display: block;
width: 95px;
text-decoration: none;
color: #000000;
background-image: none !important;
background-repeat: repeat-x;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #000000;
}
div#navigation ul ul a:hover {
background-image: none;
background-color: darkgreen;
color: #FFFFFF;
}


/* ---------------------------------------- */




/* ------------right column-------------- */

/*move more div to the right by adding float right and
a width, set margin to 0 and padding to move the div down and
away from the right edge of the page */
div#more
{
float: right;
width: 135px;
color: #000;
font-size:.8em;
font-family: "Trebuchet MS", Verdana, sans-serif;
padding: 0 5px 0 5px;
}

/* ---------------------------------------*/




/* ----------- general page content ----------*/

/* page content */
div#content-wrap
{
display: inline;
width: 800px;
background-color: #FAF8CC;
}
/* breadcrumbs, to show where you have come from */
div#map
{
float: left;
display: inline;
padding-bottom: .5em;
padding-left:130px;
width: 670px;
font-size: 0.9em;
background-color: #FAF8CC;
margin-left: 0; /* feed bad margin to ie 5.5 */
/*voice-family: "\"}\"";
voice-family: inherit;
margin-left: 0px;*/
}
/*wrap for page */
div#content
{
float: left;
display: inline;
width: 800px;
background-color: #FAF8CC;
margin-left: 0; /*force ie 5.5 to position correctly*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 0px;

}

/*page content */
div#page /* for three column pages */
{
width: 515px;
margin-left: 130px; /*force ie 5.5 to position correctly */
margin-right: 130px;
background-color: #FAF8CC;
}

div#page ul 
{
padding: 0 0 0 2em;
}

div#page ol
{
padding-left: 2em;
}


div#page_2 /* for 2 collum pages */
{
width: 650px;
margin-left: 130px;
line-height: 150%; /*adding this removed the space in Firefox between banner and the nav & more column */
}
div#page_2 ul
{
padding: 0 0 0 2em;
}
/* ------------------------------------------ */





/* ------------------------------------------ */
/* headers for main content and right column */

/* the header for the main content in three column pages */
.header-three-column /* renamed from headerlgest to prevent confusion in quick editor */
{
margin: 0;
padding-left: .25em;
font-size: 1.2em;
background-image: url(/images/heading_scout.jpg);
background-repeat: no-repeat;
color: #FCD116;
}
/* the header for the main content in two column pages */
.header-two-column /* renamed from headerlg to prevent confusion in quick editor */
{
margin: 0;
font-size: 1.2em;
color: #FCD116;
background-image: url(/images/heading_scout3.jpg);
background-repeat: no-repeat;
padding-left: .25em;
}

/* the header for the right column */
.header_news
{
padding-left: .25em;
color: #FCD116;
background-image: url(/images/heading_scout2.jpg);
background-repeat: no-repeat;
font-size: 1.5em;
}

/* --------------------------------------- */





/* -------------- javascript slide show ---------- */

/* place slide show*/
div#slide
{
margin: 0 0 0 2.5em;
float: right; margin-left: 10px;
}

/* slide show on front page 
#pscroller1{
width: 200px;
height: 134px;
padding: 5px;
border: 1px solid black;
background-color: #EDE275;
}*/


/*#pscroller2{
width: 200px;
height: 134px;
border: 1px solid black;
background-color: #EDE275;
padding: 5px;
}*/

/*#pscroller2 a{
text-decoration: none;
}*/
/* -------------------------------------------- */





/* ----------------- footer ------------------ */


/*?clear:both? applied to the footer <div> would be enough to clear the content and allow the footer to flow across the bottom of the page. However, Internet Explorer 5
 and 5.5 will not tile the background image to the very bottom of the containers unless there is a new item that is clear of the floats but still inside
 the containers. For this reason, an empty <div> is used, and styled with an ID selector to "clear:both". It is also given a height. */
#cleardiv
{
clear: both;
height: 1em;
}
/* use clear both to force new line, below floated item
set border top, text alignment and padding */
div#footer
{
clear: both;
width: 800px;
margin-left: 0px;
background-image: url(/images/foot.jpg);
padding: 0.5em 0 0.5em 0;
text-align: center;
font-size: .6em;
text-decoration: none;
color: #fcd116;
}
/*remove the padding, margin and list-style-type  */
div#footer ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
/* force list into a single line and to force items apart use margin-right*/
div#footer li
{
display: inline;
margin-right: 1em;

}

div#footer ul li a
{
text-decoration: none;
color: #fcd116;
}

/* ------------------------------------------------ */