/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
a img {border:none;}
/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;background:#fff;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h6 {font-size:1em;font-weight:bold;}
p {margin:0 0 1.5em; font-size:1.1em; color:#666666;}
a:focus, a:hover {color:#000;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
ul {list-style-type:disc;}
/* forms.css */
label {font-weight:bold;}
input[type=text], input[type=password], input.text, input.title, textarea, select {background-color:#fff;border:1px solid #bbb;}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;}
input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
input.text, input.title {width:300px;padding:5px;}
textarea {width:390px;height:250px;padding:5px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
/*mycustomization*/
html, body {height:100%;}
* html #container {height: 100%;}
body {background:#850b0e url(../img/header.jpg) repeat-x; padding-top:45px;}
#container {width:90%; background:url(../img/bg_1.png) no-repeat center top; margin: 0 auto; position:relative; min-height:100%;}

h1 {text-indent:-9999px; background:url(../img/semantic-touch-logo.png) no-repeat; width:209px; height:89px; position:relative; top:-45px;}
h2 {text-indent:-9999px; background:url(../img/online-marketing-thai-sme.png) no-repeat; width:448px; height:119px; margin-bottom:1em;}

/*navigation*/
a {outline:none;}
#nav {background:url(../img/anav.jpg) no-repeat; width:413px; height:45px; position:relative; list-style:none; margin:0 auto; padding:0;}
#nav li {float:left;}
#nav li a {position:absolute;top:0;margin:0;padding:0;display:block;height:45px;background:url(../img/anav.jpg) no-repeat;text-indent: -9999px;overflow: hidden;font-size: 1%;}

li#nav_about a {left:48px;width:94px;background-position: -48px 0;}
li#nav_network a {left:160px;width:98px;background-position:-160px 0;}
li#nav_contact a {left:274px;width:97px;background-position:-274px 0;}

li#nav_about a:hover {background-position: -48px -45px;}
li#nav_network a:hover {background-position:-160px -45px;}
li#nav_contact a:hover {background-position:-274px -45px;}

li#nav_about.active a {background-position: -48px -90px;}
li#nav_network.active a {background-position:-160px -90px;}
li#nav_contact.active a {background-position:-274px -90px;}

/*Content*/
#contain {width:448px; margin:0 auto;}
div.wrapper {padding: 25px 30px 40px 30px;}
h3 {padding:25px 0 0 40px; margin:0;}
span {color:#C00;}
#content {background:#f7f8f7; width:413px; margin:0 auto;}
#content div.container, #footer {width:393px; padding:15px 10px; margin:0 auto;}
h4 {font-size:1.5em; color:#161616;}

/*Footer*/
#footer {background:url(../img/glow.png) no-repeat top;}
#footer p {text-align:center; font-size:0.9em; color:#000; margin-bottom:0;}
#footer p.address {margin-bottom:1.5em;}
#footer p.address, p.address a {color:#FFF; text-decoration:none;}
p.address a:hover {text-decoration:underline;}

/*Network*/
ul.list {list-style:none; margin:0 auto; width:255px; padding:10px 0 60px 0; font-size:1.1em;}
ul.list span {color:#333; font-size:1.4em; font-weight:bold; line-height:1;} 
ul.list a {text-decoration:none; width:215px; height:37px; display:block; padding:15px 20px; color:#666; font-weight:bold;}
ul.list a:hover {background:#e5e5e5;}
ul.list li {height:70px;}
ul.list li.line {background:url(../img/divide.jpg) no-repeat; background-position:bottom;}
ul.list li img {float:left; margin-right:28px;}

/*Contact*/
#contact div.wrapper {padding: 0 30px 40px 30px;}
#contact label {float:left; width:100px;padding-top:10px;}
#contact span {margin-left:5px; font-weight:normal;}
#contact textarea, #contact input[type=text] {background:url(../img/Shadding.gif) repeat-x; background-position:top;}
#contact textarea {height:100px; width:195px; overflow:auto; padding-left:5px;}
#contact input {height:25px;width:200px; padding:2px 0 0 5px}
#contact p {margin:0;}
#contact p.text {margin:1em 0;}
#contact input[type=submit] {height:30px; width:100px;margin-left:100px;}

/*validate*/
#contact label.error {background:url(../img/cross.png) no-repeat; height:16px; width:16px; float:right; margin:10px 0 0 10px;}
*#contact label.error {background:url(../img/cross.png) no-repeat; height:16px; width:16px; float:right; position:absolute;}
#contact label.checked {background:url(../img/accept.png) no-repeat;}

#message_alert {padding: 25px 0 0 0;height:280px;}
#message_alert a {color:#C00; text-decoration:none;}
#message_alert a:hover {text-decoration:underline;}