/* *********************************** STRUCTURE *********************************** */

body { font: small/1.3 Verdana, Arial, sans-serif; margin: 0; padding: 2em; }
.style1 {color: #FF3300}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
a:hover {
	text-decoration: none;
}
h2 {font-size:1.2em;}
p { margin: 1em 0; padding: 0; }
img {border:none;}
table {width: 85%;}
caption {margin-bottom:3px;}
td, th {text-align: center;}

.skip { left: -99999em; position: absolute; top: -99999px; }

#structure { margin: 0 auto; max-width: 100%; width: 60em; }

#header { border-bottom: 5px solid; clear: both; float: left; line-height: 1; width: 100%; }

#header h1 { float: left; font-size: 3em; font-weight: normal; margin: 0; padding: .5em 0 .5em 1em; }

#nav { float: right; margin: 0; padding: 3em 1em 3em 0; }

#nav li { display: inline; padding: 0 1em 0 0; }

/*
  EM >>  2em  +  40em  +  2em  +  14em  +  2em  = 60em
  %  >> 3.34% + 66.67% + 3.32% + 23.33% + 3.34% = 100%
*/

#main { float: right; margin: 1em 3.34% 1em 0; width: 66.67%; }

#supplement { clear: left; float: left; margin: 1em 3.34% .25em .25em; width: 23.33%; }

#supplement ul { border: 1px solid; margin: 1em 0; padding: 1em 0; }

#supplement li { margin: 0.5em 0; padding: 0; }

#footer { border-top: 1px solid; clear: both; font-size: .8em; padding: 1em 0; }

/* fix ie */

* html #content { height: 1%; }

* html #main { margin-left: 1.67%; }

* html #supplement { margin-right: 1.67%; }

/* small */

body.small { padding: 0; }

body.small #structure { width: 100%; }

/* smaller */

body.smaller #structure { padding-bottom: 2em; }

body.smaller #header { float: none; text-align: center; }

body.smaller #header h1 { float: none; padding: 1.5em 0 0.5em; }

body.smaller #nav { float: none; padding: 0 0 3em; }

body.smaller #main { margin: 1em 5% 0; width: 90%; }

body.smaller #supplement { margin: 0 5% 1em; width: 90%; }

body.smaller #footer { background: none; border: none; padding: 0; }

/* *********************************** STYLE *********************************** */

body { background-color: #CCCCCC; color: #222; }

a { color: #FF3300; text-decoration: underline; }

a:hover { border-color: #fbe; color: #FF3300; }

#structure { background: #fff; }

#header {
	background-color: #FFFFFF;
	border-color: #669900;
	color: #FF3300;
	background-image: url(twist.jpg);
	background-repeat: no-repeat;
}

#header h1 { font-weight: bold; text-transform: capitalize; }

#nav { list-style: none; text-transform: lowercase; }

#nav a { color: #999; }

#nav-develop a { color: #fff; font-weight: bold; }

#nav a:hover { border: none; color: #fbe; }

#main { text-align: justify; }

#supplement ul { background-color: #FFFFFF; border-color: #ccc; list-style: none; }

#supplement li { list-style: none; text-align: center; }

#supplement p {
	font-size: 85%;
	padding: 0 2px 0 2px;
	text-align: justify;
}

#footer {
	border-color: #ccc;
	color: #777;
	text-align: center;
	background-color: #E4E4E4;
}

.vcard { white-space: nowrap; }