h1 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 36px;
        text-shadow: 2px 2px #6ff;
        font-style: italic;
    }
    h2 {
        font-family: trebuchet MS, sans-serif;
        font-size: 24px;
        color: blue;
        text-shadow: 1px 1px #6ff;
        margin-top: -5px;
        /*margin-bottom: -0px;*/
    }
    h3 {
        font-family: trebuchet MS, sans-serif;
        font-size: 1.25em;
        color: blue;
        text-shadow: 1px 1px #6ff;
        margin-top: -10px;
        margin-bottom: 2px;
    }
    h4 {
        font-family: trebuchet MS, sans-serif;
        font-size: 1.75em;
        color: blue;
        text-shadow: 1px 1px grey;
        margin-top: -0px;
        margin-bottom: 15px;
    }
    h5 {
        font-family: trebuchet MS, sans-serif;
        font-size: 13pt;
        color: black;
        text-shadow: 1px 1px red;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    h6 {
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
        color: blue;
        text-shadow: 1px 1px red;
        margin-top: 5px;
        margin-bottom: 5px; 
    }
    .h7 { /* I wanted another heading font specification so I used span with the h7 class to accomplish it. I only used this on the mainleft page so far */
        font-family: trebuchet MS, sans-serif;
        font-size: 1em;
        color: blue;
        text-shadow: 1px 1px #6ff;
        margin-top: -10px;
        margin-bottom: 2px;
    }
    .h7p { /* paragraph formatting for use with h7 class */
        margin-top: 0px;
        margin-bottom: 15px;
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
	.trump {
		padding: 15px;
		background: red;
        text-align: center;
        color: white;
        font-family: trebuchet MS, sans-serif;
        font-size: 20px;
	}
    .center {
        text-align: center;
    }
    body {
        background: #e0ebeb;
    }
    .jumbotron {
        background: url(/Images/Bell47G4A-2.jpg); /* the case on Images was important as well as the extension */
        margin-top: 1px; /* this fixes the white space around the bootstrap jumbotron */
        margin-bottom: 0;
        padding-bottom: 2px; /* this positions the text inside the jumbotron the way I wanted it */
        padding-top: 0;
    }
    .jumbotron H1 {
        color: blue; /* This was the only way I could control the jumbotron H1 heading color */
    }
    .navbar { /* this fixes the white spaces around the bootstrap navbar */
        background: #e6fff2;
        /*border: 1px solid black;*/
		border-radius: 25px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    .navbar .navbar-nav { /*this and the next cause the navbar to center in the window as opposed to be positioned left*/
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .navbar .navbar-collapse { /*see above notation*/
        text-align: center;
    }
    .dropdown-submenu { /* This and the next item put the submenu to the side */
    position: relative;
    }
    .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    padding-top: -5px;
    }
    .dropdown-submenu .dropdown-menu li { /* I used this border to highlight the dropdown submenu */
        border-radius: 25px;
        border: 1px solid red;
        background: white;
    }
    .lwrap {/*These two items is what floats images to the left and right with text wrap*/
        float: left;
        margin-right: 5px;
    }
    .rwrap {
        float: right;
        margin-left: 5px;
    }
    #adds {
        text-align: center;
        /*background-color: white;*/
        /*padding-bottom: 15px;*/
    }
    ul.standard {/* This was created to control the font of the lists since other formatting was not applied*/
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    ul.standard li {/*This puts a 5px space at the bottom of all list items*/
        /* background-color: #99ffcc; This was an attempt to control the background color of the list items*/
        margin-bottom: 5px;
    }
    ol.standard {/* This was created to control the font of the lists since other formatting was not applied*/
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    ol.standard li {/*This puts a 5px space at the bottom of all list items*/
        /* background-color: #99ffcc; This was an attempt to control the background color of the list items*/
        margin-bottom: 5px;
    }
    .dropdown-menu li { /*I used this to put the border around the drop-down menu items*/
        border-radius: 5px;
        border: 1px solid black;
    }
    .normal { /*formatting for most articles*/
        width: auto;
        background-color: #ebf5fb;
        border-radius: 5px;
        border: 1px solid black;
        /*box-shadow: 6px 6px 6px #999;*/
        padding: 1em;
        padding-bottom: 0;
        margin-bottom: .25em;
        /*margin-left: 3px;
        margin-right: 5px;*/
    }
    .normal1 { /*This background is white*/
        width: auto;
        background-color: white;
        border-radius: 5px;
        border: 1px solid black;
        /*box-shadow: 6px 6px 6px #999;*/
        padding: 1em;
        padding-bottom: 0;
        margin-bottom: .25em;
        /*margin-left: 3px;
        margin-right: 5px;*/
    }
    /* .left {
        margin-right: -10px;
    }
    .right {
        margin-left: -10px;
        margin-right: 0;
    } /*
    /* @media (max-width: 1000px) {
        /* This rule is applied to pages with two colums where the narrowing of the space between the colums caused the right borders to become disaligned on narrow media devices*/
        /*  .left {
            margin-right: 0px;
        }
        .right {
            margin-left: 0px;
        }
    } */
    @media (min-width: 750px) { /* I put this to stop the scroll bar on the right side of the screen from overlapping the column which occured on some screens */
        .wide {
            margin-left: 15px;
            margin-right: 20px;
        }
        .navbar {
            margin-left: 15px;
            margin-right: 20px;
        }
        .footer { /* I am having a problem with the width of the add div, and the footer div staying the same size as other content with varying screen sizes.  This was marked with the # sign signifying id instead of class which fixed the wide footer issue on full article pages, but on the home page, the footer was normal, now it is narrow.  Why?  */
            margin-left: 15px;
            margin-right: 20px;
        }
    }
    p {
        /*display: block
        border: 5px 5px;*/
        margin-top: 0px;
        margin-bottom: 15px;
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    .fine { /*used as a class to make a paragraph fine print*/
        margin-top: 0px;
        margin-bottom: 15px;
        font-family: trebuchet MS, sans-serif;
        font-size: 8pt;
    }
    .red { /* used as a class to make a paragraph red (the faa)*/
        color: red;
    }
    .attention { /*uses a larger font, for attentive paragraphs such as the leading paragraph in ltelpe*/
        margin-top: 0px;
        margin-bottom: 15px;
        font-family: trebuchet MS, sans-serif;
        font-size: 13pt;
    }
    .footer {
        background-color: #9fc;
        box-sizing: border-box;
		border-radius: 5px;
        border: 1px solid black;
        padding-top: 0.7em;
        padding-left: .07em;
        padding-right: .07em;
        /*padding-bottom: 1em;*/
        text-align: center;
        clear: both;
        font-size: 12px;
        font-style: oblique;
        margin-bottom: 20px;
    }