@charset "utf-8";
/* CSS Document */

@font-face
{
   font-family: 'Kimberley';
   src: url('Fonts/kimberley bl.ttf');
}

@font-face
{
   font-family: 'EurostileLTStd';
   src: url('Fonts/EurostileLTStd.otf');
}

@font-face
{
   font-family: 'BankGothic';
   src: url('Fonts/bankgthd.ttf');
}

@font-face
{
   font-family: 'XWing';
   src: url('Fonts/xwing-miniatures.ttf');
}

@font-face
{
   font-family: 'XWing-Ships';
   src: url('Fonts/xwing-miniatures-ships.ttf');
}

@font-face
{
    font-family: 'Legion';
    src: url('Fonts/Legionfont.ttf');
}

@font-face
{
    font-family: 'Armada';
    src: url('Fonts/Armadafont.ttf');
}

@font-face
{
    font-family: 'Armada-Ships';
    src: url('Fonts/Armadashipfont.ttf');
}

body, html
{
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: black;
}

.Title
{
    position: absolute;
    z-index: 10;
    top: 0px;
    left: 0px;
    font-family: Kimberley, Arial, sans-serif;
    color: white;
    font-size: 5vw;
    padding: 10px;
    height: 80px;
    line-height: 80px;
}

.Title span
{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.Title img
{
    height: 80px;
    float: left;
    margin-right: 20px;
}

.TitleCondensed
{
    font-family: Kimberley, Arial, sans-serif;
    color: white;
    padding: 5px;
    height: 40px;
    line-height: 40px;
    background-color: black;
}

.TitleCondensed img
{
    height: 30px;
    float: left;
    margin-right: 20px;
    margin-left: 10px;
    top: -10px;
}

.PortraitHide
{
    display: inline;
    vertical-align: middle;
    line-height: normal;
    font-size: 25px;
}

.BannerSlideShow
{
    width:100%;
	height: 200px;
	padding: 0px;
	margin: auto;
	border: none;
	overflow: hidden;
	position: relative;
    top: 50px;
}

.BannerSlideShow img
{
	margin: 0px;
	padding: 0px;
	border: none;
	height:100%;
	overflow: hidden;
}

.SlideshowImage
{
	height: 100%;
    width: 0%;
    position: relative;
    left: 0px;
    top: 0px;
    float: left;
}

.SlideshowImage img
{
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%);
}

.SlideShowOverlay
{
    width:100%;
    margin: auto;
	position: relative;
    top: -150px;
    z-index: 5;
}

.SlideShowOverlay td
{
    padding: 0px;
}

.Header
{
    line-height: 100%;
    font-family: BankGothic, Arial, sans-serif;
}

.Header a
{
    text-decoration: none;
    color: white;
    display: inline-block;
    float: right;
    padding: 10px 25px;
    margin-top: 0px;
    text-align: center;
}

.Header a:hover
{
    text-decoration: underline;
}

.HeaderLink
{
    border: 2px solid transparent;
    background-image: linear-gradient(to right, black, black), linear-gradient(to bottom, black, white 50%, black), linear-gradient(to left, black, black), linear-gradient(to top, black, white 50%, black);
    background-origin: border-box;
    background-size: 100% 2px, 2px 100%, 100% 2px, 0px 100%;
    background-position: top left, top right, bottom right, bottom left;
    background-repeat: no-repeat;
}

.HeaderCondensed
{
    line-height: 100%;
    font-family: BankGothic, Arial, sans-serif;
}

.HeaderCondensed a
{
    text-decoration: none;
    color: white;
    display: inline-block;
    float: right;
    padding: 10px 25px;
    margin-top: -5px;
    text-align: center;
    height: 40px;
}

.HeaderCondensed a:hover
{
    text-decoration: underline;
}

.CurrentLink
{
    text-decoration: underline;
}

.Content
{
    position: relative;
    top: -150px;
    min-height:calc(100% - 500px);
    margin: 50px;
    background-color: white;
    font-family: EurostileLTStd, Arial, sans-serif;
    font-size: 18px;
    padding: 30px;
    bottom: 0px;
}

.Content a
{
    text-decoration: underline;
    color: black;
}

.CondensedContent
{
}

.CondensedContent a
{
    text-decoration: underline;
    color: black;
}

.linkIconBox
{
   float: right;
   width: 64px;
   border-left: solid 2px black;
   padding-left: 10px;
   margin-right: -20px;
   margin-left: 10px;
}

.iconLink
{
   width: 32px;
   border: 0px;
   margin-top: 5px;
   margin-bottom: 5px;
}

.Footer
{
	font-family: "Barlow Condensed", "San-Serif";
	font-size: 20px;
	position: relative;
	color: white;
	width: 95%;
	text-align: left;
	padding: 10px;
    top: -200px;
}

.Footer img
{
	float: right;
	width: auto;
	height: 100%;
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 0px;
	right: 3%;
}

.Footer a
{
	color: white;
	text-decoration: none;
}

.Footer a:hover
{
	color: #A00808;
}

.CondensedFooter
{
	font-family: "Barlow Condensed", "San-Serif";
	font-size: 15px;
	position: relative;
	color: white;
	width: 100%;
	text-align: left;
	padding: 10px;
    bottom: 0px;
}

.recurringEvents
{
    width:calc(40% - 30px);
    float:left;
    margin-left:30px;
}

.embededCalendar
{
    width:calc(60% - 25px);
    float:left;
    height: calc(100% - 520px);
    margin: 10px;
    border:solid 1px #777;
    padding: 0px;
}

.addRemovePlayers
{
   float:left;
   display:none;
   padding:5px;
   margin-top:15px;
}

.addRemovePlayers button,
.addRemovePlayers input
{
   margin:2px;
}

table.dataTabLinks
{
   min-width: 100%;
   margin: 0;
   padding: 0;
   border-spacing: 0;
   border-collapse: collapse;
}

table.dataTabLinks td
{
   padding:0;
   margin:0;
   min-width: 2px;
   border-bottom: solid 1px black;
   white-space:nowrap;
}

table.dataTabLinks td.tab a:link,
table.dataTabLinks td.tab a:visited
{
   display: inline-block;
   float: left;
   color: black;
   padding: 10px 25px;
   margin: 0px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   font-family: "Arial", Sans-serif;
   border-right: solid 1px black;
   border-top: solid 1px black;
   border-left: solid 1px black;
   background-color: rgba(128,128,128,0.4);
}

table.dataTabLinks td.tab a:hover,
table.dataTabLinks td.tab a:active
{
   background-color: rgba(128,128,128,0.2);
}

table.dataTabLinks td.currentTab
{
   border: none;
}

table.dataTabLinks td.currentTab a:link,
table.dataTabLinks td.currentTab a:visited
{
   display: inline-block;
   float: left;
   color: black;
   padding: 10px 25px;
   margin: 0px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   font-family: "Arial", Sans-serif;
   border-right: solid 1px black;
   border-top: solid 1px black;
   border-left: solid 1px black;
   background-color: rgba(128,128,128, 0);
}

.dataTab
{
   min-width: 100%;
   margin:0;
   /*background-color: rgba(128,128,128,0);*/
   border-left: solid 1px black;
   border-right: solid 1px black;
   border-bottom: solid 1px black;
}

.timer
{
    margin-top: -60px;
    height:50px;
    width:200px;
    font-size:200%;
    font-weight: bold;
}

.xmlEditBox
{
    white-space:pre;
    word-wrap:normal;
    overflow:auto;
    width: 100%;
    padding: 10px;
    border: 3px solid #999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
* List Data Table Styles
*/
table.listData
{
   width: 100%;
   margin: 0 auto;
   clear: both;
   border-collapse: seperate;
   border-spacing: 0;
}

table.listData thead th,
table.listData tfoot th
{
   font-weight: bold;
}

table.listData thead th,
table.listData thead td
{
   padding: 10px 18px;
   border-bottom: 1px solid #111111;
}

table.listData tfoot th,
table.listData tfoot td
{
   padding: 10px 18px 6px 18px;
   border-top: 1px solid #111111;
}

table.listData tbody tr
{
   background-color: rgba(128,128,128,0);
}

table.listData tbody tr:nth-child(even)
{
   background-color: rgba(128,128,128,0.4);
}

table.listData tbody th,
table.listData tbody td
{
   padding: 8px 10px;
   border-top: 1px solid #dddddd;
   text-align: center;
}

table.listData tbody tr:first-child th,
table.listData tbody tr:first-child td
{
   border-top: none;
}

/*
* Simple List Table Styles
*/
table.simpleList
{
   width: 100%;
   margin: 0 auto;
   clear: both;
   border-collapse: seperate;
   border-spacing: 0;
}

table.simpleList tbody tr
{
   background-color: rgba(128,128,128,0);
}

table.simpleList tbody tr:nth-child(even)
{
   background-color: rgba(128,128,128,0);
}

table.simpleList tbody th,
table.simpleList tbody td
{
   padding:0;
   margin:0;
   border: none;
   text-align: center;
}

/*
* Squad Display Styles
*/
.squadDisplayIcon
{
    width: 20px;
    border: 1px solid rgba(1, 0, 0, 0);
}

.squadDisplayIconUsed
{
    width: 20px;
    border: 1px solid rgba(255, 0, 0, 1);
    opacity: 0.5;
}

.squadDisplay
{
   float:initial;
   display:none;
   position: absolute;
   clear:left;
   background-color: #EEEEEE;
   width: 800px;
   /*height: 200px;*/
}

.squadDisplay .close
{
   float: right;
   margin: 0px;
   padding: 2px;
   border: none;
   width: 25px;
}

.squadDisplay table
{
   width:100%;
   border: solid 1px black;
   margin: 0px;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0;
}

.squadDisplay table thead th
{
   font-size:120%;
   border-bottom: solid 1px black;
   margin: 0px;
   padding: 0px;
   vertical-align:middle;
}

.squadDisplay p.pilotName
{
   font-size:115%;
   margin: 0px;
}

.squadDisplay p.upgrades
{
   font-size:80%;
   margin: 0px 0px 10px;
}

.ruleEntry
{
    margin: 0px;
}

.ruleText
{
    font-family: 'Arial';
    margin-left: 1em;
}

.textImage
{
    height: 0.8em;
}

.rulesIcon
{
   font-family: 'XWing', Arial, sans-serif;
   font-weight:normal;
   font-style:normal;
}

.resourceButtonRow
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.resourceButtonRow a
{
    text-decoration: none;
}

.resourceButtonRow a:hover
{
    background-color: #CCCCCC;
}

.resourceLink
{
    font-family: Kimberley, Arial, sans-serif;
    font-size: 2vw;
    border-radius: 10px;
    border: 2px double black;
    width: 20vw;
    height: 20vw;
    margin: 2vw;
    text-align: center;
    display: table;
    vertical-align: middle;
    text-decoration: none;
}

.resourceLink span
{
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
    text-decoration: none;
}

.countDown
{
    float: right;
	padding-top: 5px;
	padding-right: 30px;
	font-family: monospace;
	font-size: 50px;
}

/* Responsive CSS Stuff*/
@media only screen and (max-aspect-ratio: 1/1)
{
    .recurringEvents
    {
        width:calc(100% - 60px);
    }

    .embededCalendar
    {
        width:calc(100% - 60px);
        height: calc(30% - 520px);
    }

	.countDown
	{
		float: inherit;
	}
}

@media screen and (min-width: 1200px)
{
    .Title
    {
        font-size: 60px;
    }
}


@media screen and (max-width: 830px)
{
    .PortraitHide
    {
        display: none;
    }
}