@charset "UTF-8";

/* =========================================================
   All Layout
========================================================= */

/* body
----------------------------------------------- */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0; 
}

/* container
----------------------------------------------- */
#container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
}

/* header
----------------------------------------------- */
#header {
  clear: both;
}
#headerContainer {
  padding: 0 10px;
}

/* navi
----------------------------------------------- */
#navi {
  clear: both;
}
#naviContainer {
  padding: 0 10px;
}

/* main
----------------------------------------------- */
#main:before, #main:after {
  content: "";
  display: table;
}
#main:after {
  clear: both;
}
#main {
  background-color: #FCF2E3;
  box-shadow: 0 2px 3px #999999;
  zoom: 1;
}
#mainBody {
  margin: 10px 10px 15px;
  padding-top: 3px;
  background: #FFFFFF;
  box-shadow: 1px 1px 3px #999999;
  border-radius: 3px;
  overflow: hidden;
}

/* wrapper
----------------------------------------------- */
#wrapper {
  float: left;
  clear: both;
  width: 100%;
  margin: 0 0 30px 0;
}

/* content(center column)
----------------------------------------------- */
#content {
  float: right;
  width: 100%;
  margin-left: -255px;
}
#contentContainer {
  /*margin-left: 255px;*/
  margin-left: 235px;
  padding-right: 10px;
}

/* menu(left column)
----------------------------------------------- */
#menu {
  float: left;
  margin: 0;
  width: 220px;
}
#menuContainer {
  padding: 0 10px 10px;
  border-right: solid 1px #C2C2C2;
}
#menuBody a {
  max-width: 100%;
}
#menuBody img {
  width: auto !important;
  max-width: 100%;
  max-width: 200px\9;
}

/* footer
----------------------------------------------- */
#footer {
  clear: both;
  width: 100%;
}

/* =========================================================
   Fix Layout 3 Columns
========================================================= */
@media only screen and (min-width: 760px) and (max-width: 1600px) {

#container {
  max-width: 1600px;
  min-width: 760px;
}
* html #container {
  width:expression(document.documentElement.clientWidth < 762? "760px" : document.documentElement.clientWidth > 1602? "1600px" : "auto");
}
}

/* =========================================================
   Fix Layout 2 Columns
========================================================= */
@media only screen and (min-width: 601px) and (max-width: 759px) {

#container {
  min-width: 601px;
}
* html #container {
  width:expression(document.documentElement.clientWidth < 603? "601px" : document.documentElement.clientWidth > 761? "759px" : "auto");
}
#wrapper {
  float: none;
  margin: 0 0 10px;
  overflow: hidden;
}
#mainBody {
  margin: 0;
  padding: 10px;
}
#content {
  margin-bottom: 10px;
}
#contentContainer {
  margin-right: 0;
  padding-right: 10px;
}
#links {
  float: none;
  clear: both;
  width: auto;
  margin-bottom: 10px;
}
#linksBody {
  height: auto !important;
}
}

/* =========================================================
   smart phone
========================================================= */
@media only screen and ( max-width: 600px ) {

#container {
  min-width: 320px;
}
#wrapper {
  margin: 0;
}
#content {
  height: auto !important;
  margin: 0 0 10px;
}
#contentContainer {
  margin: 0;
}
#main {
  background-color: #FFFFFF;
  box-shadow: none;
}
#mainBody {
  margin: 0;
  padding: 10px;
}
#menu {
  float: none;
  clear: both;
  width: 100%;
}
#menuContainer {
  padding: 0;
  border-right: none;
}
#menuBody {
  height: auto !important;
}
}