@charset "UTF-8";
html {
    background-image: url(assets/graphics/boatLineDrawing.png);/*Drawn by me in Adobe Illustrator*/
    background-repeat: no-repeat;
    background-position: center 46%;
    background-attachment: fixed;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-size: 1rem;
    /* [disabled]background-color: #8C99AC; */
    font-family: 'Arimo', sans-serif;
}
header {
    background-image: url(assets/graphics/toucan-2.png);/*Drawn by me some years ago in Windows Paint for my crews embroidered t-shirts*/
    background-repeat: no-repeat;
    background-position: 95% 19%;
}
#container {
    /* [disabled]width: 95%; */
    margin-right: auto;
    margin-left: auto;
    background-color: rgba(239,239,239,0.90);
    max-width: 1140px;
    border: thick solid rgba(215,182,28,1.00);
    border-radius: 22px;
}
#container #top {
    /* [disabled]background-color: #2F7998; */
    padding-top: 0px;
    margin-top: -39px;
}
p {
    font-style: normal;
    font-family: arimo;
    font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    font-weight: bold;
    color: rgba(0,0,0,1.00);
}
#container #top h1 {
    font-family: 'Eagle Lake', cursive;
    padding-left: 1rem;
    font-size: 3rem;
    text-shadow: 1px 2px rgba(99,84,15,1.00);
    width: 100%;
    padding-top: 43px;
}
#top img  {
    /* [disabled]display: inline-block; */
    margin-right: 2rem;
    float: right;
    margin-top: -3rem;
    padding-top: 0px;
    position: relative;
}
#topNav {
    border-bottom: thick groove rgba(215,182,28,1.00);
    padding-top: 0.5rem;
}
#top h1 a:link   , #top h1 a:visited,#top h1 a:hover, #top h1 a:active{
    color: rgba(215,182,28,1.00);
    text-decoration: none;
}
.backToTop {
    margin-left: 1rem;
    position: fixed;
    bottom: 0px;
}
#top #topNav ul {
    text-align: right;
    display: inline-block;
    margin-right: 0px;
    padding-left: 0px;
    margin-left: 65%;
}
#topNav #pageLinks li {
    display: inline-block;
    padding-right: 4rem;
    padding-bottom: 0.5rem;
    text-shadow: 1px 2px;
}
#topNav #pageLinks a:link,#topNav #pageLinks a:visited  , .backToTop a:link, .backToTop a:visited{
    color: rgba(215,182,28,1.00);
    text-decoration: none;
    font-family: arimo;
    font-style: normal;
    font-weight: 400;
    text-shadow: 1px 2px rgba(99,84,15,1.00);
}
a:active   , a:link, a:visited{
    color: rgba(0,0,0,1.00);
    text-decoration: none;
}
#topNav #pageLinks a:hover  ,.backToTop a:hover           , a:hover{
    color: rgba(92,206,24,1.00);
    text-decoration: none;
}
main #pageIntro {
    border-bottom: thick groove rgba(215,182,28,1.00);
    width: 100%;
    padding-bottom: 2rem;
    justify-content: space-between;
    display: inline-block;
}
#pageIntroBox .pageIntroImage {
    float: left;
    margin-right: 2rem;
    margin-left: 1rem;
    -webkit-box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    margin-bottom: 1rem;
}
main #pageIntroBox  {
}
#Technical  {
    /* [disabled]background-color: rgba(150,140,140,1.00); */
    display: flex;
    flex-wrap: wrap;
}
#technical h2 {
    font-family: 'Eagle Lake', cursive;
    font-size: 1.5rem;
    text-shadow: 1px 2px rgba(99,84,15,1.00);
    color: rgba(215,182,28,1.00);
    text-align: center;
    width: 100%;
    margin-left: auto;
}
#techTopicsBox  {
    /* [disabled]background-color: rgba(100,243,100,1.00); */
    display: flex;
    margin-left: auto;
    max-width: none;
    margin-right: auto;
}
.techTopic {
    /* [disabled]background-color: #7DB5D6; */
    justify-content: space-between;
    margin-right: auto;
    max-width: 28%;
    margin-left: auto;
    min-width: 19rem;
}
.techTopic p  {
    margin-left: 160px;
}
.techTopic h3  {
    margin-left: 160px;
}
.techTopic .techImage-1 {
    margin-top: 2rem;
    float: left;
    width: 150px;
    height: 150px;
    background-image: url(assets/images/shipWheel.png);/*adapted from a tutorial provided with Adobe Animate*/
}
.techTopic .techImage-2 {
    margin-top: 2rem;
    float: left;
    width: 150px;
    height: 150px;
    background-image: url(assets/images/globeBtn.png);/*adapted from a tutorial provided with Adobe Animate*/
}
.techTopic .techImage-3 {
    margin-top: 2rem;
    float: left;
    width: 150px;
    height: 150px;
    background-image: url(assets/images/windBtn.png);/*adapted from a tutorial provided with Adobe Animate*/
}
.techTopic .techImage-1:hover  {
    margin-top: 2rem;
    float: left;
    background-image: url(assets/images/AnimatedWheel.gif);/*adapted from a tutorial provided with Adobe Animate*/
    background-size: auto auto;
    background-clip: padding-box;
}
.techTopic .techImage-2:hover  {
    margin-top: 2rem;
    float: left;
    background-image: url(assets/images/globe.gif);/*adapted from a tutorial provided with Adobe Animate*/
    background-size: auto auto;
    background-clip: padding-box;
}
.techTopic .techImage-3:hover  {
    margin-top: 2rem;
    float: left;
    background-image: url(assets/images/windBtnAnimated.gif);/*created by me in Adobe Animate*/
    background-size: auto auto;
    background-clip: padding-box;
}
#ShipIntroBox {
    /* [disabled]margin-top: 1rem; */
    border-bottom: thick groove rgba(215,182,28,1.00);
    display: flex;
    flex-wrap: wrap;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
}
#ShipIntroBox h2 {
    font-family: 'Eagle Lake', cursive;
    font-size: 1.5rem;
    text-shadow: 1px 2px rgba(99,84,15,1.00);
    color: rgba(215,182,28,1.00);
    text-align: center;
    width: 100%;
}
#ShipIntroBox #ShipIntroImages {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* [disabled]margin-left: auto; */
    /* [disabled]margin-right: auto; */
    width: 100%;
}
#ShipIntroImages .shipIntroImage {
    display: inline-block;
    -webkit-box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
}
#ShipIntroBox #shipIntroDetails {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}
#ShipIntroBox .shipIntroSlideshow {
    padding-right: 0px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    -webkit-box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    margin-top: 2rem;
}
#shipIntroDetails ul  {
    list-style-type: none;
    text-align: left;
    border: thin solid rgba(0,0,0,1.00);
    margin-right: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    margin-left: 1rem;
}
#shipIntroDetails ul li {
    text-align: left;
}
#ShipTechnical  {
    /* [disabled]background-color: rgba(150,140,140,1.00); */
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem;
}
#ShipTechnical h2 {
    font-family: 'Eagle Lake', cursive;
    font-size: 1.5rem;
    text-shadow: 1px 2px rgba(99,84,15,1.00);
    color: rgba(215,182,28,1.00);
    text-align: center;
    width: 100%;
    margin-left: auto;
}
#ShiptechTopicsBox  {
    /* [disabled]background-color: rgba(100,243,100,1.00); */
    display: flex;
    margin-left: auto;
    max-width: none;
    margin-right: auto;
    flex-wrap: wrap;
}
.ShiptechTopic {
    /* [disabled]background-color: #7DB5D6; */
    justify-content: space-between;
    margin-right: auto;
    max-width: 40%;
    margin-left: auto;
    min-width: 19rem;
}
.ShiptechTopic p  {
    margin-left: 160px;
}
.techTopic p a:link  , .techTopic p a:visited{
    color: rgba(27,27,168,1.00);
    text-decoration: none;
}
.techTopic p a:hover     {
    color: rgba(92,206,24,1.00);
    text-decoration: none;
}
.ShiptechTopic h3  {
    margin-left: 160px;
}
.ShiptechTopic .ShiptechImage-1 {
    margin-top: 2rem;
    float: left;
    width: 150px;
    height: 150px;
    background-image: url(assets/images/shipWheel.png);/*created by me in Adobe Animate*/
}
.ShiptechTopic .ShiptechImage-2 {
    margin-top: 2rem;
    float: left;
    width: 150px;
    height: 150px;
    background-image: url(assets/images/shipWheel.png);/*created by me in Adobe Animate*/
}
.ShiptechTopic .ShiptechImage-3 {
    margin-top: 2rem;
    float: left;
    width: 150px;
    height: 150px;
    background-image: url(assets/images/shipWheel.png);/*created by me in Adobe Animate*/
}
.ShiptechTopic .ShiptechImage-1:hover  {
    margin-top: 2rem;
    float: left;
    background-image: url(assets/images/AnimatedWheel.gif);/*created by me in Adobe Animate*/
    background-size: auto auto;
    background-clip: padding-box;
}
.ShiptechTopic .ShiptechImage-2:hover  {
    margin-top: 2rem;
    float: left;
    background-image: url(assets/images/AnimatedWheel.gif);/*created by me in Adobe Animate*/
    background-size: auto auto;
    background-clip: padding-box;
}
.ShiptechTopic .ShiptechImage-3:hover  {
    margin-top: 2rem;
    float: left;
    background-image: url(assets/images/AnimatedWheel.gif);/*created by me in Adobe Animate*/
    background-size: auto auto;
    background-clip: padding-box;
}
#CrewPeersonalIntroduction {
    margin-left: 1rem;
    /* [disabled]display: flex; */
    width: 100%;
}
#CrewPeersonalIntroduction h2 {
    font-family: 'Eagle Lake', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 1.5rem;
    text-shadow: 1px 2px rgba(99,84,15,1.00);
    color: rgba(215,182,28,1.00);
    text-align: center;
}
#CrewPageAllContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 2rem;
}
#CrewPageIntro {
    /* [disabled]max-width: 100%; */
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}
#CrewPageIntro .CrewPageIntroText {
    max-width: 41%;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
.CrewPageIntroImage  {
    align-self: flex-start;
    -webkit-box-shadow: 6px 6px 18px rgba(94,94,94,1.00);
    box-shadow: 6px 6px 18px rgba(94,94,94,1.00);
    margin-right: 1rem;
    margin-left: 1rem;
    padding-bottom: 0px;
    padding-top: 0px;
}
#theCrew {
    /* [disabled]background-color: #CFD168; */
    max-width: 72%;
    margin-left: auto;
    margin-right: auto;
}
#theCrew h1 {
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
}
.lifestyleTopicsBox  {
    /* [disabled]background-color: rgba(129,139,108,1.00); */
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    -webkit-box-shadow: 2px 2px 18px rgba(0,0,0,1.00);
    box-shadow: 2px 2px 18px rgba(0,0,0,1.00);
    margin-top: 24px;
    border-top-left-radius: 12px;
    border-top-right-radius: 0px;
}
.lifestyleTopicsBox h2 {
    font-family: 'Eagle Lake', cursive;
    font-size: 1.5rem;
    text-shadow: 1px 2px rgba(99,84,15,1.00);
    color: rgba(215,182,28,1.00);
    width: 100%;
    text-align: center;
}
.lifestyleTopic {
    /* [disabled]background-color: #676431; */
    margin-right: auto;
    margin-left: auto;
    max-width: 15rem;
    display: block;
    margin-top: 1rem;
}
.lifestyleTopic .lifestyleImage  {
    display: block;
    margin-top: auto;
    -webkit-box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    margin-left: auto;
    margin-right: auto;
}
.lifestyleTopic p {
    /* [disabled]margin-left: 1rem; */
    /* [disabled]margin-right: 1rem; */
    text-align: left;
}
.lifestyleTopic h3 {
    margin-left: auto;
    margin-right: auto;
    /* [disabled]min-width: 1072px; */
    text-align: center;
}
.lifestyleTopic ul {
    /* [disabled]margin-left: 160px; */
    list-style-type: none;
}
#whoIsACaptain   {
    border: thin solid rgba(47,121,152,1.00);
    background-color: rgba(125,181,214,1.00);
    max-width: 15rem;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    margin-top: 33px;
    -webkit-box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
    box-shadow: 6px 6px 18px rgba(0,0,0,1.00);
}
#whoIsACaptain p  {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
#whoIsACaptain h2 {
    text-align: center;
}
#whoIsACaptain ul li {
    margin-top: 1rem;
    margin-right: 0.5rem;
}
footer {
    padding-bottom: 2rem;
    text-align: center;
    left: auto;
    right: auto;
    border-top: thick groove rgba(215,182,28,1.00);
}
footer h1 {
    text-decoration: none;
    text-align: center;
    padding-left: 0px;
}
footer ul li {
    list-style-type: none;
    text-decoration: none;
    padding-left: 0px;
    margin-left: -3em;
}