/*
This entire first section is also currently in mainmenus.css . However since only pages that have the menus at the top need this but not all need the entire content of this beaconmain.css file.  This will be sorted out in the future after caching issues are gone..

If you change this file be sure and also update mainmenus.css.
*/

/* MAJOR PAGE SECTIONS */
html {box-sizing:border-box;}
*, *:before, *:after {box-sizing:inherit;}
body{background-color:white;text-align:center; font-family: arial, sans-serif;}
A{text-decoration:none;white-space:nowrap;outline:none;font-family:arial, sans;font-weight:bold;color:black;}
A:hover{color:red;}
#container{max-width:1140px;margin:0 auto;text-align:center;background-color:white;padding:12px 0;}
#wrapper{width:99%;margin:0 auto;}
/*#menuwrapper{width:100%;margin:0 auto;background-color:#e0ffff;border:1px solid black;}*/
#mainbody{text-align:left;width:100%;padding:6px 4px 6px 4px;background-color:white;}/* wraps everything below the banner */

/* BANNER */
#beaconbanner{width:100%;text-align:center;padding-bottom:4px;background-color:white;}
#beaconimage{display:inline-block;width:100%;}
.bannertext{display:none;font-family:sans-serif;font-weight:bold;font-size:12px;color:black;background-color:white;padding-bottom: 4px;}

/*
.mHead{display:inline-block;margin:6px 8px 6px 0;background-color:transparent;font-family:arial;font-weight:bold;font-size:14px;color:black;}
.mHead a{color:black;}
.mHead:hover a{color:red;}
.mHead:hover {background:transparent;}

.mHeadme{display:inline-block;color:red;margin:0 8px 0 0;background-color:transparent;font-family:arial;font-weight:bold;font-size:14px;}
.mHeadme a{color:red;}

.mHeadsmme{display:inline-block;padding:0 12px 0 0;margin:6px 8px 6px 0;background-color:transparent;font-family:arial;font-weight:bold;font-size:13px;}
.mHeadsmme a{display:inline-block;color:red;vertical-align:middle;}

.mHeadsm{display:inline-block;color:black;margin:6px 8px 6px 0;background-color:transparent;font-family:arial;font-weight:bold;font-size:13px;}
.mHeadsm a{display:inline-block;color:black;vertical-align:middle;}
.mHeadsm:hover a{color:red;}
.mHeadsm:hover{background:transparent;}

end of mainmenus.css duplicate */

/*Different sections of the website and the articletool.html need differing CSS definitions.  Most all of the pages require the CSS information for the menus and submenus as well as a fair amount of other CSS used by them all.  Some of the pages have a few CSS statements that are unique to those particular pages.

This large CSS file beaconmain.css is used by most of the pages. However, here is a summary of the various CSS files:

 * /beaconmain.css
    Used by the majority of the pages including the main and individual community pages where it is loaded in the allcommunities.part2.shtml file. beaconmain.css is not referenced in the articletool.html or in the "FULL STORY" popout window.

 * /mainmenus.css contains all css needed for the banner and menus on the main pages pages the main page menu css

 * /articles/articlestyle.css
    Used only in the Full Story window. It uses a simpler CSS setup including separate @media pages to accomodate its simpler "shrinking" needs.

 * articletool.html has a small subset of the beaconmain.css file hardcoded in it's body


/* THESE CLASSES immediately below are also hardcoded in articletool.html so are needed here and there and also available to the community index.shtml files since those articles are created by articletool.
You also must add any new ones added to articletool here.*/
/* the articleheadline is 26px for main-page articles when they are displayed in a "Full Story" window so there is a separate stylesheet: /articles/articlestyle.css  that is used for the display of mainpage articles in Full Story windows */
/* TEXT OPTIONS */

/* slightly smaller sizes are used for headlines and subheadlines at display widths less than 800px (see @media controls)

For the main page article previews and in the FULL STORY display windows, the headline and subheadline which will nomally be enclosed in a <p class="articlegheadline"></p> pairs have top and bottom margins set to zero to eliminate the whitespace.

For a highligthed section within the article the newsection class has whitespace above but a minimal whitespace beneath
*/
.articleheadline{margin:0 auto;font-size:20px;font-weight:bold;}
.articlesubheadline{margin:0 auto;font-size:16px;font-weight:bold;}
.articlesection{margin:16px auto 10px auto;font-size:16px;font-weight:bold;}
.headline{margin:0 auto;font-size:20px;font-weight:bold;}
.subheadline{margin:0 auto;font-size:16px;font-weight:bold;}
.section{margin:16px auto 10px auto;font-size:16px;font-weight:bold;}
.indent20{margin-left:20px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.bold{font-weight:bold;}
.italic{font-style:italic;}
.sans{font-family: arial, sans-serif;}
.serif{font-family: serif;}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.txtcenter{text-align: center;}
.txtleft{text-align: left;}
.txtright{text-align: right;}
.red{color: red;}
.green{color: green;}
.blue{color: blue;}
/* GENERAL ELEMENT SIZING AND SPECIFIC IMAGE DIV SIZING INCLUDING ENCLOSED (CAPTION) DIVS */
.fullwidth{width:100%;}
.width10percent{width:10%;min-width: 150px;}
.width20percent{width:20%;min-width: 250px;}
.width30percent{width:30%;min-width: 300px;}
.width40percent{width:40%;}
.width50percent{width:50%;}
.width60percent{width:60%;}
.width70percent{width:70%;}
.width80percent{width:80%;}
.width90percent{width:90%;}
.width100percent{width:100%;}
.imagediv{border:1px solid black;margin:6px 6px 6px 0;}
.imagediv div{font-size:14px;margin:0;padding:2px 2px 2px 6px;}
.imagecaption{font-size:14px;padding:2px 2px 2px 6px;}
.imagediv img{width:100%;display:block;}/* display:block gets rid of white-space at bottom of images */
.imageleft{float:left;margin-right:10px;}
.imageright{float:right;margin-left:10px;}
.imgleft{float:left;margin-right:10px;}
.imgright{float:right;margin-left:10px;}
.fixed150px{width: 150px;}
.max500px{max-width:500px;}
.max400px{max-width:400px;}
.max300px{max-width:300px;}
.max200px{max-width:200px;}
.clearboth{clear:both;}
.imageclear{clear:both;}

/*
These next classes are used with the article containers in the community index.html file (but are not actually used in articletool.html), so these must be available in all the community index.html pages but are not needed elsewhere on the site.
Currently the community index.shtml files all load the complete beaconmain.css stylesheet since they do need the menu css  but that could be changed at some point to where they use a smaller stylesheet. The community pages do need the menu and submenu CSS, whereas the "FULL STORY" display windows do not.
*/
.communityarticlebox {padding:0 4px 4px 0;text-align:left;clear:both;font-family: arial, sans-serif;}
.communityarticleboxwidth{width:98%;}

/* TESTING */
.shrinkgroup{clear:both;}

/* TOPBOX */
#topbox {background-color:#ccf;border:2px solid black;border-radius:6px;padding:4px;font-size:18px;font-weight:bold;font-family:arial, sans-serif;text-align:center;margin:0 0 6px 0;}

/* Many of the classes below are here simply for ease of use and standardization throughout all the website. Most are not being used but are included for possible future used.*/

/* ARTICLE AND NON-ITEM IMAGES */
.correspondentimage{float:left;max-width:35%;padding:0px 6px 8px 0;}

/* GENERAL */
.visible{overflow: visible;}
.clearboth{clear:both;}
.bold{font-family:arial;font-weight: bold;}
.borderbottom{border-bottom:1px solid blue;}

/* Communties main page and Business page (which need most of the main CSS) additional specific items */
#communitymainmenu{background-color:#e0ffff;text-align:left;padding-left:20px;}
.businessarticle{text-align:left;}

/* ################  MENU BUTTON  STYLEs  ##########
These Button styles are used throughout the website on all the menus so they need to be available just about everywhere except the FULL STORY popout window, the individual community pages and also the articletool which has its own button styles.
*/

/* SUB MENUS - for individual main page sections of the site- e.g. Communities, Print Edition, etc. */
#submenuwrapper{margin:6px 2px;text-align:center;}
.sublinkwrap{display:inline-block;padding:2px 3px;margin:8px 4px;font-family: arial, sans-serif;background-color:transparent;border-radius:5px;color: black;}
.sublinkwrap:hover{background:transparent;}
.sublinkwrap a{font-family: arial, sans-serif;font-weight:bold;font-size:14px;color:black;}
.sublinkwrap a:hover{color:red;}
.activesubheader{text-align:center;font-family: arial, sans-serif;font-size:20px;font-weight:bold;border:2px solid black;padding:4px 4px;background-color:wheat;}
.sublinkactive{display:inline-block;padding:2px 3px;margin:3px;background-color:wheat;border:2px solid blue;border-radius:5px;font-family: arial, sans-serif;font-weight:bold;font-size:14px;color:red;}

/* ################ END  BUTTON STYLE  ########## */

/*
============ IMPORTANT ==========
Because of caching problems, the rest of this CSS style can not be loaded from a .css separate file and.
THIS SECTION MUST ALSO BE THE SAME  IN showfullarticle.html and the articletool.html
CHANGING THE FOLLOWING CSS IN ANY OF THOSE THREE FILES MEANS CHANGE IT IN ALL 3 and FTP all 3 to force fresh copies
=================================
*/

/* ######### MEDIA #########
These allow for all the dynamic resizing to accomodate the various display sizes and devices from desktop to smartphone.
The FULL STORY popout has its own @media section in  /articles/articlestyle.css
*/
/* Changed on 5/30/17 to keep sponsor items close to 300px width */

@media only screen and (max-width: 1140px) {
#container{width:100%;} /* must have % to allow shrinking container*/
#xmainbody{background-color:red;}
.articleboxwidth {width:69%;}
.itemboxwidth{width:30%;}
.adimage{width:100%;}
}
@media only screen and (max-width: 1000px) {
#xmainbody{background-color:yellow;}
.articleboxwidth {width:66%;}
.itemboxwidth{width:33%;}
}
@media only screen and (max-width: 920px) {
#xmainbody{background-color:green;}
.articleboxwidth {width:64%;}
.itemboxwidth{width:35%;}
}
@media only screen and (max-width: 860px) {
#xmainbody{background-color:#f0f;}
.articleboxwidth {width:61%;}
.itemboxwidth{width:38%;}
.width80percent{width:100%;}
}
@media only screen and (max-width: 800px) {
#xmainbody{background-color:blue;}
.articleboxwidth {width:58%;}
.itemboxwidth{width:41%;}
.articleheadline{font-size:18px;font-weight:bold;}
.articlesubheadline{font-size:14px;font-weight:bold;}
.width60percent{width:70%;}
.width40percent{width:60%;}
.width30percent{width:60%;}
.width20percent{width:50%;}
}
@media only screen and (max-width: 740px) {
#xmainbody{background-color:yellow;}
.articleboxwidth {width:56%;}
.itemboxwidth{width:43%;}
.width70percent{width:100%;}
.width50percent{width:70%;}
}
@media only screen and (max-width: 700px) {
#xmainbody{background-color:red;}
.articleboxwidth {width:53%;}
.itemboxwidth{width:46%;}
.width60percent{width:100%;}
}
@media only screen and (max-width: 650px) {
#bannerleft{display:none;}
#xmainbody{background-color:yellow;}
.articleboxwidth {width:51%;}
.itemboxwidth{width:48%;}
#beaconbanner{width:100%;}
}
@media only screen and (max-width: 620px) {
#xmainbody{background-color:green;}
.articleboxwidth {width:48%;}
.itemboxwidth{width:51%;}
.correspondentimage{max-width:47%;}
.width40percent{width:60%;}
}
@media only screen and (max-width: 590px) {
#xmainbody{background-color:red;}
.articleboxwidth {width:45%;}
.itemboxwidth{width:54%;}
.width50percent{width:100%;}
}
@media only screen and (max-width: 560px) {
#xmainbody{background-color:blue;}
.articleboxwidth {width:43%;}
.itemboxwidth{width:56%;}
.width40percent{width:70%;}
}
/* ########## SINGLE COLUMN NOW ########## */
@media only screen and (max-width: 540px) {
#xmainbody{background-color:white;}
#mainbody{padding:2px 0;}
#wrapperarticlebox{width:100%;}
.width50percent{width:100%;}
.width40percent{width:100%;}
.width30percent{width:100%;}
.articleboxwidth{width:100%;}
.itembox{clear:both;padding:0px;text-align:center;}
.itemboxwidth{width:100%;}
.itembox img{float:none;max-width:300px;margin:0 auto;}
.fullstoryitembox img{float:none;width:290px;margin:0 auto;}
.fullstoryitembox div{float:none;width:294px;margin:0 auto;}
#itemstack{display:none;}
.correspondentimage{max-width:50%;}
.max500px{max-width:100%;}
.max400px{max-width:70%;}
.max300px{max-width:280px;}
}
@media only screen and (max-width: 420px) {


}