/* Parkytowers - Thin Clients Layout Stylesheet */

/* The markers that toggle the menu between visible or not */

.altmenu {display:none; float:left; position:relative; font-style:italic; font-size:1em;}

@media screen and (max-width: 780px) {  /* for mobile */
  div#ButtonMenu { display: none; }
  div#MainBody{ border-left: none; }
  .altmenu{ display: block; font-style:normal; font-size:3em;}
}

/* Header formatting */

#hdr img {
 border:0;
 padding:0;
 margin:0;
}

#hdr h1 {		/* For the page headers */
 display:    block;
 text-align: right;
 line-height: 95px;
 height:	   48px;
}

/* The main navigation menu */

#ButtonMenu p {
 padding-left:	20px;
 padding-bottom: 0;
 margin-top:     0;
 margin-bottom:  0;
 font-size:   10pt;
}

#ButtonMenu hr {
 position:relative;
 clear:both;
 margin-top: 0;
 margin-bottom: 6px;
}

/* this needed to be a class to work with IOS */

.left-menu {
 list-style:none;
 position:relative;
 margin:0;
 padding:0;
}

.left-menu ul {
 list-style:none;
 display:none;
 position:relative;
}


.left-menu li {
 list-style:none;
 position:relative;
}

.left-menu a
{
 /*  -moz-box-shadow:inset 0 1px 0 0 #ffffff;
	-webkit-box-shadow:inset 0 1px 0 0 #ffffff; */
 box-shadow:inset 0 1px 0 0 #ffffff;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
 background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
 background-color:#ededed;
/*	-moz-border-radius:6px;
	-webkit-border-radius:6px; */
 border-radius:6px;
 border:1px solid #dcdcdc;
 margin-bottom: 2px;
 display:inline-block;
 cursor:pointer;
 color:blue;
 width: 90px;
 font-family:Arial;
 font-size:14px;
 font-weight:bold;
 padding:4px 8px;
 text-decoration:none;
 text-shadow:0 1px 0 #ffffff;
}

.left-menu li:hover ul {
 display:inline-block;
 position:absolute;
 left:112px;
 z-index:99;
 margin:0;
 padding:0;
}

.left-menu ul li a {
 border:1px solid #888888;
 border-bottom: none;
 font-size:14px;
 color: red;
 background-color:#DCDCDC;
 background-image:none;
 padding:2px;
 margin-left:6px;
 margin-bottom:2px;
}

/*------ Menu Tabs--------*/

#TabMenu ul {
 padding:5px 10px 0 20px;
 list-style:none;
 width:100%;
}
#TabMenu li {
 display:inline;
 margin: 0;
 padding:0;
}
#TabMenu a {
 float:left;
 background:url(/thin/imgs/tableft.gif) no-repeat left top;
 margin:0;
 padding:0 0 0 4px;
 text-decoration:none;
}
#TabMenu a span {
 float:left;
 display:block;
 background:url(/thin/imgs/tabright.gif) no-repeat right top;
 padding:5px 15px 4px 6px;
 color: blue;
}
#TabMenu a span {float:none;}
#TabMenu a:hover span	{ color:#FF9834; }
#TabMenu a:hover		{ background-position:0% -42px; }
#TabMenu a:hover span	{ background-position:100% -42px; }
#TabMenu #current a	{ background-position:0% -42px; }
#TabMenu #current a span { background-position:100% -42px; }

/*--- photos at the top below the tabs  ---*/

#photos {
margin-top: 4px;
clear:both;
text-align: center;
width:100%;
}

#words {
margin-top: 4px;
clear:both;
text-align: left;
width:100%;
}

div.c-photos {
margin-top: 4px;
clear:both;
text-align: center;
width:100%;
}

div.center {
text-align: center;
}

h1 {
  color: blue;
  text-align: left;
}

h1.center{		/* Centered version */
  text-align: center;
}

h2.bars {	/* H2 with HRs above and below */
 border-style: solid;
 border-width: 2px 0;
}

.underline {
 text-decoration: underline;
}

.bunderline {
 font-weight: bold;
 text-decoration: underline;
}

.uh {	/* Underline after heading */
	margin: 0;
	padding-top: .5em;
	padding-bottom: .17em;
	border-bottom: 2px solid #aaa;
}

p.mtg {
  color: blue;
  font-size: larger;
  font-style: italic;
  line-height: 50%;
}

.tt {
  font-family: courier;
}

.ttb {
  font-family: courier;
  font-weight: bold;
}

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
UL {margin-left:0.1in;}
h2.center {text-align: center}

.indentboxs {
	background-color: #CCFFFF;
	margin: 20px;
	padding: 10px;
	border: medium double #003399;
}

.indentbox {
	width: 80%;
	background-color: #CCFFFF;
	margin: 20px;
	padding: 20px;
	border: medium double #003399;
}

.warning {
	clear:both;
	background-color: #CCFFFF;
	margin: 20px;
	padding: 20px;
	border: medium double #003399;
/*	float: left; */
}

.indent {
  margin-left:  2em;
  margin-right: 2em;
}

.indentb {
  margin-left:  4em;
  margin-right: 2em;
  color:	    blue;
}

.subhead {
	font-size: 150%;
	color: red;
}

img.none {		/* Don't know what is happening here */
border-style: none;
border:  0;
padding: 0;
position: relative;
}

img.show {		/* Don't know what is happening here */
border-style: none;
padding: 4px;
position: relative;
}

pre {
  overflow: auto;
  border: gray 1px dashed;
  padding: 5px;
  font-size: 0.9em;
  background: #efefef
}

pre.listing{
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/*--------- single img display to left or right ------*/

img.fleft {
  clear: left;
  float: left;
  margin-top: 0;
  margin-left: 0;
  margin: 10px;
  border:  0;
  position: relative;
}

img.fright {
  clear: right;
  float: right;
  margin-top: 0;
  margin-right: 0;
  margin: 10px;
  border:  0;
  position: relative;
}

img.frighte {
  float: right;
  margin-top: 0;
  margin-right: 0;
  margin: 10px;
  border:  0;
  position: relative;
}

img.mleft {
  float: left;
  margin-top: 0;
  margin-left: 0;
  margin: 10px;
  border:  0;
  position: relative;
}

/*------ displaying images in a block with margins ---*/

div.step {
  clear:both;
  margin-top: 25px;
  margin-bottom: 25px;
}


div.step img {
  float:left;
  padding-right: 10px;
  padding-bottom: 5px;
  position: relative;
  }


/*------ grey back ground ----*/

.gray {
  background-color:#E7E7E7
}

/*---- Centered tables ----*/
table.center {margin-left:auto; margin-right:auto;}

/*------ spec table -------*/
table.spec {
  border: 1px solid black;
  border-spacing: 3px;
  }
table.spec td { border: 1px solid black; padding: 2px; }
table.spec th { border: 1px solid black; padding: 2px; }

table.data {
  border: 1px solid black;
  border-spacing: 2px;
  }
table.data td { border: 1px solid black; padding: 3px; text-align: center; }
table.data th { border: 1px solid black; padding: 3px; text-align: center;}

table.single {
  border: 1px;
  border-spacing: 2px;
  border-collapse: collapse;
  }
table.single td { border: 1px solid black; padding: 3px; text-align: left;}
table.single th { border: 1px solid black; padding: 3px; text-align: left;}

table.padded td { padding: 2px;  text-align:center;}


/*---- CSS version of a table ----*/
.Table {display: table;}
.Title {
  display: table-caption;
  text-align: center;
  font-weight: bold;
  font-size: larger;
  }
.Heading {
  display: table-row;
  font-weight: bold;
  text-align: center;
  }
.Row{
  display: table-row;
  }
.Cell {
  display: table-cell;
  border: solid;
  border-width: thin;
  padding-left: 5px;
  padding-right: 5px;
  }

/*----- text stuff ------*/
h2.ul { 
  border-bottom-width:1px;
  border-bottom-style: solid;
  border-bottom-color: gray;
  }

h2.mh {
  color:blue;
  text-align:center
}

.uline {
clear:both;
border: 0;
color: #000000;
background-color: #000000;
height: 1px;
width: 100%;
text-align: left;
}

p.fl {text-indent: -5em; margin-left: 5em;}

.center {
  text-align: center;
}

/*----- for stuff each end of a line ----*/

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

/*------ hide stuff until required -----*/

.toggle__input {display: none;}
.toggle__input + label:after {content: "\25BC" }
.toggle__input:checked + label:after {content: "\25B2";}
.toggle__input:checked ~ .toggle__content {display: block;}    
.toggle__input:not(:checked) ~ .toggle__content {display: none;}

/*------ display one of two items -----*/

.swap__input {display: none;}
/*.swap__input + label:after {content: "SWITCH1" }
.swap__input:checked + label:after {content: "SWITCH2";} */
.swap__input:checked ~ .swap__one {display: block;}    
.swap__input:checked ~ .swap__two {display: none;}    
.swap__input:not(:checked) ~ .swap__one {display: none;}
.swap__input:not(:checked) ~ .swap__two {display: block;}