/*------------------------------------*\
更新：20150429
STRUCTURE(介護110番用CSS[common_v1.css]：ここから追加)
※読み込み順としては以下の順を準拠すること
http://yui.yahooapis.com/pure/0.6.0/pure-min.css（またはcss/pure.css）
↓
介護110番用CSS[common_v2.css]
↓
css/layouts/side-menu-old-ie.css
css/layouts/side-menu.css
\*------------------------------------*/
body {color: #777;}
.pure-img-responsive {max-width: 100%; height: auto;}
/* Add transition to containers so they can push in and out. */
#layout, #menu, .menu-link {
 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -ms-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
}
/* This is the parent `<div>` that contains the menu and the content area. */
#layout {position: relative; padding-left: 0;}
#layout.active {position: relative; left: 230px;}
#layout.active #menu {left: 230px; width: 230px;}
#layout.active .menu-link {left: 0px;}

/* The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that appears on the left side of the page. */
#menu {
 margin-left: -230px; /* "#menu" width */
 width: 230px;
 position: fixed;
 top: 44px;
 left: 0;
 bottom: 0;
 z-index: 1000; /* so the menu or its navicon stays above all content */
/* background: transparent;*/
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 border-right: 2px #ddd solid;
}
/* All anchors inside the menu should be styled like this. */
#menu a {color: #fff; border: none; padding: 0.6em 0 0.6em 0.6em;}
/* Remove all background/borders, since we are applying them to #menu. */
#menu .pure-menu, #menu .pure-menu ul {border: none; background: #333;list-style-type: none;margin:0;padding:0;} /* 20150425(更新：0.6.0/pure-min.css) */
/* Add that light border to separate items into groups. */
#menu .pure-menu ul, #menu .pure-menu .menu-item-divided {border-top: 1px solid #333;}
#menu .pure-menu ul li { border-bottom: 1px solid #ccc;}
#menu .pure-menu ul li.clinkover {background: #fff; color: #000; border-left: 5px solid #ff3300;}
#menu .pure-menu ul li.clinkover a {padding-left: 10px; color: #000;}
#menu .pure-menu ul li.clink {background: #fff; color: #000;}
#menu .pure-menu ul li.clink a {padding-left: 15px; color: #000;}
#menu .pure-menu ul li a {font-size: 80%; display:block; text-decoration: none;} /* 20150425(更新：0.6.0/pure-min.css) */
/* Change color of the anchor links on hover/focus. */
#menu .pure-menu li a:hover, #menu .pure-menu li a:focus {background: #666; display:block;} /* 20150425(更新：0.6.0/pure-min.css) */
#menu .pure-menu li.clink a:hover, #menu .pure-menu li.clink a:focus {background: #fff; color: #000; border-left: 5px solid #ff3300;}
#menu .pure-menu li.clinkover a:hover, #menu .pure-menu li.clinkover a:focus {background: #fff;}
/* This styles the selected menu item `<li>`. */
#menu .pure-menu-selected {background: #666;}
/* This styles a link within a selected menu item `<li>`. */
#menu .pure-menu-selected a {color: #ffcc33;}
/* This styles the menu heading. */
/*#menu div {border-bottom: 1px solid #999;}*/
#menu .pure-menu-heading {font-weight: bold; font-size: 90%; background: #e6e6e6; color: #000; margin: 0; padding:15px 0 15px 10px;border-bottom: 1px solid #999;}

/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
`.menu-link` represents the responsive menu toggle that shows/hides on small screens.
*/
.menu-link {
 position: fixed;
 display: block; /* show this only on small screens */
 top: 0;
 left: 0; /* "#menu width" */
 background: #000;
 background: rgba(0,0,0,0.7);
 font-size: 10px; /* change this value to increase/decrease button size */
 z-index: 100;
 width: 2em;
 height: auto;
 padding: 2.1em 1.6em;
}
.menu-link:hover, .menu-link:focus {background: #000;}
.menu-link span {position: relative; display: block;}
.menu-link span, .menu-link span:before, .menu-link span:after {background-color: #fff; width: 100%; height: 0.2em;}
.menu-link span:before, .menu-link span:after {position: absolute; margin-top: -0.6em; content: " ";}
.menu-link span:after {margin-top: 0.6em;}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
/* 20150412(変更：48em→64em) */
@media (min-width: 64em) {
 .header, .content {padding-left: 2em; padding-right: 2em;}
 #layout {
 padding-left: 230px; /* left col width "#menu" */
 left: 0;}

 /* 20150125(追加) */
 .header {margin: 0; color: #333; text-align: center; padding: 1em 1em 0;}
 .header h1 {margin: 0.2em 0; font-size: 2em; font-weight: 300;}
 .header p {font-size: 0.83em; font-weight: bold; color: #ff3300; padding: 0 0.67em 0;}
 .content {margin: 0 auto 0 0; padding: 0 0.5em; max-width: 800px; margin-bottom: 10px; line-height: 1.6em;}

 #menu {
 position: fixed;
 top: 70px;
 left: 230px;
 }
 .menu-link {position: fixed; left: 230px; display: none;}
 #layout.active .menu-link {left: 230px;}
}