/* Hide all Architecture specific HTML on page load  https://github.com/peterhurford/64or32 */
.unknown, .mobile, .arch32, .arch64 { display: none; }
/* Only display the content if the JS added a matching class to the HTML tag */
html.unknown, html.mobile, html.arch32, html.arch64, html.unknown .unknown, html.mobile .mobile, html.arch32 .arch32, html.arch64 .arch64 { display: block; }

body {font-family: 'Source Sans Pro', serif;}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body, nav, main, header, footer, h1,h2,h3, section, article { margin: 0px 0px 0px 0px ;  }


/* Colours */
.fa-facebook      { background: #DBD6DA  ; color: #005377 ; }
.fa-twitter       { background: #DBD6DA  ; color: #55acee ; }
.fa-envelope      { background: #DBD6DA  ; color: #225a53 ; }
.fa-link          { background: #DBD6DA  ; color: #000000 ; }
header            { background: #163172; 
                    background: linear-gradient(90deg, rgb(22, 49, 114), rgb(87, 131, 174)); }
header,header a   { color: white ; }
main              { background: #f6f6f6; padding: 5px 20px 20px 40px ; font-size: 1.3em ; }
nav               { background: #1e56a0; color: white ; 
                    background: linear-gradient(90deg, rgb(30, 86, 160), rgb(124, 163, 215)); box-shadow: 0 0 10px rgba(0,0,0,1); }
footer            { background: #DBD6DA  ; }

/* Header */
header              { padding: 25px 30px 25px 50px ; }
header a span.fa-solid   { padding-right: 34px ; }
header h1           { font-size: 1.5em ; font-weight: 900 ; padding-bottom: 13px ;  }
header h2           { font-size: 1.2em ; font-weight: 600 ;  }
header h2 span      { color: yellow ; }
header h1,header h2 { padding-right: 30px ; }

/* Inspired by https://codepen.io/kirstyva/pen/qOproJ and http://www.cutcodedown.com/tutorial/mobileMenu   */
/* Nav */

input#menuShowHide { position:absolute; left:-999em; }
#mainMenu          { display:none; }
input#menuShowHide + label::before { content:'↓  Show '; }
input#menuShowHide:checked + label { margin:0; }
input#menuShowHide:checked + label::before { content:'↑ Hide '; }
input#menuShowHide:checked ~ #mainMenu { display: flex; }

nav label { font-size: 1.2em ; padding: 12px 20px 12px 20px ; width: 100% ; display: block ; }


nav ul                      { margin: 0 ; padding: 0 ; }
nav ul li, nav ul li ul li  { list-style-type: none; transition: 0.8s; }
nav li a                    { display: block ; color: white ; text-decoration: none ; font-size: 1.1em ; padding: 12px 20px 12px 20px ; }
nav > ul                    { display: flex ; flex-direction: column ; justify-content: space-around ;  width: 100% ;  }
nav a span.fa-solid   { padding-right: 14px ; }
nav li ul        { background : #0C1821 ; }
nav li ul a      { padding-left: 80px ; }
nav ul ul        { display: none ;  }
nav ul li:hover > ul,nav ul li:target { display: flex ; flex-direction: column ; justify-content: space-around ;  width: 100% ;  }
nav > ul > li:hover, nav > ul > li:active { background: #f18F01;   }   
nav ul li:hover > ul li a:hover  { background: #32B9B5 ; }
nav a.active { background: #f18F01 ; }
nav ul a.activecategory { background: #32B9B5 ; }

/* Main  */

main h2 {font-size: 2em ; font-weight: 800 ;  }
main div#media img { width: 100%; height: auto; max-width: 600px ; padding-bottom: 30px ; }
main div#media video { width: 100%; height: auto; max-width: 600px ; }
/* Thanks http://embedresponsively.com/ */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 70%; height: 70%; }


article.intro,article.new  { margin-top: 20px ; padding-bottom: 20px ; border-bottom: 4px dashed #D0CFCF ;  }

a.button { border: none; color: white; text-decoration: none; padding: 8px 0px 8px 12px ; font-size: 0.8em; display: inline-flex ; flex-flow: row nowrap ; justify-content: center ;  align-items: center ;   } 

a.button span.name { flex: 3 30px  ;   }
a.button span.fa-solid  { padding: 0px 8px 0px 8px ;}
a.button:active    { box-shadow: none ; }

a.homepage           { background-color: #235789 ; box-shadow: 3px 5px 6px #10283F ;  }
a.homepage span.name { margin: 0px 18px 0px 0px ;}
a.homepage:hover  { background-color: #2D71AF ; }

a.download        { background-color: #4CAF50 ; box-shadow: 3px 5px 6px darkgreen ; }
a.download span.name { margin: 0px 20px 0px 10px ;}
a.download:hover  { background-color: forestgreen ; }

a.showall         { border: none; color: white; text-decoration: none; padding: 8px 14px 8px 14px ; font-size: 0.7em; display: inline-flex ; flex-flow: row nowrap ; justify-content: center ; align-items: center ; background-color: MediumSeaGreen ; box-shadow: 3px 5px 6px #307672 ; }
a.showall:hover   { background-color: MediumTurquoise ; }


article.intro div  { margin: 30px 0px 0px 0px ; padding: 0 ; }
article.intro h2   { padding: 0px 30px 50px 0px ; }

article#installnotes { margin-top: 70px ; }
article#installnotes h2 { font-size: 1.4em ; padding-bottom: 5px ;  border-bottom: 4px dashed #D0CFCF ; }
article#installnotes ul { list-style: none ; }
article#installnotes li {margin-bottom: 40px ; }


footer    { padding: 30px ; border-top: 2px dashed #D0CFCF ; font-size: 1.1em ; }
footer a.social  { padding: 0px 10px 0px 10px ; }
footer h3 { margin: 20px 0px 20px 0px ; }


h2.softwarecategory            { margin: 1em 0em 1em 0em ; font-size: 1.2em  }
section.cards                  { display: flex ; flex-flow: column wrap ; justify-content: space-around ;  align-items: flex-start; }
section.cards article          { background : white ; margin: 0em 0em 1em 0em ; padding: 0em ; border: 2px ; border-radius : 15px ;  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s;}
section.cards article:hover    { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4); }
section.cards article h3       { background: inherit ; color: white ; font-size: 100% ; padding: 0.5em 1em 0.5em 1em ; border-radius : 10px 10px 0 0 ; }
section.cards article p        { font-size: 80% ; padding: 0em 1em 1em 1em ; background : white }
section.cards article a.cards  { color: black; text-decoration: none; background: green; }
section.cards article a:hover  { background: #32B9B5 ; }
section.cards article img      { width: 100%; height: auto; border: 0 ; vertical-align: middle; }
section.cards article          { flex: 1 1 calc(60% - 1em);  }


/* ---------------------  For desktop: ----------------------------*/ 
@media only screen and (min-width: 768px) {

#mainMenu   { display: flex; }
#menuShowHide + label { display: none ; } 
nav         { position: absolute ; width: 100% ; }    
nav > ul    { display: flex ; flex-direction: row ; justify-content: space-around ;  width: 90% ;  }
nav ul ul   { display: none ; position: absolute ;}    
nav ul li:hover > ul a, nav ul li:active > ul a { padding: 14px 20px 14px 20px ; width: 100 % ; }
nav > ul > li:hover, nav > ul > li:active { background: #f18F01; }    
nav ul li:hover > ul, nav ul li:target { position: absolute ; display: flex ; flex-direction: row ; justify-content: center ; flex-wrap: wrap ; width: 100% ; left: 0 ; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); z-index: 1;  border-top: 5px solid #f18F01;  }    

header h1,header h2 { display : inline ;}

article.intro      { margin-top: 100px ; padding-bottom: 10px ; }   
article.intro h2,span.homepageurl,div.install,div.showall  { display: inline-block ; vertical-align: middle ;} 
article.intro div  { margin: 0px 0px 0px 0px ; padding: 0 ; }
article.intro h2   { padding: 0px 30px 0px 0px ; }

a.button { padding: 8px 20px 8px 20px; font-size: 1em; }
a.showall { font-size: 70% ; }    
a.download { margin: 0px 30px 0px 10px ;}    

section.cards { flex-flow: row wrap }
section.cards article { flex: 0 1 calc(30% - 1em) ; }
h2.softwarecategory   { margin: 3em 0em 1em 1em ; font-size: 1.4em   }

}  /* end of for desktop: */