/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
  position: relative;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


.footer
{
	margin-top:300px;
}




details summary::-webkit-details-marker{display: none;}

.flat {
  position: relative;
  width: 95%;
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
  font-size: 16px;
  color: black;
  text-align: left;

  background: #FFF;
  border: 0;
  /*border-bottom: 1px solid #B5B5B5;*/
  vertical-align: middle;
  cursor: pointer;
  font-family:Arimo; 
  margin:auto;

  

 
}
.flat:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}



.imgBtn
	{
		width:100%;
		float:right;
		max-width:15px;
		margin-right:2%;
		
	}


@media all and (max-width: 400px)
{
	.flat {
		font-size: 14px;
		padding: 5% 5% 5% 5%;
	}
	.imgBtn
	{

		width:10px;
		
	}
	
	

}


@media all and (max-width: 200px)
{
	.footer
	{
		margin-top:150px;
	}


	

}









#main_area [id^="accordion-html5"]   {
	
	/*max-width: 800px;*/
	margin-left: auto;
	margin-right: auto;
}
#main_area [id^="accordion-html5"]  details  {
	padding-bottom: 30px;
	/*max-width: 800px;*/
	padding-top: 30px;
}

#main_area [id^="accordion-html5"]  details p  {
	color: #FFFFFF;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	line-height: 150%;
	text-align: justify;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
}
#main_area [id^="accordion-html5"]  details p a  {
	background-color: #00508B;
	color: #FFFFFF;
	text-decoration: underline;
}
h2 a {
	color: #00508B;
}

#courses {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	min-width: 400px;
}




body {
  

  font-family: 'Arial', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7em;
  background: #3C3C3B;
  color: #004890;
  
}



h1, h2, #super-list, .element, .tagline, #index-list, 
.super-list .link {
  font-family: 'Archivo Narrow',Arial,Helvetica,sans-serif;
}

h1, h2, h3 { font-weight: bold; }

h1 {
  font-size: 16px;
  line-height: 1.1em;
  color:#000;
}


@at all and (max-width: 400px) {
  a.likeAButton:active {
    /* reducing base font size will reduce all rem sizes */
    font-size:100%;
	 color:#0000;
  }
  
  a.likeAButton:hover {
	font-size: 100%;
	 color:#0000;
  
 }
 a.likeAButton {
	font-size: 100%;
	 color:0000;
  
 }
 h1 {
	  font-size: 25px;
	  line-height: 1.1em;
	}


}




h2 {
  font-size: 16px;
  line-height: 1.1em;
}

 ol {
  margin-left: 1.5em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
 
li {
  font: 150 15px/1.5 Tahoma, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
  margin: 0 10px 10px 0; 
  display: in-line;
  max-width: 100px;

}
 
li:last-child {
  border: none;
}
 
li a {
  text-decoration: none;
  color: #000;

  align:left;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}


 
li a:hover {
  font-size: 15px;
  background: #f6f6f6;
}





a,
a code {
  color: #004890;
  text-decoration: none;
  font-size:14;
  font-family:Arial, Geneva, sans-serif;
}

a:hover,
a:hover code { 
  color: #4BF; 
  font-size:22;
  font-family:Arial, Geneva, sans-serif;
}

a:active,
a:active code {
  color: #67b4cf;
  background: black;
  font-size:22;
  font-family:Arial, Geneva, sans-serif;
  
}

a img { border: none; }

em { font-style: italic; }
strong { font-weight: bold; }

blockquote {
  padding-left: 1.0em;
  margin-left: 1.0em;
  border-left: 1px solid #333;
  font-style: italic;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html,
body {

  max-width: 1000px;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
 /* border: 1px solid #0280CA; */
}



#container {
   padding: 5px;
  margin: 0 auto;
}


.variable-sizes .element.width2 { width: 230px; }

.variable-sizes .element.height2 { height: 230px; }

.variable-sizes .element.width2.height2 {
  font-size: 2.0em;
}



.clickable .element:hover {
  cursor: pointer;
}

.clickable .element:hover h3 {
  text-shadow:
    0 0 10px white,
    0 0 10px white
  ;
}

.clickable .element:hover h2 {
  color: white;
}

/**** Example Options ****/

#options {
  padding-bottom: 1.0em;
}

#options h3 {
  margin-bottom: 0.2em;
  font-size: 15px;
}

#options h4 { 
  font-weight: bold;
}

#options ul {
  margin: 0;
  list-style: none;
}

#options ul ul {
  margin-left: 1.5em;
}

#options li {
  float: left;
  margin-left:2px;
    margin-right:2px;
}

#options li a {
	padding: 5px 10px;
	background: #0280ca;
	border: 1px solid #0280ca;
	color: white;
	font-family: Arimo, Arial, Geneva, sans-serif;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;
	cursor: pointer;
	line-height: 3;
	width: auto;
	height: auto;
	text-align: center;
	-ms-transition: background-color 0.25s ease-out;
	-o-transition: background-color 0.25s ease-out;
	-moz-transition: background-color 0.25s ease-out;
	-webkit-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#options li a:hover {
 	background:#23367a;
	text-decoration: none;
	color: white;
}



#options li a {
  border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
  border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );
}




#options li a.selected {
	padding: 5px 10px;	background:#23367a;
	border: 1px solid #23367a;
	color: white;
	color: white;
	font-family: Arimo, Arial, Geneva, sans-serif;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;
	cursor: pointer;
	line-height: 3;
	width: auto;
	height: auto;
	text-align: center;
	-ms-transition: background-color 0.25s ease-out;
	-o-transition: background-color 0.25s ease-out;
	-moz-transition: background-color 0.25s ease-out;
	-webkit-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/* Combination filter options*/


#options .option-combo {
  display: inline-block;
  }

#options .option-combo ul {
  margin-right: 20px;
  display: inline-block;
}

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
}

/* Color shapes */

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}
 
.color-shape.round {
  -webkit-border-radius: 35px;
     -moz-border-radius: 35px;
          border-radius: 35px;
}
 
.color-shape.big.round {
  -webkit-border-radius: 75px;
     -moz-border-radius: 75px;
          border-radius: 75px;
}
 
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
 
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

.color-shape a {
  display: block;
  height: 100%;
}

.color-shape a:hover {
  background: white;
  background: hsla( 0, 0%, 100%, 0.5 );
}

/**** Horizontal ****/

.horizontal #container {
  height: 80%;
}

#copy {
  max-width: 640px;
}

/**** Photo demo ****/

.photos .photo {
  width: 320px;
  margin: 5px;
  float: left;
}

.photos .photo img {
  display: block;
  width: 100%;
}



.demos #content {
  height: 100%;
}

/**** Docs ****/

.docs #content {
  max-width: 640px;
}

.docs #content a:hover {
  border-bottom: 1px dotted;
}

/**** Doc page nav ****/



#site-nav {
  width: 200px;
  position: absolute;
  left: 10px;
  top: 0px;
  padding-top: 20px;
  font-size: 12px;
}

#site-nav h1 {
  font-size: 24px;
  margin-bottom: 0.5em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arimo, Arial, sans-serif;
}

#site-nav h2 {
  font-size: 17px;
  font-weight: normal;
  margin: 0 0 0.3em;
  border-top: none;
}

#site-nav h1 a { color: #4FB; }
#site-nav h1 a:hover { color: #4BF; }

#site-nav ul {
  list-style: none;
  margin: 0 0 1.0em;
  font-weight: bold;
}

#site-nav ul ul { margin-bottom: 0; }

#site-nav ul a {
  display: block;
  border: none;
  padding: 1px 5px;
}

#site-nav ul .current a {
  background: hsla( 0, 0%, 0%, 0.3 );
  color: #1BF;
}
#site-nav ul a:hover,
#site-nav ul .current a:hover { color: white; }
  
#site-nav ul .current .toc a {
  font-size: 12px;
  padding-left: 1.2em;
  font-weight: normal;
}

/**** Doc content ****/

.docs #content h2 {
  border-top: 1px solid #333;
  padding-top: 0.8em;
  margin-bottom: 0.8em;
}

.docs #content h2:target { 
  padding: 10px;
  background: white;
  color: #222;
}

.docs #content h3 {
  color: #FEC;
  background: hsla( 0, 0%, 75%, 0.05 );
  padding: 2px 0.5em;
  margin-bottom: 0.5em;
  font-size: 1.15em;
}

.docs #content h4 {
  margin-bottom: 0.5em;
  font-size: 14px;
}


footer {
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid #333;
  padding: 0.8em 0;
}

pre {
  padding: 10px;
}

pre, code {
  background: grey;
  color: blue;
  font-family: 'Monaco', monospace, sans-serif;
}

#content code {
  font-size: 12px;
}

#content pre {
  line-height: 1.6em;
}

h3#options {
  padding-bottom: 0;
}

.option-def dl dt,
.option-def dl dd {
  float: left;
  padding: 0 1.2em;;
  background: #161616;
  line-height: 36px;
  height: 36px;
}

.option-def dl.header dt,
.option-def dl.header dd {
  background: #444;
}

.option-def dl .option-type {
  font-size: 13px;
  color: #AAA;
  font-style: italic;
}

.option-def dl dd {
  border-left: 1px solid #222;
}

/* Tagline */

.docs .tagline {
  font-size: 22px;
  font-weight: 300;
}

/* as-is from MIT */

.docs .as-is {
  font-size: 95%;
}

/* Commercial license blurb */

.docs #commercial {
  background: white;
  padding: 10px;
  font-size: 14px;
  color: #1F1F1D;
}

.docs #commercial a { font-weight: bold;}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */



/**** Super list ****/


/**** Sites using Isotope ****/

#sites h2 {
  display: none;
  padding: 0.4em;
  line-height: 32px;
  margin-bottom: 0.4em;
  -webkit-transition: background-color 0.8s;
     -moz-transition: background-color 0.8s;
       -o-transition: background-color 0.8s;
          transition: background-color 0.8s;
}

#sites h2 img {
  display: inline-block;
  margin-right: 0.4em;
  vertical-align: bottom;
}

#sites h2.loading {
  background: white;
  color: #222;
}
#sites h2.error {
  background: red;
  color: #222;
}


#sites ul {
  margin: 0;
}

.super-list .example {
  list-style: none;
  float: left;
  width: 230px;
  margin: 5px;
}

.super-list .example a,
.super-list .example b,
.super-list .example img {
  display: block;
}

.super-list .example img { width: 100%; }

.super-list .example a {
  background: #1F1E1D;
}

.super-list .example a:hover {
  background: white;
  color: #111;
}

.super-list .example b { 
  font-weight: bold;
  line-height: 1.3em;
  padding: 3px;
  padding-top: 8px;
}

.super-list .link {
  float: left;
  position: relative;
  font-size: 24px;
  line-height: 1.2em;
  font-weight: 300;
  margin: 5px;
}

.super-list .link {
  width: 230px;
  height: 110px;
}

.super-list .link a {
  display: block;
  padding: 10px;
  padding-left: 65px;
  height: 90px;
  background: #1F1E1D;
  color: #FE5;
  -webkit-border-radius: 14px;
     -moz-border-radius: 14px;
          border-radius: 14px;
}

.super-list .link a:before {
  content: '➔';
  font-size: 70px;
  position: absolute;
  top: 30px;
  left: 5px;
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

.super-list .link.away a:before {
  top: 25px;
  left: 0px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.super-list .link a:hover {
  background: #E58;
  color: white;
}

.super-list .feature .name {
  bottom: auto;
  top: 140px;
  left: 18px;
  font-size: 20px;
}

/**** BIG Graph ****/

.big-graph {
  background: white;
  height: 600px;
  margin: 20px auto;
}

.big-graph .project {
  width: 45px;
  height: 45px;
  float: left;
}

.big-graph .project .icon {
  pointer-events: none;
  width: 31px;
  height: 31px;
  background: white;
  margin-left: 7px;
  -webkit-transition: -webkit-transform 0.25s;
     -moz-transition: -moz-transform    0.25s;
      -ms-transition: -ms-transform     0.25s;
       -o-transition: -o-transform      0.25s;
          transition: transform         0.25s;
}

.big-graph .project:hover {
  z-index: 5;
  
}

.big-graph .project:hover .icon {
  -webkit-transform: scale(3);
     -moz-transform: scale(3);
      -ms-transform: scale(3);
       -o-transform: scale(3);
          transform: scale(3);
}

.big-graph .project.commercial .icon { background: #6B6B6B; }
.big-graph .project.urbanism .icon { background: #00CF00; }
.big-graph .project.public-space .icon { background: #FF8D00; }
.big-graph .project.culture .icon { background: #D61919; }
.big-graph .project.body-culture .icon { background: #00ECFF; }
.big-graph .project.health .icon { background: #FF2251; }
.big-graph .project.education .icon { background: #00A700; }
.big-graph .project.housing .icon { background: #FF02FF; }
.big-graph .project.hotel .icon { background: #0000C3; }
.big-graph .project.media .icon { background: #292929; }

.big-graph .project p {
  line-height: 14px;
  font-size: 10.5px;
  color: black;
  margin-left: 7px;
}

/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

.txtUsername
{
	background: url(../images/user.jpg);
	background-repeat: no-repeat;
	background-position: 4% center;
	background-color:white;
	padding-left:10%;
}

.txtPassword
{
	background-image: url(../images/pass.jpg);
	background-position: 4% center;
    background-repeat: no-repeat;
	background-color:white;
	padding-left:10%;
}

input[type=button],input[type=submit]{
    background: none repeat scroll 0 0 #004890;
	border: 1px solid #2683cf;
	 font-family: 'Archivo Narrow',sans-serif;

    /*box-shadow: 0 3px 15px -5px #000000;*/
	
    padding: 10px 30px 10px 30px;
	margin-top:2%;	
	color:#FFF;
	-webkit-appearance: none;
    border-radius: 0;
	font-size:14px;
	font-weight: bold; 
}
input[type=button], input[type=submit]:hover{
    background: none repeat scroll 0 0 #006CAD;
	cursor:pointer;
	font-family: 'Archivo Narrow',sans-serif;
	font-size:14px;
	font-weight: bold; 
}



.loginArea
{
	float:left;
	margin-left:15%;
	margin-top:2%;

}

.newPass
{
	float:left;
	width:96%;
	padding-left: 4%;
	margin-top:10%;
	margin-bottom:30%;	
}


.newLogin
{
	float:left;
	width:96%;
	padding-left: 4%;
	margin-top:30%;
	margin-bottom:30%;
	
}



.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
.forgotPass
{
	float:left;
	padding-left:10%;
}

div.error
{
	color: #FF0000;
    font-style: italic;
	text-align:left;
	font-size: 14px;
  
}



span.error {


 	font-style: italic;
	padding-top:4px;
	padding-bottom:20px;
	color: #FF0000;
	position:relative;
	z-index:9999;
	clear: both;
	float: none;
	
	display:inline-block;
	font-size: 14px;
	float:left;
	margin-left:22%;
	

}

.simpleText
{
	color:#000;
	float:left;
	padding-left:4%;
	
}


@media all and (max-width: 1000px)
{
	.txtUsername
	{
	
		padding-left:14%;
	}

	.txtPassword
	{
	
		padding-left:14%;
	}
	
	.newPass
	{
		float:left;
		width:96%;
		padding-left: 4%;
		margin-top:10%;
		margin-bottom:30%;
		
	}
	.newLogin
	{
		float:left;
		width:96%;
		padding-left: 4%;
		margin-top:20%;
		margin-bottom:30%;
		
	}
	

	

}

@media all and (max-width:500px)
{
	.txtUsername
	{
	
		padding-left:22%;
	}

	.txtPassword
	{
	
		padding-left:22%;
	}
	.newPass
	{
	
		margin-top:25%;
	
	}
	
	.newLogin
	{
	
		margin-top:35%;
	
	}
	
	

	

}


input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */

}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;

}