html {font-family: sans-serif;}

h1 {text-transform:uppercase;}

h1, div {fontFamily: Verdana, sans-serif;}

#XXXXXXheader img {width: 100%;}

.list-group-item a {font-size: 18px;}

.panel-heading a {margin-left: 8px; font-size: 22px; color: white;}


/* ********* Navbar Structure ******** */

#header
{
    width: 100%;
    position:fixed;
    z-index: 1;
    background-color: white;
    
    overflow: visible;
}

.container
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}


#content
{
    padding-top: 60px;
    width:100%;
    height: 100%;
dbborder: solid 3px cyan;
}


#desktop-header #logo
{
    margin-left: 5px;
    margin-top: 5px;
}

#desktop-header #rss-logo
{
    margin-left: 25px !important;
    margin-right: 25px !important;
}

#desktop-header #banner
{
    margin-left: 50px;
    margin-top: 5px;
    
    float: right;
    
}

.navbar-header {width: 100%;}

nav.navbar.navbar-default.navbar-static-top {margin-bottom: 0px;}

/* Mobile Nav Panel */
@media screen and (max-width: 768px) {

    ul.nav.navbar-nav
    {
        background-color: #0c1923;
    }

    ul.nav.navbar-nav li a
    {
        font-size: 18px;
        color: white;
    
        border-top-color: rgba(255, 255, 255, 0.5);
        border-top-style: solid;
        border-top-width: 1px;
        color: #fff;
    
        padding-top: .7em;
        padding-bottom: .7em;
    
    }

    ul.nav.navbar-nav li a:hover
    {
        font-size: 18px;
        color: #CCFFCC;
    }

}


#sub-nav-span
{
    display: inline-block;
}


#sub-nav-table td
{
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

/*
#sub-nav-span {float: right;}
 <span style="width: 400px; border; solid 2px green; ">
*/

/* -----   Adjust width of header banner   ------ */

/* ipad portrait sees this */
@media screen and (max-width: 1100px) {
    #desktop-header #banner {width: 728px;}
}

@media screen and (min-width: 1101px) {
    #desktop-header #banner {width: 970px;}
}

/* -----   Adjust height of header for different menu styles   ------ */

/* --- mobile menu < 768 ---- */
@media screen and (max-width: 768px) {
    .navbar.navbar-default.navbar-static-top {height: 50px;}
    #content {padding-top: 60px;}

}

/* --- menubar 2 rows  ---- */
@media screen and (min-width:769px) and (max-width:1024px) {
    #content {padding-top: 160px;}
    #content h1 {display: none;}
    
}

/* --- menubar 2 rows  and a logo banner---- */
@media screen and (min-width:1025px) and (max-width:1405px) {
    #content {padding-top: 220px;}
    #content h1 {display: none;}
    
}

/* --- menubar 1 rows > 1405 ---- */
@media screen and (min-width: 1406px) {
    #content {padding-top: 175px;}
    #content #page-title {display: none;}
    
}

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

/* ********* Page Structure ******** */
h1 {margin-left: 20px;}


#container-1,
#container-2,
#container-3,
#container-4 
{
	width: 320px; 
	display: inline-table;
}

/*
section 
{
	Xwidth: 300px;
	margin: 5px 5px;
	
	Xpadding-bottom: 23px;
	Xborder: solid 1px green;
}
*/

div.panel-section
{
    margin-left: 5px;
    margin-right: 5px;

}

/* **************************  */
/*
#container-1 .panel-section span, #container-1 .panel-section .panel-heading {
    background-color: #767F34 !important;
}
*/

#container-1 .panel-section .panel-heading {
    background-color: #767F34;
}

#container-1 section {border: solid 1px #767F34;}

#container-1 h2 {
    height: 38px;
    width: 345px;
    width: 96%;
    margin-left: 6px;
    margin-right: 5px;
    padding-left: 8px;
    background-color: #767F34;
    
}

#container-1 h2 a {
    color: white;
}

#go_to_text {width: 18px; height: 18px; border-radius: 50%; background-color: #767F34;}

/* **************************  */
/*
#container-2 .panel-section span, #container-2 .panel-section .panel-heading {
    background-color: #D34E24 !important;
}
*/
#container-2 .panel-section .panel-heading {
    background-color: #D34E24;
}



#container-2 section {border: solid 1px #D34E24;}

#container-2 h2 {
    height: 38px;
    width: 96%;
    margin-left: 6px;
    margin-right: 5px;
    padding-left: 8px;
    background-color: #D34E24;
    
}

#container-2 h2 a {
    color: white;
}

#go_to_media {width: 18px; height: 18px; border-radius: 50%; background-color: #D34E24;}

/* **************************  */
/*
#container-3 .panel-section span, #container-3 .panel-section .panel-heading {
    background-color: #7C0B0D !important;
}
*/
#container-3 .panel-section .panel-heading {
    background-color: #7C0B0D;
}

#container-3 section {border: solid 1px #7C0B0D;}

#container-3 h2 {
    height: 38px;
    width: 96%;
    margin-left: 6px;
    margin-right: 5px;
    padding-left: 8px;
    background-color: #7C0B0D;
    
}

#container-3 h2 a {
    color: white;
}

#go_to_blogs {width: 18px; height: 18px; border-radius: 50%; background-color: #7C0B0D}

/* **************************  */
/*
#container-4 .panel-section span, #container-4 .panel-section .panel-heading {
    background-color: #194177 !important;
}
*/
#container-4 .panel-section .panel-heading {
    background-color: #194177;
}

#container-4 section {border: solid 1px #194177;}


.more-span {float: right;}


#container-4 h2 {
    height: 38px;
    width: 96%;
    margin-left: 6px;
    margin-right: 5px;
    padding-left: 8px;
    background-color: #194177;
    
}

#container-4 h2 a {
    color: white;
}

#go_to_forums {width: 18px; height: 18px; border-radius: 50%; background-color: #194177;}


/* **************************  */

/* .rss-cnt, */
.html-cnt,
.js-cnt,
.ajax-cnt,
.ajax-raw-cnt,
.ajax-raw-cnt
{
    font-size: 20px;
    color: white;
    /* border: solid 1px #DDDDDD; */
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}



#desktop-header {display: none;}

#logo-image {width: 18px; height: 18px; xborder: solid 1px red;}


@media screen and (max-width: 320px) {
   

   .sub-nav-btn-img
    {
        margin-left: 2px;
        margin-right: 2px;
        margin-left: 0px;
        margin-right: 1px;
        margin-top: 18px;
        margin-bottom: 18px;
    }

}

@media screen and (min-width:321px) and (max-width:382px) {
    .sub-nav-btn-img
    {
        margin-left: 3px;
        margin-right: 3px;
        margin-left: 0.8vw;
        margin-right: 0.8vw;
        margin-top: 18px;
        margin-bottom: 18px;
    }
    

}



@media screen and (min-width:383px) and (max-width:480px) {
    .sub-nav-btn-img
    {
        margin-left: 8px;
        margin-right: 8px;
        margin-left: 2vw;
        margin-right: 2vw;
        margin-top: 18px;
        margin-bottom: 18px;
    }
    
}

@media screen and (min-width:480px) and (max-width:768px) {
    .sub-nav-btn-img
    {
        margin-left: 8px;
        margin-right: 8px;
        margin-left: 4vw;
        margin-right: 4vw;
        margin-top: 18px;
        margin-bottom: 18px;
    }
    
}

@media screen and (min-width:769px) and (max-width:1024px) {
    .sub-nav-btn-img
    {
        margin-left: 8px;
        margin-right: 8px;
        margin-left: 8vw;
        margin-right: 8vw;
        margin-top: 18px;
        margin-bottom: 18px;
    }
    
    #navbar a {font-size: 18px; font-weight: bold;}
    
    
}

@media screen and (min-width:1025px) {
    .navbar-header,
    .sub-nav-btn-img
    {
        display: none;
    }
    
    #desktop-header {display: block; margin-bottom: 20px;}
    #navbar a {font-size: 18px; font-weight: bold;}
    #XXXcontent  {margin-top: 155px;}
}


/*  spacing of section header icon and link */
.panel-heading span {color: white; cursor: pointer; cursor: hand; font-size: 20px;}
.panel-heading img {margin-left: 5px; margin-right: 10px;}
.panel-heading a {margin-left: 5px; margin-right: 5px;}
.panel-heading a {font-size: .9em}



/* Dialog */
#feedViewerModal #modal-title-img
{
    margin-right: 10px;
}

#feed-view .content_div
{
    border-bottom: 1px dotted gray;
    padding-bottom: 10px;
    margin-bottom:	10px;
}

#feed-view .title_div a
{
    font-weight: bold;
    text-decoration: none;
}


/* Lower Nav */
#footer
{
    width: 100%;
    background-color: #689DD1;
}


#footer ul.menu
{
    
    width: 70%;
    margin: auto;
    
    margin-top: 10px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    
    list-style-type: none;
    
}

#footer ul.menu li
{
    display: inline;
}

#footer ul.menu a
{
    color: white;
}

#footer ul
{
    margin: 0;
    padding: 0;
}

#footer ul li
{
    list-style-type: none;
    display: inline;
}

#footer ul li:before {
    content: " | ";
    color: white;
}

#footer ul li:first-child:before {
    content: none;
}

/* custom classes */

.share
{
    height: 360px;
    border: solid 1px #dddddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    
}

.share #del-icio-us
{
    border: none;
}

/*
.like
{
    height: 360px;
    border: solid 1px #dddddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    
}

.like #del-icio-us
{
    border: none;
}
*/

.like {disply: none;}

/*  ############################################################# */


.local #container-1 h2,
.local #container-2 h2,
.local #container-3 h2
{
    margin-top: 0px;
    margin-bottom: 0px;
}

.local .panel-heading
{
    height: 55px;
    padding-bottom: 20px !important;
}

.local .panel-section
{
    Xheight: 360px;
    border: solid 1px #dddddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    
}

.local #container-1 ul li .span-link
{
    color: #5F94C0;
}

.local #container-1 h2,
.local #container-2 h2,
.local #container-3 h2,
.local #container-4 h2
{
    margin-bottom: 10px;
}

.local #container-1 .panel-section
{
    margin-bottom: 10px;
}

.local #container-1 .panel-section .list-group
{
    margin-bottom: 0px;
}

.local #media-region, .local #blog-region
{
    width: 308px;
    height: 40px;
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #767F34;
    padding-left: 10px;
    padding-top: 10ps;
}

/*  ############################################################# */

.don-tips
{

    border: solid 1px #dddddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    
}

.like-section
{

    border: solid 1px #dddddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-bottom: 10px;
}

/*  iPad portrait overrides to get white  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
    
    ul.nav.navbar-nav
    {
        background-color: #F9F9F9;
        margin-left: 0px;
    }
    
    ul.nav.navbar-nav li a
    {
        color: #000000;
        margin-left: 0px;
    }

    ul.nav.navbar-nav li a:hover
    {
        color: #333333;
    }

    .container
    {
        padding-left: 0px;
    }
    
    
}


nav.navbar div#navbar ul.nav.navbar-nav {background-color: black;}

nav.navbar div#navbar ul.nav.navbar-nav a {color: white;}

nav.navbar div#navbar ul.nav.navbar-nav a:hover {color: red;}

nav.navbar div#navbar ul.nav.navbar-nav li#breaking.active a {color: black !important;}

/*
html body div#header nav.navbar.navbar-default.navbar-static-top div.container div#navbar.navbar-collapse.collapse {background-color: black;}
*/

/* Twitter Feeds */
div.panel-body {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
}

div#feed-view img {
  width: 100%;
}

div.panel-body {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
}

div#feed-view img {
  width: 100%;
}


div.twitter-cnt.panel-section {
  border: solid 1px #dddddd;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 10px;
  
}


div.twitter-cnt.panel-section div.panel-heading {
  background-color: #00ACEE !important;
  
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  
  border: solid 1px #00ACEE;


}


div.don-share-btn-wrapper {
    border: solid 2px black;
    width: 90%;
    border-radius: 6px;
    background-color: #DEDEDE !important;
	box-shadow: 4px 4px 4px #888888;
	margin-left: auto;
	margin-right: auto;
	mariin-bottom: 10px;
}


a.don-share-btn {
  
display:inline-block;
   width:100%;
   height:100%; 
   
   border-radius: 6px;
   padding-left: 10%;
   padding-right: 10%;
   padding-top: 6px;
   padding-bottom: 0px;
   background-color: #DEDEDE !important;
   font-size: 16px;
   color: black;
   color: #00ACEE;
   white-space: nowrap;
   overflow: hidden;
}

a.don-share-btn:hover {
background-color: #0090E0 !important;
}

a.don-share-btn img {
  margin-right: 5px;
}

div.don-share-btn-wrapper:hover,
a.don-share-btn:hover {
color: black;
}

div#town-hall-content
{
  margin-top: 30px;
}

div.th-column {
  width: 309px;
}

.twitter-feed {
  
  border: 1px solid gray;
}

div.panel-heading {
  color: white;
  background-color: #1DA1F3;
  font-size: 20px;
}

div.panel-heading a {
  
}

.panel-section {
  border:solid 1px #1DA1F3;
  margin-bottom: 10px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px; 
  overflow: hidden;
}


.panel-heading
{
  width: 309px;
}

div.panel-section {
   cursor: grab;
}

div.th-column {
  width: 308px;
  display: inline-block;
  margin-right: 10px;
}

div.th-spacer {
height: 10px;
}


.poll-dancing #container-1 h2,
.poll-dancing #container-2 h2,
.poll-dancing #container-3 h2,
.poll-dancing #container-4 h2{background-color: #686868 !important;}


.poll-dancing  .poll.rss-cnt.panel-section {border-color: #686868;}
.poll-dancing  .poll.rss-cnt.panel-section div.panel-heading {background-color: #686868 !important;}


/* Podcasts */
div.body-type {
  font-size: 18px;
  font-weight: bold;
  padding-left: 8px;
  padding-top: 2px;
  padding-bottom: : 2px;
}

div.panel-section.podcast,
div.panel-section.podcast div.panel-body ul,
div.panel-section.podcast div.panel-body ul li,
div.panel-section.podcast div.panel-body ul li a
{
  background-color: #FAF0E6;
}

/* Town Hall */

body.town-hall div.panel-heading {
  background-color: #1da1f2 !important;
  background-image: url("/img/twitter_blue20x20.png") !important;
  color: white !important;
}



body.town-hall div.panel-section {
border: solid 1px #1da1f2 !important;
}


body.town-hall div.container-1,
body.town-hall div.container-2,
body.town-hall div.container-3,
body.town-hall div.container-4 {
  padding: 10px;

}