*
{
    margin:0;padding:0;
}
body
{
    font: 12px avenir, 'proxima-nova', 'helvetica';
    margin:0px;
}
html,body
{
    height: 100%;
}
header, .preview-window-wrapper, footer
{
    width: 100%;   
}
@font-face
{
    font-family: ProximaNova-Regular;
    src: url(https://static.allegiancetech.com/Shared/webfonts/2D41A5_28_0.eot);
    src: url(webfonts/2D41A5_28_0.eot?#iefix) format("embedded-opentype"),url(https://static.allegiancetech.com/Shared/webfonts/2D41A5_28_0.woff2) format("woff2"),url(https://static.allegiancetech.com/Shared/webfonts/2D41A5_28_0.woff) format("woff"),url(https://static.allegiancetech.com/Shared/webfonts/2D41A5_28_0.ttf) format("truetype");
}
.toolbar {
	background: #dedede;
}

.preview-window {
	width: 0;
	height: 0;
	z-index: 1000;
    position: relative;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    top: -40px;
    padding-top: 40px;
}

footer {
	background: url(ruler.png) no-repeat;
	height: 40px;
    z-index: 50;
    position:relative:
}

.preview-window-wrapper {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0;
    min-height: 0;
    overflow-x:auto;
    top: -40px;
    z-index: 75;
}
.container {
   -ms-box-orient: vertical;
   display: -ms-flex;
   height: 100%;
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-flex; 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */ 
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */    
   
   -ms-flex-direction: column; 
   -webkit-flex-direction: column;
   flex-direction: column; 
}
.responsive-switcher
{
    background-color:#494d4f;
    padding:10px 0px; 
    display:block;
    color:#f0f0f0;
    overflow:auto;
	width: 100%;
    min-width:310px;
}
.pull-left{float:left;}
.pull-right{float:right;}
.fa{font-size:24px; color: #6e7477;line-height:32px;}
.fa:hover, .selected .fa{color:#f0f0f0}
.btn-text
{
    font: 12px avenir, 'proxima-nova', 'helvetica';
    margin-left:5px;
    line-height:32px;
    float:right;

}
.responsive-switcher input[type="text"] {
    padding:5px; 
    width:40px;
    border-radius:2px;
    -webkit-border-radius:2px;
    border:0px;
    color:#333;
}
.header-btn i { cursor: pointer; }
.header-btn,.size-selector{
    padding:0px 20px; 
    line-height:32px;
    border-left:1px solid #3d4042}
.btn-refresh{margin-right:4px;}
.btn-refresh, .btn-rotate{
    background-color:#8ac542;
    color:#fff;
    text-decoration: none;    
    padding: 4px 10px;
    border-radius:2px;
    -webkit-border-radius:2px;
}
.btn-rotate{background-color:#6e7477}
.btn-refresh .fa, .btn-rotate .fa{font-size:12px;color:#fff}
.btn-refresh:hover, .btn-rotate:hover{background-color:#70a232}
.info-text
{
    margin-left:10px;
    display:block;
    line-height:32px
}

#TestModeBanner
{
    color: #FFF;
    font-family: ProximaNova-Regular, helvetica, arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0px 5px;
    background: #494D4F;
    line-height: 50px;
}
#TestModeBanner .message
{
    background: #494D4F url(infoOrange16.png) no-repeat center left;
    padding-left: 25px;
    margin-left: 5px;
}
#TestModeBanner A
{
    color: #FFF;
    font-weight: normal;
    text-decoration: none;
}
#TestModeBanner .message
{
    float: left;
    width: 40%;
    text-align: left;
}
#TestModeBanner .options, .hidePreview
{
    float: right;
    padding-left: 5px;
}
#TestModeBanner .pagelist
{
    margin-right: 8px;
}
#TestModeBanner #hideMessageAnchor,
#TestModeBanner #hidePreview
{
    line-height: 50px;
    width: 15px;
    float: left;
    background: url(icon_close.png) no-repeat center center;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
#TestModeBanner #hideMessageAnchor:hover
{
    opacity: 1.0;
    filter: alpha(opacity=10);
}
#TestModeBanner .validations LI
{
    float: left;
    margin: 10px 15px;
    padding: 0px 20px;
    background: url(icon_checkedon.png) no-repeat 0px 3px;
    border-right: 1px solid #999;
    line-height: 30px;
    font-size: 11px;
}
#TestModeBanner .validations LI.off
{
    background: url(icon_checkedoff.png) no-repeat 0 3px;
}
#TestModeBanner #liMobilePreview
{
    background: url(icon_mobile.png) no-repeat center left;
    padding-left: 20px;
    margin-left: 5px;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
#TestModeBanner #liMobilePreview:hover
{
    opacity: 1.0;
    filter: alpha(opacity=10);
}
#TestModeBanner .validations
{
    float: right;
}
#TestModeBanner UL
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    cursor: default;
}
/*For mobile preview*/
#TestModeBanner .pull-right
{
    float: right;
}
#TestModeBanner .btn-refresh
{
    color: #FFF;
    text-decoration: none;
    padding: 6px 10px 4px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    background: url(icon_refresh.png) no-repeat center center;
    background-color: #8AC542;
    margin-right: 5px;
}
#TestModeBanner .btn-refresh:hover
{
    background-color: #70A232;
}
#TestModeBanner INPUT[type="text"]
{
    padding: 5px;
    width: 40px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 0px;
    color: #333;
}
#TestModeBanner DIV I
{
    width: 34px;
    display: inline-block;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background-position: center center;
    padding: 0px 10px;
    border-right: 1px solid #888;
}
#TestModeBanner .iPhone
{
    background: url(icon_mobile.png) no-repeat center center;
    margin-top:1px;
}
#TestModeBanner .iTablet
{
    background: url(icon_tablet.png) no-repeat center center;
}
#TestModeBanner .iDesktop
{
    background: url(icon_desktop.png) no-repeat center center;
}
#TestModeBanner .iPhone:hover, #TestModeBanner .iTablet:hover, #TestModeBanner .iDesktop:hover
{
    opacity: 1.0;
    filter: alpha(opacity=10);
}
#TestModeBanner .header-btn
{
    margin: 10px 0px 10px;
    line-height: 30px;
}
#TestModeBanner .size-selector
{
    margin-left: 10px;
}

@media screen and (max-width: 820px)
{
    #TestModeBanner .message
    { float: none; width: 100%; line-height: 18px; display: block; }

}