/*
Theme Name: Toyo Engineering
Theme URI: http://www.toyoeng.com
Description: Original theme customized for Toyo Engineering Ltd
*/

/*  全体構造
-------------------------------------------------------------------------- */
*{
 margin:0;
 padding:0;
}

html{
 height:100%;
}

body{
 margin:0;
 padding:0;
 height:100%;
 text-align:center;
 color:#333333;  
 font-size:90%;  
 font-family:"Trebuchet MS",Verdana, "qMmpS Pro W3",osaka,"lr oSVbN",sans-serif;
}

#wrapper{ /* Rec̒ */
 margin:0;
 padding:0;
 width:945px;
 text-align:left;
 margin: 0 auto; /* -39px = the total of height + vertical padding of #footer and .push */
}
 /*
 When stick to footer. Use with div class=push
 min-height: 100%; 
 height: auto !important; 
 height: 100%; 
 margin:0 auto -32px; */


#footer{
 clear:both;
 width:945px;
 margin:0 auto;
 text-align:left;
 margin-top:1.0em;
 padding-top:1.5em;
 border-top:1px solid #acacac;
}

#mybottom{
 width:100%;
 margin:2em 0;
 padding:2em 0;
 background-color:black;
}

/* footer stick to the bottom  */
.push {  
  height: 32px; 
}


/*  Basic P tag  */
p{
 line-height:1.5;
 letter-spacing:0.1em;
 padding:5px 0;
}

br {
 letter-spacing : normal;
} 

ul{
  list-style:none;
}

hr{
 margin:15px 0;
}

img{
 border:none;
 vertical-align:middle;
 text-decoration:none;
}

/*  ---------------------------  GLOBAL LINK SETTING ----------------------------  */

a{
 color:#333333;
 text-decoration:none;
}

a:link{
 color:#333333;
 background:transparent;
}

a:visited{
 color:#333333;
 background:transparent;
}

a:hover,a:active{
 color:#076470;
 background:transparent;
 text-decoration:none; 
 border-bottom:1px dotted #076470;
}

/* ---------------------- Header ------------------------- */

#header{
 position:relative;
 width:945px;
 height:85px;
}

#header h1{
 width:526px;
 height:85px;
 background:url(./images/toyo_logo.gif) left top no-repeat;
}

#header h1 a{
 display:block;
 width:500px;
 height:85px;
 text-indent:-9999px;
 border:none;
 /* \*/                   
 overflow:hidden;         /* -- FirefoxŘgɑ傫oĂ܂ۂ̑΍B㉺̃RgAEgMacIE΍ -- */
/* */
}

#header ul{
 position:absolute;
 top:15px;
 right:52px;
 list-style:none;
 padding:0 0 0 510px;
 text-align:right;
 line-height:1.5;
}

#header ul li{
 display:inline;
 padding-left:1.5em;
 vertical-align:top;
}

#header div#myform{
 position:absolute;
 top:42px;
 right:20px;
}

#header form{
 position:relative;
 width: 263px;
 height: 33px;
 background-color:#b4d6da;
}

#header form p{
  background-color: white;
  padding:0;
}

#header form p input#s{
  position: absolute;
  top: 4px;
  right: 108px;
  padding: 0;
  border: 0;
  width: 151px;
  height: 25px;
  font-size:20px;
  font-weight:bold;
}

#header form p input#search{
    position: absolute;
    top: 4px;
    right: 4px;
    width: 101px;
    height: 25px;
    padding: 0;
    border: 0;
    background-color: #1496a7;
    background-position: top;
    font-weight: bold;
    color: #feeeee;
}

#header form p input#search:hover{
  background-position: bottom;
}

#header form p input#search:active{
  padding: 1px 0 0 1px;
}

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

#nav ul{
 margin-top:4px;
 width:945px;
 height:36px;
}

#nav ul li{
 float:left;
}

#nav ul li a{
 display:block;
 height:36px;
 outline: none;
 /* \*/                   
 overflow:hidden;         /* -- Firefox Bug -- */
/* */
 text-indent:-9999px;
 border:none;
}

/* ------------------ navigation a ---------------------------------- */
#nav ul li#home a{  width:156px; left:0; background:url(./images/nav.gif) no-repeat 0 0; }
#nav ul li#nav_tech a{ width:157px; left:156px; background:url(./images/nav.gif) no-repeat -156px 0; }
#nav ul li#nav_products a{ width:157px; left:313px; background:url(./images/nav.gif) no-repeat -313px 0; }
#nav ul li#nav_example a{ width:157px; left:470px; background:url(./images/nav.gif) no-repeat -470px 0; }
#nav ul li#nav_voice a{ width:157px; left:627px; background:url(./images/nav.gif) no-repeat -627px 0; }
#nav ul li#nav_company a{ width:161px; left:784px; background:url(./images/nav.gif) no-repeat -784px 0; }

/* ---------------- navigation a:hover ------------------------- */

#nav ul li#home a:hover{ background:url(./images/nav.gif) no-repeat  0 -36px; }
#nav ul li#nav_tech a:hover{background:url(./images/nav.gif) no-repeat  -156px -36px; }
#nav ul li#nav_products a:hover{ background:url(./images/nav.gif) no-repeat  -313px -36px; }
#nav ul li#nav_example a:hover{ background:url(./images/nav.gif) no-repeat  -470px -36px; }
#nav ul li#nav_voice a:hover{ background:url(./images/nav.gif) no-repeat  -627px -36px; } 
#nav ul li#nav_company a:hover{ background:url(./images/nav.gif) no-repeat  -784px -36px; }

/* ------ Top Info Home Page---------- */

#top_float_div{ width:100%; margin:1.5em 0; }
#top_float_div h2, #cate_right h2, #top_added_wrapper h2{ 
 font-size:110%;
 color:#09545e;
 background-color:#d9ecee;
 padding:6px 8px 3px 8px;
 border-bottom:2px solid #09545e;
 letter-spacing:0.3em;
}

#top_added_wrapper{ width:100%; margin-top:0.7em; }

#top_added_left{
 position:relative;
 width:400px;
 float:left;
 padding:0;
}

#top_added_left h3{
 font-size:100%;
 padding:0 12px;
 color:#09545e;
}

#slideshow h3{
 font-size:100%;
 padding:0;
}

#top_added_left p{
 margin:5px 0;
 padding:3px 12px;
 letter-spacing:0.2em;
}

#top_added_right{
 width:540px;
 float:right;
}

#my_news{ position:relative; width:289px; float:left; margin-right:0px; }
#my_news ul{ padding:10px; }
#my_news li{ line-height:1.8; }
#my_news ul.topsolution li{ padding-left:19px; line-height:1.5; background:url(./images/solution_prefix.gif) left center no-repeat;  }

#my_news span.topheader{ position:absolute; top:6px; left:170px; }

/* Wrapper for example and  youtube to avoid IE6 issue... */
#wrap_example_youtube{ width:650px; float:right;  }

#my_example{ position:relative; width:289px; float:left; margin-right:0px; }
#my_example #my_example_thumnail{ margin-top:1.5em; padding-left:5px;}
#my_example p{ width:136px; float:left; text-align:center; margin-right:5px;  margin-bottom:10px; padding:0; }
/* #my_example img{ margin:0 10px 10px 0; } */
#my_example span{ position:absolute; top:6px; left:210px; }

#my_youtube { position:relative; width:350px; float:right; }
#my_youtube span.topheader{ position:absolute; top:6px; left:170px; }

/* ------------------ Footer -------------------- */
#footer h2{ color:#09545e; }
#footer #my_contact{  width:100%; }
#footer_cominfo{ width:425px; }

.appeal{ width:470px; }
.appeal h2{ font-size:110%; line-height:1.6; }
.appeal p{ padding:0; }
.appeal_con{ width:321px; }
.appeal_con2{ width:266px; }

.copyright{ margin-top:2.5em; padding-bottom:2em; }

/* The below is for each category, single page and so on....  */

/* Contents Main Container */
#contents{
 width:945px;
 padding:20px 0;
}

#cate_left{ width:720px; padding-left:15px; margin-bottom:1.5em; }
#cate_right{ width:200px; margin-bottom:3em; }

#cate_left h2, #page_block h2{ color:#09545e; font-size:200%; font-weight:bold; }
#cate_left h3{ color:#09545e; font-size:120%; padding-left:9px; border-left:4px solid #09545e; margin:1em 0; }

#cate_right ul{ margin-top:1em; margin-left:15px; }
#cate_right ul.sidecate li{ padding-left:19px; line-height:1.5; background:url(./images/sidecate001.gif) left center no-repeat;  }

.posting{ margin-bottom:1em; }
.posting h3{ font-size:150%; color:#09545e; }


/* Construction Examples */
#cate_exam_thum{ width:100%; }
#cate_exam_thum p{  width:230px; float:left; text-align:center; margin-right:10px; margin-bottom:10px; padding:0;  }

/* Example Single page */
/* pics gallery */
#example_gallery{ width:705px;}

/*  Products Service  */
#cate_products{ width:100%; }
.products_list_wrapper{ width:330px; padding:10px; margin-bottom:15px; background-color:#F1F8F9; border:1px dotted #89BBC1; }
.products_list_wrapper p{ width:175px; }

/* Page  */
#page_block{ width:900px; padding:20px 15px; margin-bottom:1.5em; }
#page_block ul li{ line-height:2; }

/* Contact */
#my_contactform{ width:600px; padding:20px; border:1px solid black; margin: 0 auto;  background-color:#F1F8F9; border:1px dotted #89BBC1;
}

#my_submit{ text-align:center; }

#my_submit input{
 border-color:#ffb87c #d26000 #d26000 #ffb87c;
 width:15em;
 padding:5px;
 vertical-align:middle;
 color:#ffffff;
 background:#ff7400;
 font-size:150%;
 font-weight:bold;
}

/*  FAQ */
h3.mytitle{ padding:5px 10px; background-color:#F1F8F9; border:1px dotted #89BBC1; margin:1em 0; color:#09545e; } 

/* Voice */
p.myvoice{ padding-left:31px; background:url(./images/voice.gif) left bottom no-repeat;  }

/* Table Company Info */
table.mycustom{
 width: 100%;
 border: 1px #659196 dotted;
 border-collapse: collapse;
 border-spacing: 0;
 margin:1em 0;
}

table.mycustom td, table.mycustom th{
  padding: 7px 15px 7px 15px;
  border: 1px #659196 dotted;
  border-width: 0 0 1px 1px;
}


table.mycustom td.mycustom_title{
 width:25%;
 padding:5px;
 background-color:#F1F8F9;
 font-weight:bold;
 text-align:center;
}

table.mycustom td.mycustom_title2{
 width:30%;
 padding:5px;
 background-color:#F1F8F9;
 font-weight:bold;
}

table.mycustom td.mycustom_title3{
 width:38%;
 padding:5px;
 background-color:#F1F8F9;
 font-weight:bold;
}

/* ------------------------------------ */
/* TAB */
/* ----------------------------------- */


#tab {
    position:absolute;
	top:6px;
	left:300px;
	/* border-bottom: 2px solid #333; */
	height: 1.2em;
	/* overflow: hidden; */
}
#tab li {
	float: left;
	width: 30px;
	margin-right:5px;
}
#tab li a {
	display: block;
	width: 30px;
	height: 1.2em;
	border: 1px solid #777777;
	border-bottom:1px solid #777777;
	color: #4b4b4b;
	text-align: center;
}

#tab li a:hover, #tab li.present a {
	border-color: #333;
	color:#ffffff;
	background-color:#0e6b77;
}
 
#page_wrapper{ height:290px; overflow:auto; margin-bottom:0.5em; }


/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 538px;
height:260px;
background-color: #fff;
border: 1px solid #ddd;
border-bottom:none;
}

#slideshow ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 1%; /* IE fix */}

#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;}            

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
overflow: hidden;
width: 540px;
margin-top:6px;
}

#slideshow .slides ul {
width: 1620px;}

#slideshow .slides li {
width: 480px;
float: left;
padding: 10px 20px;}

#slideshow .slides h2 {
margin-top: 0;}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
background-color: #ddd;
border-top: 2px solid #ccc;
width:538px;
margin:0 auto;
}

#slideshow .slides-nav li {
float: left;
 border:none;
 text-decoration:none;
}

#slideshow .slides-nav li a {
display: block;
padding: 8px 11px;
outline: none;
 border:none;
 text-decoration:none;
}

#slideshow .slides-nav li a:hover {
 border:none;
 text-decoration:none;
}

.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {
background-color: #eee;}

.js #slideshow .slides-nav li.on a {
position: relative;
top: -4px;}


/* ---------------------- GLOBAL USEFUL CLASS PROPERTY ------------------------- */

.clear{ clear:both; }
.right{ float:right; }
.left{ float:left; }
.mycenter{ text-align:center; }
.my_margin001 { margin-top:1em; }
.my_margin002 { margin-bottom:1em; }
.my_padding001 { padding-top:2em; }
.bold{ font-weight:bold; }
.my_grey{ color:#777777; }
.my_grey a{ color:#777777; }
.my_grey a:hover{ color:#076470; }
.my_grey2{ color:#464646; }
.my_grey3{ color:#fff; background-color:#09545e; padding:2px 8px;}
.my_green{ color:#09545e; }
.my_green a{ color:#09545e; }
.my_red{ color:#d31a1a; }
.my_green_large{ color:#09545e; font-size:200%; font-weight:bold; }
.no_line { text-decoration:none; border:none; }
.no_line a { text-decoration:none; border:none;  }
.my_box1{ width:100%; }
.my_box_sub1{ width:49%; }
.mywidth001{ width:300px; }
.my_box_sub2{ width:240px; }
.green-underline{ font-size:120%; color:#09545e; }
.top_slide_box{ width:310px; }
.my_new_item{ color:#fff; padding:2px 8px; background-color:#09545e; }


/* For modern browsers FF, Opera Require this to show background correctly when using float */
#top_float_div:after, #my_news:after, #my_example:after, #my_contact:after, .appeal:after, #contents:after, .page_move:after, #cate_exam_thum:after, #cate_products:after, .products_list_wrapper:after. .my_box1:after, #page_block:after, #my_contact:after, #bottom_line:after, #top_added_left:after, #top_added_right:after, #slides:after{  
 content:"";
 display:block;
 clear:both;
}