html, body {
height: 100%;
margin: 0px;
font-family: helvetica;
background: fff;
}

a > img{
    border: 0;
}

#form {
	width: 55%;
	min-width: 400px;
	padding: 20px;
	margin: auto;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: 1px solid;
	background-color: #000;
}

#container {
	min-height: 100%;
	height: auto !important;
	overflow: hidden;
	height: 100%;
	margin: 0 auto -120px; /* the bottom margin is the negative value of the footer's height */
    background-color: #000;
}

#contactpage {
	width: 60%;
	height: 100%;
	margin: 20px auto 40px;
	background: #fff;
	padding: 20px;
-webkit-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
}

#content2 {


}

#content {
	width: 80%;
	height: 100%;
	margin: 20px auto 40px;
	background: #fff;
	padding: 20px;
-webkit-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
}

#icons {
	width: 80%;
	max-height: 30px;
	margin: auto;
	top: 0px;
	background: #fff;
}

.sm {
	float: right;
	margin-right: 10px;
	top: 0px;
}

header {
	width: 100%;
	height: 150px;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 10px;
	background-color: #000;
}

#logo {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	margin: auto;
	background-color: #fff;
	background-image: url(head4.png);
	background-repeat: no-repeat;
	background-position: center;
}

#logo:hover {
	background-image: url(head4.png);
	background-repeat: no-repeat;
	background-position: center;
}



nav {
	width: 100%;
	height: 40px;
	font-family: helvetica;
	font-size: 11pt;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
	margin: auto;
	background-color: #fbb525;
}

nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 400px;  
    height: 40px; 
	background-color: #fbb525;
}  

nav li {  
    display: inline;  
    float: left;
	background-color: #fbb525;
} 

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  

nav a {  
    color: #fff;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    text-shadow: 1px 1px 0px #283744;
	

}

nav li a {  
    border-right: 1px solid #576979;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box; 
	background-color: #fbb525;
}  
nav li:last-child a {  
    border-right: 0;  
}  

nav a:hover, nav a:active {  
    background-color: #fbb525;  
}  

nav a#pull {  
    display: none;  
}

footer {
	height: 120px;
	background: #108217;
	width: 100%;
	margin: auto;
	border-top: 6px solid #576979; 
}

.copy {
	width: 80%;
	margin: auto;
	color: #2E2E2E;
	font-family: helvetica;
}

.push {
	height: 120px; /* .push must be the same height as .footer */
}

@media screen and (max-width: 600px) {  
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {  
        border-bottom: 1px solid #576979;  
        border-right: 1px solid #576979;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
}  

@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        /*background-color: #283744;*/
		background: #fbb525;
        width: 100%;  
        position: relative;  
    }  
    nav a#pull:after {  
        content:"";  
        background: url('file:///F|/codeII/p1_sochi/sochi/nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        right: 15px;
        top: 10px;  
    }  
}  

@media only screen and (max-width : 320px) {  
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #576979;  
    } 
	
}  

/*CONTACT FORM*/
/** the form elements **/  
#hongkiat-form { box-sizing: border-box; }  
  
#hongkiat-form .txtinput {   
  display: block;  
  font-family: "Helvetica Neue", Arial, sans-serif;  
  border-style: solid;  
  border-width: 1px;  
  border-color: #dedede;  
  margin-bottom: 20px;  
  font-size: 1.55em;  
  padding: 11px 25px;  
  padding-left: 55px;  
  width: 90%;  
  color: #777;  
    
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;  
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;  
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;   
    
  transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
  -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
  -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
  -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
}  
  
#hongkiat-form .txtinput:focus {   
  color: #333;  
  border-color: rgba(41, 92, 161, 0.4);  
    
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);  
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);  
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);  
  outline: 0 none;   
}  

#hongkiat-form input#name {
background: #fff url('file:///F|/codeII/p1_sochi/sochi/images/user.png') 5px 4px no-repeat;
}
#hongkiat-form input#email {
background: #fff url('file:///F|/codeII/p1_sochi/sochi/images/email.png') 5px 4px no-repeat;
}
#hongkiat-form input#website {
background: #fff url('file:///F|/codeII/p1_sochi/sochi/images/website.png') 5px 4px no-repeat;
}
#hongkiat-form input#telephone {
background: #fff url('file:///F|/codeII/p1_sochi/sochi/images/phone.png') 5px 4px no-repeat;
}

#hongkiat-form textarea {  
  display: block;  
  font-family: "Helvetica Neue", Arial, sans-serif;  
  border-style: solid;  
  border-width: 1px;  
  border-color: #dedede;  
  margin-bottom: 15px;  
  font-size: 1.5em;  
  padding: 11px 25px;  
  padding-left: 55px;  
  width: 90%;  
  height: 180px;  
  color: #777;  
    
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;  
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;  
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;   
    
  transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
  -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
  -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
  -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
}  
#hongkiat-form textarea:focus {  
  color: #333;  
  border-color: rgba(41, 92, 161, 0.4);  
  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);  
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);  
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);  
  outline: 0 none;   
}  
#hongkiat-form textarea.txtblock {  
    background: #fff url('file:///F|/codeII/p1_sochi/sochi/images/speech.png') 5px 4px no-repeat;  
}  

span.radiobadge {  
  display: block;  
  margin-bottom: 8px;  
}  
  
span.radiobadge label {  
  font-size: 1.2em;  
  padding-bottom: 4px;  
}  
  
select.selmenu {  
  font-size: 17px;  
  color: #676767;  
  padding: 9px !important;  
  border: 1px solid #aaa;  
  width: 200px;  
}  

#buttons #submitbtn {  
  display: block;  
  float: left;  
  height: 3em;  
  padding: 0 1em;  
  border: 1px solid;  
  outline: 0;  
  font-weight: bold;  
  font-size: 1.3em;  
  color: #fff;  
  text-shadow: 0px 1px 0px #222;  
  whitewhite-space: nowrap;  
  word-wrap: normal;  
  vertical-align: middle;  
  cursor: pointer;  
    
  -moz-border-radius: 2px;  
  -webkit-border-radius: 2px;  
  border-radius: 2px;  
    
  border-color: #5e890a #5e890a #000;  
    
  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);  
  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);  
  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);  
  box-shadow: inset 0 1px 0 rgba(256,256,256, .35);  
    
  background-color: rgb(226,238,175);  
  background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);  
  background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38)));   
  background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);  
  background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);  
  background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);  
  background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);   
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );  
}  
#buttons #submitbtn:hover, #buttons #submitbtn:active {  
  border-color: #7c9826 #7c9826 #000;  
  color: #fff;  
    
  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);  
  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);  
  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);  
  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);  
    
  background: rgb(228,237,189);  
  background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%);   
  background: -webkit-gradient(linear, left top, left bottombottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54)));   
  background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);   
  background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);   
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );  
} 

#buttons #resetbtn {  
  display: block;  
  float: left;  
  color: #515151;  
  text-shadow: -1px 1px 0px #fff;  
  margin-right: 20px;  
  height: 3em;  
  padding: 0 1em;  
  outline: 0;  
  font-weight: bold;  
  font-size: 1.3em;  
  whitewhite-space: nowrap;  
  word-wrap: normal;  
  vertical-align: middle;  
  cursor: pointer;  
    
  -moz-border-radius: 2px;  
  -webkit-border-radius: 2px;  
  border-radius: 2px;  
    
  background-color: #fff;  
  background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);  
  background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));  
  background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);  
  background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);  background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);  
  background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);   
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );  
    
  border: 1px solid #969696;  
    
  box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);  
  -moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);  
  -webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);  
    
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);  
}  
#buttons #resetbtn:hover {  
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);   
  color: #818181;  
    
  background-color: #fff;  
  background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);  
  background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));  
  background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);   
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );  
    
  border-color: #aeaeae;  
    
  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
  
  }
.pic100{
    height: 50%;
    width:100%;}
}*
 
} 
 

@media screen and (max-width: 800px) {  
    body {  
        padding: 10px 15px;  
    }  
    #container {  
        width: 100%;  
    }  
    #hongkiat-form #aligned {  
        width: 100%;  
        float: none;  
        display: block;  
    }  
    #hongkiat-form #aside {  
        width: 100%;  
        display: block;  
        float: none;  
    }  
    #hongkiat-form .txtinput, #hongkiat-form textarea {  
        width: 85%;  
    }  
    #prioritycase {  
        float: left;  
        display: block;  
    }  
    #recipientcase {  
        float: left;  
        display: block;  
        margin-right: 55px;  
    } 
}
.pic100{
    width:100%;}
}	
}  

/* smaller screen dropoff *******/  
@media only screen and (max-width: 550px) {  
    #hongkiat-form .txtinput, #hongkiat-form textarea {  
        width: 80%;  
    } 
}
.pic100{
    width:100%;}
}	
}  
  
/* iPhone Landscape ********/  
@media only screen and (max-width: 480px) {  
    body {  
        padding: 10px 0px;  
    }  
    select.selmenu {  
        width: 190px;  
    } 
}
.pic100{
    width:100%;}
}
}  
  
/* iPhone portrait *******/  
@media only screen and (max-width: 320px) {  
    body {  
        padding: 10px 0px;  
    }  
    #hongkiat-form .txtinput, #hongkiat-form textarea {  
        width: 70%;  
    }  
    #hongkiat-form #aligned {  
        overflow: hidden;  
    }  
    select.selmenu {  
        width: 160px;  
    }  
    #recipientcase {  
        margin-right: 30px;  
    } 
}
.pic100{
    height: 50%;
    width:100%;}
}
}