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

/* toopnav class means the top navigation items are coloured to indicate which page is
   selected.  When we are in a sub pagge, the colours are in the submenue but the 
   topnav does not show a page navigation */


/* GENERAL */
body{margin:0; padding:0; 
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
	font-size:0.9em;
	background-color:white;
}

a{color:#00a; font-weight:bold; }
.up{text-align:center; margin-bottom:15px; clear:both}
#centre {margin:auto; max-width:1024px;}
.outer{position: relative; background-color:white; padding:24px 24px 0 20px;} /*margin-top:10px;*/
#left{float:left; width:180px; border-right:1px solid #009;}
/* #right{margin-left:180px;} */
main{display:block; float:right; width:calc(100% - 200px);   
	margin:10px 0 0 0px;
	padding-left:3px;
}
.hrbottom{border-top:1px solid black; padding-top:5px; clear:both}
.bluebox{border:2px double #00a; margin:0 10px; padding:0 2px;}


#trigger{cursor:pointer; float:right; text-align:right}
#trigger{display:none}

.centred{margin:auto; width:100%; max-width:650px; display:block; clear:both}
.diagram{width:100%; max-width:600px; text-align:center;}

h1{color:#fff; font-family:"Times New Roman", Times, serif; font-size:40px; margin:0; padding:5px; background-color:#00a; text-align:center;}
h2{color:#00a; font-family:"Times New Roman", Times, serif; font-size:22px; margin:0; padding: 15px 0 0 0 }
h3{color:#00a; margin-bottom:0; padding:0; }
.firstpara{margin-top:0; padding-top:0}

.low{ vertical-align:bottom}
.email {color:#00a;	text-decoration: underline; cursor:pointer; margin-top:0; text-indent:60px}
.picleft{float:left; margin-right:10px}
.picright{float:right; margin-left:10px}



a.titlelink{color:#6b2b01;  font-weight:bold; text-decoration:none} /* Ie leave it looking like a title */

ul.bullist li{padding-bottom:20px}

input[type=button]{cursor:pointer}


.clear{clear:both; margin-bottom:1em}
.clearbasic{clear:both}

.firstpara{margin-top:0}


/* NAV/MENUS */
.fullwidth{background-color:#00a; margin:0 auto;}
.topnav{display:flex; flex-wrap:wrap; justify-content:space-around; clear:both; padding:0; margin:0 auto; background-color:#00a;  max-width:1000px;}
.topnav li{list-style:none; height:38px;  }
.topnav a{display:block; height:100%; padding:10px 4px; text-decoration:none; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:white}

nav{margin:0; padding:0}
nav ul{list-style-type:none; padding:0; margin:0 0 0 8px; width:135px; display:block; }
nav ul li{list-style:none; padding:0 0 1em 0; margin:0;  }
nav a{font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#0000aa; }	

/*Left nav links defined by body#pagename li.lpagename a */
body#overview            li.loverview           a,
body#gen_switchon        li.lgen_switchon       a,
body#gen_startshow       li.lgen_startshow      a,
body#gen_startfilm       li.lgen_startfilm      a,

body#lighting_mq          li.llighting_mq        a,
body#lighting_ctrl        li.llighting_ctrl      a,
body#lighting_DMXtheory   li.llighting_DMXtheory a,
body#lighting_DMXpractice li.llighting_DMXpractice a,
body#lighting_legacy      li.llighting_legacy    a,
body#lighting_ccts        li.llighting_ccts      a,
body#lighting_show0       li.llighting_show0     a,
body#lighting_followspot  li.llighting_followspot a,
body#lighting_remote      li.llighting_remote    a,

body#sound_SCS            li.lsound_SCS          a,
body#sound_mixer          li.lsound_mixer        a,
body#sound_ccts			  li.lsound_ccts         a,
body#sound_mics			  li.lsound_mics         a,

body#other_slopedisplay   li.lother_slopedisplay a,
body#other_comms          li.lother_comms        a,
body#other_internet       li.lother_internet     a,
body#other_genie          li.lother_genie        a,
body#other_builders       li.lother_builders     a,
body#other_website        li.lother_website      a,
body#other_electrical     li.lother_electrical   a
 		{display:block; padding:5px 2px; width:100%; background-color:#009; color:white; text-decoration:none;}




/*top level pages don't have left nav or trigger - Oh yes they do!*/
body.nonavtitle li.navtitle{display:none}

.toplevel nav.leftnav{display:none; width:0}

main.toplevel{float:none; width:calc(100% - 43px);  max-width:800px; clear:both; margin:0; padding:0 0 0 43px;}
.toplevel #trigger{display:none !important}


@media screen and (max-width: 600px) {
main{margin:0; padding:0}
#left{margin:0; border:1px solid #00a; border-radius:5px; float:none; position:absolute; top:40px; right:0px; background-color:#add8e6; display:none; z-index:1000}
#left{display:none}
nav.leftnav ul{margin:0em 0 0 3px;}
.outer {padding:0 3px}
main, main.toplevel{width:100%; clear:both; padding:0; background-image:none; border:none}
#trigger{display:block; text-align:right}

body.nonavtitle li.navtitle{display:block}

}
@media print{
#centre{width:100%; max-width:100% }
main{float:none;  !important; width:100% !important;}
nav#left{display:none !important; float:none !important; width:0 !important}


}