/*
	------------------------------
	News Details Page Styles
	------------------------------
*/

/* Pop up Gallery */
nav.g       { border-top: 1px solid #c9cccb; padding-top: 1em; }
nav.g ul    { list-style-type: none; margin: 0px; padding: 0px; }
nav.g ul li   { width: 18.4%; padding: 8% 0px; margin: 0px 0px 1em 2%; float: left; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; }
nav.g ul li:first-child   { margin-left: 0px; }
nav.g ul li a { position: absolute; width: 100%; height: 100%; background: none; top: 0px; left: 0px; padding: 0px; }
nav.g ul li a:hover:after   { content: "View gallery"; padding-top: 35%; text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; background: transparent url(/_resources/files/template/opaque-datagreen.png); }

div#pug img.la, div#pug img.ra, div#pug ul#pugthumbs    { transition: opacity .3s ease-in-out; }
div#pug { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: #000; z-index: 9999; }
div#pug > div   { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; background: #00434f; }

div#pug div.io  { position: absolute; top: 0px; right: 0; bottom: 0px; left: 0px; overflow: hidden; }
div#pug ul#puglist  { list-style-type: none; padding: 0px; margin: 0px; width: 100%; height: 100%; }
div#pug ul#puglist li   { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
div#pug ul#puglist li img   { max-width: 100%; max-height: 100%; }

div#pug div.d   { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 25em; background: #fff; }
div#pug div.d > div { padding: 0px 1em; text-align: left; overflow: auto; width: 100%; height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
div#pug div.d h1  { font-size: 1.45em; background: #00434f; color: #fff; padding: 0.15em 2em 0.15em 0.5em; position: absolute; top: 0px; left: 0px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }

div#pug a.c { position: absolute; top: 20px; right: 20px; padding: 0.15em 0.5em; font-size: 1.25em; font-weight: 600; color: #fff; background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); }
div#pug a.c:hover   { background: #00acaf; color: #fff; }

div#pug img.la  { position: absolute; left: 1em; top: 50%; padding: 1em; background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); cursor: pointer; opacity: 0; }
div#pug img.ra  { position: absolute; right: 1em; top: 50%; padding: 1em; background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); cursor: pointer; opacity: 0; }
div#pug img.la:hover, div#pug img.ra:hover  { background: #00acaf; }

div#pug ul#pugthumbs    { opacity: 0; list-style-type: none; margin: 0px; padding: 0.5em 0px 0px 0.5em; position: absolute; left: 0px; bottom: 0px; right: 0px; background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); overflow: auto; max-height: 30%; }
div#pug ul#pugthumbs li   { width: 10%; padding: 4% 0px; margin: 0px 0.5em 0.5em 0px; float: left; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; border: solid 1px #333; }
div#pug ul#pugthumbs li a { position: absolute; width: 100%; height: 100%; background: none; top: 0px; left: 0px; padding: 0px; }
div#pug ul#pugthumbs li a:hover:after   { content: " "; padding-top: 35%; text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; border: solid 5px #00acaf; }
div#pug ul#pugthumbs li a.c:after   { content: " "; padding-top: 35%; text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; border: solid 5px #00acaf; }

div#pug div.io:hover img.la, div#pug div.io:hover img.ra, div#pug div.io:hover ul#pugthumbs  { opacity: 100; }

/* Tables */
div#eventcontent div.table  { width: 100%; overflow: auto; margin-bottom: 2em; }
div#eventcontent table   { width: 100%; background: #fff; }
div#eventcontent table thead td, div#eventcontent table tfoot td { font-weight: 400; background-color: #00acaf; color: #fff; }
div#eventcontent table td { padding: 0.25em; border-left: solid 1px #fff; font-size: 1em; }
div#eventcontent table tbody tr:nth-child(2n+1) td { background-color: #ededed; }


/*  975px
--------------------------  */
@media screen and (max-width: 975px) {

    div#pug div.io  { right: 15em; }
    div#pug div.d   { width: 16.67em; font-size: 0.9em; }

}

/*  830px
--------------------------  */
@media screen and (max-width: 830px) {
    div#eventcontent table td { font-size: 0.75em; }
}

/*  650px
--------------------------  */
@media screen and (max-width: 650px) {

    div#pug div.io  { width: 100%; }
    div#pug div.d   { width: 100%; bottom: auto; overflow: visible; }
    
    div#pug > div   { overflow: auto; top: 10px; right: 10px; bottom: 10px; left: 10px; }
    
    div#pug ul#pugthumbs   { display: none; }
    div#pug div.io > div > img  { display: none; }

}