@media screen and (orientation:portrait) {

  .item {  font-family : cursive; 
        font-size: 1.3em;}  
  .bubble {  min-height: 250px; }
  }
  
  @media screen and (orientation:landscape) {
  .item {  font-family : cursive; 
        font-size: 1.2em;}  
  .bubble {  min-height: 150px;}      

  p.title { font-size:0.9em;
      margin-top: 2px;
      margin-bottom: 2px;
      display: inline-block;
      vertical-align:top;
      width:45%}
  div.title { font-size:0.9em;
      margin-top: 2px;
      margin-bottom: 2px;
      display: inline-block;
      vertical-align:top;
      width:40%}
     
  }
  
  body {  background-color: #000}
  .calendar {
        text-align:center; 
        font-family:cursive; 
        font-size:1.4em;}
  .day {  width: 100%; 
        background : #eec;
        margin-left:auto;
        display: block;
        position: relative;
        top:50px;
        text-align: center;}  
  h1  {  font-family: cursive; 
          color: #0F0;}        
.ios-bar {
   position:fixed;
    width: 100%;
    background-repeat:repeat-x;
    background-color: rgba(74,108,155,1);/*change this and the background color for the :before element*/
    background-image : -webkit-linear-gradient(
        bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
        );

    z-index : 0;
    box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
        0 1px 2px rgba(0,0,0,0.8)inset;
    display : block; 
    text-align:center;
    color:#fff;
    text-shadow : 0px -1px 0px #000;
    top:0px; 
    left:0px; 
    height:50px; 
    font-size: 1.8em; 
    font-weight:700; 
    font-family : cursive;
}  

  .ios-arrow {
      position: absolute;
      bottom:40px;
        background-repeat:repeat-x;
        background-color: rgba(74,108,155,1);/*change this and the background color for the :before element*/
        background-image : -webkit-linear-gradient(
            bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 50%,
            rgba(255,255,255,0.1) 50%,
            rgba(255,255,255,0.3) 100%
            );
        height:40px;
        width: 30%;
        z-index : 0;
        box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
            0 1px 2px rgba(0,0,0,0.8)inset;    
        display : block; 
        text-align:center;
        color:#fff;
        text-shadow : 0px -1px 0px #000;
        line-height : 40px;
        font-family : HelveticaNeue;
        -webkit-background-size : 40px;
        font-size: 0.8em;
    } 
    
  .rightbar {  right:0px; 
        border-left:1px solid #aaa;}
        
  .leftbar {  left: 0px;
        border-right:1px solid #aaa;}
        
  .midbar {  bottom:40px; 
        left:30%; 
        width:40%; }
  
  .insdisplay {
    display:none;
  }
  .sharedisplay {
    display: block;
  }
  .instructions {
      position: absolute;
      bottom:80px;
        background-repeat:repeat-x;
        background-color: rgba(74,108,155,1);/*change this and the background color for the :before element*/
        background-image : -webkit-linear-gradient(
            bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 50%,
            rgba(255,255,255,0.1) 50%,
            rgba(255,255,255,0.3) 100%
            );
        height:40px;
        width: 40%;
        left: 30%;
        box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
            0 1px 2px rgba(0,0,0,0.8)inset;    
        text-align:center;
        color:#fff;
        text-shadow : 0px -1px 0px #000;
        line-height : 40px;
        font-family : HelveticaNeue;
        -webkit-background-size : 40px;
        font-size: 0.8em;
        margin: auto;
  }
  .share {
      position: absolute;
      bottom:80px;
        background-repeat:repeat-x;
        background-color: rgba(74,108,155,1);/*change this and the background color for the :before element*/
        background-image : -webkit-linear-gradient(
            bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 50%,
            rgba(255,255,255,0.1) 50%,
            rgba(255,255,255,0.3) 100%
            );
        height:40px;
        width: 40%;
        left: 30%;
        box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
            0 1px 2px rgba(0,0,0,0.8)inset;    
        text-align:center;
        color:#fff;
        text-shadow : 0px -1px 0px #000;
        line-height : 40px;
        font-family : HelveticaNeue;
        -webkit-background-size : 40px;
        font-size: 0.8em;
        margin: auto;
  }