/* ======================
/* stylemob.css
/* Standard general styles for use throughout site
/* === modification history ==
/* 2018-10-04 - change to overall green style #69c>#360, #e8f4f8>#dbfbda
/* 2018-08-13 - Creation
/* ====================== */
/* =========================
/* standard definitions
/* ========================= */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: tahoma, arial, sans-serif;
font-size: 100%;
}
body{
background-color: #fff;
}
h1, h2, h3, h4, h5, h6{
font-weight: bold;
color: #666;
}
h1{ font-size: 2em; }
h2{ font-size: 1.8em; }
h3{ font-size: 1.6em; }
h4{ font-size: 1.4em; }
h5{ font-size: 1.2em; }
h6{ font-size: 1em; }
h4, h5, h6{
margin: 0;
padding: 10px;
}
p, li{
font-size: 1em;
color: #333;
}
p{
padding: 0.5em 0;
}
ul{
list-style-type: none;
}
a,
a:visited{
color: #360;
text-decoration: underline;
}
a:hover,
a:active{
background-color: #dbfbda;
text-decoration: none;
}
/* =========================
/* main layout
/* ========================= */
#header{
background-color: #360;
color: #fff;
border-radius: 4px 4px 0 0;
}
#contentwrapper{
}
#nav{
background-color: #360;
width: 100%;
}
#contentmain{
background-color: #fff;
}
#footer{
clear: both;
background-color: #360;
text-align: center;
margin-top: 10px;
border-radius: 0 0 4px 4px;
}
.innertube{ margin: 0 10px; }
.sitehead{ padding: 10px; color: #fff; }
.breadcrumb{ font-size: 1.4em; }
/* =========================
/* burger menu
/* ========================= */
#nav input{ display: none; }
#nav .innabun{
padding: 3px 0 3px 0;
}
#nav .innabun label{
cursor: pointer;
float: left;
padding: 0 0 0 40px;
color: #fff;
}
#nav .innabun span{
display: block;
width: 22px;
height: 4px;
margin: 0 0 5px 10px;
background-color: #fff;
border-radius: 3px;
transition: transform 0.5s linear;
transform-origin: 2px 2px;
}
#nav input:checked ~ .innabun span{
transform: rotate(45deg);
width: 29px;
}
#nav input:checked ~ .innabun span.slice2{
transform: scalex(0);
transform-origin: 50% 0;
}
#nav input:checked ~ .innabun span.slice3{
transform: rotate(-45deg);
}
/* =========================
/* themenu
/* ========================= */
#nav input:checked ~ #themenu{
transform: translate(500px, 0);
}
#themenu{
position: absolute;
background-color: #dbfbda;
left: -500px;
float: left;
width: 200px;
transition: transform 0.5s ease;
}
#themenu ul li{ border-top: 1px solid #fff; }
#themenu ul li a{
display: inline-block;
width: 100%;
background-color: #360;
color: #fff;
text-decoration: none;
padding: 5px 10px;
}
#themenu ul li:last-child a{ border-radius: 0 0 4px 4px; }
#themenu ul li:first-child a{ border-radius: 4px 4px 0 0; }
#themenu ul li a:hover,
#themenu ul li a:active,
#themenu ul li a.selected{ 
background-color: #dbfbda; 
color: #360;
}
/* ======================
/* footer
/* ====================== */
.footertext{ padding: 5px; }
.footertext ul li a{
display: inline-block;
padding: 5px;
color: #fff;
background-color: #360;
text-decoration: none;
}
.footertext ul li a:hover,
.footertext ul li a:active{
text-decoration: underline;
}
.footertext ul li a.copyrt{ text-decoration: none; }
/* ======================
/* bits'n'pieces
/* ====================== */
.center{ text-align: center; }
.fright{ float: right; padding-left: 10px;}
/* ======================
/* end of styleheet
/* ====================== */