body {background-color:rgb(230,211,40);}
h1 {color:white; text-shadow:2px 2px 4px #000000;}
h2 {color:white; text-shadow:1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;}
p {color:black; font-size: 15pt;} 

td.td1 {border:3px double blue;text-align: center;font-size:15pt;}
td.td2 {text-align:center; font-size:15pt; background-color:white;}
td.td3 {border:3px double blue; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size: 15pt;}
td.td4 {text-align:left; font-size:15pt; background-color:white;}
td.td5 {text-align:left; vertical-align:top; border:3px double blue; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;font-size: 15pt;}
td.toright {text-align:right; font-size:15pt; background-color:white;}
td.shadow {color:blue; box-shadow:0 8px 16px 0 white, 0 6px 20px 0 grey;} /* แบบเงา */

a:link {color:green; text-decoration:none; }
a:visited {color:green; text-decoration:none;} /* visited link */
a:hover {color:red; text-decoration:none;} /* mouse over link */
a:active {color:pink; text-decoration:none;} /* selected link */

img:hover {animation:shake 0.5s; animation-iteration-count:infinite;}
@keyframes shake {
    0% {transform:translate(1px, 1px) rotate(0deg);}
    10% {transform:translate(-1px, -2px) rotate(-1deg);}
    20% {transform:translate(-3px, 0px) rotate(1deg);}
    30% {transform:translate(3px, 2px) rotate(0deg);}
    40% {transform:translate(1px, -1px) rotate(1deg);}
    50% {transform:translate(-1px, 2px) rotate(-1deg);}
    60% {transform:translate(-3px, 1px) rotate(0deg);}
    70% {transform:translate(3px, 1px) rotate(-1deg);}
    80% {transform:translate(-1px, -1px) rotate(1deg);}
    90% {transform:translate(1px, 2px) rotate(0deg);}
    100% {transform:translate(1px, -2px) rotate(-1deg);}
} 

.swktext {color:green; background-color:white;border-top: 1px solid #FFD2D2;
	border-left:1px solid #FFD2D2;border-right: 1px solid #FFD2D2;border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px;
	background: #FFF4F4;padding: 0px 8px 3px 8px;
	box-shadow: -0px -1px 2px #F1F1F1;-moz-box-shadow:-0px -1px 2px #F1F1F1;
	-webkit-box-shadow:-0px -1px 2px #F1F1F1; font-weight:normal; font-size:15px;
}

/* .swk-form{} */
.swk-form label {display:block;margin-bottom: 10px;}
.swk-form label > span{float: left;width: 100px;color: green;font-weight: normal;
	font-size: 15px;text-shadow: 1px 1px 1px #fff;}
.swk-form fieldset {border-radius: 10px;-webkit-border-radius: 10px;
	-moz-border-radius: 10px;margin: 0px 0px 10px 0px;
	border: 1px solid #FFD2D2;padding: 20px;background: #FFF4F4;
	box-shadow: inset 0px 0px 15px #FFE5E5;
	-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
	-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
.swk-form fieldset legend {color: green;border-top: 1px solid #FFD2D2;
	border-left: 1px solid #FFD2D2;border-right: 1px solid #FFD2D2;border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px;
	background: #FFF4F4;padding: 0px 8px 3px 8px;
	box-shadow: -0px -1px 2px #F1F1F1;-moz-box-shadow:-0px -1px 2px #F1F1F1;
	-webkit-box-shadow:-0px -1px 2px #F1F1F1;font-weight: normal;font-size:15px;}
.swk-form textarea{width:250px;height:100px;}
.swk-form input[type=text],
.swk-form input[type=date],
.swk-form input[type=datetime],
.swk-form input[type=number],
.swk-form input[type=search],
.swk-form input[type=time],
.swk-form input[type=url],
.swk-form input[type=email],
.swk-form select, 
.swk-form textarea{border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;
	border: 1px solid #FFC2DC;outline: none;color: green;	padding: 5px 8px 5px 8px;
	box-shadow: inset 1px 1px 4px #FFD5E7;	-moz-box-shadow: inset 1px 1px 4px #FFD5E7;
	-webkit-box-shadow: inset 1px 1px 4px #FFD5E7;	background:#FFEFF6; width:50%;
    font-size:15px; 
}
.swk-form input[type=submit],
.swk-form input[type=button]{background:#EB3B88; border:1px solid #C94A81;
    padding: 5px 15px 5px 15px; color:#FFCBE2; box-shadow:inset -1px -1px 3px #FF62A7;
	-moz-box-shadow:inset -1px -1px 3px #FF62A7;-webkit-box-shadow:inset -1px -1px 3px #FF62A7;
	border-radius: 3px; border-radius:3px; -webkit-border-radius:3px;
	-moz-border-radius:3px; font-weight:bold;}

.required{color:red; font-weight:normal;}
.imgname {width:15px; height:15px; border:1px double white;}        
.rs {text-align:right; color:red;}
div.mtalk {position:fixed; top:0; right:0; text-align:right; color:red;} 

/*
    <div class="swk-form">
    <form>
     <fieldset><legend>Personal</legend>
        <label for="field1"><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="field1" value="" /></label>
        <label for="field2"><span>Email <span class="required">*</span></span><input type="email" class="input-field" name="field2" value="" /></label>
        <label for="field3"><span>Phone <span class="required">*</span></span><input type="text" class="input-field" name="field3" value="" /></label>
        <label for="field4"><span>Subject</span><select name="field4" class="select-field">
        <option value="Appointment">Appointment</option>
        <option value="Interview">Interview</option>
        <option value="Regarding a post">Regarding a post</option>
        </select></label>
    </fieldset>
    
    <fieldset><legend>Message</legend>
        <label for="field6"><span>Message <span class="required">*</span></span><textarea name="field6" class="textarea-field"></textarea></label>
        <label><span> </span><input type="submit" value="Submit" /></label>
    </fieldset>
    </form>
    </div>
*/