@charset "utf-8";
/* CSS Document */
html { font-size: 16px; }
html { font-size: 0.9em; }
html { font-size: 0.9vw; } 

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #DFE7F9;
    overflow:hidden;
}

a img { 
	border: none;
}

.container {
	width: 100%;
}

.header {
    display:block;
    padding-top:8%;
}


.sidebar1 {
	float: left;
	width: 25%;
	padding-bottom: 1px;
}

.content {
	width: 50%;
	float: left;
}
.sidebar2 {
	float: left;
	width: 25%;
}

#image-box img { 
	border: none;
    max-width: 100%;
    max-height: 100%;
}

#text-box { 
  background: url(../images/text-back.jpg);
  background-repeat:repeat;
  padding:1em;
}

#text-box p {
	margin-top: 0;	
	padding-right: 1em;
	padding-left: 1em; 
}

h1 {
  font-size:1.3em;	
  font-weight:normal;
}

h2 {
  font-size:1.3em;	
  font-weight:normal;
  padding-top:1.3em;
}
.footer {
    display:block;
    background: url(../images/skyline-test.png);
/*    background: url(../images/footer.jpg); */
    background-repeat:no-repeat;
    background-size:100% 100%;
 	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

}

.back-gradient {
	background: #9CF;
    background: -webkit-linear-gradient(to right,#ADADAD,#ffffff,#ffffff,#ADADAD);
    background: -webkit-gradient(to right,#ADADAD,#ffffff,#ffffff,#ADADAD);
    background: -o-linear-gradient(to right,#ADADAD,#ffffff,#ffffff,#ADADAD);
    background: -moz-linear-gradient(to right,#ADADAD,#ffffff,#ffffff,#ADADAD);	
    background:linear-gradient(to right,#ADADAD,#ffffff,#ffffff,#ADADAD);
    -pie-background: linear-gradient(to right,#ADADAD,#ffffff,#ffffff,#ADADAD); /*ie 6-9 via PIE*/
    behavior: url(css/pie.htc);
}

.shadows {
 -webkit-box-shadow: -4px 5px 19px -4px rgba(50, 50, 50, 0.97);
 -moz-box-shadow:    -4px 5px 19px -4px rgba(50, 50, 50, 0.97);
  box-shadow:         -4px 5px 19px -4px rgba(50, 50, 50, 0.97);
  behavior: url(css/pie.htc);
}

.ro-corners-top {
  border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  -webkit-border-radius: 6px 6px 0px 0px;
  -khtml-border-radius: 6px 6px 0px 0px;
   behavior: url(css/pie.htc);
}

.ro-corners-bottom {
  border-radius: 0px 0px 6px 6px;
  -moz-border-radius: 0px 0px 6px 6px;
  -webkit-border-radius: 0px 0px 6px 6px;
  -khtml-border-radius: 0px 0px 6px 6px;
   behavior: url(css/pie.htc);
}

.ro-corners {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
   behavior: url(css/pie.htc);
}

.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


#menu-box {

	width:4em;
	position:fixed;
	top:2em;
	left:1.5em;
}

#thai-box { 
	width:100%;
}

#thai-box img { 
	border: none;
    width: 100%;
}

#menu {
 	width: 100%;
    cursor: pointer;
}

#menu img { 
    display: block;
    margin: auto;
}


#menu-list {
    background: url(../images/menu-back.jpg);
    background:repeat-y;
    display:none;
	position:fixed;
	top:18%;
	left:-6px;
	background-color:#d8dadd;
	padding: 0.5em 0.5em 0.5em 1em; 
}

#menu-list ul {
	margin:0;
	padding-left:1em;
	list-style-type:none;
    cursor:pointer;
}

#menu-list ul li {
	height:1em;
	margin-bottom:0.3em;
	color:#1E397B;
	text-decoration:none;
}	

#menu-list a {
	text-decoration:none;
    color: #009;
}	

a:visited, a:active {
  color: #009;
}

#menu-social {
	display:inline;
	position:fixed;
	top:7px;
	right:50px;
    cursor: pointer;
}

#icon-mail {
	background-image: url(../icons/mail.png);
	float:left;
}

#icon-facebook {
	background-image: url(../icons/facebook.png);
	float:left;
}

#icon-linkedin {
	background-image: url(../icons/linkedin.png);
	float:left;
}

[id*="icon-"] { 
    background-repeat:no-repeat;
    background-size: 100% 100%;
    height: 2.3em; 
	width: 2.3em;
    margin-left:1em;
}

#prj { display:none; }