* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Helvetica, sans-serif; }

body {
  background: #000;
  color: black; }



h1 {
  margin-bottom: 1.0em;
  margin-right: 50pt;
  font-style: normal;
  font-weight: bold;
  font-size: 14pt; }

hr {
  background: black;
  border: 0;
  height: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
  margin-left: auto;
  margin-right: auto;
  width: 60%; }
  
  .mainCopy{
      padding-left:80px;
      
      padding-right:80px;
     
  }
  
  .firstP{
      margin-top:20px;
      margin-right:200px;
  }



button{
    padding:10px;
     background-color:#323232;
     color:#ccc;
     border: 0px solid;
        border-radius: 10px;
        width:100%;
        margin-top:20px;
        font-size:.9em;
       /* float:right;
        
        margin-left:10px;
 */       
}

button:hover{
    background-color:#4A4949;
    
    
}

.btnNav{
    margin-top:0px;
}

.btnNav .pdoff{
    padding-left:2px;
    padding-right:2px;
}

.btnNav .pdoff img{
    
    margin-top:-3px;
    margin-right:10px;   
    
    
}



ul.info {
  margin-bottom: 1.5em;
  margin-left: 50pt;
  margin-right: 50pt;
  font-style: normal;
  font-weight: normal;
  font-size: 10pt; }

ul.info li {
  margin-left: 30pt;
  margin-right: 30pt;
  margin-bottom: 1.2em; }

select {
  font-size: 10pt;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 100%;
  z-index: 9999; }

.preamble {
  text-align: left;
  color: #68685b;
  background-color: #909080;
  display: table;
  border: solid thin;
  padding: 10px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 0px; }

.preamble p {
  margin: 1em;
  font-size: 12pt;
  font-weight: bold;
  color: #e5e5e5; }

.preamble A:link {
  text-decoration: none;
  color: #bfbfbf; }

.preamble A:visited {
  text-decoration: none;
  color: #bfbfbf; }

.preamble A:active {
  text-decoration: underline;
  color: #bfbfbf; }

.preamble A:hover {
  text-decoration: underline;
  color: #bfbfbf; }

#instructions, #references, #credits {
  margin-left: 2em;
  margin-right: 2em; }

#instructions li {
  padding-top: 0.4em; }

.inline-img {
  display: inline-block;
  background-color: #969696;
  padding: 3px; }

.inline-img img {
  vertical-align: middle; }

.prefs_buttons {
  padding-top: 0.4em; }

label.prefs_firstDayOfWeek {
  display: block;
  font-size: 8pt;
  margin: 10pt 3pt 3pt 3pt; }

label.prefs_language {
  display: block;
  font-size: 8pt;
  margin: 10pt 3pt 3pt 3pt; }

label.prefs_scaling {
  display: block;
  font-size: 8pt;
  margin: 10pt 3pt 3pt 3pt; }

label.prefs_phaseTime {
  display: block;
  font-size: 8pt;
  margin: 10pt 3pt 3pt 3pt; }

label.prefs_gregorianJD1 {
  display: block;
  float: left;
  font-size: 8pt;
  margin: 10pt 3pt 3pt 3pt; }

.wrapper {
  display: inline-block; }

input#prefs_gregorianJD1 {
  display: block;
  float: left;
  clear: both;
  width: auto;
  padding: 10px;
  border: solid 1px black; }

/* Hack to make JQUI dropdowns visible when they exceed the
   height of an enclosing dialog. */
.ui-dialog, .ui-dialog-content {
  overflow: visible; }

.ui-button .ui-icon.ui-icon-blank {
  background-image: url("themes/images/blank.png"); }

/* Items related to the SVG calendar.
*/
.centered {
  margin-left: auto;
  margin-right: auto; 

  }
  
  .active{
      
      cursor:pointer;
      
  }
  
  .active .dateBackground {
  /*fill: rgb(125,125,125);
  fill: #969696;
  fill:#3B3A3B; */ 
  fill:none;
  }
  
  
  


/* Perhaps want to shift 'canonical' to be a member of
   'active', which may be better when we're updating
   this status on the fly.
*/

.active .phaseLabel{
    
  

  text-anchor: middle;
  /*fill: rgb(25,25,25);
  fill:#58C1F7;*/
  fill:#000;
  font-weight:bold;
  font-size:12px;
  stroke: none; 
    
}
.active.canonical .dateBackground {
  /*fill: rgb(125,125,125); */
  fill:#000; 
  /*fill: adjust-color($daycell-background-active, $blue: +20%);*/ }


.inactive{
    
     stroke-width: 1;
  /* We give the day cells a very narrow stroke. This just cleans up
     the strange apparent gap-width variations caused by aliasing, since
     the rendering engine now has an actual, explicit line to work with.
     Should be careful to set this to the background color of the page,
     however.
  */
  /*stroke: white;*/
  stroke:#000;
    
}

.inactive .dateBackground {
  /*fill: rgb(200,200,200);*/
  
  fill:#000000;}

.inactive.canonical .dateBackground {
  /*fill: rgb(200,200,200); */
  fill: #000;
  visibility:hidden;
  /*fill: adjust-color($daycell-background-inactive, $blue: +20%);*/ }

.active .dateLabel {
  font-family: sans-serif;
  font-style: normal;
  text-anchor: end;
  /*fill: rgb(25,25,25);*/
  fill:#DBDADA;
  font-weight:bolder;
  font-size:16px;
  stroke: none; }

.inactive .dateLabel {
  font-family: sans-serif;
  font-style: italic;
  text-anchor: end;
  /*fill: rgb(100,100,100);*/
  fill: #646464;
  font-size:14px;
  stroke: none;
  visibility:hidden;}

.circleGroup {
  /*stroke: black; */
  stroke-width: 0.015; }

.active .darkBackground .circleBack {
  fill: #757474;
  stroke: #757474; }

.active .lightBackground .circleBack {
  fill: white;
  stroke: black; }

.inactive .darkBackground .circleBack {
  fill: #757474;
  stroke: #757474;
  visibility:hidden; }

.inactive .lightBackground .circleBack {
  fill: white;
  stroke: #757474; 
  visibility:hidden;}

.active .darkBackground .circleFront {
  fill: #757474;
  stroke: none; }

.active .lightBackground .circleFront {
  fill: white;
  stroke: none; }

.inactive .darkBackground .circleFront {
  fill: #757474;
  stroke: none;
  visibility:hidden; }

.inactive .lightBackground .circleFront {
  fill: white;
  stroke: none; 
  visibility:hidden;}

.active .darkBackground .leftArc {
  fill: white;
  stroke: none; 
  }

.active .lightBackground .leftArc {
  fill: #757474;
  stroke: #757474; }

.inactive .darkBackground .leftArc {
  fill: white;
  stroke: none; 
  visibility:hidden;}

.inactive .lightBackground .leftArc {
  fill: #757474;
  stroke: #757474; 
  visibility:hidden;}

.active .darkBackground .rightArc {
  fill: white;
  stroke: none; 

    }

.active.blue .darkBackground .rightArc {
  fill: #b9ffff;
  stroke: none; }

.active .lightBackground .rightArc {
  fill: #757474;
  stroke: none; }

.inactive .darkBackground .rightArc {
  fill: white;
  stroke: none; 
  visibility:hidden;}

.inactive .lightBackground .rightArc {
  fill: #757474;
  stroke: none;
  visibility:hidden; }

.blue .circleFront {
  fill: blue; }

.legend1 {
  visibility: hidden;
  stroke: none; }

.legend2 {
  visibility: hidden;
  stroke: none; }

#svg_calendar_legend {
  stroke-width: 0.5;
  stroke: #4d4d4d; }

.legend_text {
  stroke: none;
  font-size: 8pt;
  fill: #4d4d4d; }

#calendar_type {
  font-style: italic;
  text-anchor: end;
  overflow: hidden;
  fill: #4d4d4d; }

#new_phase1 {
  fill: #4d4d4d;
  visibility: visible; }

#new_phase2 {
  visibility: hidden; }

#q1_phase1 {
  fill: white;
  visibility: visible; }

#q1_phase2 {
  fill: #4d4d4d;
  visibility: visible; }

#full_phase1 {
  fill: white;
  visibility: visible; }

#full_phase2 {
  visibility: hidden; }

#q2_phase1 {
  fill: white;
  visibility: visible; }

#q2_phase2 {
  fill: #4d4d4d;
  visibility: visible; }

/*******************************************************/
.active.canonical .legend1 {
  fill: #d9d9d9;
  visibility:hidden;}

.inactive.canonical .legend1 {
  fill: white;
  visibility:hidden;}

.active.canonical .legend2 {
  fill: #4d4d4d;
  visibility:hidden; }

.inactive.canonical .legend2 {
  fill: #b0b0b0;
  visibility:hidden; }

.active.canonical.new .legend1 {
  fill: #4d4d4d;
  visibility:hidden; }

.inactive.canonical.new .legend1 {
  fill: #b0b0b0;
  visibility:hidden; }

.active.canonical.new .legend2 {
  visibility: hidden; }

.inactive.canonical.new .legend2 {
  visibility: hidden; }

.active.canonical.full .legend1 {
  fill: #d9d9d9;
  /*fill: white;*/
  visibility:hidden; }

.inactive.canonical.full .legend1 {
  fill: #e6e6e6;
  /*fill: white;*/
  visibility:hidden;}

.canonical.full .legend2 {
  visibility:hidden; }
  
.active.canonical.full .dateLabel,  .active.canonical.new .dateLabel{
    
    /*fill:#1A9BFC!important;*/
    
}

.active.todayMark .dateBackground{
    stroke:#F56B01!important;
}

.active.canonicalMark .dateBackground{
    stroke:#337ab7!important;
}
  

/*******************************************************/
.wkdayBackground {
  /*fill:rgb(255, 255, 255);
  fill: #e5e5e5;*/
  stroke: none; }

.weekday {
  font-family: sans-serif;
  font-weight: bold;
  stroke: none;
  text-anchor: middle;
  fill:#ccc; }

#svg_calendar {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 0;
  display: block; }

#weekday_bar {
  margin-left: auto;
  margin-right: auto;
  display: block;
  fill: black;
  stroke-width: 1px;
  stroke: red; }

#calendar_grid {
  margin-left: auto;
  margin-right: auto;
  display: block;
  fill: #ffc8ff;
  stroke-width: 1;
  /* We give the day cells a very narrow stroke. This just cleans up
     the strange apparent gap-width variations caused by aliasing, since
     the rendering engine now has an actual, explicit line to work with.
     Should be careful to set this to the background color of the page,
     however.
  */
  /*stroke: white;*/
  stroke:#414040; }

#calendar_legend {
  margin-left: auto;
  margin-right: auto;
  display: none;
  fill: #ffc8ff;
  stroke-width: 0.5;
  /* We give the day cells a very narrow stroke. This just cleans up
     the strange apparent gap-width variations caused by aliasing, since
     the rendering engine now has an actual, explicit line to work with.
     Should be careful to set this to the background color of the page,
     however.
  */
  /*stroke: white;*/
  /*stroke: $page-background;*/
  stroke: black; }

#buttonPanel {
  vertical-align: top;
  padding-top: 30%; }

#panelStrip {
  width: 30px; }

#resetButton {
  border-top: 40px;
  background: #999999; }

#resetButton:hover {
  border-top: 40px;
  background: #8c8c8c; }

#settingsButton {
  margin-top: 5px;
  background: #999999;
  /* Hide the settings button for now, since it doesn't do anything yet.
  */
  /*display: none;*/ }

#settingsButton:hover {
  margin-top: 5px;
  background: #8c8c8c; }

/* Items related to the date selector and other divs related to
   the calendar.
*/
.mcds {
  margin: 0;
  padding: 0;
  cursor: default; }

.mcds #monthVal, #milleniumVal, #centuryVal, #decadeVal, #yearVal, #epochVal {
  display: none; }

.mcds li {
  float: left;
  list-style: none;
  font: bold 24pt sans-serif; }

/* Main display settings */
.mcds li div {
  display: block;
  background: #999999;
  padding: 5px 12px;
  text-decoration: none;
  text-align: left;
  border-right: 1px solid #e5e5e5;
  width: auto;
  color: black;
  white-space: nowrap; }

.mcds li div#month {
  border-right: 20px solid #e5e5e5; }

.mcds li div#year {
  border-right: 20px solid #e5e5e5; }

/* Main display: hover */
.mcds li div:hover {
  /*background: #999999;*/
  background: #8c8c8c; }

.mcds li ul {
  margin: 0;
  padding: 0;
  position: absolute;
  visibility: hidden;
  border: 1px solid #e5e5e5; }

.mcds li ul li {
  float: none;
  display: inline; }

/* Dropdown settings */
.mcds li ul li div {
  width: auto;
  /*background: #999999;*/
  background: #999999;
  border: 1px solid #999999;
  font-size: 12pt; }

/* Dropdown settings: hover */
.mcds li ul li div:hover {
  /*background: #888888;*/
  background: #8c8c8c; }

.mcds li ul li .val {
  display: none; }

#DateDisplay {
  margin-left: auto;
  margin-right: auto;
  display: none; }

#DateSelector {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  margin-top: 20px;
  display:none;
  /*display: table;*/
  
  
   }

#Outline {
  margin-left: auto;
  margin-right: auto;
  /*margin-bottom: 20px;*/
  display: table;
  border: solid 1px transparent;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px; }

#Caption {
  float: right;
  position: relative;
  top: 18px;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px; }

#Calendar {
  padding: 0px;
  margin: 0px;
  border: 0px;
   }

/* Use border to mimic solid background, which IE
   eliminates. Have to fiddle with these numbers
   to get everything to line up correctly, which
   is a drawback. User can change printing settings,
   but no one is going to do that.
*/
#MessageBackground {
  float: right;
  position: relative;
  /*top: 25px;*/
  top: -36px;
  left: -35px;
  width: 65px;
  height: 0px;
  display: none;
  border: 15px solid white;
  border-style: solid;
  border-color: white;
  border-left-width: 15px;
  border-right-width: 15px;
  border-top-width: 18px;
  border-bottom-width: 18px; }

/* Note: Chrome renders this font horribly on both Linux and Windows,
   with horrible kerning and the entire string shifted slightly off-
   center to the right. May be best to just detect Chrome and hide
   this altogether to avoid this rendering defect, which seems too
   be insoluble.
*/
#Message {
  position: relative;
  font-size: 8pt;
  top: -5pt;
  left: -2pt;
  text-align: center;
  background: transparent;
  display: block;
  /* For some reason, no color setting of gray, or near-gray,
     is honored by Firefox; text renders black. Test in other
     browsers, and just give up for now.
  color: #AAA; */
  color: rgba(0, 0, 0, 0);
  text-shadow: 0 0 0 #aaaaaa; }

.ui-button .ui-icon.my_custom_icon {
  /*background-image: url(themes/images/reset.png) !important;*/ }

.ui-tooltip {
  font-size: 10pt;
  max-width: 500px; }

p.svgWarning {
  margin-left: auto;
  margin-right: auto;
  margin-top: 35px;
  text-align: left;
  color: #AA0000;
  display: none;
  /* Try setting this to 'none' by default, to eliminate sporadic appearance when reloading page. */
  border: solid 3px #aa0000;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 35px;
  padding-right: 35px;
  width: 60%;
  font-weight: bold;
  font-size: 14pt;
  line-height: 140%; }

.svgWarning a:visited,
.svgWarning a:hover,
.svgWarning a:link {
  color: #770000; }

@media print {
  /* Hide all elements belonging to Jquery UI from printing. */
  [class|="ui"] {
    visibility: hidden;
    overflow: hidden !important;
    display: none !important; }

  *[class|="prefs"] {
    visibility: hidden;
    display: none; }

  *[id|="prefs"] {
    visibility: hidden;
    display: none; }

  select {
    visibility: hidden;
    display: none; }

  label {
    visibility: hidden;
    display: none; }

  .hideable {
    display: none; }

  /* We have to use visibility:hidden here to hide tooltips
     when printing (Chrome mobile) because of the way JQUI
     structures them; display:none won't work.
  */
  .ui-tooltip {
    visibility: hidden;
    display: none; }

  body {
    background: white; }

  #calendar_grid {
    stroke-width: 0.5;
    stroke: white; }

  #MessageBackground {
    display: inline; }

  /* Note: Chrome doesn't display fractional-point lines
     at all, so bumped this to a full point.
  */
  #Outline {
    border: solid 1pt #aaaaaa; }

  #DateSelector {
    display: none; }

  #DateDisplay {
    display: table;
    font-weight: bold;
    font-size: 30pt;
    margin-bottom: 4pt; }

  .wkdayBackground {
    fill: white; } }
/* Workaround for gray text being rendered as black; Message styling
   above fixes this, but Chrome requires this alternative approach.
*/
@media print and (-webkit-min-device-pixel-ratio: 0) {
  #Message {
    color: #AAA;
    text-shadow: none; }
     }
    
    
    /*new stuff*/
    
   body{
    margin: 0px 0 0 0; /* shorthand T-R-B-L */
	font-family: Verdana, Arial, Helvetica, sans-serif;

    background-color:#000;
    }
    
    a{
        color:#fff;
    }
    

    
    
    p, p span{
        font-family: 'PT Sans Caption', sans-serif;
        font-weight:400;
        font-size:16px;
        color:#ABA7A7;
        line-height:22px;
        margin-left:0px;
        
    }
    
    .pAdjust{
        
        margin-left:37px;
        margin-right:33px;
        
    }
    
    
    
    h1{

      font-size:16px;
      margin-bottom:5px;
      margin-top:20px;
        
    }
    
    h2{
        text-transform:uppercase;
        font-size:13px;
        margin-bottom:12px;
        
        
        
    }
    
    #naver{
        position:absolute; 
        right:45px; 
        top:85px;
           
    }

    #naver div{
        border-radius: 5px;
        padding:10px 15px;
        background-color:#444343;
        float:right;
        margin-left:10px;
        text-transform:uppercase;
        font-size:13px;
        
    
    }

#naver a{
    text-decoration:none;
   color:#D9D6D6; 
}

#naver a:hover{
    color:#ffcc6e;
    cursor:pointer;
    text-decoration:underline;
}

.nextBackBtn{
    text-transform:uppercase;
    font-size:14px;
    display:none;
       
    
    
}

.nextBackBtn a{
    text-decoration:none; 
    color:#1A9BFC;
    
}

.nextBackBtn a:hover{

    text-decoration:underline; 
    color:#64bbfc;
    
}


#placePhase{
    
    width:100%; 
    margin-left:0px; 
    color:#FFF; 
    margin-bottom:35px; 
    float:left; 
    /*display:none;*/ 
    position:relative;
    margin-top:0px;
    
}




    


.extraContain{
    background-color:#000;
    margin-bottom:60px; 
    
        
    }
    
    #headImg{
    background-image:url(/images/header_92015.jpg);
    background-repeat: no-repeat;
    width:1024px;
    height:223px;
    
    
}



    



#ad{
    float:right; margin-right:30px;
    width:300px;
    height:600px;
    /*background-color:#ccc;*/
}

#fullMoonDiv{
    
    padding:20px 25px 10px 25px; 
    width:100%; 
    min-height:170px; 
    background-color:#323232; 

    margin-bottom:0px; 
    font-size:13px;
    
}

#todayMoonDiv{
    
    padding:20px 25px 10px 25px; width:100%; background-color:#323232; margin-left:10px; margin-bottom:0px; font-size:13px;
    
}





    




/* nav css ---- */
    
#mobNav{
    width:30px;
    height:30px;
    position:absolute;
    z-index:100;
    right:40px;
    top:85px;
    overflow:hidden;
    display:none;
}

#mobNav div{
    height:4px;
    background-color:#000;
    width:100%;
    margin-bottom:6px;
    position:absolute;
}

#mobNav div#line2{
    top:10px;
}

#mobNav div#line3{
    top:20px;
}

#mobNavBg{
    position:fixed;
    top:0px;
    z-index:101;
    width:100%;
    height:100%;
    background-color:#ccc;
    display:none;

}

#mobNavwid{
    position:fixed;
    width:0px;
    display:inline-block;
    background-color:#000;
    z-index:101;
    top:80px;
    right:20px;
    padding-top:35px;
    padding-bottom:25px;
    overflow:hidden
    
}

#mobNavwid li{

 
 list-style-type: none;
 width:300px;
 margin-bottom:20px;
 padding-bottom:15px;
 margin-left:20px;
 border-bottom-style: solid;
 border-bottom-color:#3E3E3E;
 border-bottom-width:1px;

    
}
#mobNavwid li img{
    margin-right:15px;
}


#mobNavwid li a{
    color:#c5b498;
    text-transform:uppercase;
    font-size:14px; 
    font-weight:bold;
    font-family:Verdana, sans-serif;
    text-decoration:none;
    vertical-align:7px;
    
}

/*mobile nav*/
.box_rotate {
  -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(45deg);  /* IE 9 */
        -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
         transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

.box_rotate2 {
  -webkit-transform: rotate(-45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(-45deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-45deg);  /* IE 9 */
        -o-transform: rotate(-45deg);  /* Opera 10.50-12.00 */
         transform: rotate(-45deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition2 {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

/*end mob nav start desktop nav*/

#Navwid{
    
    width:300px;
    display:inline-block;
   
    z-index:101;
    top:30px;
    right:40px;
    padding-top:30px;
    padding-bottom:25px;
    overflow:hidden;
    position:absolute;
    
}

#Navwid li{

 
 list-style-type: none;
 width:300px;
 margin-bottom:10px;
 padding-bottom:10px;
 margin-left:0px;
 border-bottom-style: solid;
 border-bottom-color:#3E3E3E;
 border-bottom-width:1px;

    
}
#Navwid li img{
    margin-right:15px;
}


#Navwid li a{
    color:#c5b498;
    text-transform:uppercase;
    font-size:14px; 
    font-weight:bold;
    font-family:Verdana, sans-serif;
    text-decoration:none;
    vertical-align:7px;
    
}

#Navwid li a:hover{
    color:#30a2ee;
   text-decoration:underline;
}

/*end desktop nav*/



#dateBar{
    margin-left:auto; margin-right:auto; width:100%; padding-left:0px; padding-right:0px;
} 

#dateBarIn{
    background-color:#333333;  
    padding:0px; 
    margin-top:0px; 
    margin-bottom:0px; 
    height:46px; 
    width:100%;  
    text-align:center; 
    vertical-align:middle; 
    text-transform:capitalize; 
    font-size:20px; 
    font-weight:bold; 
    position:relative;
    color:#D0CECE;
} 

#illumchart{
       
      width:100%; 
      
      background-color:#323232; 
      position:relative; 
      padding:20px 35px; 
      text-align:center; 
      font-size:.9em; 
      display:inline-block;
      margin-top:6px;
      margin-bottom:20px;
      color:#fff;
      
    
   }
   
   .mobileAd{
       
       display:none;
       
       
   }
   
    .moreLinker{
        color:#2aa0e7;
        font-size:1em;
        font-style:italic;
        line-height:28px;
        
    }
    
    .moreLinker:hover{
        text-decoration:underline;
        
    }
    
     #fullMoonDiv, #todayMoonDiv{
       font-size:1em; 
       color:#D5D5D5;   
        
    }
    
    #fullMoonDiv span{
     color:#999;
     font-size:1em; 
        
    }


   
    
    #dayMonnIlluCopy div{
    /*
    float:left; 
    width:116px;
    text-align:center;
    */
    
    }
    
    #dayMonnIlluCopy div span{
     color:#FAB654; 
        
    }
    
    #todayMoonInner{
        float:left; width:280px; margin-top:28px;
    }
   
  
   



@media only screen and (max-width : 30em) {
    
    
    p.firstP{
        font-size:13px;
        line-height:18px;
      margin-top:20px;
      margin-right:0px;
  }
  
  #todayMoonInner{
        float:left;
        width:100%; 
        margin-top:0px;
        text-align:center;
    }
    
    #rToday{
        margin-left:auto;
        margin-right:auto;
        display:block;
        width:300px;
        height:300px;
        margin-top:-30px;
        margin-bottom:-30px;
    }
  
  button{
      margin-top:10px;
  }

    
    #Navwid{
        
     display:none;   
    }

    .mobileAd{
     width:320px; 
     display:block;
     margin-left:auto;
     margin-right:auto; 
     margin-top:15px;
     height:50px;
    
        
    }
    
    .adDesktop{
        display:none;
    }
    
    .centered {
  margin-left: auto;
  margin-right: auto; 

  
  }
  
    .mainCopy{
      margin-top:70px;
      padding-left:10px;
      
      padding-right:10px;
     
  }

    
    .cutCopy{
     
     display:none;   
        
    }
    
    
    #mobNav{
       top:20px;
       right:30px;
       display:block;
       position:fixed;
       z-index:101;
    }
    
     p, h1, h2{
        margin-left:5px;
        margin-right:5px;
        
    }
    
    h1, h2{
        font-size:20px;
        font-weight:bold;
        
        
    }
    
    
    
    body{
        font-size:16px;
        margin:0px;
        padding:0px;
          }
          
   
    
    #headImg{
     
     width:100%; 
     height:100px;
     background-image:url(/moonphasesource/images/mobile_header.png);
     /*background-color:#890098;*/
     margin-bottom:20px;
     position:fixed;
     left:0px;
     top:0px;
     z-index:100;
     opacity:1;
    }
    

   
   #giantHeads{
       width:300px;
       height:55px;
   }
   
   #dateBarIn{
       margin-top:20px;
       font-size:14px;
       height:36px;
   }
   
   #dateBarIn img{
       width:32px;
       height:32px;
   }
   
   .btnNav{
    margin-top:-80px;
}
   
   
   #Calendar{

   }
   
   .moreLinker{
        color:#2aa0e7;
        font-size:16px;
        font-style:italic;
        
    }
   
   #illumchart{
       
       width:100%;
       padding-left:0px;
       font-size:14px;
    
   }
   
   #dayMonnIllu{
       margin-top:15px;
    /*padding-left:10px;*/   
       
   }
   
  #illumchart #illuPass1, #illumchart #lutime1,  #illumchart #illuPass3, #illumchart #lutime3{
      
      display:none;
  }
  
  #illumchart #illuPass0,  #illumchart #illuPass2,  #illumchart #illuPass4{
   width:120px;
   height:120px;   
      
  }
    #dayMonnIlluCopy{
        margin-left:15px;
    }
  #dayMonnIlluCopy div{
 
  }
  
  .active .phaseLabel{
      font-size:1em;
  

    
  }
   
   #placePhase{
       
       width:100%;
       padding-left:0px;
       padding-right:0px;
       margin-right:0px;
       margin-left:0px;
       margin-top:100px;
       position:relative;
       
   }
   

   #dateBarIn{
       margin-left:0px;
       
   }
    
   
    .extraContain, div.container{
      
     width:100%;   
       
   }
   
    #fullMoonDiv{
        
        margin-top:60px;
        margin-left:0px;
      
        width:100%;
        margin-bottom:0px;
        float:none;
        }
        
        #todayMoonDiv{
            margin-left:0px;
            width:100%;
            margin-top:10px;
             float:none;
            
            
        }
        
        
    
    .noSmallScreen{
        display:none;
    }
    
    
   

    
    #ad{
     display:none;   
        
    }
    
   

#svg_calendar{
    margin-left:0px;
    width:100%;

    
}

.active .dateLabel{
   font-size:22px;
}

#dateBar{
    width:100%;

}
    
   
    
    .movingBtns{
        display:none;
    }
    
    .SmallScreenArrows{
        display:block;
        width:30px;
        background-color:#D4A1A2;
    }
    
    #ad{
    margin-right:5px;
    margin-top:340px;
}



    
    #todayMoonContainer{
     
     margin-left:0px;
    
        
        
    }
    h2.phaseSt{
     
     font-size:24px;   
        
    }
    

    
    
   
    
}  


 @media only screen and (max-width : 22em) { 

/* ==========================================================================
   @20em
   ========================================================================== */

#Calendar{
       
       width:320px;
       margin-top:-20px;
       
   }
   
   #dayMonnIlluCopy{
        margin-left:0px;
    }
    
     #dayMonnIllu{
    padding-left:0px; 
   width:260px;
       
   }
    
    

   }