body {
    width: 100%;
    margin: 0; 
    font-family: arial;
}

.gradientheader {
    width: 100%;
    height: 200px;
    
    z-index: 600;
    position: absolute;
    float: left;
    display: inline;
    
    background: -moz-linear-gradient(top,  rgba(0,19,51,1) 0%, rgba(0,19,51,1) 50%, rgba(125,185,232,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,19,51,1)), color-stop(50%,rgba(0,19,51,1)), color-stop(100%,rgba(125,185,232,0)));
    background: -webkit-linear-gradient(top,  rgba(0,19,51,1) 0%,rgba(0,19,51,1) 50%,rgba(125,185,232,0) 100%);
    background: -o-linear-gradient(top,  rgba(0,19,51,1) 0%,rgba(0,19,51,1) 50%,rgba(125,185,232,0) 100%);
    background: -ms-linear-gradient(top,  rgba(0,19,51,1) 0%,rgba(0,19,51,1) 50%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,19,51,1) 0%,rgba(0,19,51,1) 50%,rgba(125,185,232,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001333', endColorstr='#007db9e8', GradientType=0);

    background-repeat: no-repeat;
}

.slideshow { 
    width: 100%; 
    height: auto; 
    margin: auto; 
}

.slideshow img { 
    width: 100%;
}

.topmenu {
    z-index: 1000;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    max-width: 940px;
    margin: auto;
    margin-top: 20px;
}

.topmenu li {
    display: inline;
    list-style: none;
}

.topmenu li:last-child:after {
    content: ""
}

.topmenu li:not(:last-of-type):after {
    color: white;
    font-size: 24px;
    content: " | "
}

.topmenu a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.topmenu a.active {
    color: #8dc63f;
}

.topmenu a:hover {
    color: orange;
}

.logo {
    height: 60px;
}

.divlogo {
    max-width: 200px;
    float: left;
    display: inline;   
}

.divtopmenulink {
    float: right;
    max-width: 740px;
    display: inline;
    color: white;
    margin-top: 25px;
}

.contentbox {
    position: absolute;
    max-width: 800px;
    min-height: 500px;
    background-color: white;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 25px;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    margin: auto;
    margin-top: 400px;
}

.cycle-pager {
    margin-top: 350px;   
}

.cycle-overlay { 
    font-family: arial;
    position: absolute; 
    width: 100%; 
    z-index: 600;
    color: white; 
    padding: 15px;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    margin: auto;
    margin-top: 100px;
    font-size: 48px;
    font-weight: bold;
}

footer a {
    text-decoration: none;
    color: black;
    font-size: 14px;
}

footer a.active {
    color: #8dc63f;
}

footer a:hover {
    color: orange;
}

.divider {
    border-style: solid;
    border-color: #8dc63f;
    border-width: 1px;
}

.mobilemenu {
    display: none;
}

.contentheader {
    font-size: 24px;
    color: #8dc63f;
    margin: 0;
    padding: 0;
}

.contenttext {
    font-size: 14px;
    color: black;
}

.contentdiv {
    padding-top: 25px;
    padding-bottom: 25px;
    margin: 0;   
}

.contentfloatdiv {
    float: left;
    display: inline-block;
}

.contentinlinediv {
    display: inline-block;
}

.button:hover {
    opacity: 0.5;   
}

@media only screen and (max-width: 960px) { 

    .topmenu a {
        font-size: 14px;
    }
    
    .logo {
        height: 45px;   
    }
    
    .divlogo {
        max-width: 200px;
    }

    .divtopmenulink {
        max-width: 550px;
        margin-top: 20px;
    }
    
    .topmenu {
        max-width: 750px;   
    }
    
    .contentbox {
        max-width: 640px;
        padding: 35px;
        margin-top: 400px;
    }
    
    .contentdiv {
        margin: auto;   
    }
    
    .contentfloatdiv {
        float: none;
        display: block;
    }
    
    .contentinlinediv {
        display: block;
    }
    
}

@media only screen and (max-width: 768px) { 
    
    .gradientheader {
        display: none;   
    }
    
    .topmenu a {
        font-size: 10px;
    }
    
    .logo {
        height: 60px;   
    }
    
    .divlogo {
        margin: auto;
        float: none;
        max-width: 200px;
    }

    .divtopmenulink {
        display: none;
    }
    
    .contentbox {
        max-width: 480px;
        padding: 20px;
        margin-top: 200px;
    }
    
    .cycle-pager {
        margin-top: 150px;   
    }
    
    .cycle-overlay { 
        margin-top: 60px;
        font-size: 24px;
    }
    
    footer a {
        font-size: 10px;
    }
    
    .mobilemenu {
        display: block;
        max-width: 320px;
        margin: auto;
        border-radius: 15px;
        padding: 15px;
        margin-bottom: 50px;
        
        background: rgb(54,54,54);
        background: -moz-linear-gradient(top,  rgba(54,54,54,1) 14%, rgba(112,112,112,1) 99%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,rgba(54,54,54,1)), color-stop(99%,rgba(112,112,112,1)));
        background: -webkit-linear-gradient(top,  rgba(54,54,54,1) 14%,rgba(112,112,112,1) 99%);
        background: -o-linear-gradient(top,  rgba(54,54,54,1) 14%,rgba(112,112,112,1) 99%);
        background: -ms-linear-gradient(top,  rgba(54,54,54,1) 14%,rgba(112,112,112,1) 99%);
        background: linear-gradient(to bottom,  rgba(54,54,54,1) 14%,rgba(112,112,112,1) 99%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#707070', GradientType=0);
    }
    
    .mobilemenu a {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: bold;
    }
    
    .mobilemenu hr {
        border-style: solid;
        border-color: white;
        border-width: 1px;
    }
    
    .mobilemenu a.active {
        color: #8dc63f;
    }

    .mobilemenu a:hover {
        color: orange;
    }
    
    .contentdiv {
        margin: auto;   
    }

	/* ทดสอบ CSS เปิด*/ 

	.style1 {
	font-size: 45px;
	font-weight: bold;
}
.style2 {color: #666666}
.input_field_cove1111 {background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 240px;
	color:#333333;
	padding:3px;
	color:#666666;
	font-size: 12px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}
.input_field_cove_shot11 {background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 140px;
	color:#333333;
	padding:3px;
	color:#666666;
	font-size: 12px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}
.input_multifield_cove {	background-image:url(images/form_bg_a.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 240px;
	height: 80px;
	color:#666666;
	font-size: 12px;
	padding:3px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}
.style11 {	color: #990000;
	font-weight: bold;
}
.style11 {color: #0000FF}
.style10 {color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.style5 {color: #333333}
.style12 {font-size: 24px}
.style16 {
	color: #333333;
	font-size: 12px;
	font-weight: bold;
}
.style17 {font-size: 12px}
.input_field_cove11111 {background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 240px;
	color:#333333;
	padding:3px;
	color:#666666;
	font-size: 12px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}
.input_field_cove_shot111 {background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 140px;
	color:#333333;
	padding:3px;
	color:#666666;
	font-size: 12px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}
.input_field_cove111111 {background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 240px;
	color:#333333;
	padding:3px;
	color:#666666;
	font-size: 12px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}
.input_field_cove_shot1111 {background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 140px;
	color:#333333;
	padding:3px;
	color:#666666;
	font-size: 12px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}
.style19 {font-size: 14px}
	/* ทดสอบ CSS ปิด*/     
}

.awesome, .awesome:visited {
background: #222 url(http://zurb.com/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 20px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }