/* Shared styling from mobile and small screens up */

header #top_box img {
    float: left;
	margin-left: 10px;
	margin-right: 20px;
	width: 80px;
}

header #site_links {
        display: none;
    }

 header #site_links a {
        color: #ffffff;
    }

header #site_links li {
    display: block;
    text-align: left;
    font-size: medium;
    margin-left: 3%;
}

#sitetitle
{
	font-size: 1.4em;
	display: block;
	margin-bottom: 12px;
}

#ContentHome {
        text-align: Center;
    }

    #Content {
        text-align: left;
        font-size: medium;
        font-family: Arial;
    }

.bio {
        padding: 20px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border-radius: 25px;
        margin: 20px;
        min-height: 210px;
    }

    .bio img {
        float: left;
        border: solid 3px rgba(0,0,0,0.2);
        margin-right: 12px;
        margin-bottom: 12px;
    }

    div.topic_card {
    border-radius: 25px;
    padding: 20px;
    height: 200px;
    width: 230px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 20px;
    display: inline-block;
    text-align: center;
}

    div.topic_card a {
    color: #000000;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    div.topic_card p, div {
    display: block;
}

    div.topic_card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

    div.topic_container {
    padding: 2px 8px;
    vertical-align: bottom;  
    height: 160px;  
    margin-bottom: 10px;
}

    #Welcome {
    background: url('../images/welcome.jpg') no-repeat center;
    background-size: Contain;
}

    #Ki {
    background: url('../images/ki.gif') no-repeat center;
    background-size: Contain;
}

    #ClassDetails {
    background: url('../images/details.jpg') no-repeat center;
    background-size: Contain;
}

    #Training {
    background: url('../images/class.jpg') no-repeat center;
    background-size: Contain;
}

     #Aikido {
    background: url('../images/DanThrows.jpg') no-repeat center;
    background-size: Contain;
}

    #Instructors {
    background: url('../images/instruction.jpg') no-repeat center;
    background-size: Contain;
}

    div.topic_card span {
    font-size: 1.6em;
}

    .accordion2 {
        margin-top: 12px;
    }

#trainingLocation #showLocation, 
    #trainingCosts #showCosts, 
    #trainingTimes #showTimes, 
    #aikido #aikidoDetails, 
    #aikidoHistory #showAikidoHistory,
    #aaks #showAaks,
    #training #showTraining,
    #techniques #showTechniques,
    #kiBox #showKi,
    #ukemi #showUkemi,
    #meditation #showMeditation {
        position: absolute;
        clip: rect(0,0,0,0);
    }

 #trainingCosts label[for="showCosts"], 
    #trainingLocation label[for="showLocation"], 
    #trainingTimes label[for="showTimes"], 
    #aikido label[for="aikidoDetails"],
    #aikidoHistory label[for="showAikidoHistory"],
    #aaks label[for = "showAaks"],
    #training label[for="showTraining"],
    #techniques label[for="showTechniques"],
    #kiBox label[for="showKi"],
    #ukemi label[for="showUkemi"],
    #meditation label[for="showMeditation"] {
        cursor: pointer;
        background-size: contain;
        color: #FFFFFF;        
    }

#trainingCosts label[for="showCosts"] span, 
    #trainingLocation label[for="showLocation"] span, 
    #trainingTimes label[for="showTimes"] span, 
    #aikido label[for="aikidoDetails"] span,
    #aikidoHistory label[for = "showAikidoHistory"] span,
    #aaks label[for = "showAaks"] span,
    #training label[for="showTraining"] span,
    #techniques label[for="showTechniques"] span,
    kiBox label[for="showKi"] span,
    #ukemi label[for="showUkemi"] span,
    #meditation label[for="showMeditation"] span {
        padding: 9px;
        background-color: #33446f;      
    }

#trainingCosts label[for="showCosts"] span:hover, 
    #trainingLocation label[for="showLocation"] span:hover, 
    #trainingTimes label[for="showTimes"] span:hover, 
    #aikido label[for="aikidoDetails"] span:hover,
    #aikidoHistory label[for = "showAikidoHistory"] span:hover,
    #aaks label[for="showAaks"] span:hover,
    #training label[for="showTraining"] span:hover,
    #techniques label[for="showTechniques"] span:hover,
    #kiBox label[for="showKi"] span:hover,
    #ukemi label[for="showUkemi"] span:hover,
    #meditation label[for="showMeditation"] span:hover {
        color: orange;
    }

.accordionHeading {
        display: block;
        font-size: x-large;
        padding: 9px;
        background-color: #33446f;
        /*Safari 5.1 to 6.0*/      
        background: -webkit-linear-gradient(#33446f, #5c5c79, #33446f);
        /*Opera 11.1 to 12.0*/      
        background: -o-linear-gradient(#33446f, #5c5c79, #33446f);
        /*FF 3.6 to 15*/      
        background: -moz-linear-gradient(#33446f, #5c5c79, #33446f);
        /*Standard Syntax*/      
        background: linear-gradient(#33446f, #5c5c79, #33446f);
    }

#trainingCosts #costContent, 
    #trainingLocation #locationContent, 
    #trainingTimes #timesContent, 
    #aikido #aikidoDetailsContent,
    #aikidoHistory #aikidoHistoryContent,
    #aaks #aaksContent,
    #training #trainingContent,
    #techniques #techniquesContent,
    #kiBox #kiContent,
    #ukemi #ukemiContent,
    #meditation #meditationContent {
        display: block;
        background-color: #ffffff;
        padding: 6px;
		/*display: none;
        border: solid 3px #33446f;*/
    }

#trainingCosts #showCosts:checked ~ div, 
    #trainingLocation #showLocation:checked ~ div, 
    #trainingTimes #showTimes:checked ~ div, 
    #aikido #aikidoDetails:checked ~ div,
    #aikidoHistory #showAikidoHistory:checked ~ div,
    #aaks #showAaks:checked ~ div,
    #training #showTraining:checked ~ div,
    #techniques #showTechniques:checked ~ div,
    #kiBox #showKi:checked ~ div,
    #ukemi #showUkemi:checked ~ div,
    #meditation #showMeditation:checked ~ div {
        /*display: block;
        background-color: #ffffff;
        padding: 6px;*/
		display: none;
        border: solid 3px #33446f;
    }

#map {
        margin: 0px 0px 20px 0px;
    }

    dt {
       font-weight: bold;
       Padding-top: 15px;
       Padding-bottom: 15px;
    }

    dd
    {
	    margin: -34px 0px 0px 200px;
    }

    .reverse {
        unicode-bidi: bidi-override;
        direction: rtl;
    }

footer {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    width: 99%;
    background-color: #33446f;
	padding: 5px;
	color: #ffffff;
    text-align: center;
    font-family: Arial;
    margin-top: 60px;
}

#footerDiv {
	width: 100%; 
}

#footerDiv img{
	/*max-width: 60px;*/
	width: 4em;
	padding: 0.5em;
}

/* footer div.footerDiv {
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    vertical-align: text-top;
    text-align: center;
} */

footer #facebookDiv {
        display: block;
    }


footer #facebookDiv a img {
        height:20px;
        padding:5px;
		/*width:110px;*/
    }
	
footer ul {
	margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

footer ul.footer_links {
    font-size: 1.2em;
    font-weight: bold;
    color: orange;
    text-align: left;
    list-style-type: none;
    width: 180px;
}

footer ul.footer_links li {
    font-size: medium;
    color: #FFFFFF;
    font-weight: normal;
}

    footer ul.footer_links_right {
    font-size: 1.2em;
    font-weight: bold;
    color: orange;
    text-align: left;
    list-style-type: none;
    width: 180px;
}

footer ul.footer_links_right li {
    font-size: medium;
    color: #FFFFFF;
    font-weight: normal;
}

footer ul.footer_links li img {
	height:50px;
    padding:5px;
}

footer ul a {
    color: #FFFFFF;
}

footer #site_links {
    list-style-type: none;
	margin-block-start: 0.25em;
    margin-block-end: 0.25em;
}

footer #site_links li {
    display: inline-block;
    //width: 150px;
    height: 20px;
    text-align: left;
    font-size: 1em;
	padding-left: 0.25em;
	padding-right: 0.25em;
}

footer span
{
    display: block;
    margin-top: 10px;
}

footer #copyRightDiv {
	display: block;
	vertical-align: text-top;
    text-align: center;
}

footer #copyright {
    font-size: x-small;
}


@media only screen and (max-device-width: 480px) {
    /*Small mobile browsers*/

     body {
        margin-left: 3%;
        margin-right: 3%;
        width: 94%;
        min-width: 380px;
    }

    header #top_box{
    width: 99%;
    height: 87px;
	background-color: #33446f;
	padding: 5px;
	color: #ffffff;
	border-top: solid 1px #000074;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	background-image: url('../images/BannerImage1a.png');
	background-repeat: no-repeat;
	background-position: right;
    /*border-top-left-radius: 10px;
    border-top-right-radius: 10px;*/
}

    header #bottom_box {
    width: 99%;
	/*height: 20px;*/
	background-color: #88aabf;
    color: #FFFFFF;
	padding: 3px;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	border-bottom: solid 1px #000074;
	background-image: url('../images/BannerImage1b.png');
	background-repeat: no-repeat;
	background-position: top right;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
    
    header #navTrigger {
        position: absolute;
        clip: rect(0,0,0,0);
    }

    header label[for="navTrigger"] {
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-size: contain;
    }

    header #navTrigger:checked ~ ul {
        display: block;
        font-family: Arial;
        color: #ffffff;
    }

header #details {
	width: 100%;
	color: #000000;
	display: inline-block;
	font-size: medium;
	font-weight: bold;
	//text-align: center;
}

header #phone, #email, #location {
	padding-top: 10px;
	padding-right: 18px;
	display: block;
}

#location span {
	display: inline-block;
}

header #phone img, #email img {
	margin-top: -8px;
	float: left;
}

header #location img {
	float: left;
}

    #saying {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    /*Small sized desktop browsers*/

    body {
        margin-left: 3%;
        margin-right: 3%;
        width: 94%;
        min-width: 380px;
    }

    header #top_box{
    width: 99%;
    height: 87px;
	background-color: #33446f;
	padding: 5px;
	color: #ffffff;
	border-top: solid 1px #000074;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	background-image: url('../images/BannerImage1a.png');
	background-repeat: no-repeat;
	background-position: right;
    /*border-top-left-radius: 10px;
    border-top-right-radius: 10px;*/
}

    header #bottom_box {
    width: 99%;
	/*height: 20px;*/
	background-color: #88aabf;
    color: #FFFFFF;
	padding: 5px;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	border-bottom: solid 1px #000074;
	background-image: url('../images/BannerImage1b.png');
	background-repeat: no-repeat;
	background-position: top right;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
    
    header #navTrigger {
        position: absolute;
        clip: rect(0,0,0,0);
    }

    header label[for="navTrigger"] {
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-size: contain;
    }

    header #navTrigger:checked ~ ul {
        display: block;
        font-family: Arial;
        color: #ffffff;
    }

header #details {
	width: 100%;
	color: #000000;
	display: inline-block;
	font-size: medium;
	font-weight: bold;
	//text-align: center;
}

header #phone, #email, #location {
	padding-top: 10px;
	padding-right: 18px;
	display: block;
}

#location span {
	display: inline-block;
}

header #phone img, #email img {
	margin-top: -8px;
	float: left;
}

header #location img {
	float: left;
}

    #saying {
        display: none;
    }
    
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
    /*Tablets - portrait layout*/

    body {
        margin-left: 3%;
        margin-right: 3%;
        width: 94%;
    }

    header #top_box{
    /*width: 99%;*/
    height: 87px;
	background-color: #33446f;
	padding: 5px;
	color: #ffffff;
	border-top: solid 1px #000074;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	background-image: url('../images/BannerImage1a.png');
	background-repeat: no-repeat;
	background-position: right;
}

    header #bottom_box {
    background-color: #88aabf;
    color: #FFFFFF;
	padding: 5px;
    border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	border-bottom: solid 1px #000074;
	background-image: url('../images/BannerImage1b.png');
	background-repeat: no-repeat;
	background-position: top right;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

    header #site_links li {
    text-align: left;
    font-size: medium;
    margin-left: 16px;
}

    header #navTrigger {
        position: absolute;
        clip: rect(0,0,0,0);
    }

    header label[for="navTrigger"] {
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-size: contain;
   }

    header #navTrigger:checked ~ ul {
        display: block;
        font-family: Arial;
        color: #ffffff;
    }

header #details {
	width: 100%;
	color: #000000;
	display: inline-block;
	font-size: medium;
	font-weight: bold;
	//text-align: center;
}

header #phone, #email, #location {
	padding-top: 10px;
	padding-right: 18px;
	display: block;
}

#location span {
	display: inline-block;
}

header #phone img, #email img {
	margin-top: -8px;
	float: left;
}

header #location img {
	float: left;
}

    #saying {
    vertical-align: text-top;   
    min-height: 100px;
    margin-top: 12px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    border-top: 3px solid #33446f;
    border-bottom: 3px solid #33446f;
    font-style: italic;    
}

    #saying img {
    height: 100px;
    float: left;
    margin-right: 6px;     
    }

    #saying div{
        margin-left: 100px;
    }

    #saying p, #saying span {
        color: #33446f;
    }

    .sayingText {
        display: block;
        margin-bottom: 10px;        
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    /*Tablets - landscape layout*/

    body {
        margin-left: 3%;
        margin-right: 3%;
        width: 94%;
    }

    header #top_box{
    /*width: 99%;*/
    height: 87px;
	background-color: #33446f;
	padding: 5px;
	color: #ffffff;
	border-top: solid 1px #000074;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	background-image: url('../images/BannerImage1a.png');
	background-repeat: no-repeat;
	background-position: right;
}

    header #bottom_box {
    background-color: #88aabf;
    color: #FFFFFF;
	padding: 5px;
    border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	border-bottom: solid 1px #000074;
	background-image: url('../images/BannerImage1b.png');
	background-repeat: no-repeat;
	background-position: top right;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

    header #site_links li {
    text-align: left;
    font-size: medium;
    margin-left: 16px;
}

    header #navTrigger {
        position: absolute;
        clip: rect(0,0,0,0);
    }

    header label[for="navTrigger"] {
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-size: contain;
   }

    header #navTrigger:checked ~ ul {
        display: block;
        font-family: Arial;
        color: #ffffff;
    }

header #details {
	width: 100%;
	color: #000000;
	display: inline-block;
	font-size: medium;
	font-weight: bold;
	text-align: center;
}

header #phone, #email, #location {
	padding-top: 10px;
	padding-right: 18px;
	display: inline-block;
}

#location span {
	display: inline-block;
}

header #phone img, #email img, #location img {
	margin-top: -8px;
	float: left;
}

    #saying {
    vertical-align: text-top;   
    min-height: 100px;
    margin-top: 12px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    border-top: 3px solid #33446f;
    border-bottom: 3px solid #33446f;
    font-style: italic;    
}

    #saying img {
    height: 100px;
    float: left;
    margin-right: 6px;     
    }

    #saying div{
        margin-left: 100px;
    }

    #saying p, #saying span {
        color: #33446f;
    }

    .sayingText {
        display: block;
        margin-bottom: 10px;        
    }
}

@media only screen and (min-width: 481px)  and (max-width: 1024px) {
    /*Medium size desktop browsers*/

    body {
        margin-left: 3%;
        margin-right: 3%;
        width: 94%;
    }

    header #top_box{
    /*width: 99%;*/
    height: 87px;
	background-color: #33446f;
	padding: 5px;
	color: #ffffff;
	border-top: solid 1px #000074;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	background-image: url('../images/BannerImage1a.png');
	background-repeat: no-repeat;
	background-position: right;
}

    #sitetitle
{
	font-size: 2em;
	display: block;
	margin-bottom: 18px;
}

    header #bottom_box {
    background-color: #88aabf;
    color: #FFFFFF;
	padding: 5px;
    border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	border-bottom: solid 1px #000074;
	background-image: url('../images/BannerImage1b.png');
	background-repeat: no-repeat;
	background-position: top right;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

    header #site_links li {
    text-align: left;
    font-size: medium;
    margin-left: 16px;
}

    header #navTrigger {
        position: absolute;
        clip: rect(0,0,0,0);
    }

    header label[for="navTrigger"] {
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-size: contain;
   }

    header #navTrigger:checked ~ ul {
        display: block;
        font-family: Arial;
        color: #ffffff;
    }
	
	header #details {
	width: 100%;
	color: #000000;
	display: inline-block;
	font-size: medium;
	font-weight: bold;
	text-align: center;
}

header #phone, #email, #location {
	padding-top: 10px;
	padding-right: 18px;
	display: inline-block;
}

#location span {
	display: inline-block;
}

header #phone img, #email img, #location img {
	margin-top: -8px;
	float: left;
}

    #saying {
    vertical-align: text-top;   
    min-height: 100px;
    margin-top: 12px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    border-top: 3px solid #33446f;
    border-bottom: 3px solid #33446f;
    font-style: italic;    
}

    #saying img {
    height: 100px;
    float: left;
    margin-right: 6px;     
    }

    #saying div{
        margin-left: 100px;
    }

    #saying p, #saying span {
        color: #33446f;
    }

    .sayingText {
        display: block;
        margin-bottom: 10px;        
    }
    
}

@media only screen and (min-width: 1025px) {
    /*all other desktop browsers*/

    header #top_box{
    width: 99%;
    height: 87px;
	background-color: #33446f;
	padding: 5px;
	color: #ffffff;
	border-top: solid 1px #000074;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	background-image: url('../images/BannerImage1a.png');
	background-repeat: no-repeat;
	background-position: right;
}

    #sitetitle
{
	font-size: 2em;
	display: block;
	margin-bottom: 18px;
}

    header #bottom_box {
    width: 99%;
	//height: 20px;
	background-color: #88aabf;
	padding: 5px;
	border-left: solid 1px #000074;
	border-right: solid 1px #000074;
	border-bottom: solid 1px #000074;
	background-image: url('../images/BannerImage1b.png');
	background-repeat: no-repeat;
	background-position: right;
}

    header #navTrigger, header label[for="navTrigger"] {
        display: none;
    }

    header #site_links {
    list-style-type: none;
    display: inline;
    font-family: Arial;
    color: #ffffff;
    margin-left: -54px;
}

    header #site_links li {
    display: inline-block;
    text-align: left;
    font-size: medium;
    margin-left: 16px;
}

header #details {
	width: 100%;
	color: #000000;
	display: inline-block;
	font-size: medium;
	font-weight: bold;
	text-align: center;
}

header #phone, #email, #location {
	padding-top: 10px;
	padding-right: 18px;
	display: inline-block;
}

#location span {
	display: inline-block;
}

header #phone img, #email img, #location img {
	margin-top: -8px;
	float: left;
}

    #saying {
    vertical-align: text-top;   
    min-height: 100px;
    margin-top: 12px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    border-top: 3px solid #33446f;
    border-bottom: 3px solid #33446f;
    font-style: italic;    
}

    #saying img {
    height: 100px;
    float: left;
    margin-right: 6px;     
    }

    #saying div{
        margin-left: 100px;
    }

    #saying p, #saying span {
        color: #33446f;
    }

    .sayingText {
        display: block;
        margin-bottom: 10px;        
    }

    #Content {
        text-align: left;
        margin-left: 20%;
        margin-right: 20%;
        font-size: medium;
        font-family: Arial;
    }

}