@charset "utf-8";
/* CSS Document */
#masthead
{
padding: 0px;
background-image: url('../MBB/WebSiteBannerCollage.jpg') !important;
background-repeat: repeat-x !important;
margin-bottom: 0px;
}
/* Colors */
#innerContentColumn a:link { color: #663300; }
#innerContentColumn a:active { color: #336633; }
#innerContentColumn a:visited { color: #333366; }
h1, h2, h3, h4, h5, h6
{
color: #333366;
}
body
{
background-color: #665; /* border/edge of the layout color */
color: #000;
padding: 5px
}
#pageFrame, #masthead, #footer
{
background: url('../MBB/SandBackground.jpg');
/* background-color: #fff; /* major background color */
}
#pageFrame
{
/* image used as background color for left column ( #E9E8CA ) */
/* background: #fff url('MBB/SandBackground.jpg'); */
position: relative; /*REV 1.9 draft add to get z-index working*/
z-index: 10;
}
#contentColumn #innerContentColumn #leftColumn #innerLeftColumn .contentphotoSplashdiv .contentphoto3div {
position: relative;
z-index: inherit; /*This should make it a 10 as it PageFrame is parent*/
}
#MBB3NAV {
position: relative;
z-index: 100;}
#masthead, #footer
{
background-color: #885;
color: #333366;
}
#MBB3NAV{
margin-bottom: 0px;
}
/*Placing NAV over everything else*/
#MBB3NAV {z-index: 200;}
#contentColumn {
padding: 0px 10px;
background: url('../MBB/SandBackground.jpg');
}
#innerContentColumn {
background: url('../MBB/SandBackground.jpg');
background-color: #FFFFFF;
padding: 5px 5px;
margin: 0px 5px; /*Changed from 10 to 5 to 0*/
}
#leftSideLongAdWrapper{
/* background: #fff url('MBB/SandBackground.jpg'); */
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 10px;
background-color: #f1f1f1;
height: 100%;
margin-top: 10px;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.hide
{
display: none;
}
/* This section create the Horizonal Rule using a DIV
It is used in the html files as this
*/
div.hr {display: none}
/*/*/a{}
div.hr {
display: block;
height: 10px;
background-image: url('../MBB/horizonalbar.gif');
background-repeat: no-repeat;
background-position: center center;
margin: 1em 0 1em 0;
}
hr {display:none}
/* End of the HR Section */
/*This if for the iframe border on the SoCalTrailMap Page */
#GoogleMap{
padding: 0px;
margin: 0px;
text-align:center;
/*border: 3px solid #006633;*/
}
/*Lists in the Content Column */
#innerContentColumn ul li
{
list-style-image: url('../MBB/bullet-mountain-small.gif');
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#innerContentColumn ul ul li
{
list-style-image: url('../MBB/tidbul2e.gif');
padding-bottom: 0px;
}
#innerContentColumn ul ul ul
{
list-style-image: url('../MBB/tidbul3e.gif');
padding-bottom: 0px;
}
/** Inner Content Column PageBanner**/
#innerContentColumn h2.pageBanner
{
color:#336;
font-family: 'Comic Sans MS', Arial, Georgia,Verdana, Helvetica;
text-align: center;
font-size: 200%;
min-width: 300px; /*Will need to change this for better responsive design*/
max-width: 100%;
background-image: url('../MBB/H2pagebannerBG.gif');
background-color: #fbecc1;
border: 3px solid #006633;
margin: 0 10px;
padding: 5px 20px;
}
/*Start Shadows for photos*/
/*Teaking this for the class assigned to the img itself and not inside of a .shadow div Had to use MBBshadow to not have bootstrap CSS interfere with my legacy shadows*/
.MBBshadow {
-webkit-box-shadow: .4em .4em 5px 0px rgba(0,0,0,0.641);
-moz-box-shadow: .4em .4em 5px 0px rgba(0,0,0,0.641);
box-shadow: .4em .4em 5px 0px rgba(0,0,0,0.641);
padding-right: .0em;
}
/*PhotoRow will be used with be used as the outer container that either 3, 5 or a single photo will be used. */
.PhotoRow {
display: block;
clear: both;
float: left;
width: 100%;
}
/*This sets the width of the div for three photos in a PhotoRow*/
.contentphoto3div {
width: 31.5%;
min-width: 150px;
float: left;
margin-right: .5em;
margin-bottom: .3em;
}
/*This sets the width of the div for four photos in a PhotoRow*/
.contentphoto4div {
width: 24%;
min-width: 150px;
float: left;
margin-right: .5em;
margin-bottom: .3em;
}
/*This sets the width of the div for five photos in a PhotoRow*/
.contentphoto5div {
width: 19.1%;
min-width: 150px;
float: left;
margin-right: .5em;
margin-bottom: .3em;
}
/*This sets the width of the div for single-splash photo in a PhotoRww*/
.contentphotoSplashdiv {
width: 100%;
min-width: 150px;
max-width: 850px;
float: none;
margin: 0 auto;
padding: 10px;
position: relative;
}
/*This sets any image in a PhotoRow to fill the div*/
.PhotoRow img {
width: 99%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.ParagraphBoxLeft {
align-content: flex-start;
width: 100%
}
/*End Shadows for photos */
/*Start of index page box stylings */
.xouter3{
width:99%;
/* border:1px solid #000; */
float:left;
/* margin:15px 0 15px 9%; */
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.xleftcol3{
float: left;
width: 25%;
/* background:#809900; */
}
.xmiddlecol3 {
overflow:hidden;
/* background:#eff2df; */
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}
/*This will need to go in the simple.css file*/
.finePrint
{
font-size: 70%;
}
/*AlertBox on the indexpage DIV sytling*/
#AlertBox
{
margin: 2 2 2 2;
padding: 0 0 0 0;
background-color: white;
border: 2px solid #000;
font-size: 16px;
}
#AlertBox h4
{
margin: 0 0 0 0;
padding: 2 2 2 2;
font-size: 18px;
text-align: center;
color: #333366;
font-weight: bolder;
}
#AlertBox a a:active a:hover
{
font-size: 18px;
color: #336;
font-weight: bolder;
}
#AlertBox p
{
margin: 0 0 0 0;
padding: 2px 5px;
font-size: 16px;
text-align: center;
font-weight: bolder;
text-decoration: underline;
}
/***** End AlertBox Styling ***/
/*** Start Advocacy Styling ***/
#AdvocacyBox
{
margin: 5px 0 0 0;
padding: 0 0 0 0;
width: 160px;
border: 2px solid #fff;
font-size: 100%
}
#AdvocacyBox h4
{
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 100%;
background-color: green;
border-bottom: 2px solid white;
text-align: center;
color: white;
font-weight: bolder;
}
#AdvocacyBox p
{
margin: 0 0 0 0;
padding: 13 0 13 0;
font-size: 120%;
text-align: center;
font-weight: normal;
color: #336;
}
#AdvocacyBox h5
{
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 110%;
line-height: 120%;
background-color: #336;
border-top: 2px solid white;
text-align: center;
color: #fff;
font-weight: bolder;
text-decoration: none;
}
/**** End Advocacy Styling **/
#SupportBox
{
font-size: 120%;
}
/***End of the Index Page stylings ****/
/** This section is for the Google Maps API styling **/
.MAPxouter3{
width:99%;
/* border:1px solid #000; */
float:left;
/* margin:15px 0 15px 9%; */
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.MAPxleftcol3{
float: left;
width: 20px;
/* background:#809900; */
}
.MAPxmiddlecol3 {
overflow:hidden;
/* background:#eff2df; */
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}
.MAPxrightcol3 {
float:right;
width: 20px;
/* background:#d2da9c; */
position:relative;
}
/** END GOOGLE Maps API Styling **/
/** UPDATE BOX Used for calling out updates **/
#UpDateBox
{
margin: 5px 0 0 0;
padding: 0 0 0 0;
border: 2px solid #fff;
font-size: 100%
}
/*** Content ***/
#innerContentColumn
{
font-family: "Comic Sans MS", Arial, Helvetica; !important
}
#innerContentColumn h3
{
/* color: #009; */
text-align: center;
}
#innerContentColumn p.pos_center
{
text-align: center;
}
/* These are classes that are used to bring the code closer to xhtml 1.0 strict compliance */
/* image alignment classes */
#innerDISABLEDContentColumn img
{
padding-top: 2px;
float: none;
}
#innerContentColumn img .pos_right
{
display: inline-block;
float: right;
}
#innerContentColumn img .pos_left
{
display: inline-block;
float: left;
}
#innerContentColumn .pos_center
{
text-align: center; /*This is bad I think*/
}
/*This class used for my comments and warnings */
#innerContentColumn .comments
{
color: #336;
}
#innerContentColumn .warning
{
color: red;
font-style: normal;
font-weight: bold;
}
#innerContentColumn .standoutText
{
color: blue;
}
/*Need to get rid list item images*/
#TrailSlideShow ul li
{
list-style-image: none;
}
/*The below is used as part of a to fix my existing table layouts so that they will look better on mobile. Issue is that the splash photos are => 800px and hard set. Must also change the width on img on page to 100% and height to auto. */
#innerContentColumn td > img
{
max-width: 800px;
}
/***********************************************************************************/
/* On small screens, set height to 'auto' for sidenav and grid. Added display none to hide the sidebars on mobiles */
@media screen and (max-width: 767px) {
.sidenav {
display: none;
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
body {
padding: 0px;
}
#innerContentColumn{
padding: 2px;
margin-top: 0px; /*Changed from 10 to 0*/
}
/*Youtube Embed Styling*/
.YTcontainer {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.YTvideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*Media queiries for large device*/
@media (min-width: 768px){
/*Youtube Embed Styling*/
.YTcontainer {
position: relative;
width: inherit;
height: inherit;
padding-bottom: 10px;
}
.YTvideo {
position: relative;
width: 525px;
height: 310px;
top:inherit;
left: inherit;
}
}