#footer{
        position: fixed; /* the footer must stick to the bottom of the page, the fixed positionning is here necessary. */
        bottom: 0px;
        margin:0;
        padding:0;
        left:0;
        right:0;
        width: 100%;
        height: 40px;
        font-family:Arial;
        text-shadow: 1px 1px 1px black; /*h,v,blur,color */
        /* glass effect */
        border-top: 1px solid rgba(0,0,0,0.3);
        background: rgba(0,0,0,0.8);
        /*inset = inner shadow ----------- this just creates multiple shadows*/
        /*top border, top white section, overlay top white, bottom*/
        box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#footer h2{
        font-weight:normal;
        font-size:14px;
        /*color: #CC0000;*/
		font-weight: bold;
		color: #127b7c;
        margin-top:10px;
        margin-bottom:5px;
        margin-left:10px;      
}
#footer p{
        color:white;
        font-size:12px;
        float:left;
        padding:0px 10px; /*top & bottom = 0px */
        margin:10px 0px;
}
#footer img{
        border:none;
}
#footer li ul{ /* Programs button is a list */
        list-style:none;
        padding:0px;
        margin-bottom:12px;
}
.clear { /* Use this class between rows of content when you use columns */
        clear: both; /*no floating elements allowed on the left or the right side*/
        display: block;
        overflow: hidden;
        visibility: hidden; /*nothing displays, just resets the layout*/
        width: 0px;
        height: 0px;
}
#footer .whiteBorder { /* good for images */
        border:1px solid white;
}
#footer .img_left { /* image floats to the left */
        float:left;
        margin-right:10px;
        width: 40px;
}
#footer .black_box {
        background: rgba(0,0,0,0.4);
        padding:5px;
        margin-bottom:5px;
    border-radius: 5px;
}
#footer #notifications { /* entire notification section */
        float:right;
        width:auto;
        margin:5px 15px 0px; /*top, right/left, bottom*/
        padding:0px;
        overflow:hidden;
}
#footer #notifications li { /* each notification icon */
        margin-right:12px; /* 12px is the space between each one of them */
        float:left;
        width:24px;
        padding:0px;
        height:32px;
        list-style:none;
}
#footer #notifications li:hover {
        margin-top:-1px; /* icons move 1px up on hover, use this or change color on hover (like home button) */
}
a.notificationIcons span { /* span is text when you hover over */
        display:none;
        font-size:12px;
        padding:5px;
        bottom:45px;
        position:relative;
        width:150px;
        border-radius: 3px;
}
a.notificationIcons:hover span {
        display:block;
        position:absolute;
        border:1px solid #161616;
        color:white;
        margin-left:-70px;
        background:rgba(0,0,0,0.3);
}
 
/* Footer Buttons  */
 
#footer_menu{ /*entire footer bar*/
        margin: 0;
        padding: 0;
        width:auto;
}
#footer_menu li { /* the "buttons" */
        list-style: none;
        float: left;
        font-size:12px;
        padding: 12px 14px 14px 14px;
        /* cool glass look */
        border-right:1px solid rgba(0,0,0,0.4);
        background: rgba(0,0,0,0.1);
}
#footer_menu li:hover {
        background: rgba(0,0,0,0.3); /*a little darker on hover*/
}
#footer_menu li a { /*text on the buttons*/
        display: block;
        color: #cccccc;
        text-decoration: none;
}
#footer_menu li a:hover {
        color: #ffffff; /*gray to white looks like it glows*/
}
/* used for the home button, text is here hidden and replaced by an image */
#footer_menu .homeButton {
    padding:5px 8px 0px 14px;
    border:none;
    background:none;
}
#footer_menu .homeButton a { /* used for the home button, text is replaced by an image */
    background:url("background.png") top left no-repeat;
    width:36px;
    height:30px;
}
#footer_menu li.homeButton:hover {
    background:none;
}
#footer_menu li.homeButton a:hover {
    background:url("background.png") top left no-repeat;
}
 
/* Drop-Up Menus */
 
#footer_menu li ul.dropup{
   display: none;
}
#footer_menu li:hover ul.dropup{ /*Programs menu*/
        display: block;
        position: absolute;
        margin: 0 0 0 -15px; /*move left 15px to line up properly*/
        bottom:40px; /* distance to the bottom of the browser */
        border: 1px solid #111111;
        border-bottom:none;
        background: rgba(0,0,0,0.9);
        border-radius: 7px 7px 0px 0px; /*top-left, top-right, bottom-right, bottom-left*/
}
#footer_menu li:hover li { /* items in Programs menu */
        float: none;
        background:none;
        border:none;
        border-bottom:1px solid #161616;
        padding:12px 10px 12px 10px;
}
/* drop-up default links */
#footer_menu li:hover a {
        color: #aaaaaa;
}
#footer_menu li:hover a:hover {
        color: #eeeeee; /*lighter*/
}
/* Stream, Messages, etc... */
#footer_menu li:hover a.headerLinks {
        font-size:14px;
        text-decoration:underline;
        font-weight: bold;
		color: #127b7c;
        margin-top:10px;
        margin-left:10px;
}
#footer_menu li:hover a.headerLinks:hover {
        color: #38a8a9;
        cursor:pointer;
}
/* List Links */
#footer_menu li:hover a.listLinks {
        font-size:12px;
        color: #999999;
        margin-left:10px;
}
#footer_menu li:hover a.listLinks:hover {
        color: white;
        cursor:pointer;
}
#footer_menu .right { /* Use the right class to push the content to the right */
        float:right;
        right:0px;
        margin-right:2px;
        border-right:none;
        border-left:1px solid rgba(0,0,0,0.3);
}
 
/* 03 FOOTER - COLUMNS CONTENT - We will make 3 different layouts, which can contain 1 to 3 columns */
 
#footer .one_column_layout,
#footer .two_column_layout,
#footer .three_column_layout {
        margin:4px auto;
        position:absolute;
        padding-bottom:15px;
        display:none;
        text-align:left;
}
 
/* Layout Sizes */
#footer .one_column_layout {width: 140px;}
#footer .two_column_layout {width: 280px;}
#footer .three_column_layout {width: 420px;}
 
/* Entire drop-up menu, show on mouse hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout {
        display: block;
        position: absolute;
        margin: 0 0 0 -15px;
        bottom:40px;
        border: 1px solid #111111;
        border-radius: 7px 7px 0px 0px;
        background: rgba(0,0,0,0.9);
}
 
/* columns must be placed inside a layout */
#footer .col_1,
#footer .col_2,
#footer .col_3 {
        display:inline;
        float: left;
        position: relative;
        margin-left: 5px;
        margin-right: 5px;
}
#footer .col_1 {width:130px;}
#footer .col_2 {width:270px;}
#footer .col_3 {width:410px;}