.QCHeader {
  margin: 0;
  color: navy;  /* #FFB800 */
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  }

.SFHeader {
  color: navy;  /* #FFB800 */
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  }

.SFHeader a {
  padding-right: 100px;
  }

#Toolbar {
  width: 95%;
  height: 1em;
  padding: 10px 5px;
  list-style: none;
  font-size: 16px;
  font-weight: normal;
  background-color: navy;
  }

#Toolbar ul {
  height: 0.5em;
  }

#Toolbar li {
  float: left;
  width: 10em;
  height: 1.5em;
  padding: 0 20px;
  list-style: none;
  background-color: navy;
  color: yellow;
  }

#Toolbar li ul {
  position: absolute;
  width: 10em;
  padding: 0;
  left: -999em;
  }

#Toolbar li:hover ul {
  left: auto;
  }

#Toolbar a {
  display: block;
  margin: 0;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: white;
  }

#Toolbar a:hover {
  font-weight: normal;
  color: navy;
  background-color: lightsteelblue;
  }

div.BrowserTest {
  width: 40%;
  margin: 0 auto;
  padding: 3px;
  border: 3px solid black;
  text-align: center;
  background-color: red;
  }

div.Footer {
  width: 98%;
  padding: 5px;
  margin: 30px auto 0 auto;
  border-top: 3px solid #1729B0;
  text-align: center;
  color: navy;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  }

textarea {
  resize:both;  /* none|horizontal|vertical|both */
  }

br {
  clear: left;
  }

P.clear {
  clear: both;
  float: none;
  height: 1px;
  }

P.indent {
  text-indent: 3em;
  }

div.viewDiv {
  visibility: visible;
  display: inline;
  }

div.drawDiv {
  visibility: visible;
  display: none;
  }

.drawWin {
  /* width: 510px; */
  clear: both;
  float: center;
  padding: 5px;
  }

P.fleft {
  padding: 0px 40px 0px 0px;
  float: left;
  }

P.center {
  text-align: center;
  font-size: 16px;
  font-family: Times-Roman,Bookman,serif;
  font-weight: normal;
  font-variant: small-caps;
  padding: 0px;
  color: navy;
  }

P.center a {
  text-decoration: none;
  color: navy;
  }

td {
  text-align: center;
  }

.modeTab {
  background-color: silver;
  }

.Button {
  background-color: silver;
  }

.plabel { background-color: antiquewhite; display: table-cell; color: navy; }
.MOff  { background-color: antiquewhite; display: table-cell; color: antiquewhite; }
.MOn   { background-color: antiquewhite; display: table-cell; color: navy; }
.Row   { background-color: antiquewhite; display: none; }
.main { background-color: silver; }
.metl { background-color: silver; display: none; }

table.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  }

div.gallery {
  clear: both;
  }

div.galleryframe {
  float:left;
  width:300px;
  padding:10px;
  border:2px solid navy;
  margin: 5px;
  background: #eee;
  }

div.screenshot {
  padding:5px 5px;
  width: 210px;
  float: left;
  text-align: center;
  }

div.logo {
  padding: 0px 10px;
  float: left;
  text-align: center;
  }

P.author {
  clear: both;
  margin-left: 3em;
  }
.btnav { background-color: #84C1DF; border: 1px #000000 solid;} 
.titlu {
	font-size: 36px;
}
.titlu strong {
	font-size: 36pt;
	font-family: Verdana, Geneva, sans-serif;
}
.lista11 {
	font-size: 24px;
	line-height: 1.5;
	
}
.lista1 {
	font-size: 20px;
	line-height: 1.5;
	margin-top: 0px;
	margin-bottom: 0px;
}
.listpub {
	font-size: 20px;
	line-height: 1.0;
	margin-top: 2px;
	margin-bottom: 2px;
}
.listpuba {
	font-size: 20px;
	line-height: 1;
	margin-top: 0px;
	margin-left: 20px;
	margin-bottom: 0px;
}
.listpubb {
	font-size: 20px;
	line-height: 1;
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 0px;
}
.listq {
	font-size: 30px;
	font-family: Verdana, Geneva, sans-serif;
	line-height: 1;
	margin-top: 30px;
	margin-left: 0px;
	margin-bottom: 0px;
}
.lista1a {
	font-size: 20px;
	line-height: 1.2;
	margin-top: 0px;
	margin-bottom: 0px;
}
.lista11a {
	font-size: 20px;
	line-height: 1.2;
	margin-top: 2px;
	margin-bottom: 2px;
	font-family: Arial, Helvetica, sans-serif;
}
.lista111a {
	font-size: 22px;
	line-height: 1.2;
	margin-top: 2px;
	margin-bottom: 2px;
	font-family: Arial, Helvetica, sans-serif;
}
.lista2 {
	font-size: 24px;
	line-height: 1.5;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

.lista2 A{
	text-decoration:none;
}

.lista2a {
	font-size: 22px;
	line-height: 1.5;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

.lista2a A{
	text-decoration:none;
}

.lista3 {
	font-size: 24px;
	line-height: 1;
	margin-top: 0px;
	margin-bottom: 0px;
}
.lista4 {
	font-size: 32px;
	line-height: 2;
	margin-top: 0px;
	margin-bottom: 0px;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
}
.lista4b {
	font-size: 28px;
	line-height: 2;
	margin-top: 0px;
	margin-bottom: 0px;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
}
.lista44b {
	font-size: 20px;
	line-height: 1.2;
	margin-top: 0px;
	margin-bottom: 0px;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
}
.lista4a {
	font-size: 20px;
	line-height: 2;
	margin-top: 0px;
	margin-bottom: 0px;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 20px;
}
.lista4aa {
	font-size: 18px;
	line-height: 2;
	margin-top: 0px;
	margin-bottom: 0px;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
}
.lista5 {
	font-size: 20px;
	line-height: 1.2;
	margin-top: 0px;
	margin-bottom: 0px;
	font-variant: small-caps;
}
.lista_t {
	margin-left: 20px;
	border-left-width: 20px;
	font-size: 24px;
	line-height: 1.5;
}
body {
	background-color: #ECECEC;
}

html {
        overflow-y: scroll;
}


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 

 
.pic {
  border: 10px solid #fff;  
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
   
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}


/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.focus:hover {
  border: 10px solid #000;
  border-radius: 50%;
}



/*Example 2*/
#c3 {
	clear: both;
	width: 540px;
	margin: 0 auto;
	min-height: 233px;
}

#c4 {
	clear: both;
	width: 569px;
	margin: 0 auto;
	min-height: 165px;
}
#i4 img{
    height: 165px;
    width: 569px;
    margin: 1px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#i4 img:hover {
	height: 260px;
	width: 845px;
	margin-left: -138px;
	
}
#c5 {
	clear: both;
	width: 569px;
	margin: 0 auto;
	min-height: 292px;
}
#i5 img{
    height: 292px;
    width: 569px;
    margin: 1px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#i5 img:hover {
	height: 462px;
	width: 900px;
	margin-left: -165px;
	
}

#i3 img{
    height: 233px;
    width: 540px;
    margin: 1px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#i3 img:hover {
	height: 350px;
	width: 810px;
	margin-left: -135px;
	
}
#c2 {
	clear: both;
	width: 487px;
	margin: 0 auto;
	min-height: 262px;
}

#i2 img{
    height: 262px;
    width: 487px;
    margin: 1px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#i2 img:hover {
	height: 393px;
	width: 730px;
	margin-left: -121px;
	
}
#c1 {
	clear: both;
	width: 540px;
	margin: 0 auto;
	min-height: 252px;
}

#i1 img{
    height: 252px;
    width: 540px;
    margin: 1px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#i1 img:hover {
	height: 378px;
	width: 810px;
	margin-left: -135px;
	
}