@charset "UTF-8";


@font-face {
    font-family: 'quarkbold';
    src: url('quark-bold-webfont.eot');
    src: url('quark-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('quark-bold-webfont.woff') format('woff'),
         url('quark-bold-webfont.ttf') format('truetype'),
         url('quark-bold-webfont.svg#quarkbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quarklight';
    src: url('quark-light-webfont.eot');
    src: url('quark-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('quark-light-webfont.woff') format('woff'),
         url('quark-light-webfont.ttf') format('truetype'),
         url('quark-light-webfont.svg#quarklight') format('svg');
    font-weight: normal;
    font-style: normal;

}





body {
	background-color: #292929;
	background-image: url(../images/green_bg.svg);
	background-repeat:repeat-x;
	background-position:top;
	/* [disabled]margin-top: 0px; */
}

header{
	height: 700px;
	width: 700px;
	/* [disabled]padding: 15px 0px; */
	margin: 0px auto;
	overflow: hidden;
	/* [disabled]margin-top: -50px; */
	margin-bottom: 400px;
}

  header #logo{
	padding: 0;
	margin: 0px auto 0px  auto;
	height: 700px;
	width: 700px;
	background: transparent url('../images/tree.svg') no-repeat center top;
	display: block;
	text-indent: -9000px;
	margin-bottom: 400px;
	/* [disabled]color: #FFF; */
	/* [disabled]margin-top: -100px; */
  }





	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

#wrapper{
  margin:0 0 0 0;
}
  #wrapper #main{
    padding:0;
    width:1000px;
    height:5000px;
    position:relative;
    margin:0 auto;
    text-align:center;
  }
  
  
   
    
      
    
    p{
	color: #CCC;
    }
    
      #wrapper #main p .tag{
        font: 24px/26px 'quarklight' , Georgia, "Times New Roman", Times, serif;
        color:#67B013;
      }
    
    #wrapper #main #description{
      width:1000px;
      height:110px;
    }
    
      #wrapper #main #description h2{
        font-size:48px;
        line-height:48px;
      }
      
      #wrapper #main #description p{
        padding:0 170px;
        font-size:24px;
        line-height:26px;
        font-weight:lighter;
      }

    
      #wrapper #main #animation.animation-fixed{
        position:fixed;
        margin-top:-350px;
      }
      
      #wrapper #main #animation.animation-end{
        position:absolute;
        top:4420px;
      }
      
      
      #wrapper #main #animation .detail{
        position:absolute;
        top:420px;
        display:block;
        opacity:0;
      }
      
      
      #wrapper #main #animation .rain{
        position:absolute;
        width:73px;
        height:120px;
        background:transparent url('../images/sprite-landing.png') no-repeat -912px -1380px;
        overflow:hidden;
        display:none;
      }
      
      #wrapper #main #animation .cloud{
        position:absolute;
        width:78px;
        height:45px;
        background:transparent url('../images/sprite-landing.png') no-repeat 0 -132px;
        opacity:0;
        display:none;
      }
      
      #wrapper #main #animation .white-cloud{
        position:absolute;
        width:78px;
        height:45px;
        background:transparent url('../images/sprite-landing.png') no-repeat 0 -207px;
        opacity:0;
        display:none;
      }
      
      #wrapper #main #animation .computer{
        position:absolute;
        width:412px;
        height:201px;
        background:transparent url('../images/sprite-landing.png') no-repeat 0 -1104px;
      }
      
      #wrapper #main #animation .bubble{
        position:absolute;
        width:147px;
        height:300px;
        background:transparent url('../images/sprite-landing.png') no-repeat 0 -759px;
      }
      
      #wrapper #main #animation .bubble-bulb{
        position:absolute;
        width:72px;
        height:75px;
        background:transparent url('../images/sprite-landing.png') no-repeat 0 -282px;
      }
      
      #wrapper #main #animation .bubble-scroll{
        position:absolute;
        width:147px;
        height:300px;
        background:transparent url('../images/sprite-landing.png') no-repeat -176px -759px;
      }
      
      #wrapper #main #animation .hair{
        position:absolute;
        width:73px;
        height:60px;
        top:178px;
        left:170px;
        background:transparent url('../images/sprite-landing.png') no-repeat 0 -706px;
      }
      
      #wrapper #main #animation .detail{
        width:412px;
      }
      
      
      #wrapper #main #animation #find-support{
        position:absolute;
        top:0;
        left:294px;
      }
      
        #wrapper #main #animation #find-support #bubble-scroll{
          left:132px;
          top:40px;
        }
        
      
        #wrapper #main #animation #find-support #rain{
          top:90px;
          left:168px;
        }
        
        #wrapper #main #animation #find-support #cloud-1,
        #wrapper #main #animation #find-support #cloud-3{
          top:75px;
          left:192px;
        }
        
        #wrapper #main #animation #find-support #cloud-2,
        #wrapper #main #animation #find-support #cloud-4{
          top:65px;
          left:142px;
        }
      
        #wrapper #main #animation #find-support #computer-1{
          top:200px;
        }
        

        
        
      #wrapper #main #animation #come-to-support{
        position:absolute;
        top:0;
        left:1000px;
        display:none;
        opacity:0;
      }
      
        #wrapper #main #animation #come-to-support #bubble{
          left:145px;
          top:40px;
          -moz-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          -o-transform: rotate(180deg); 
          -ms-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        
        #wrapper #main #animation #come-to-support #bubble-bulb{
          top:18px;
          left:40px;
        }
        
      
        #wrapper #main #animation #come-to-support #computer-2{
          top:200px;
        }
        

       
       
      #wrapper #main #animation #arm-mask{
        position:absolute;
        height:172px;
        width:500px;
        left:250px;
        overflow:hidden;
        top:30px;
      }
      
        #wrapper #main #animation #arm-mask #arm{
          position:absolute;
          height:500px;
          width:500px;
          background:transparent url('../images/sprite-landing.png') no-repeat -387px 0;
        } 
      
      #wrapper #main #animation #instruction{
        height:0;
        width:0;
        background:#67B013 url('../images/trame.png') repeat scroll center top;
        margin:180px auto 0 auto;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        -o-border-radius: 100px;
        -ms-border-radius: 100px;
        border-radius: 100px;
        overflow:hidden;
        position:relative;
      }
      
        #wrapper #main #animation #instruction #instruction-inner {
          height:160px;
          width:400px;
          position:absolute;
          top:20px;
          left:200px;
          margin:0;
          padding:0;
          list-style:none;
          -moz-border-radius: 80px;
          -webkit-border-radius: 80px;
          -o-border-radius: 80px;
          -ms-border-radius: 80px;
          border-radius: 80px;
          
        }
        
          #wrapper #main #animation #instruction #instruction-inner li {
            width:160px;
            float:left;
            margin:0 20px;
          }
        
          #wrapper #main #animation #instruction #instruction-inner .instruction-illustration {
            height:79px;
            width:160px;
            padding:0;
            border-bottom:1px solid #A4D071;
            display:block;
          }
          
          #wrapper #main #animation #instruction #instruction-inner .instruction-description {
            height:72px;
            width:160px;
            padding:0;
            display:block;
            color:#E8F3DC;
            font: 20px/21px 'quarklight', Arial, sans-serif;
            margin-top:8px;
          }
          
          #wrapper #main #animation #instruction #instruction-inner #instruction-illustration-1 {
            background:transparent url('../images/sprite-landing.png') no-repeat 63px -374px;
          }
          
          #wrapper #main #animation #instruction #instruction-inner #instruction-description-1 {
            font-size:24px;
            line-height:26px;
          }
          
          #wrapper #main #animation #instruction #instruction-inner #instruction-illustration-2 {
            background:transparent url('../images/sprite-landing.png') no-repeat 47px -461px;
          }
          


footer{
	height: auto;
	background: #5fabed;
	background: #5fabed url('../images/bg_foot.png') repeat center scroll;
	margin-top: 40px;
	/* [disabled]padding-top: 150px; */
	color: #fff;
	display: block;
	/* [disabled]margin-bottom: 100px; */
	padding-bottom: 500px;
	min-height: 1024px;
  
}


#footer2{
  height:1024px;
  background:#272727;
  background:#272727 url('../images/gray.png') repeat center scroll;
  margin-top:40px;
}

  
  
#footer-inner{
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	padding-left: 40px;
	
  }
  

  




#paper a {
	display: block;
	height: 500px;
	width: 745px;
	background: url(http://www.qd.mahidol.ac.th/qd_green/images/paper.svg) no-repeat scroll 0 0 transparent;
	color: #fff;
	overflow: hidden;
	background-repeat: no-repeat;
	text-indent:-9999px;
}





#right a {
	/* [disabled]background-attachment: scroll; */
	background-clip: border-box;
	background-color: transparent;
	background-image: url("../images/menuright.svg");
	background-origin: padding-box;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: auto auto;
	display: block;
	height: 90px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-indent: -8000px;
	width: 90px;
}

#right{
	position: fixed;
	right: 0;
	top: 20%;
	z-index: 9999;
	margin-right:10px;
}
#inright1 a {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: transparent;
	background-image: url("../images/menuright2.svg");
	background-origin: padding-box;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: auto auto;
	display: block;
	height: 90px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-indent: -8000px;
	width: 90px;margin-top:7px;;
}

#inright2 a {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: transparent;
	background-image: url("../images/menuright.svg");
	background-origin: padding-box;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: auto auto;
	display: block;
	height: 90px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-indent: -8000px;
	width: 90px;
	margin-top:7px;
	
}

#inright0 a {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: transparent;
	background-image: url("../images/sco.svg");
	background-origin: padding-box;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: auto auto;
	display: block;
	height: 90px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-indent: -8000px;
	width: 90px;
	margin-top:10px;
	
}

A:link {text-decoration:none}
A:visited {text-decoration: none}
A:hover {
	text-decoration: none;
	margin: 0px;
}

#title{
	padding: 0;
	margin: 0px auto;
	height: 40px;
	width: 500px;
	padding: 10px 0px 10px 0px;
	font: 45px/45px 'quarklight', Arial, sans-serif;
	text-align: center;
	margin-top: -170px;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	z-index: 999;
  }

#title2{
	padding: 0;
	margin: 0px auto;
	margin-top: 10px;
	height: 70px;
	width: 745px;
	font: 20px/20px 'quarklight', Arial, sans-serif;
	text-align: center;
	margin-bottom: 500px;
	z-index: 999;
	color: #FFF;
  }



  #logotop{
	padding: 0;
	margin-left: 220px;
	margin-right: auto;
	padding: 0px;
	height: 80px;
	width: 360px;
	text-align: center;
	background-image: url(../images/logo.png);
	float: left;
	position: fixed;
	margin-top: -70px;
  }
  
  
    #linktop{
	padding: 0;
	margin-left: 710px;
	margin-right: auto;
	padding: 0px;
	height: 80px;
	width: 330px;
	float: right;
	position: fixed;
	margin-top: -46px;
	font-family: 'quarklight', Arial, sans-serif;

  }
  
  #logo{
	padding: 0;
	margin: 0px auto;
	height: 400px;
	width: 785px;
	display: block;
	margin-bottom: 50px;
	/* [disabled]margin-top: 250px; */
	z-index: 9999;
	color: #FFFFFF;
	padding-top: 310px;
	text-align: left;
	font: 34px/34px 'quarklight' , Georgia, "Times New Roman", Times, serif;
	  }
  
#blank{
	/* [disabled]height: 40px; */
	width: 745px;
	    }


#footer-conlist ul li{
	color: #CCC;
	margin: 0px;

}


#footer-conlist{
	padding: 0px;
	margin: 0px auto;
	margin-bottom: 40px;
	height: auto;
	width: 745px;
	font: 20px/20px 'quarklight', Arial, sans-serif;
	text-align: justify;
	/* [disabled]background: rgba(255, 255, 255, 0.2); */
	/* [disabled]padding: 40px; */
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	line-height: 1.3em;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 10px;
	padding-bottom: 20px;
	background-color: #545454;
	z-index: 999;
}





table {
	font-family:'quarklight', Arial, sans-serif;
	font-size:16px;
}


#footer-talk{
	padding: 0;
	margin: 0px auto;
	margin-bottom: 40px;
	height: auto;
	width: 745px;
	color: #999;
	font: 20px/20px 'quarklight', Arial, sans-serif;
	text-align: justify;
	/* [disabled]margin-bottom: 400px; */
	padding: 40px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	line-height: 1.3em;
	background-color: #FFF;
	/* [disabled]margin-top: 10px; */
	/* [disabled]padding-top: 10px; */
}


#footer-talk p  {
	color: #666;	

}

#footer-talk p a {
	BORDER-BOTTOM: #999 1px solid;
	BORDER-LEFT: #999 1px solid;
	/* [disabled]PADDING-BOTTOM: 5px; */
	PADDING-LEFT: 30px;
	PADDING-RIGHT: 30px;
	DISPLAY: block;
	BACKGROUND: #999;
	FLOAT: left;
	COLOR: #FFF;
	OVERFLOW: visible;
	BORDER-TOP: #999 1px solid;
	MARGIN-RIGHT: 0px;
	BORDER-RIGHT: #999 1px solid;
	PADDING-TOP: 0px;
	height: 40px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	line-height: 40px;
	
	
}

#disqus_thread {
	color: #F00;
	

}


.cbp-content p {
	color:#999;
	

}
.cbp-content a:link {
	color:#999;
	

}
.cbp-content a:hover {
	color:#999;
	

}

.cbp-content a:visit {
	color:#999;
	

}


#footer-conlistop h2{
	font-size: 30px;
	color: #e85034;
	font-size: 27px;
	background-image: url(../images/mu.svg);
	height: 50px;
	padding-left: 70px;
	background-repeat: no-repeat;
	line-height: 55px;
	letter-spacing: 0px;
}


#footer-conlist h5{
	font-size: 27px;
	color: #ef4136;
	background-image: url(../images/lis.svg);
	padding-left: 70px;
	background-repeat: no-repeat;
	margin-top: 10px;
	line-height: 55px;
	height: 50px;
	letter-spacing: 0px;
 
	}
	

#footer-conlist h1{
	font-size: 27px;
	color: #8dc63f;
	background-image: url(../images/pol.svg);
	padding-left: 70px;
	background-repeat: no-repeat;
	margin-top: 10px;
	line-height: 55px;
	height: 50px;
	letter-spacing: 0px;
 
	}
	


#footer-conlist h2{
	font-size: 27px;
	color: #ef4136;
	background-image: url(../images/reg.svg);
	padding-left: 70px;
	background-repeat: no-repeat;
	margin-top: 10px;
	line-height: 55px;
	height: 50px;
	letter-spacing: 0px;

	
	


}



#footer-conlist h2 strong {
	font-size: 20px;
	color: #FFFFFF;
	font-family: 'quarklight', Arial, sans-serif;	
}

#footer-conlist h2 strong2 {
	font-size: 20px;
	color: #ef4136;
	font-family: 'quarklight', Arial, sans-serif;	
}


	
#footer-conlist h3{
	font-size: 27px;
	color: #ef4136;
	background-image: url(../images/skd.svg);
	padding-left: 70px;
	background-repeat: no-repeat;
	margin-top: 10px;
	line-height: 55px;
	height: 50px;
	letter-spacing: 0px;
	


}

#footer-conlist h4{
	font-size: 27px;
	color: #8dc63f;
	background-image: url(../images/bin.svg);
	padding-left: 70px;
	background-repeat: no-repeat;
	margin-top: 10px;
	line-height: 55px;
	height: 50px;
	letter-spacing: 0px;


}


#footer-talk h3{
	color: #1c75bc;
	font-size: 27px;
	background-image: url(../images/tak.svg);
	padding-left: 70px;
	background-repeat: no-repeat;
	margin-top: 10px;
	line-height: 55px;
	height: 50px;
	letter-spacing: 0px;
	
	


}




.gap1 {
	width: 745px;
	height: 200px;
	
}


.aboutionut p {
		font-family: 'quarklight', Arial, sans-serif;	
}


.pagecenter {
	width: 1140px;
	display: block;
	border: 1px solid rgba(0, 0, 0, 0);
	margin: 0px auto;
}



header nav a, .contents .conlist a, .download-button .down:before, .aboutus .ionutimage, .aboutionut .social a, #socialsharebox .item {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}


.nohead { 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	z-index: -1;
}
header nav a {
	font-size: 18px;
	font-weight: normal;
	font-family: 'fontawesome', Calibri, Arial, sans-serif;
	padding: 0px 0px 0 10px;
}


.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 745;
	padding: 0;
	margin: 0;
  }

#slider2 {
	width: 206px;
	height: 320px;
	margin-left: 3px;
	margin-right: 3px;
  }
  #slider3 {
	width: 745px;
	height: 300px;
  }
  
    #slider4 {
	width: 745px;
	height: 300px;
  }


.rslides a:link {
	/* [disabled]color:#FFF; */
  }





#right2 ul{
	list-style: none;
	/* [disabled]position:fixed; */

  }
  
#right2 ul li a{
margin-right: 10px;
	background-clip: border-box;
	background-color: transparent;
	background-image: url("../images/menuright2.svg");
	background-origin: padding-box;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: auto auto;
	display: block;
	height: 90px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-indent: -8000px;
	width: 90px;
    }
    
#right2 ul li a:active{
      background-color:#67B013;
    }
	
#right2 ul li a:hover {
      background-color:#67B013;
    }
	
	
	
	
	


#right ul{
	list-style: none;
	/* [disabled]position:fixed; */

  }
  
#right ul li a{
	cursor: pointer;
	height: 13px;
	width: 13px;
	display: block;
	text-indent: -9000px;
	background-color: #666666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	margin-top: 5px;
    }
    
#right ul li a:active{
      background-color:#67B013;
    }
	
#right ul li a:hover {
      background-color:#67B013;
    }
	
	
	#bank{
	height: 20px;
    }



#footer-talk h4{
	color: #999999;
	background-image: url(../images/dev.svg);
	padding-left: 70px;
	background-repeat: no-repeat;
	margin-top: 30px;
	line-height: 1em;
	height: 50px;
	letter-spacing: 0px;
	font: 16px/16px 'quarklight', Arial, sans-serif;
}

#footer-conlist table tr td {
	font-family: 'quarklight', Arial, sans-serif;
	font-size: 20px;
	color: #CCC;
	/* [disabled]margin-top: 5px; */
}

#footer-conlist table tr td strong {
	font-family: 'quarkbold', Arial, sans-serif;
	font-size: 22px;
	color: #8dc63f
}

#footer-conlist table tr td ul strong {
	font-family: 'quarkbold', Arial, sans-serif;
	font-size: 22px;
	color: #CCC
}



#footer-conlist table tr td a {
	font-family: 'quarklight', Arial, sans-serif;
	font-size: 22px;
	color: #CCCCCC
}


#footer-conlist table tr td em2 {
	font-family: 'quarkbold', Arial, sans-serif;
	font-size: 22px;
	color: #CCCCCC;
	/* [disabled]font-weight:bold; */
}