/*
    Style sheet for Nullarbor Links splash page

    ad552e  background orange
    24797b  borders green
    e3c6bb  pale background orange

    f2871f  logo orange
    028059  logo green


    heights that change if the feature image changes height (ht):
    #mainpic
    #fb-column
    ul#smallpics
    div#latestnews
    div#sponsors
    #extranav
    #nav
*/

#container { width: 1250px; padding: 0; }

h1 { padding: 0px 75px; height: 205px; color: #333333; background: #ad552e url(../images/splash/bg-header.jpg) top left no-repeat; text-align: left; }
h1 img { margin: 0; padding: 0; position: absolute; top: 35px; right: 95px; }

p#slogan { height: 44px; line-height: 44px; padding: 0 0 0 815px; width: 435px; position: static; font-size: 1em; text-align: left; }

/*
#covid-notice { height: 201px; margin: 0; padding: 0; text-align: center; background: rgba(214,184,169,0.5); }
#covid-notice h2 { margin: 0; padding: 0; padding-top: 1em; margin-bottom: 0.5em; }
#covid-notice p { margin: 0; padding: 0; padding-bottom: 1em; font-size: 1.2em; }
#covid-notice a { color: #000; }
*/

#mainpic { height: 830px; /* (ht) */ margin: 0 0 0 270px; padding: 0; text-align: left; position: relative; }
#mainpic p { margin: 0; padding: 0.6rem 1rem; font-weight: bold; color: #000; background: rgba(214,184,169,0.8); }

#fb-column { position: absolute; top: 249px; left: 0; height: 830px; /* (ht) */ width: 270px; background: #fff; }

#feature-news { height: 130px; width: 770px; padding-top: 0; padding-left: 30px; padding-right: 30px; padding-bottom: 335px; color: #000; background: url(../images/animations/bg-bouncing-ball.jpg) top left no-repeat; position: relative; display: flex; justify-content: center; align-items: center; }
#feature-news p { background: transparent; width: max-content; font-size: 1.2rem; text-align: center; color: #cc0000; text-shadow: 1px 1px 1px #000; font-family: Arial Narrow, sans-serif; }
#feature-news a { color: #cc0000; text-decoration: none; }

#feature-news-decoration { height: 0; width: 0; position: absolute; bottom: 0; left: 33%; overflow: visible; transition: left 1.25s ease-in-out; }
#feature-news-decoration:after { content: ''; display: block; height: 0; width: 0; border-radius: 100%; border: 7px solid #fff; z-index: 7; position: absolute; top: -14px; left: 0; transition: top 1.25s cubic-bezier(0.260, 0.165, 0.605, 1.850),border-width 1.5s ease-out; }

.fnd-checkpoint0 p { display: none; }
.fnd-checkpoint0 #feature-news-decoration { left: 33% !important; }
.fnd-checkpoint0 #feature-news-decoration:after { top: -14px !important; }

.fnd-checkpoint1 p { display: none; }
.fnd-checkpoint1 #feature-news-decoration { left: 66% !important; }
.fnd-checkpoint1 #feature-news-decoration:after { top: -94px !important; border-width: 5px !important; }

.fnd-checkpoint2 p { display: none; }
.fnd-checkpoint2 #feature-news-decoration { left: 40% !important; }
.fnd-checkpoint2 #feature-news-decoration:after { top: -174px !important; border-width: 4px !important; }

.fnd-checkpoint3 p { display: none; }
.fnd-checkpoint3 #feature-news-decoration { left: 48% !important; }
.fnd-checkpoint3 #feature-news-decoration:after { top: -254px !important; border-width: 2px !important; }

.fnd-static p { display: block; }
.fnd-static #feature-news-decoration { display: none; }


#extra-news { position: absolute; bottom: 0; left: 0; z-index: 8; }
#extra-news2 { position: absolute; bottom: 10px; right: 150px; z-index: 8; }

/*
#quality-tourism { position: absolute; bottom: 0; right: 150px; position: static; width: 300px; height: 150px; list-style: none; margin: 0 auto 20px auto; padding: 0; color: #00816D; background: #fff; border-radius: 12px; }
#quality-tourism li { list-style: none; display: block; height: 150px; width: 150px; float: left; margin: 0; padding: 0; }
*/

a.buya { display: none; height: 0; width: 0; border: none; z-index: 5; background: transparent; transition: background-color 0.25s; }
a.buya:hover { background: rgba(2,128,89,0.5); cursor: pointer; }

a#buya-shirt { display: block; position: absolute; top: 8px; left: 670px; height: 178px; width: 146px; }
a#buya-cap { display: block; position: absolute; top: 240px; left: 806px; height: 163px; width: 160px; }
a#buya-book { display: block; position: absolute; top: 464px; left: 546px; height: 172px; width: 189px; }
a#buya-flag { display: block; position: absolute; top: 241px; left: 464px; height: 166px; width: 192px; }

ul#smallpics { list-style: none; position: absolute; top: 145px; right: 0; margin: 0; height: 870px; /* (ht) */ width: 150px; padding: 0; overflow: hidden; padding-top: 104px; }
ul#smallpics li { list-style: none; margin: 0; margin-bottom: 23px; /* (ht) */ padding: 0; width: 150px; }
ul#smallpics a { text-decoration: none; }
ul#smallpics img { display: block; margin: 0; padding: 0; border: none; }
/*
ul#smallpics p { height: 36px; margin: 0; padding-top: 5px; padding-bottom: 0; padding-left: 13px; padding-right: 13px; color: #ffffff; background: #24797b; text-align: center; font-size: 0.83em; line-height: 130%; }
*/

div#latestnews { position: absolute; top: 1128px; /* (ht) */ left: 10px; width: 925px; height: 20px; overflow: hidden; color: #000000; background: #ffffff; padding: 10px; border: 1px solid #e3c6bb; text-align: center; font-size: 0.83em; }
div#latestnews h2 { margin: 0; padding-right: 10px; float: left; line-height: 20px; font-size: 1.2em; }
div#latestnews p { margin: 0; float: left; line-height: 20px; font-size: 0.83rem; }
div#latestnews a { text-decoration: none; color: #0000cc; font-weight: bold; }
div#latestnews a:hover { text-decoration: underline; }

/*
div#feature { position: absolute; bottom: 256px; left: 213px; border: 1px solid #24797b; color: #000000; background: #f1c52b; padding: 11px; width: 470px; }
div#feature img { float: left; margin: 0 1em 0 0; padding: 0; border: 1px solid #24797b; }
div#feature h2 { font-size: 1.2em; font-weight: bold; margin-top: 0; margin-bottom: 0.5em; }
div#feature h3 { font-size: 1.2em; font-weight: bold; margin-top: 0; }
div#feature a { float: right; }
*/
/*
div#feature { position: absolute; top: 0; right: 0; height: 205px; width: 265px; margin: 0; padding: 0; border: none; }
div#feature img { margin: 0; padding: 0; border: none; }
*/

div#socialmedia { position: absolute; top: 205px; left: 0px; margin: 0; padding: 0; height: 44px; width: 144px; }
div#socialmedia img { border: none; margin: 0; padding: 0; height: 44px; width: 144px; }

div#sponsors { position: absolute; top: 1128px; /* (ht) */ right: 10px; width: 250px; height: 70px; overflow: hidden; color: #000000; background: #ffffff; padding: 10px; border: 1px solid #e3c6bb; text-align: center; }
div#sponsors img { border: none; margin: 0; padding: 0; }

div#footer { color: #000000; background: #ad552e; padding-top: 220px; }

#nav { position: absolute; top: 1079px; /* (ht) */ left: 0px; width: 830px; }
#nav ul { margin: 0; width: 1100px; }
#nav li { margin: 0 0 0 60px; }
/*
#nav li#nav-home { margin: 0; }
*/

#extranav { position: absolute; top: 1119px; /* (ht) */ padding: 45px 95px 0 0; width: 1155px; height: 115px; color: #4c4c4c; background: #ad552e url(../images/layout/bg-header.jpg) top left repeat-x; }
#extranav li { margin-right: 38px; }


/* BigPicture video thumbnail styles */

.vid {
    height: 85px;
    width: 150px;
    position: relative;
    background-position: center center;
    background-size: cover;
}

.vid:before,
.vid:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.2s;
}

.vid:after {
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.5;
    background-size: 2em;
}

.vid:before {
    background: linear-gradient(150deg, #000, transparent 70%);
    opacity: 0.9;
}

.vid:hover:after {
    opacity: 0.8;
}

.vid:hover:before {
    opacity: 0.85;
}

.youtube:after {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20159.00691%20111.60904%22%3E%3Cpath%20d%3D%22M36.2%20111c-25-1.3-29.6-4-34-18.6C.3%2086.7%200%2080%200%2057.4%200%2019%202.3%209.7%2013.6%204c11.5-5.6%20120-5.6%20131.4%200%206%203%2010%208.7%2011.8%2017.2%202%209.8%203%2042.2%201.5%2057.5-2%2020.4-7%2028.5-19.2%2030.8-7.6%201.5-82%202.4-102.8%201.3zM85%2065.3c11.3-6%2020.4-11%2020.3-11L84%2043%2063%2032v22c0%2012%20.4%2022%20.8%2022%20.3%200%2010-5%2021.2-10.8z%22%20fill%3D%22%23db2823%22%2F%3E%3Cpath%20d%3D%22M63.2%2032c-.4.3-.2%201-.3%201.3v28.5c0%204.6%200%209.2.5%2013.8%200%20.4.3.7.6.5%206.3-3%2012.3-6%2018.4-9.3%207.5-4%2015-7.8%2022.2-12%20.3%200%201-.4.6-.8-12.8-7-25.7-13.5-38.6-20.2-1-.6-2.2-1.3-3.4-1.7z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
    background-size: 2.5em;
}


@media print {
    h1 { color: #000000; background: #ffffff; margin: 0; padding: 0; height: 205px; }
    h1 img { position: static; }
    p#slogan { margin: 0; padding: 0; width: auto; }
    img#mainpic { border: none; }
    div#footer { color: #000000; background: #ffffff; padding: 1em; }
    #nav { display: none; }
    #extranav { display: none; }
}