﻿/* Common to 15 and 16 */

/*-- Link --*/
A { text-decoration:none; -moz-text-decoration-style:none;  border-bottom:1px dotted #275B8A;  color:#275B8A;} /* Was: #275B8A */
A:hover { border-bottom:1px solid #275B8A; }
A:Visited {  } 

/*-- Headers --*/
H1, H2, H3, H4, H5 { color:#333333; line-height:normal; padding:1rem 0;  }
H1 { font-family:'Arvo', Verdana; font-size: 1.5rem; }
H2 { font-family:'Arvo', Verdana; font-size: 1.4rem; }
H3 { font-family: Verdana; font-size:1.1rem;   }
H4 { font-family: Verdana; font-size:.8rem;   color:#999999; }
H5 { font-family: Verdana; font-size:1rem;   border-top:1px dotted #cccccc; }
H1 A, H1 A:hover { color:#333333; border-color:#333333; }

H1 + H2, H1 + H3, H2 + H3, H3 + H4, H4 + H5 { padding-top:0; }

DIV.Form P, DIV.P { margin: 0; padding:1rem 0; }

     
    DIV.Form { font-family:Verdana; font-size:.9rem; line-height:normal;  }
    DIV.Inset { margin-left:32px; }
    
    DIV.Label { padding:1rem 0 4px 0;   } /* Label for form input */
    
    UL, OL { margin-left:1.3rem; margin-top:0;  }
    LI { margin-bottom:.5rem; } 

/* Only used in swaying */    
H2.Flush { padding-bottom:2px; font-size:1.2rem; }

/*-- Elements --*/
STRONG  { background-color:#FDFDA0; font-weight:normal; }

/*-- QuoteBox --*/
DIV.QuoteBox  {
        border:1px dotted #ccc; background-color:#efefef; 
        padding:8px; margin:0 32px 0 32px; }
DIV.QuoteBox--Right { float:right; max-width:30%;  margin:0 -32px 16px 16px; }
DIV.QuoteBox P {font-family:Georgia; font-style:italic; font-size:1.3rem; line-height:1.5rem; color:#666666;  }
DIV.QuoteBox P.Source { color:#666666;  font-family:Verdana; font-style:normal; font-size:.8rem; line-height:normal; margin-bottom:0; padding-bottom:0; margin-top:-16px; padding-top:0; }
DIV.QuoteBox--Right + P { margin-top:0; padding-top:0; }

/*-- Amazon --*/
DIV.Amazon-Ad 
    {
        width:300px; height:250px; padding:24px 4px 0 4px;
        border:1px dotted #cccccc; text-align:center;
        font-size:.85rem; color:#666666; 
        vertical-align:middle; line-height:normal;
        position:relative;
        background-image:url(../pix/layout/ig-recommends.png);
        background-position:center top;
        background-repeat:no-repeat;
        display:inline-block;
        background-color:#ffffff;
    }
    DIV.Amazon-Ad A { font-weight:bold; border:none; }
    DIV.Amazon-Ad DIV { margin:4px 0; }

/*-- Alerts ------------------------------------------------*/
    DIV.Alert {
        font-family: Verdana; font-size:1rem; line-height:normal; color: #666666;
        max-width:300px;
        border:1px solid #E0E0E0;
        background: #ECEDE9; 
        padding:8px;
        margin:16px 0;
    }
    DIV.Alert:empty { display:none; }
    DIV.Alert P { color:inherit; font-family:inherit; font-size:inherit; padding:0; }
    DIV.Alert P + P { padding-top:1rem; }
    DIV.Alert H2 { padding-top:0; }
    
    DIV.Alert--Wide { max-width:100%; }
    
    DIV.Alert--Readme 
    {
        background:#EFEFEF url(../Pix/Layout/arrow.png) no-repeat 8px 8px;
        padding-left:40px; 
    }
    
    DIV.Alert--Warn { 
      color: #804602; border-color: #ffcf91; 
      padding-left:40px; 
      background: #f7e0b2 url(../Pix/Layout/Warning.png) no-repeat 8px 8px;
    }
    DIV.Alert--Warn H2 { color: #804602; }
    DIV.Alert--Warn A { color: #804602; border-color: #804602;  }
    
    DIV.Alert UL { font-size:.9rem; line-height:normal; }
   /* DIV.Alert--Warn UL { margin:0; }
    DIV.Alert--Warn LI { margin:0 0 0 4px; list-style-type:none; } */
    
    DIV.Alert--Success { 
      color: #65715B; border-color: #B4D264; 
      padding-left:40px; 
      background: #e4efc0 url(../Pix/Layout/Success.png) no-repeat 8px 8px;
    }

    DIV.Alert--Info { 
      padding-left:40px; 
      background: #ECEDE9 url(../Pix/Layout/Info.png) no-repeat 8px 8px;
    }

    DIV.Alert--Blue {
  border-color: #A9C3DB;
  /* color: #50737E; */
  background: #c3d1e1;
      background: -moz-linear-gradient(top, #e6edf4 0%, #c3d1e1 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e6edf4), color-stop(100%, #c3d1e1));
      background: -webkit-linear-gradient(top, #e6edf4 0%, #c3d1e1 100%);
      background: -o-linear-gradient(top, #e6edf4 0%, #c3d1e1 100%);
      background: -ms-linear-gradient(top, #e6edf4 0%, #c3d1e1 100%);
      -pie-background: linear-gradient(#e6edf4, #c3d1e1);
      background: linear-gradient(top, #e6edf4 0%, #c3d1e1 100%)
}
    DIV.Alert--Blue DIV, DIV.Alert--Blue DT, DIV.Alert--Blue DD { color:#000000; }
 
/*-- Photo ------------------------------------------------*/    
/* Shadow effect is not working on content pages */
DIV.Photo { /* Must attach to a DIV, not an IMG! */ 
    display:inline-block;
	border-radius:2px;
	position:relative; 
	padding:8px; margin:1px;
	background:#efefef; 
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
	-o-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
} 
DIV.Photo:before, DIV.Photo:after {
	content: "";
	position: absolute;
	    z-index: -1; 
	-ms-transform: skew(-3deg,-6deg);
	-webkit-transform: skew(-3deg,-6deg); 
	-o-transform: skew(-3deg,-6deg); 
	-moz-transform: skew(-3deg,-6deg); 
	bottom:  14px; 
	box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
	height: 50px;
	left: 1px;
	max-width: 50%;
	width: 50%; 
}
DIV.Photo:after {
	-ms-transform: skew(3deg,6deg); 
	-webkit-transform: skew(3deg,6deg); 
	-o-transform: skew(3deg,6deg); 
	-moz-transform: skew(3deg,6deg); 
	left: auto;
	right: 1px;
}           

DIV.Photo:empty { display:none; }
    
DIV.Photo A { border:none; }
    
/* Reduce raised edge effect on larger images */
DIV.Photo--Big:before, DIV.Photo--Big:after {
    max-width: 10%; width: 10%; }   
        
DIV.Photo--Blue IMG { border:6px solid lightblue; }
DIV.Photo--Pink IMG { border:6px solid lightpink; }         
      
DIV.Photo--F IMG { border:4px solid lightpink; }
DIV.Photo--F { padding:4px; }
    
DIV.Photo--M IMG { border:4px solid lightblue; }
DIV.Photo--M { padding:4px; }

/*-- Buttons ----------------------------------------------*/
/* (http://www.webdesignerwall.com/demo/css-buttons.html)  */
.Button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 4px 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: Verdana; 
	font-size:.8rem;
	font-weight: bold;
	padding: 4px 1em; 
	border:none; 
	-webkit-border-radius: 2em;  
	-moz-border-radius: 2em;  
	border-radius: 2em; 
	/*
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	*/
	webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow:  0 1px 1px rgba(0,0,0,0.3); /* inset 0 1px 1px #fff */
    
    /* Default color:White  */
    color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
    
.Button--Green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}

.Button--Blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}

.Button--White {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
    
.Button--Pink {
    color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
	background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}

    TABLE.Tbl { border-collapse: collapse; border:none; margin:16px 0; }
    TABLE.Tbl TH, TABLE.Tbl TD, TABLE.Tbl P 
        { font-family:Verdana; font-size:.8rem; line-height:1rem;  color:#666666; font-weight:normal;}
    TABLE.Tbl TH { padding:0 8px; border-bottom: solid 1px #cccccc;  }
    TABLE.Tbl TD {
        position:relative; z-index:1;
        border:solid 1px #cccccc;  
        text-align:center;  padding:8px;                  
    background: transparent;
    background: -moz-linear-gradient(top, #F3F3E9 0%, #ffffff 30%, #ffffff 70%, #F3F3E9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3F3E9), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#F3F3E9));
    background: -webkit-linear-gradient(top, #F3F3E9 0%,#ffffff 30%,#ffffff 70%,#F3F3E9 100%);
    background: -o-linear-gradient(top, #F3F3E9 0%,#ffffff 30%,#ffffff 70%,#F3F3E9 100%);
    background: -ms-linear-gradient(top, #F3F3E9 0%,#ffffff 30%,#ffffff 70%,#F3F3E9 100%);
    background: linear-gradient(to bottom, #F3F3E9 0%,#ffffff 30%,#ffffff 70%,#F3F3E9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3F3E9', endColorstr='#EBEBE1',GradientType=0 );
    }
    TABLE.Tbl TD.Tbl--Big { font-size:1rem; }
    TABLE.Tbl TD.Tbl--Left { text-align:left; }
    TABLE.Tbl TD.Margin { background:none; border:none; }

    TABLE.Tbl TD.Girl {background: #FAEFF7;
        background: -moz-linear-gradient(top, #F9DAF1 0%, #FAEFF7 30%, #FAEFF7 70%, #F9DAF1 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9DAF1), color-stop(30%,#FAEFF7), color-stop(70%,#FAEFF7), color-stop(100%,#F9DAF1));
        background: -webkit-linear-gradient(top, #F9DAF1 0%,#FAEFF7 30%,#FAEFF7 70%,#F9DAF1 100%);
        background: -o-linear-gradient(top, #F9DAF1 0%,#FAEFF7 30%,#FAEFF7 70%,#F9DAF1 100%);
        background: -ms-linear-gradient(top, #F9DAF1 0%,#FAEFF7 30%,#FAEFF7 70%,#F9DAF1 100%);
        background: linear-gradient(to bottom, #F9DAF1 0%,#FAEFF7 30%,#FAEFF7 70%,#F9DAF1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9DAF1', endColorstr='#F9DAF1',GradientType=0 );
    }
    TABLE.Tbl TD.Boy   {
        background: #EFF5F7;
        background: -moz-linear-gradient(top, #D6EFF7 0%, #EFF5F7 30%, #EFF5F7 70%, #D6EFF7 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D6EFF7), color-stop(30%,#EFF5F7), color-stop(70%,#EFF5F7), color-stop(100%,#D6EFF7));
        background: -webkit-linear-gradient(top, #D6EFF7 0%,#EFF5F7 30%,#EFF5F7 70%,#D6EFF7 100%);
        background: -o-linear-gradient(top, #D6EFF7 0%,#EFF5F7 30%,#EFF5F7 70%,#D6EFF7 100%);
        background: -ms-linear-gradient(top, #D6EFF7 0%,#EFF5F7 30%,#EFF5F7 70%,#D6EFF7 100%);
        background: linear-gradient(to bottom, #D6EFF7 0%,#EFF5F7 30%,#EFF5F7 70%,#D6EFF7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6EFF7', endColorstr='#D6EFF7',GradientType=0 );
        }
       

/*-- Flex --*/
DIV.Flex1 {  float:right; margin:0 -16px 16px 16px; }

@media screen and (max-device-width : 667px) {
	DIV.Flexer {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: start;
		-moz-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
	}

		DIV.Flexer DIV.Flex1 {
			float: none;
			margin-top: 16px;
			-webkit-box-ordinal-group: 2;
			-moz-box-ordinal-group: 2;
			-ms-flex-order: 1;
			-webkit-order: 1;
			order: 1;
		}
}

/* ---------------------------------------------------------------------------
   -- Post Bubble
   ---------------------------------------------------------------------------*/
DIV.PostBubble 
    {
    padding:0px 8px 8px 8px;
    margin:0px 0px 0px 0px;
    border: 2px solid #cccccc;
    color: #333;
    background-color: #ffffff;
    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    
    -webkit-box-shadow: 4px 4px 5px rgba(170, 170, 170, 0.33);
    -moz-box-shadow:    4px 4px 5px rgba(170, 170, 170, 0.33);
    box-shadow:         4px 4px 5px rgba(170, 170, 170, 0.33);
    
    background-size: auto 68px;  background-repeat:repeat-x;
    /*
    background-image: -ms-linear-gradient(top, #F7F7ED 0%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(top, #F7F7ED 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(top, #F7F7ED 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F7F7ED), color-stop(1, #FFFFFF));
    background-image: -webkit-linear-gradient(top, #F7F7ED 0%, #FFFFFF 100%);
    background-image: linear-gradient(to bottom, #F7F7ED 0%, #FFFFFF 100%);
    */
    }
    
   DIV.PostBubbleSmall
   {
    padding:0px 8px 8px 8px;
    margin:4px 0px 4px 38px;
    border: 1px solid #cccccc;
    color: #333;
    background-color: #ffffff;
    
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    
    -webkit-box-shadow: 2px 2px 2px rgba(170, 170, 170, 0.33);
    -moz-box-shadow:    2px 2px 2px rgba(170, 170, 170, 0.33);
    box-shadow:         2px 2px 2px rgba(170, 170, 170, 0.33);
    
    
   }
   
   DIV.PostBubble DIV.Date, DIV.PostBubbleSmall DIV.Date
   {
    float: right;
    font-family: Courier New;
    font-size: 10pt;
    color: #999999;
    padding: 8px 8px 0px 0px;
    text-align: right;
    }

    DIV.PostBubble DIV.Author 
    {
    font-family: Verdana;
    font-weight: bold;
    font-size:12pt;
    padding: 8px 0px 8px 8px;
    color: #999999;
    border-bottom:solid 1px #cccccc; 
    margin:0px -8px 0px -8px;
    }
    
    DIV.PostBubbleSmall DIV.Author
    {
        font-family: Verdana;        
        padding: 4px 0px 4px 8px;
        color: #999999;
        border-bottom:solid 1px #cccccc; 
        margin:0px -8px 0px -8px;
    }
    
    DIV.PostBubble DIV.Author A { border:none; color:#999999; }
    DIV.PostBubble DIV.Author A:hover { border-bottom:solid 1px #999999; }
    
    DIV.PostBubble DIV.Content { line-height:1.3em; min-width:300px; padding:8px 4px 8px 4px;}
    DIV.PostBubble DIV.Content P { font-family: Verdana; font-size:12pt; }

    DIV.PostBubble DIV.Siggy
    {
    margin: 1em -8px 0px -8px;
    border-top: solid 1px #cccccc;
    padding: 4px 16px 0px 16px;
    font-size: 8pt; font-family: Arial; color: #999999; 
    text-align: left;
    max-height:200px;
    overflow:auto;  /* scroll vertically if too tall */
    }
    
    DIV.PostBubble DIV.Siggy P { font-size: 8pt; font-family: Arial; color: #999999;  }

    DIV.PostBubble DIV.Bio /* for profile */
    {
    margin: 1em -8px 0px -8px;
    border-top: solid 1px #cccccc;
    padding: 4px 16px 0px 16px;
    font-size: 12pt; font-family: Verdana; color: #999999; 

    }
    DIV.PostBubble DIV.Bio P { font-size: 12pt; font-family: Verdana;   }

    /* Quote within a post */
    DIV.PostBubble DIV.Quote
    {
        font-family: Verdana; font-size:9pt; 
        border: 1px dotted #cccccc;
        color: #333;
        background-color: #ffffff;
    
        margin:8px 8px 8px 8px;
        padding:8px; 
        -webkit-border-radius: 10px; 
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    DIV.PostBubble DIV.Quote P { font-family: Verdana; font-size:9pt; }    
    DIV.PostBubble DIV.QuoteMe { padding-left:18px; background-image:url(pix/quote.png); background-repeat:no-repeat;  font-size:9pt; font-weight:bold; color:#999999; margin:0px; }
     
    /* Attachment within a post */
    DIV.PostBubble IMG.SizeMe { max-height:550px; max-width:550px; }
    DIV.PostBubble A.Attach 
    {
        font-weight:bold; 
        background-image: url(attach.png);
        background-repeat:no-repeat;
        background-position: 0px 8px;
        padding:8px 0px 0px 16px;
        border:none;
        text-decoration:underline;         
    } 
    
    DIV.PostBubble INPUT.Type, DIV.PostBubble TEXTAREA
    { font-family: Courier New; font-size:12pt; 
      margin: 4px 0px 4px 0px; padding:8px; width:534px;
                                      
                                      }
/*-- Linker --*/
    DIV.Linker 
    {
    font-family: Verdana; font-size: .8rem; line-height:1rem;
    display: inline-block; 
    padding: 8px; 
    margin: 16px 16px 16px 0px;
    position: relative; 
    max-width:300px;
    /* Border */    border-color: #B4D264;
                    border-width: 1px !important;
                    border-color: rgba(255, 255, 255, 0.5) !important;
                    border-style: solid; 
                    -moz-border-radius: 4px;
                    -webkit-border-radius: 4px;
                    -khtml-border-radius: 4px;
                    -o-border-radius: 4px;
                    -ms-border-radius: 4px;
                    border-radius: 4px;
    /* Shadow */    -moz-box-shadow: 0 1px 1px #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.5);
                    -webkit-box-shadow: 0 1px 1px #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.5);
                    -o-box-shadow: 0 1px 1px #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.5);
                    -ms-box-shadow: 0 1px 1px #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.5);
                    -khtml-box-shadow: 0 1px 1px #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.5);
                    box-shadow: 0 1px 1px #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.5);
                    behavior: url(css/PIE.htc);
    /* BG */        background: #e4efc0;
                    background: -moz-linear-gradient(top, #e4efc0 0%, #c1db85 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4efc0), color-stop(100%,#c1db85));
                    background: -webkit-linear-gradient(top, #e4efc0 0%,#c1db85 100%);
                    background: -o-linear-gradient(top, #e4efc0 0%,#c1db85 100%);
                    background: -ms-linear-gradient(top, #e4efc0 0%,#c1db85 100%);
                    background: linear-gradient(top, #e4efc0 0%,#c1db85 100%);
                    -pie-background: linear-gradient(#e4efc0, #c1db85);
    }
	div.Linker div { padding-bottom:8px; }
    DIV.Linker P { padding-left:28px; padding-top:4px; min-height:28px; font-family:'Arvo'; font-size:1rem; font-weight:bold; 
                   background: transparent  url(../app_masters/pix/arrow.png) no-repeat;}
    DIV.Linker A { font-weight:bold; }
    DIV.Linker P A { color: #333333; border-color:#333333; }

	/*-- Buttons -----------------------------------------------*/

    .Btn {
        display: inline-block;
        cursor: pointer;
        padding: .2em 1em .275em;
        margin-right: 4px;
    
        background: #e9e9e9;
        box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
        font-size: .8rem;
        font-weight: normal;
        text-decoration: none;
        color: #717171;
        outline:none; 
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
        background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
        border: solid 1px #c0c0c0;
        border-radius: 3px;
        -webkit-border-radius: 3px;  /* .5em */; 
	    -moz-border-radius: 3px;  /* .5em; */
    }

    A.Btn  {  text-decoration:none;  }
    A.Btn:Hover { text-decoration:none; border-bottom:solid 1px #c0c0c0; }

	DIV.SideBox { margin:16px 0 16px 16px; text-align:center; border:1px dotted orange; }
DIV.SideBox DIV, DIV.SideBox P { max-width:200px; margin:0 auto 0 auto; font-size:.8rem;  line-height:normal; color:#666666;  }

DIV.SideBox--Left { float:left; margin:0 16px 16px 0; }

BLOCKQUOTE { margin:12px auto; max-width:300px; font-family:'Source Sans Pro', Arial; line-height:normal; border:1px dotted #666666; padding:8px; font-size:1rem; font-weight:bold; display:table; }

OL.Reference { font-size:.8rem; line-height:normal;}
OL.Reference LI { padding-bottom:0px; margin-bottom:0; }


@media screen and (max-width:667px) { /* up to iPhone6 landscape */
        DIV.SideBox { max-width:100%; }
        DIV.SideBox--Left { float:none; margin:16px auto 16px auto; border:1px solid #cccccc;}
}