/*
screen stylesheet for izziSoft website
created : 2008-08-18
last edited : 2008-11-12

dark orange #FE7215
lite orange #FFCC00
blue #0099FF
dark grey #141414

*/

/* -------------------------------------------------------- import reset css */
@import "../../screen_reset.css";


/* --------------------------------------------------------  general setting */

html {background-color: #141414;}
body {font-size: 90%; background-color: #141414; color: #FFFFFF; min-width: 950px;}
body, th, td, input, select, textarea {font-family: Verdana, Tahoma, Loma, Thonburi, "Lucida Grande", sans-serif;}

h1 {font-size: 1.45em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.2em; font-weight: bold;}
h4 {font-size: 1.1em; font-weight: bold;}
h5 {font-size: 1em; font-weight: bold;}
h6 {font-size: 0.9em; font-weight: bold;}

abbr, acronym {font-variant: small-caps;}
hr {border-bottom: 1px solid #FFFFCC;}
del  {text-decoration: line-through;}
ins {text-decoration: underline;}
strong {font-weight: bold;}
sub {vertical-align: sub; font-size: 0.7em;}
sup {vertical-align: super; font-size: 0.7em;}
pre, code, tt, xmp {font-family: monospace;}
blockquote {margin-left: 40px; margin-right: 40px;}
p {margin-bottom: 10px;}


/* ------------------------------------------------------ setting navigation */

a:link {color: #FFCC33;}
a:visited {color: #FF9900;}
a:hover {color: #FF9900;}
a:active {color: #FF6600;}

h6.homepagebutton-th a, h6.homepagebutton-en a {display: block; width: 170px; height: 50px;}
h6.homepagebutton-th a {background: transparent url("../images/button_order.th.png") no-repeat;}
h6.homepagebutton-en a {background: transparent url("../images/button_order.en.png") no-repeat;}
h6.homepagebutton-th a:hover, h6.homepagebutton-en a:hover {background-position: 0 -50px;}

#subnav {clear: both; width: 900px; height: 40px; list-style-type: none; font-size: 0.9em; background-color: #000000;}
#subnav li {float: left; margin-left: 10px;}


/* ---------------------------------------------------------- setting layout */

#header {background: #141414; width: 900px; margin: 0 auto;}
#header h1 {
	float: left;
	text-indent: -7000px;
	width: 350px; height: 100px;
	background: transparent url("../images/logo.png") no-repeat;
}

#contentcontainer {clear: both; width: 900px; margin: 0 auto;}

#subcontent {
	float: left;
	width: 340px; height: 340px;
	margin: 0 10px 10px 0;
	background: transparent url("../images/bg_subcontent.png") no-repeat;
}
#subcontent h2 {margin: 5px 25px; padding-top: 20px; border-bottom: 1px dotted #DFDFDF;}
#subcontent dl {padding: 15px 25px;}
#subcontent dt {font-size: 1.2em; font-weight: bold; margin-bottom: 6px;}
#subcontent dd {margin: 0 0 15px 10px;}

#content {
	float: right;
	width: 550px;
	padding-top: 40px;
	line-height: 120%;
	background-color: transparent;
	color: #FFFFFF;
}
#content p {margin: 5px 20px 10px 20px; text-indent: 2em; line-height: 140%;}
#content p.quote {font-size: 110%; margin-top: 20px;}
#content p.address {text-indent: 0; font-size: 120%;}
#content p.address img {margin-top: 15px;}
#content p.description {font-size: 0.7em; text-indent: 0;}
#content h4 {margin: 0 20px 10px 20px;}
#content h5 {padding: 4px 10px; line-height: 1.8em; color: #FFFFFF; background-color: #000000;}
#content h6 {margin: 200px 0 0 190px; width: 170px; height: 50px; text-indent: -7000em;}
#content img {margin-bottom: 10px;}

#footer {
	clear: both; width: 900px; height: 90px;
	margin: 0 auto;
	font-size: 0.7em;
	background: #141414 url("../images/bg_footer.jpg") repeat-x;
}
#footer p {float: left; margin-left: 10px;}
#footer img {float: right; margin-right: 10px;}

#webbadgebox {clear: both; width: 900px; padding: 20px 0; border-top: 1px solid #323232;}
#webbadgebox img {float: left; margin-left: 10px;}


/* ----------------------------------------------------------- setting table */

table {width: 100%; border-collapse: collapse; font-size: inherit; font: 100%;}
th, td {border: solid 1px #555555; padding: 2px 3px;}
th {font-weight: bold; text-align: left; vertical-align: top;}

th.vertical {text-align: center;}
td.number {text-align: right;}
tr.odd {background: #EFEFF1;}
tr.even {background: #F6F6FA;}
.textcenter {text-align: center;}

table.packages {width: 520px; background-color: #FFFFFF;}
table.packages th {background-color: #FFFF99;}


/* ---------------------------------------------------- page specific design */

#homepage-en #contentcontainer {background: transparent url("../images/bg_content_1.en.jpg") no-repeat;}
#homepage-th #contentcontainer {background: transparent url("../images/bg_content_1.th.jpg") no-repeat;}
#homepage-en #content p, #homepage-th #content p {text-indent: -7000em;}
#company #contentcontainer {background: transparent url("../images/bg_content_2.jpg") no-repeat;}
#portfolio #contentcontainer {background: transparent url("../images/bg_content_6.jpg") repeat-y;}
#izzisoft #contentcontainer {background: transparent url("../images/bg_content_5.jpg") no-repeat;}
#izzispace #contentcontainer {background: transparent url("../images/bg_content_16.jpg") repeat;}
#izziphoto #contentcontainer {background: transparent url("../images/bg_content_3.jpg") no-repeat;}

#homepage #content {text-align: center; font-size: 1.7em;}
#company #content {color: #000000;}
#portfolio #content {color: #000000;}
#izzisoft #content {color: #FFFFFF;}
#izzispace #content {color: #000000;}
#izziphoto #content {color: #000000;}


/* ------------------------------------------------------ setting navigation */

#langnav {
	float: right;
	width: 540px; height: 75px;
	border-top: 5px solid #0099FF;
	list-style-type: none;
	background: transparent url("../images/izzisoft.jpg") no-repeat;
}
#langnav li {
	float: right;
	font-size: 0.75em;
	line-height: 20px;
	text-align: center;
	background: transparent url("../images/bg_langnav.jpg") no-repeat;
}
#langnav li, #langnav li a {display: block; width: 80px; height: 20px;}
#langnav li a {color: #000000;}
#langnav li a:hover {color: #FE7215; background-position: 0 -20px;}
#langnav li.current {background-position: 0 -40px;}
#langnav li.current a {color: #FFFFFF;}
#langnav li.current a:hover {color: #FFCC00;}

#headnav {
	float: right;
	width: 540px; height: 22px;
	list-style-type: none;
	padding-left: 10px;
	background: transparent url("../images/bg_headnav.jpg") no-repeat;
}
#headnav li {float: left; padding: 4px 10px 0 0;}
#headnav a {color: #DFDFDF;}
#headnav a:hover {color: #FFFFFF;}

#subnav {clear: both; line-height: 300%;}

#headnav .current, #subnav .current {font-weight: bold;}


/* ------------------------------------------------------------ setting form */

fieldset {}
legend {text-align: right;}
label {display: block;}

input, select, textarea {border: 2px solid #BBBBBB; background: transparent url("../images/bg_form.png"); margin-bottom: 10px;}
input:focus, textarea:focus {border: 2px solid #FFFFFF; background: #FFFF99;}

.button {border: 2px solid #BBBBBB; background: #FF6600; color: #FFFFFF; padding: 3px 8px; font-size: 110%; cursor: pointer;}
.button:hover {background: #FF9900;}
.button:focus {background: #6666FF;}
.infocolumn {float: left; width: 210px;}
.messagecolumn {float: right; width: 230px;}

#sendmail {width: 500px; height: 250px; margin-left: 20px;}
#sendmail label {display: block; width: 210px;}
#sendmail input {display: block; width: 210px;}
#sendmail textarea {display: block; width: 220px; height: 180px;}
#sendmail input.button {width: 7em;}