/*----------------------------------------------------------
This file is not designed to be modified.
Changes to this file will be overwritten when
the PinForce Online Web Site is reinstalled.

Any modifications should be made to Site.css. Please
create this file if it is not already created.
----------------------------------------------------------*/

/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    background-color: white;
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

a:link {
    color: #034af3;
    background-color: white;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
    background-color: white;
}

a:hover {
    color: #1d60ff;
    background-color: white;
    text-decoration: none;
}

a:active {
    color: #12eb87;
    background-color: white;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

h1 {
    font-size: 1.2em;
    color: #000;
}

.closeButton {
    color: #fff;
    padding: 10px 10px 0 0;
    font-size: 1.5em;
    display: inline;
    float: right;
}

.error {
    color: #000;
    padding: 0 10px 0 0;
    font-size: 1.5em;
    display: block;
    margin: 0.83em 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

header, #header {
    position: relative;
    color: #000;
    padding: 0;
}

#main {
    padding: 30px 10px 15px 10px;
    background-color: #fff; 
    border: 1px solid #ccc;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
}

footer, 
#footer {
    background-color: #fff;
    color: #767676;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu 
{
    position: relative;
    padding: 0 0 2px 10px;
    margin: 0;
    list-style: none;
}

ul#menu li {
    display: inline;
    list-style: none;
    white-space: nowrap;
}

ul#menu li a {
    padding: 10px 20px;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #502b8f;
    color: #f8981d;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
}

ul#menu li span {
    padding: 10px 20px;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #502b8f;
    color: #f8981d;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
}

ul#menu li a:hover {
    background-color: #f8981d;
    color: #502b8f;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: none;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 1.5em 0 1.5em 0;
    position: relative;
}

legend {
    font-size: 1.2em;
}

select, input[type="Number"], input[type="Date"], input[type="Time"], input[type="Text"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

select#menuCombo
{
    display: none;
}

label[for='menuCombo']
{
    display: none;
}

input[type="submit"], input[type="reset"], input[type="button"] {
    font-size: 1.2em;
    padding: 5px;
    width: 150px;
}

/* DIV
----------------------------------------------------------*/

div.search
{
    padding: 10px;
    overflow: hidden;
}

div.search label
{
    width: 160px;
    display: block;
    float: left;
    text-align: left;
    padding: 5px;
}

div.search input
{
    margin-left: 4px;
    float: left;
    width: 200px;
}

div.search select
{
    margin-left: 4px;
    float: left;
    width: 206px;
}

div.result
{
    padding: 10px;
    overflow: hidden;
}

div.result label
{
    width: 160px;
    text-align: left;
    padding: 10px;
}

div.resultData
{
    margin-left: 4px;
    padding: 10px;
}

div.resultImage
{
    margin-left: 4px;
    padding: 10px;
    width: 30%;
    float: left;
    text-align: left;
}

div.resultsTable
{
    border: 1px solid #000000;
    display: table;
    width: 100%;
    table-layout: fixed;
}

div.resultsRow
{
    width: 100%;
    display: table-row;
}

div.resultsCell
{
    border: 1px solid #000000;
    display: table-cell;
    padding: 5px;
    vertical-align: top;
    overflow: hidden;
}

div.resultsHeader {
    border: 1px solid #000000;
    display: table-cell;
    padding: 5px;
    vertical-align: top;
    overflow: hidden;
    font-size: 1.2em;
    color: #000000;
}

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error 
{
    padding: 0 0 0 10px;
    color: Red;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.image
{
    width: 100%;
    border: 0;
}

.multiImage
{
    width: 100%;
}

img#sampleTicket
{
    position: absolute; 
    border: 1px solid #000;
    top: 30px;
    right: 20px;
}

#backToTop
{
    border: 1px solid #000;
    position: fixed;
    right: 5px;
    bottom: 15px;
}

#backToTop a
{
    text-decoration: none;
    display: block;
    background-color: #bbb;
    color: #003ac6;
    padding: 10px;
}

#blackout
{
    background-color: #000;
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 200px;
    width: 100%;
    opacity: 0.75;
    filter: alpha(opacity=75);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    display: none;
}

#imageViewer
{
    background-color: #000;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100px;
    width: 100px;
    -moz-opacity: 0.75;
    opacity: 0.75;
    filter: alpha(opacity=75);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    display: none;
}

#imageView
{
    position: fixed;
    display: none;
    border: 0;
}

#imageViewLink
{
    border-style: none;
    text-decoration: none;
}

#imageViewerLink
{
    border-style: none;
    text-decoration: none;
}

#moreLink
{
    display: none;
}

.requiredFieldsIcon {
    color: #FF6262;
    margin: 0 6px;
    font-size: 0.8em;
}

@media (max-width: 70em) and (orientation: landscape)
{
    ul#menu 
    {
        display: none;
    }
    
    select#menuCombo
    {
        display: inline-block;
    }

    label[for='menuCombo']
    {
        display: inline-block;
    }
    
    div.resultsTable
    {
        font-size: 0.55em;
    }
}

@media (max-width: 140em) and (orientation: portrait)
{
    ul#menu 
    {
        display: none;
    }
    
    select#menuCombo
    {
        display: inline-block;
    }

    label[for='menuCombo']
    {
        display: inline-block;
    }
    
    div.resultsTable
    {
        font-size: 0.55em;
    }
}

@media (max-width: 90em) and (orientation: landscape)
{
    img#sampleTicket
    {
        position: static; 
        border: 1px solid #000;
    }
    
    fieldset#search
    {
        height: auto !important;
    }
}

@media (max-width: 160em) and (orientation: portrait)
{
    img#sampleTicket
    {
        position: static; 
        border: 1px solid #000;
    }
    
    fieldset#search
    {
        height: auto !important;
    }
}