a:hover {
  background-color: #e8f7d2;
}

/*Header Top*/
div.headertop{
  width:99%;
  background-color:#d9e021;
  height:16px;
}

/*Header Title*/
div.headertitle{
  width:99%;
  background-color:#ffffff;
  margin-top:10px;
  margin-left:10px;
/*  margin-bottom:5px;*/
}

/*Download Button*/
div.download{
  width:120px;
  background-color:#ffffff;
  border-style:outset;
  border-color:#cccccc;
  border-width:2px;
  float:right;
  font-size:13px;
  text-align:center;
  padding-top:3px;
  padding-bottom:5px;
  margin-bottom:5px;
  margin-top:30px;
  margin-right:14px;
}

/*Header Bottom*/
div.headerbottom{
  width:99%;
  min-width:400px;
  background-color:#d9e021;
  height:3px;
  clear:both;
}

/*Header Menu Top*/
div.headermenutop{
  width:10%;
  background-color:#ffffff;
  border-style:solid;
  border-color:#cccccc;
  border-width:1px;
  float:left;
  font-size:12px;
  text-align:center;
  padding-top:3px;
  padding-bottom:3px;
}

/*Header Menu Top*/
div.headermenutopselected{
  width:10%;
  background-color:#e8f7d2;
  border-style:solid;
  border-color:#cccccc;
  border-width:1px;
  float:left;
  font-size:12px;
  text-align:center;
  padding-top:3px;
  padding-bottom:3px;
}

/*Header Menu*/
div.headermenu{
  width:17.5%;
  min-width:6em;
  background-color:#ffffff;
  border-style:solid;
  border-color:#cccccc;
  border-width:1px;
  float:left;
  font-size:12px;
  text-align:center;
  padding-top:3px;
  padding-bottom:3px;
}

/*Header Menu*/
div.headermenuselected{
  width:17.5%;
  min-width:6em;
  background-color:#e8f7d2;
  border-style:solid;
  border-color:#cccccc;
  border-width:1px;
  float:left;
  font-size:12px;
  text-align:center;
  padding-top:3px;
  padding-bottom:3px;
}

/*pattern navigation*/
div.pattern_navi{
  clear:both;
  margin-top:35px;
  margin-left:10px;
  width: 240px;
  float: left;
  background-color:#ffffff;
  border-style:groove;
  border-color:#d9e021;
  border-width:2px;
  font-size:12px;
  padding-left:10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

div.pattern_navi_title{
  float:left;
  margin-top:15px;
  margin-left:5px;
  font-size:14px;
  font-weight:bold;
  text-indent:none;
}

div.pattern_navi_toplink{
  float:right;
  margin-top:17px;
  font-size:12px;
  font-weight:bold;
  padding-right:15px;
  text-indent:none;
}

div.pattern_navi_topseparator{
  clear:both;
  padding-top:15px;
}

img.patternnavi_link{
  padding-left:1em;
  text-indent:none;
}


/*Main*/
div.main{
  background-color: #ffffff;
  margin-left: 310px; /* Start from the right of Navigator */
  margin-right:40px;
  margin-top:5em;
  /*margin-bottom:2em;*/
  font-size:13px;
}

/*Footer Margin*/
div.footermargin{
  width:99%;
  height:15px;
  background-color:#ffffff;
  Clear:both;
}

/*Footer*/
div.footer{
  width:99%;
  background-color:#d9e021;
  height:20px;
  font-size:10px;
  text-align:center;
  padding-top:5px;
}

a {
  text-decoration: none;
  color:black;
}

a.selected {
  text-decoration: none;
  background-color:#e8f7d2;
  color:black;
}


h1{
  font-size:18px;
  margin-bottom:1.5em;
}

h2{
  font-size:16px;
  margin-bottom:1.5em;
}

h3{
  font-size:14px;
  margin-bottom:1.3em;
}

p{
  text-indent:1em;
  max-width:30em;
  min-width:20em;
  line-height:1.6em;
  margin-bottom:1.5em;
}


/*Pattern Format*/

div.pattern{
  font-size:13px;
  max-width:36em;
  min-width:26em;
  margin-right:10px;
  line-height:1.6em;
}

div.pattern_number{
  margin-bottom:10px;
}

div.pattern_title{
  font-size:18px;
  font-weight: bold;
  margin-bottom:10px;
  text-align:center;
}

div.pattern_eng{
  text-align:center;
  font-size:15px;
  font-weight: bold;
  font-style: italic;
  margin-bottom:10px;
}

div.pattern_intro{
  text-align:center;
  margin-bottom:10px;
}

div.pattern_image{
  height:260px;
}

div.pattern_context{
  margin-bottom:30px;
}

div.pattern_problem{
  font-weight: bold;
  margin-bottom:10px;
}

div.pattern_forces{
  margin-bottom:20px;
  margin-left:12px;
  margin-right:20px;
  padding-top:5px;
  padding-left:16px;
  padding-bottom:5px;
  border-left-style: solid;
  border-left-color:gray;
}

div.pattern_solution{
  font-weight: bold;
  margin-bottom:10px;
}

div.pattern_actions{
  margin-bottom:20px;
  margin-left:12px;
  margin-right:20px;
  padding-top:5px;
  padding-left:16px;
  padding-bottom:5px;
  border-left-style: solid;
  border-left-color:gray;
}

div.pattern_related{
  margin-bottom:20px;
}

div.pattern_separator{
  text-align:center;
  margin-top:10px;
  margin-bottom:20px;
}

a.relatedpattern {
  text-decoration: none;
  font-weight: bold;
  color:black;
}

a.selfpattern {
  text-decoration: none;
  font-weight: bold;
  color:black;
}

img.pattern_image {
display:block;
margin:auto;
}


/* Overview */
div.overview{
  float:left;
  margin-top:20px;
  margin-left:20px;
  font-size:13px;
}

div.overview_image{
  clear:both;
/*  margin-top:50px;*/
  margin-left:80px;
}


/* Image Navigator */

div.image_navi{
  margin-top:50px;
  margin-left:10px;
  background-color:#ffffff;
}

div.image_navi_panel{
  width:190px;
  height:190px;
  margin-left:10px;
  margin-bottom:15px;
  background-color:#ffffff;
  float:left;
  border-style:double;
  border-color:#cccccc;
  Border-width:2px;
  padding-left:8px;
  padding-right:8px;
  padding-top:8px;
  padding-bottom:8px;
}

div.image_navi_title{
  font-weight: bold;
  font-size:12px;
  margin-bottom:0.2em;
}

div.image_navi_intro{
  font-size:10px;
  color:gray;
  height:4em;
  margin-bottom:0.2em;
}

img.image_navi {
  display:block;
  width:125px;
  margin:auto;
}



/*pattern book*/
div.pattern_book{
  clear:both;
  margin-left:20px;
  margin-top:35px;
  padding-top:70px;
  width: 240px;
  float: left;
  line-height:1.5em;
  background-color:#ffffff;
/*  border-style:groove;
  border-color:#d9e021;
  border-width:2px;*/
/*  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;*/
  font-size:12px;
}

img.pattern_book {
  display:block;
  width:100px;
  margin:auto;
  margin-top:5px;
  margin-bottom:20px;
}



img.catalog_sample {
  display:block;
  width:200px;
  margin:auto;
  margin-top:5px;
  margin-bottom:20px;
}

/*project photo*/
div.project_photo_v{
  margin-left:20px;
  margin-top:20px;
  padding-top:70px;
  width: 240px;
  float: left;
  background-color:#ffffff;
/*  border-style:groove;
  border-color:#d9e021;
  border-width:2px;*/
/*  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;*/
  font-size:12px;
}

div.project_photo_h{
  clear:both;
  margin-left:40px;
  margin-right:40px;
  width: 800px
/*  float: left;*/
  background-color:#ffffff;
  min-width:600px;
}

img.project_photo_v {
  display:block;
  width:200px;
  margin:auto;
  margin-bottom:5px;
}

img.project_photo_h {
  display:block;
  width:200px;
  float: left;
  margin:auto;
  margin-right:10px;
}


img.intro {
  display:block;
  width:200px;
  float: right;
  margin:auto;
}

img.top {
  float: center;
  margin-top:10px;
  margin-right:5px;
}

img.top {
  float: center;
  margin-top:10px;
  margin-right:5px;
}

a.colored {
  font-weight:bold;
  color:gray;
}



/* Context Navigator */

div.context_navi{
  background-color: #ffffff;
  font-size:13px;
  margin-top:50px;
  margin-left:10px;
  clear:both;
}

div.context_explain{
  float:left;
  margin-left:20px;
  margin-bottom:10px;
}


div.context_category_panel{
  float:left;
}

div.context_navi_panel{
  width:250px;
/*  height:190px;*/
  margin-left:5px;
  margin-bottom:10px;
  background-color:#ffffff;
  float:left;
/*  border-style:double;
  border-color:#cccccc;
  Border-width:2px;*/
  padding-left:1em;
  padding-right:1em;
/*  padding-top:8px;*/
  padding-bottom:8px;
}

div.context_navi_context{
  font-weight: bold;
  font-size:14px;
  margin-bottom:0.5em;
}

div.context_navi_title{
  font-size:12px;
  margin-bottom:0.2em;
}

div.context_navi_category{
  clear:both;
  font-weight: bold;
  font-size:14px;
}

a.context_link_category{
  font-size:13px;
  line-height:1.5em;
}


a.context_link_context{
  font-size:12px;
  line-height:1.1em;
}

div.page_navigator{
  padding-bottom:30px;
}

div.context_navi_navigator{
clear:both;
  margin-top:35px;
  margin-left:10px;
  padding-left:10px;
  padding-right:5px;
  /*padding-left:5px;*/
  width: 240px;
  float: left;
  background-color:#ffffff;
  border-style:groove;
  border-color:#009900;
  border-width:2px;
  font-size:12px;
  text-indent:0px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

a.context_navi_category{
  font-weight: bold;
  font-size:13px;
}

a.context_navi_category_selected{
  font-weight: bold;
  font-size:13px;
  background-color:#e8f7d2;
}


div.context_main{
  background-color: #ffffff;
  margin-left: 310px; /* Start from the right of Navigator */
  margin-right:40px;
  margin-top:5em;
  /*margin-bottom:2em;*/
  font-size:13px;
}


/* Study Navigator */

div.study_navi{
  background-color: #ffffff;
  font-size:13px;
  margin-top:50px;
  margin-left:10px;
  clear:both;
}

div.study_explain{
  float:left;
  margin-left:20px;
  margin-bottom:10px;
}


div.study_category_panel{
  float:left;
}

div.study_navi_panel{
  width:250px;
/*  height:190px;*/
  margin-left:10px;
  margin-bottom:10px;
  background-color:#ffffff;
  float:left;
/*  border-style:double;
  border-color:#cccccc;
  Border-width:2px;*/
  padding-left:1em;
  padding-right:1em;
/*  padding-top:8px;*/
  padding-bottom:8px;
}

div.study_navi_category{
  font-weight: bold;
  font-size:13px;
  margin-left:0.5em;
  margin-top:1em;
  margin-bottom:0.5em;
}

div.study_navi_category_selected{
  font-weight: bold;
  font-size:13px;
  margin-left:0.5em;
  margin-top:1em;
  margin-bottom:0.5em;
  background-color:#e8f7d2;
}


div.study_navi_course{
  font-weight: bold;
  font-size:12px;
  margin-left:1em;
  margin-top:0.2em;
  margin-bottom:0.2em;
}

div.study_navi_feature{
  font-size:12px;
  margin-left:2em;
  margin-bottom:0.2em;
}

div.study_main_course{
  font-weight: bold;
  font-size:15px;
  margin-bottom:0.5em;
}

div.study_main_feature{
  font-weight: bold;
  font-size:13px;
  margin-bottom:0.5em;
}


div.study_navi_title{
  font-size:12px;
  margin-bottom:0.2em;
}

div.study_navi_category{
  clear:both;
  font-weight: bold;
  font-size:13px;
}

a.study_link_category{
  font-size:13px;
  line-height:1.5em;
}


a.study_link_study{
  font-size:12px;
  line-height:1.1em;
}

div.study_navi_navigator{
clear:both;
  margin-top:35px;
  margin-left:10px;
  padding-left:10px;
  width: 240px;
  float: left;
  background-color:#ffffff;
  border-style:groove;
  border-color:#009900;
  border-width:2px;
  font-size:12px;
  text-indent:8px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  line-height:1.4em;
}


div.study_main{
  background-color: #ffffff;
  margin-left: 310px; /* Start from the right of Navigator */
  margin-right:40px;
  margin-top:5em;
  /*margin-bottom:2em;*/
  font-size:13px;
}


img.curriculum {
  display:block;
  width:380px;
 float: left;
  margin:auto;
/*  margin-right:10px;*/
}


a.label:hover {
  background-color: #ffffff;
}