/***********************************/
/* This works with CSS3 or greater */
/***********************************/

html
{
    overflow-x : auto;
    overflow-y : scroll;
}

body
{
    font-family              : Cambria, "Times New Roman", Times, Serif;
    background-color         : white;
    margin                   : 0;
    margin-left              : 88px;
    padding-top              : 0;
    padding-right            : 1em;
    padding-left             : 1em;
    padding-bottom           : 1em;
    -webkit-text-size-adjust : none; /* prevent font resizing on iOS during rotate */
}

/* for IE8 and below */
.lt-ie9 body
{
    min-width : 650px;
}

div#banner
{
    background-image      : url("images/McTartan.png");
    background-size       : 88px 168px;
    background-attachment : static;
    left                  : 0;
    top                   : 0;
    width                 : 88px;
    height                : 100%;
    position              : fixed;
    z-index               : 1;
    box-shadow            : 5px 0px 5px DarkGray;
}

div#logo
{
    background-image  : url("images/logo.png");
    background-size   : 264px 313px;
    width             : 88px;
    height            : 313px;
    cursor            : pointer;
}

div#logo:hover
{
    background-position : 50% 0%;
}

div#logo:active
{
    background-position : 100% 0%;
}

.touch div#logo:hover,
.touch div#logo:active
{
    background-position : 0% 0%;
}

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

h1 { font-size: 2em;    } /* HTML4 CSS: 2em    */
h2 { font-size: 1.2em;  } /* HTML4 CSS: 1.5em  */
h3 { font-size: 1.1em;  } /* HTML4 CSS: 1.17em */
h4 { font-size: 1em;    } /* HTML4 CSS: 1em    */
h5 { font-size: 0.83em; } /* HTML4 CSS: 0.83em */
h6 { font-size: 0.75em; } /* HTML4 CSS: 0.75em */

h1
{
    text-align    : center;
    margin-bottom : 0.5em;
}

h2
{
    margin-left      : -0.2em;
    margin-right     : -0.2em;
    padding-left     :  0.2em;
    padding-right    :  0.2em;
    background-color : LightGray;
    background-image : linear-gradient(to right, LightGray, white);
}

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

ul
{
    padding-left : 2pt; /* just a little bit to the right */
    margin-left  : 1em;
}

li > ul
{
    margin-left: 1.5em;
}

a[href^="http"]
{
    background-image    : url("images/externalLink.png");
    background-repeat   : no-repeat;
    background-position : right center;
    background-size     : 12px 12px;
    padding-right       : 13px;
}

a[href*="MikeMcCollister.com"]
{
    background    : none;
    padding-right : 0;
}

a:link,
a:visited
{
    color : #bd0000;
}

abbr
{
    border-bottom-width : 1px;
    border-bottom-style : dotted;
    cursor              : help;
}

div.footer
{
    font-family : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    width       : 100%;
    display     : inline-block;
}

div.footer .column
{
    width    : 49%;
}

div.footer .left
{
    text-align : left;
    float      : left;
}

div.footer .right
{
    text-align : right;
    float      : right;
}

img
{
    border : none;
}

ul.publications li
{
    margin-bottom : 1em;
}

div.thumbnails
{
    padding-top : 1em; /* !!! kludge */
    text-align  : center;
}

div#backgroundOverlay
{
    position         : fixed;
    top              : 0%;
    left             : 0%;
    width            : 110%;
    height           : 110%;
    background-color : black;
    z-index          : 70;
    display          : none;
}

img.thumbnail
{   /* units must be in px */
    cursor              : pointer;
    border-width        : 1px;
    border-style        : solid;
    border-color        : black;
    background-color    : white;
    padding             : 5px;
    margin              : 5px;
    box-shadow          : 5px 5px 5px DarkGray;
    transition-duration : 0.25s;
}

img.thumbnail:hover
{
    box-shadow : 0px 0px 10px 3px #bd0000;
}

img.thumbnail:active
{
    transform      : scale(0.95);
    -moz-transform : scale(0.95);
}

.touch img.thumbnail:hover,
.touch img.thumbnail:active
{
    box-shadow : 5px 5px 5px DarkGray;
    transform  : scale(1.0);
}

div.imageLink
{
    display        : inline-block;
    padding-left   : 1.5em;
    padding-right  : 1.5em;
    padding-top    : 0.5em;
    padding-bottom : 0.5em;
}

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

div.thumbnailImage,
div.thumbnailImageText,
div.thumbnailImageTextImage
{
    display        : inline-block;
    width          : 100%;
    padding-top    : 0.5em;
    padding-bottom : 0.5em;
}

div.thumbnailImage
{
    width          : auto;
    text-align     : center;
    vertical-align : middle;
    padding        : 0.5em;
}

div.thumbnailImageText div.image1,
div.thumbnailImageTextImage div.image1
{
    float      : left;
    text-align : right;
}

div.thumbnailImageText div.image1 img,
div.thumbnailImageTextImage div.image1 img
{
}

div.thumbnailImageText div.text,
div.thumbnailImageTextImage div.text
{
    padding-left : 1em;
    overflow     : hidden;
}

div.thumbnailImageTextImage div.text
{
    padding-right : 1em;
}

div.thumbnailImageText div.text div.title,
div.thumbnailImageTextImage div.text div.title
{
    font-family : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    font-weight : bold;
    font-size   : large;
}

div.thumbnailImageText div.text div.date,
div.thumbnailImageTextImage div.text div.date
{
    font-style : italic;
}

div.thumbnailImageText div.text div.extraText,
div.thumbnailImageTextImage div.text div.extraText
{
    margin-top       : 0.5em;
    padding-top      : 0.5em;
    border-width     : 0;
    border-top-width : 2pt;
    border-style     : solid;
    border-color     : DarkGray;
}

div.thumbnailImageText div.text div.extraText ul,
div.thumbnailImageTextImage div.text div.extraText ul
{
    margin-top    : 0;
    margin-bottom : 0;
}

div.thumbnailImageTextImage div.image2
{
    float      : right;
    text-align : left;
    padding    : 0;
}

div.thumbnailImageTextImage div.image2 img
{
}

div#popupImage
{
      position         : fixed;
      background-color : white;
      text-align       : center;
      padding          : 0;
      margin           : 20px; /* must be in px */
      border-width     : 1px;
      border-style     : solid;
      border-color     : black;
      cursor           : default;
      display          : none;
      z-index          : 80;
      font-family      : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
      font-size        : medium;
      box-shadow       : 10px 10px 10px #202020;
   -webkit-user-select : none;
    -khtml-user-select : none;
      -moz-user-select : none;
       -ms-user-select : none;
           user-select : none;
}

div#popupImage div#popupImageFrame
{
    width            : auto;
    padding          : 9pt;
    padding-top      : 0;
    background-color : white;
    line-height      : 0;
}

div#popupImage div#popupImageFrame div#popupImageHeader
{
    padding-top    : 6pt;
    padding-right  : 0;
    padding-bottom : 6pt;
    padding-left   : 0;
    font-weight    : bold;
    white-space    : nowrap;
    text-align     : right;
    line-height    : normal;
}

div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageCopyright
{
    position    : absolute;
    left        : 9pt; /* must match popupImageFrame padding */
    margin-top  : 2px;
}

div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageCloseButton,
.touch div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageCloseButton:hover,
div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageToggleNavButton,
.touch div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageToggleNavButton:hover
{
    color          : black;
    text-align     : center;
    display        : inline-block;
    cursor         : pointer;
    border-width   : 1px;
    border-style   : solid;
    border-color   : black;
    padding-left   : 6pt;
    padding-right  : 6pt;
    margin         : 1px;
}


div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageCloseButton:hover,
div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageToggleNavButton:hover
{
    color          : red;
    border-color   : red;
    border-width   : 2px;
    margin         : 0;
}

div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageToggleNavButton:hover
{
    color        : inherit;
    border-color : inherit;
}

div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageToggleNavButton.disabled,
.touch div#popupImage div#popupImageFrame div#popupImageHeader span#popupImageToggleNavButton.disabled
{
    border-color : LightGray;
    color        : LightGray;
}

div#popupImage div#popupImageFrame div#popupImageHeader span.popupImageButtonSpacer
{
    display : inline-block;
    width   : 4pt;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav
{
    position : relative;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav img#popupImageImage
{
    border-width     : 1px;
    border-style     : solid;
    border-color     : black;
    background-color : white;
    cursor           : pointer;
    touch-action     : none;
    -ms-touch-action : none; /* for IE10 */
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev,
div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext,
.touch div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev:hover,
.touch div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext:hover
{
    position            : absolute;
    background-image    : url("images/popupImagePrevNextImage.png");
    background-size     : 192px 64px;
    filter              : alpha(opacity=40); /* IE8 and below */
    opacity             : 0.4;
    transition-property : opacity;
    transition-duration : 0.5s;
    width               : 32px;
    height              : 64px;
    top                 : 50%;
    padding             : 0;
    margin              : 0;
    margin-top          : -32px; /* bitmap_height/2 */
    margin-left         : 0.5em;
    margin-right        : 0.5em;
    cursor              : pointer;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev.disabled,
div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext.disabled
{
    display : none;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev,
.touch div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev:hover
{
    left                : 0;
    background-position : 0% 0%;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext,
.touch div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext:hover
{
    right               : 0;
    background-position : -300% 0%;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev:hover,
div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext:hover
{
    opacity : 1.0;
    filter  : alpha(opacity=100); /* IE8 and below */
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev:hover
{
    background-position : -100% 0%;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext:hover
{
    background-position : -400% 0%;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev:active
{
    background-position : -200% 0%;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext:active
{
    background-position : -500% 0%;
}

div#popupImage div#popupImageCaption
{
    background-color : black;
    color            : white;
    padding-top      : 1pt;
    padding-right    : 9pt;
    padding-bottom   : 3pt;
    padding-left     : 9pt;
    border-top-width : 1px;
    border-top-style : solid;
    border-top-color : black;
    white-space      : nowrap;
}

div#popupImage div#popupImageCaption.basic
{
    display : none;
}

div.framedImage
{
    font-family    : Calibri, Arial, Helvetica, Verdana, Sans-Serif;
    text-align     : center;
    padding-top    : 1em;
    padding-bottom : 1em;
    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 10px DarkGray;
}

div.framedImage div.framedImageCaption
{
}

/* for small devices like iPhone #1 */
@media screen and (max-width: 760px)
{

body
{
    margin-left : 36px;
}

div#banner
{
    width : 36px;
}

div#logo
{
    background-image : url("images/logoSmall.png");
    background-size  : 108px 196px;
    margin           : auto;
    width            : 36px;
    height           : 196px;
}

div#logo:hover
{
    background-position : 50% 0%;
}

div#logo:active
{
    background-position : 100% 0%;
}

h1
{
    font-size : 1.5em;
}

div.footer .column
{
    width : 100%;
}

div.footer .left
{
    text-align    : center;
    margin-bottom : 0.5em;
}

div.footer .right
{
    text-align : center;
}

div.framedImage img.framedImageImage
{
    height    : auto;
    max-width : 90%;
}

div.thumbnailImageText div.image1,
div.thumbnailImageTextImage div.image1,
div.thumbnailImageText div.image2,
div.thumbnailImageTextImage div.image2
{
    float      : none;
    text-align : center;
}

div.thumbnailImageText div.image1 img,
div.thumbnailImageTextImage div.image1 img,
div.thumbnailImageTextImage div.image2 img
{
}

div.thumbnailImageText div.text,
div.thumbnailImageTextImage div.text
{
    padding : 0;
}

div.thumbnailImageText div.text div.title,
div.thumbnailImageTextImage div.text div.title,
div.thumbnailImageText div.text div.date,
div.thumbnailImageTextImage div.text div.date
{
    text-align : center;
}

}

/* for small devices like iPhone #2 */
@media screen and (max-width: 420px)
{

body
{
    margin-left           : 0;
    padding-top           : 36px;
}

div#banner
{
    background-image  : url("images/McTartanSmallHorizontal.png");
    background-size   : 168px 36px;
    background-repeat : repeat-x;
    width             : 100%;
    height            : 36px;
    box-shadow        : 0px 5px 5px DarkGray;
}

div#logo
{
    background-image : url("images/logoSmallHorizontal.png");
    background-size  : 196px 108px;
    margin           : auto;
    width            : 196px;
    height           : 36px;
}

div#logo:hover
{
    background-position : 0% 50%;
}

div#logo:active
{
    background-position : 0% 100%;
}

}

/* for the basic popup image frame for small devices */
@media (max-width: 400px), (max-height: 400px)
{

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev,
div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext
{
    display : none;
}

div#popupImage div#popupImageFrame
{
    padding : 9pt;
}

div#popupImage div#popupImageFrame div#popupImageHeader
{
    display : none;
}

div#popupImage div#popupImageCaption
{
    display : none;
}

}

/* for retina display screens */
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5)
{

div#banner
{
    background-image : url("images/McTartan@2x.png");
}

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

a[href^="http"]
{
    background-image : url("images/externalLink@2x.png");
}

a[href*="MikeMcCollister.com"]
{
    background    : none;
    padding-right : 0;
}

div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavPrev,
div#popupImage div#popupImageFrame div#popupImageImageAndNav span#popupImageNavNext
{
    background-image : url("images/popupImagePrevNextImage@2x.png");
}

}

/* for retina display screens (small devices) #1 */
@media
screen and (max-width: 760px) and (-webkit-min-device-pixel-ratio: 1.5),
screen and (max-width: 760px) and (-moz-min-device-pixel-ratio: 1.5),
screen and (max-width: 760px) and (min-device-pixel-ratio: 1.5)
{

div#logo
{
    background-image : url("images/logoSmall@2x.png");
}

}

/* for retina display screens (small devices) #2 */
@media
screen and (max-width: 420px) and (-webkit-min-device-pixel-ratio: 1.5),
screen and (max-width: 420px) and (-moz-min-device-pixel-ratio: 1.5),
screen and (max-width: 420px) and (min-device-pixel-ratio: 1.5)
{

div#banner
{
    background-image : url("images/McTartanSmallHorizontal@2x.png");
}

div#logo
{
    background-image : url("images/logoSmallHorizontal@2x.png");
}

}