body
{
    font-family            : Cambria, "Times New Roman", Times, Serif;
    background-image       : url("images/McTartanSlim.png");
    background-repeat      : repeat-y;
    background-color       : white;
    background-attachment  : fixed;
   _background-attachment  : absolute; /* hack for IE6 */
    margin                 : 0;
}

div#logo, div.logoDown
{
    background-image  : url("images/side.png");
    background-repeat : no-repeat;
    position          : fixed;
   _position          : absolute; /* hack for IE6 */
    left              : 0;
    top               : 0;
    z-index           : 1;
    width             : 88px;
    height            : 313px;
    cursor            : pointer;
}

div#logo:hover
{
    background-image : url("images/sideHighlight.png");
}

div#main
{
    margin-top       : 1em;
    margin-right     : 0;
    margin-left      : 88px;
    margin-bottom    : 0;
    padding-top      : 0;
    padding-right    : 1em;
    padding-left     : 1em;
    padding-bottom   : 1em;
}

img
{
    border : none;
}

table#footer
{
    width : 100%;
}

td#footerLeft
{
    padding    : 0px;
    text-align : left;
}

td#footerRight
{
    padding    : 0px;
    text-align : right;
}

h1, h2, h3, h4, h5, h6
{
    font-family : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
}

h1
{
    text-align : center;
}

hr
{
    height           : 0.25em;
    border-style     : solid;
    border-color     : #bd0000;
    background-color : #bd0000;
    color            : #bd0000;
}

a:link, a:visited, a:active
{
    color : #BD0000;
}

a:hover
{
    color            : white;
    background-color : #008080;
}

div.palmIndex
{
    margin-top    : 0;
    margin-left   : 1em;
    margin-right  : 1em;
    margin-bottom : 1em;
    text-align    : center;
}

span.nowrap
{
    white-space : nowrap;
}

table.palmAppSummary tr td.palmScreen
{
    padding        : 5px;
    width          : 170px;
    vertical-align : top;
}

img.palmScreen
{
    padding            : 2px;
    border-width       : 3px;
    border-style       : solid;
    border-color       : #BD0000;
    background-color   : white;
    margin-right       : 5px;
    margin-bottom      : 5px;
    box-shadow         : 5px 5px 10px DarkGray; /* CSS3    */
    -moz-box-shadow    : 5px 5px 10px DarkGray; /* Mozilla */
    -webkit-box-shadow : 5px 5px 10px DarkGray; /* Webkit  */
    /* get rid of these ??? */
    -ms-filter         : "progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true)"; /* >= IE8 */
    filter             :  progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true);  /* <= IE7 */
}

table.palmAppSummary tr td.palmDetails
{
    padding        : 0px;
    vertical-align : top;
}

table.palmStats tr td.palmCategory, table.palmStats tr td.palmTitleCategory
{
    padding        : 5px;
    vertical-align : top;
    text-align     : right;
    font-weight    : bold;
}

table.palmStats tr td.palmTitleCategory
{
    vertical-align : middle;
}

table.palmStats tr td.palmDetails, table.palmStats tr td.palmTitle
{
    padding        : 5px;
    vertical-align : top;
    text-align     : left;
    font-weight    : normal;
}

table.palmStats tr td.palmTitle
{
    font-size   : x-large;
    font-weight : bold;
}

table.palmStats tr td.palmDetails ul
{
    padding : 0;
    margin  : 0;
}

table.palmStats tr td.palmDetails ul li
{
    margin-left : 1em;
}

img.palmRegistrationButton
{
    vertical-align : middle;
}

div.showDetails
{
    font-family      : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    font-weight      : bold;
    text-align       : center;
    line-height      : 175%;
    color            : white;
    background-color : #008080;
    cursor           : pointer;
}

div.thumbnails, div.abstractHeader
{
    text-align : center;
}

img.thumbnail
{  /* units must be in px */
    cursor             : pointer;
    border-width       : 1px;
    border-style       : solid;
    border-color       : black;
    background-color   : white;
    padding            : 5px;
    margin-right       : 5px; /* must be same as shadow amount */
    margin-bottom      : 5px; /* must be same as shadow amount */
    box-shadow         : 5px 5px 10px DarkGray; /* CSS3    */
    -moz-box-shadow    : 5px 5px 10px DarkGray; /* Mozilla */
    -webkit-box-shadow : 5px 5px 10px DarkGray; /* Webkit  */
    /* get rid of these ??? */
    /* -ms-filter         : "progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true)"; */ /* >= IE8 */
    /* filter             :  progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true);  */ /* <= IE7 */
}

div#popupImageBar
{
    display             : none;
    position            : fixed;
    left                : 0;
    top                 : 0;
    z-index             : 30;
    width               : 100%;
    background-color    : black;
    border-width        : 0;
    border-bottom-width : 2pt;
    border-style        : solid;
    border-color        : white;
    white-space         : nowrap;
}

div#popupImageBar table
{
    border-width    : 0;
    border-collapse : collapse;
    width           : 100%;
}

div#popupImageBar table td
{
    border-width : 0;
    padding      : 0;
    padding      : 6pt;
}

div#popupImageBar table td.left
{
    text-align : left;
}

div#popupImageBar table td.right
{
    text-align : right;
}

div#popupImageBar span.popupImageBarButton
{
    font-family    : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    font-weight    : bold;
    font-size      : large;
    color          : #a9a9a9;
    text-align     : center;
    cursor         : pointer;
    border-width   : 1pt;
    border-style   : solid;
    border-color   : #a9a9a9;
    padding-left   : 6pt;
    padding-right  : 6pt;
    cursor         : pointer;
}

div#popupImageBar span.popupImageBarButton:hover
{
    color        : white;
    border-color : white;
}

div#popupImage
{
    position         : absolute;
    background-color : white;
    text-align       : center;
    padding          : 3pt;
    margin           : 10px; /* must be in px */
    cursor           : default;
    display          : none;
    z-index          : 20;
    font-family      : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    font-size        : medium;
}

div#popupImage div#popupImageFrame
{
    width            : auto;
    padding          : 0.8em;
    padding-top      : 0;
    border-width     : 1px;
    border-style     : solid;
    border-color     : black;
    background-color : #D3D3D3;
}

table#popupImageTopBar
{
    border-collapse : collapse;
    width           : 100%;
}

td#popupImageCopyright, td#popupImageButtons
{
    padding-top    : 3pt;
    padding-right  : 0;
    padding-bottom : 3pt;
    padding-left   : 0;
}

td#popupImageCopyright, td#popupImageButtons
{
    color          : black;
    font-weight    : bold;
    white-space    : nowrap;
}

td#popupImageCopyright
{
    text-align     : left;
}

td#popupImageButtons
{
    text-align     : right;
}

span.popupImageButton
{
    text-align     : center;
    display        : inline-block;
    cursor         : pointer;
    border-width   : 1pt;
    border-style   : solid;
    border-color   : black;
    padding-left   : 6pt;
    padding-right  : 6pt;
}

span.popupImageButton:hover
{
    color          : red;
    border-color   : red;
}

div#popupImage div#popupImageFrame img#popupImageImage
{
    border-width     : 1px;
    border-style     : solid;
    border-color     : black;
    background-color : white;
    cursor           : pointer;
}

div#popupImage div#popupImageCaption
{
    background-color : black;
    color            : white;
    padding-top      : 1pt;
    padding-right    : 0;
    padding-bottom   : 3pt;
    padding-left     : 0;
}

div#popupImage div#popupImageCaption
{
    padding-left  : 0.8em; /* ??? new */
    padding-right : 0.8em; /* ??? new */
}

table td.imageLinkCaption
{
    font-weight : bold;
    font-size   : large;
    font-family : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    text-align  : center;
}

div.framedImage
{
    font-family    : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    text-align     : center;
    padding-bottom : 2em;
    width          : auto;
}

div.framedImage img.framedImageImage
{
    border-width       : 1px;
    border-style       : solid;
    border-color       : black;
    background-color   : white;
    padding            : 10px;
    margin-right       : 10px;
    margin-bottom      : 10px;
    box-shadow         : 10px 10px 20px DarkGray; /* CSS3    */
    -moz-box-shadow    : 10px 10px 20px DarkGray; /* Mozilla */
    -webkit-box-shadow : 10px 10px 20px DarkGray; /* Webkit  */
    /* get rid of these ??? */
    -ms-filter         : "progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=10, offY=10, positive=true)"; /* >= IE8 */
    filter             :  progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=10, offY=10, positive=true);  /* <= IE7 */
}

div.framedImage div.framedImageCaption
{
    padding-top : 1pt;
}

@media handheld, only screen and (max-device-width: 760px)
{
body
{
    background-image  : url("images/McTartanSuperSlim.png");
}

div#logo
{
    background-image  : url("images/sideSuperSlim.png");
}

div#logo:hover
{
    /* keeps side from blinking on iPhone */
    background-image  : url("images/sideSuperSlim.png");
}

div#logo
{
    width : 32px;
}

div#main
{
    margin-left : 32px;
}
}