/* LAYOUT FORMATTING STARTS */
@viewport {zoom:1.0; width: extend-to-zoom; }   
body {background-color:white; width:100%; height:auto; margin:auto; z-index:0; }
.header {position:relative;display:flex; width:100%; height:120px; margin:auto; padding-top:1%; padding-bottom:10px; z-index:1; background:white; -moz-box-shadow: 5px 5px 5px 2px #eaeaea; -webkit-box-shadow: 5px 5px 5px 2px #eaeaea; box-shadow:5px 5px 5px 2px #eaeaea;   }	
.central {display:block; width:70%; margin:auto; }    
.maincentral {position:relative; display:block; width:100%; margin:auto;  min-height:300px; padding-top:40px; padding-bottom:10px; -moz-box-shadow: inset 0 0 5px #736F6E; - webkit-box-shadow: inset 0 0 5px #736F6E; box-shadow: inset 0 0 5px #eaeaea; }    

.text-background { width:55%; padding-bottom:60px; padding-left:20px; padding-right:20px; padding-top:30px; margin:auto; 
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(253,253,253,0.5) 4%, rgba(253,253,253,0.7) 10%, rgba(251,251,251,0.7) 20%, rgba(246,246,246,0.7) 50%, rgba(243,243,243,0.8) 67%,  rgba(243,243,243,0.6) 95%, rgba(237,237,237,0) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(4%,rgba(253,253,253,0.5)), color-stop(10%,rgba(253,253,253,0.6)), color-stop(20%,rgba(251,251,251,0.7)), color-stop(50%,rgba(246,246,246,0.7)), color-stop(67%,rgba(243,243,243,0.8)), color-stop(95%,rgba(243,243,243,0.6))  color-stop(100%,rgba(237,237,237,0))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(253,253,253,0.5) 4%, rgba(253,253,253,0.6) 10%,rgba(251,251,251,0.7) 20%,rgba(246,246,246,0.7) 50%,rgba(243,243,243,0.8) 67%, rgba(243,243,243,0.6) 95%, rgba(237,237,237,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(253,253,253,0.5) 4%, rgba(253,253,253,0.6) 10%,rgba(251,251,251,0.7) 20%,rgba(246,246,246,0.7) 50%,rgba(243,243,243,0.8) 67%,  rgba(243,243,243,0.6) 95%, rgba(237,237,237,0) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(253,253,253,0.5) 4%, rgba(253,253,253,0.6) 10%,rgba(251,251,251,0.7) 20%,rgba(246,246,246,0.7) 50%,rgba(243,243,243,0.8) 67%,  rgba(243,243,243,0.6) 95%, rgba(237,237,237,0) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(253,253,253,0.5) 4%, rgba(253,253,253,0.6) 10%, rgba(251,251,251,0.7) 20%,rgba(246,246,246,0.7) 50%,rgba(243,243,243,0.8) 67%, rgba(243,243,243,0.6) 95%, rgba(237,237,237,0) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ededed',GradientType=0 ); /* IE6-8 */ 
}
.update {display:block; font-size:10pt; text-align:right; margin-top:20px; padding-bottom:40px; width:80%; }
.update > span {color:#736F6E; }
.maincentral.home, .maincentral.history, .maincentral.philosophy, .maincentral.discipline, .maincentral.characteristics, .maincentral.omc, .maincentral.culture, .maincentral.more {background-image:url("http://www.shorinjikempokl.com/images/hombu_1280.png");background-size:cover;background-position: center;}
.maincentral.location, .maincentral.schedule, .maincentral.branchmaster, .maincentral.branchhistory, .maincentral.join, .maincentral.faq  {background-image:url("http://www.shorinjikempokl.com/images/practice_1280.png");background-size:cover;background-position: center;}
.maincentral.techniques, .maincentral.stages, .maincentral.session, .maincentral.grading  {background-image:url("http://www.shorinjikempokl.com/images/talking_1280.png");background-size:cover;background-position: center;}
/* LAYOUT FORMATTING ENDS */

/* GENERAL CONTENT FORMATTING STARTS */
p, h2, h1, h4, span {color:white; font-family:Calibri, sans-serif; }
h1 {font-size:24px; padding-bottom:20px; font-weight:bold; }
a  {color:#736F6E; text-decoration:none; } 
a:hover { color:#FDD017; cursor:pointer; } 
.imagebox {float:left; width:15%; padding:5px; height:110px; margin:0 10px 0 20px} 
.imagebox p {display:block; width:300px;text-transform:uppercase;font-size:30px;font-weight:bold; margin-left:120px; margin-top: -95px; line-height: .8em;} 
.image-box {border-radius:5px; border:1px solid white; float:left; margin-right:10px; }
.history .image-box:nth-of-type(2) {width:100px;margin:10px 20px 40px 10px}
.notice-box {text-align:center;border:1px solid #736F6E; margin:20px; padding:20px}
.notice-box h4 {margin-bottom:10px;}
/* GENERAL CONTENT FORMATTING ENDS */

/* NAVIGATION FORMATTING STARTS */
.menus {display:block;width: 90%;margin-top: 70px;} 
.menu {display:block; float:left; min-width:20%; margin-left:50px; color:#736F6E; font-family:Calibri, sans-serif; font-weight:bold; text-transform:uppercase; padding:10px; z-index:200; }
.menu .sub {display:none;padding:10px;text-transform:capitalize;list-style:none}
.menu:hover {cursor:pointer; background:white; color:#736F6E; box-shadow: 5px 5px 5px 2px #eaeaea; border-radius:3px; }
.menu:hover .sub {display:block;}
.menu li {font-weight:normal;}
.menu .sub li a {color:#736F6E}
.menu .sub li a:hover {color:orange}
.menu-list {display:none; list-style:none; text-decoration:none; text-transform:none; margin-left:-40px; z-index:200; } 
.menu-list li:hover {background:#848482; }
.menu:hover ul {display:block; }
/* NAVIGATION FORMATTING ENDS */

/* MAIN CONTENT FORMATTING STARTS */
.maincentral p, h1, h4, td {margin:auto; color:rgb(70,70,70); font-family:Calibri, sans-serif; } 
.maincentral ul {margin:auto; padding-bottom:5px; }
.maincentral li {line-height:1em; margin:auto; color:rgb(70,70,70); font-family:Calibri, sans-serif; padding-bottom:3px; margin-right:15%; }
.maincentral p {line-height:1em; padding-bottom:15px; }
.maincentral a {color:#4863A0}
.maincentral a:hover {color:#6495ED; text-decoration:underline; }
.centered-text {text-align:center; }
.box {width:90%; margin:auto; border:1px solid #464646; }
.box p, table {width:90%}
.box h4 {width:80%; margin:auto; padding:8px; }
.home h1 {margin-bottom:0px; padding-bottom:4px; padding-top:20px; }
/* MAIN CONTENT FORMATTING ENDS */


/* RESPONSIVE FORMATTING STARTS */
@media all and (min-width:881px) and (max-width:1279px) {
.menus {margin-left:-100px}
.menu {width:200px}
.sub{display:none;width:230px;margin-left:-10px}
.sub li {margin-left:10px;padding:5px 0 5px 0}
.sub.open {display:block;background:white;-moz-box-shadow: 5px 5px 5px 0 #eaeaea; -webkit-box-shadow: 5px 5px 5px 0 #eaeaea; box-shadow:5px 5px 5px 0 #eaeaea;}
}

@media all and (max-width:880px) {
.header {height:40px; }
.menus {float:right; clear:right; }
.imagebox {float:left; background:none;width: 95%; margin-top:0px; }
.imagebox img {display:block; float:left; width:40px; height:40px;border-radius:3px; margin-right:10px} 
.imagebox p {float:left;font-size:20px;font-weight:bold; margin-top:8px;width:200px} 
.header .central {width:99%; }
.menus {position: relative;margin-top: 10px;min-width:40px;max-width:40px;margin-right: 20px;border-radius:3px;border: 1px solid #cccccc;
padding-left: 4px;padding-top: 3px;} 
.menus:before {content:url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 80' width='40' height='40' xmlns='http://www.w3.org/2000/svg' fill='e6e6e6'><rect width='90' height='3'></rect><rect y='15' width='90' height='3'></rect><rect y='30' width='90' height='3'></rect></svg>");display: block;)}
.menus.open:before {content:url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 80' width='40' height='40' xmlns='http://www.w3.org/2000/svg' fill='white'><rect width='90' height='5'></rect><rect y='15' width='90' height='5'></rect><rect y='30' width='90' height='5'></rect></svg>");display: block;)}
.menus.open, .menus:hover {background:#736F6E;cursor:pointer;} 
.menu {display:none;width: 300px;margin-left: 0;float: right;background: white;-moz-box-shadow: 5px 5px 5px 0 #eaeaea; -webkit-box-shadow: 5px 5px 5px 0 #eaeaea; box-shadow:5px 5px 5px 0 #eaeaea; }
.menu.open {display:block}
.menus .allmenus {margin-top:-10px; margin-right:0}
.menus .sub {display: block;}
.header {top:0; height:40px; }
.header > .central {width:99%; }
.imagebox p {display:block; width:130px; text-transform:uppercase;font-size:16px;font-weight:bold; margin-left:10px; margin-top:8px; margin-right:12px; line-height:.8em} 
.update {margin-top:10px; padding-top:20px; padding-bottom:20px;width:95%} 
.maincentral {float:left;margin:auto; height:auto; padding-bottom:30px; margin-bottom:20px; }
.text-background {width:90%;height:auto; margin:auto;padding-left:5%;padding-right:5%;}  
.text-background h1 {line-height:.9em }
.text-background ul {width:98%;margin-right:0;padding:10px;}
.maincentral li {margin-right:5% }

}
/* RESPONSIVE FORMATTING ENDS */