/****************************************************************/
/* Body */

.body
{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #e3f1ff;
    font-family: Arial;
    font-size: 16px;
    line-height: 130%;
}

.overall {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
}

img {
    border: none; /* For older IE. */
}

/****************************************************************/
/* Header and footer */

.header {
    position: relative;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.headerLink {
    text-decoration: none;
}

.headerBackground {
    width: 100%;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}

.headerLogo {
    position: absolute;
    left: 2%;
    top: 18%;
    width: 24%;
}

.headerSlogan {
    position: absolute;
    left: 30%;
    top: 24%;
    color: white;
    font-style: italic;
    font-size: 16px;
}

.headerFacebook
{
    position: absolute;
    right: 0.5%;
    top: 4%;
    width: 46%;
}
    
.headerTwitter
 {
    position: absolute;
    right: 0.5%;
    top: 54%;
    width: 33%;
}

.footer {
    font-size: 80%;
    line-height: 140%;
    background-color: #012273;
    margin-top: 40px;
    padding: 10px;
    color: white;
    text-align: center;
}

.footer a {
    color: white;
}

/****************************************************************/
/* Menu */

.menu {
    background-color: #3e7ab6;
    white-space: nowrap;
}

.menu .menuToggle {
    
    background-color: #00164a;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    text-align: center;
    display: none;
    cursor: pointer;
}

.menu ul {
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-style: solid;
    border-color: #000000;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
}

.menu ul li {
    list-style-type: none;
    display: inline;
}

.menu a {
    border-right-width: 1px;     /* Same as menu border */
    border-right-style: solid;   /* Same as menu border */
    border-right-color: #000000; /* Same as menu border */
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    height: 13px;
    line-height: 13px;
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: #000000;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 1px;
}

.menuVert .menuToggle {
    display: block;
}

.menuVert ul {
    display: none;
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}

.menuVert ul li {
    display: block;
    text-align: center;
}

.menuVert a {
    display: block;
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}

/****************************************************************/
/* Embedded shark3d logo */

.shark3dlogo
{
    float: right;
    width: 200px;
    max-width: 20%;
    padding: 0px;
    margin-top: 0%;
    margin-bottom: 4%;
    margin-left: 4%;
    margin-right: 0%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: white;
}

/****************************************************************/
/* Floating layout */

.clearFloat {
    clear: both;
}

/****************************************************************/
/* Text style */

.textonly {
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 5%;
    margin-right: 5%;
}

/****************************************************************/
/* Overview */

.overview {
    background-color: #3e7ab6;
    margin-top: 20px;
}

.overviewText {
    background-color: #3e7ab6;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 2%;
    padding-left: 52%;
}

.overviewText a {
    color: white;
}

.overviewText ul {
    /* Fix for float problem: 
    http://stackoverflow.com/questions/710158/why-do-my-list-item-bullets-overlap-floating-elements */
    overflow: hidden;
}

@media (max-width: 640px)
{
    .overview {
        background-color: white;
    }

    .overviewText {
        padding-right: 5%;
        padding-left: 5%;
    }
}

/****************************************************************/
/* Slideshow */

.slideshow {
    position: relative;
    width: 50%;
    float: left;
    background-color: #012273;
}

@media (max-width: 640px)
{
    .slideshow {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
}

.slideshow .slideshowScreen {
    position: relative;
    width: 100%;
}

.slideshow .slideshowScreen img {
    position: relative;
    width: 100%;
    vertical-align: middle; /* To avoid extra space. */
}

.slideshow .slideshowSlide {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    display: none;
}

.slideshow .slideshowSlide .slideshowBack {
    /* To provide the correct position for the description
       even if the image is not loaded yet. */
    position: relative;
    width: 100%;
}

.slideshow .slideshowSlide img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    vertical-align: middle; /* To avoid extra space. */
}

.slideshow .slideshowLabel {
    position: relative;
    right: 0px;
    top: -20px;
    height: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 8px;
    margin-right: 8px;
    text-align: right;
    font-size: 80%;
    line-height: 140%;
    color: white;
}

.slideshow .slideshowDescOuter {
    position: relative;
    bottom: 0px;
    display: table;
    width: 100%;
}

.slideshow .slideshowDescInner {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    color: white;
    height: 46px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 52px;
    padding-right: 52px;
    overflow: hidden;
    text-align: center;
    background-color: #012273;
}

.slideshow .slideshowDescInner a {
    color: white;
}

.slideshow .slideshowButtonOuter {
    position: absolute;
    display: table;
    bottom: 0px;
    width: 46px;
    height: 46px;
}

.slideshow .slideshowButtonInner {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    color: #012273;
    background-color: white;
    font-family: 'Times New Roman';
    font-size: 28px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    
    /* Make non-selectable, else arrows may be selected
       when user clicks fast. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slideshow .slideshowButtonLeft {
    left: 0px;
}

.slideshow .slideshowButtonRight {
    right: 0px;
}

/****************************************************************/
/* Central */

.central {
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 10px;
    padding-bottom: 0px;
}

@media (max-width: 640px)
{
    .gap {
        padding-top: 10px;
    }
}

.sep {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 4px;
    background-color: #e3f1ff;
}

/****************************************************************/
/* Text items */

/* Don't name it "rightadd" or "leftadd", 
   since this doesn't work on some few platforms,
   for example Firefox and Windows 8,
   possibly because of a naming clash with a jquery variable. */

.item {
}

.itemLeftText {
    width: 40%;
    float: left;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 5%;
    padding-right: 5%;
}

.itemRightText {
    width: 40%;
    float: right;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 5%;
    padding-right: 5%;
}

.itemLeftVideo {
    display: table;
    padding-top: 20px;
    padding-bottom: 0px;
    padding-left: 5%;
    padding-right: 5%;
}

.itemRightVideo {
    display: table;
    padding-top: 20px;
    padding-bottom: 0px;
    padding-left: 5%;
    padding-right: 5%;
}

@media (max-width: 640px)
{
    .itemLeftText {
        width: auto;
        padding-top: 10px;
        padding-bottom: 0px;
    }

    .itemRightText {
        width: auto;
        padding-top: 10px;
        padding-bottom: 0px;
    }

    .itemLeftVideo {
        clear: both;
        width: 100%;
        padding-top: 0px;
        padding-bottom: 0%;
        padding-left: 0%;
        padding-right: 0%;
    }

    .itemRightVideo {
        clear: both;
        width: 100%;
        padding-top: 0px;
        padding-bottom: 0%;
        padding-left: 0%;
        padding-right: 0%;
    }
}

/****************************************************************/
/* Videos */

.videoBorder {
    position: relative;
    width: auto;
    border-style: solid;
    border-color: grey;
    border-width: 1px;
}

.videoPoster {
    width: 100%;
    vertical-align: middle;
}

.videoPlayer {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.noVideoOuter {
    width: 100%;
    height: 100%;
    display: table;
}

.noVideoInner {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    padding-left: 10%;
    padding-right: 10%;
}

.noVideoText {
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #012273;
    color: white;
    text-align: center;
    overflow: hidden;
}

/****************************************************************/
/* General style */

h1 {
    font-weight: normal;
    font-size: 154%;
    line-height: 120%;
    padding: 0px;
    margin: 0px;
}

h2 {
    font-weight: normal;
    font-size: 139%;
    line-height: 120%;
}

a {
    color: #012273;
}

a.label {
    color: #000000;
}

/****************************************************************/
/* Form */

.form {
    padding-top: 20px;
    padding-bottom: 10px;
}

.formEntry {
    padding-top: 4px;
    padding-bottom: 4px;
}

.formInput {
    width: 72%;
}

.formSubmit {
    padding-top: 16px;
    padding-bottom: 4px;
}

@media (max-width: 400px)
{
    .formInput {
        width: 100%;
    }
}

/****************************************************************/