﻿.Content
{    
    
}

/* Tablet viewer */
#tabletViewer iframe
{
    float: left;
}
#tabletViewer.horizontal
{
    width: 1130px;
    height: 801px;
    background: url('Horizontal.png') no-repeat center;
    margin: 0 auto;
    
}
#tabletViewer.horizontal iframe
{
    width: 768px;
    height: 576px;
    margin-top: 102px;
    margin-left: 181px;
}
#tabletViewer.vertical
{
    width: 1130px;
    height: 1002px;
    background: url('Vertical.png') no-repeat center;
    margin: 0 auto;
}
#tabletViewer.vertical iframe
{
    width: 576px;
    height: 768px;
    margin-top: 106px;
    margin-left: 277px;
}
/* QRCode */
.QRCode
{
    background-color: White;
    border: Solid 1px rgba(0,0,0,0.25)!important;
    box-shadow: 0 10px 12px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 10px 12px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 10px 12px rgba(0,0,0,0.2);
    color: #323232;
    font-size: 14px;
    float: left;    

	background-clip: padding-box;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;    
    

    width: 126px;
    height: 156px;
    padding: 12px;
}
#tabletViewer.horizontal .QRCode
{
    margin-top: 100px;
    margin-left: 29px;
}
#tabletViewer.vertical .QRCode
{
    margin-top: 104px;
    margin-left: 29px;
}
.QRCode a
{
    display: block;
    outline: 0;
}
.QRCode div
{
    text-align: center;
    padding: 12px 0;
}
.QRCode img
{
    width: 124px;
    height: 124px;
    border-width: 0;
}
/* Orientation selector */
.OrientaionSelector
{
    width: 320px;
    height: 120px;
    margin: -4px auto 5px;
}
.OrientaionSelector a
{
    background-repeat: no-repeat;
    color: #797979;
    cursor: pointer;
    display: block;
    float: left;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, Sans-serif;
    font-size: 14px;
    outline: 0;
    text-align: center;
    text-decoration: none;

    width: 140px;
    height: 20px;
    padding-top: 90px;
    margin: 5px;
}
.OrientaionSelector a:hover
{
    text-decoration: underline;
}
.OrientaionSelector a:hover.Selected
{
    text-decoration: none;
    cursor: default;
}
.OrientaionSelector a.Vertical
{
    background-position: 40px 10px;
    background-image: url('VerticalIcon.png');
}
.OrientaionSelector a.Vertical.Selected
{
    background-image: url('VerticalSelectedIcon.png');
    color: #ff8400;
}
.OrientaionSelector a.Horizontal
{
    background-position: 35px 15px;
    background-image: url('HorizontalIcon.png');
}
.OrientaionSelector a.Horizontal.Selected
{
    background-image: url('HorizontalSelectedIcon.png');
    color: #ff8400;
}
