/* Simple one-column layout and styles optimised for smaller screens */

body {
  margin:0px; padding:0;
  background-color:#929292;
}

#fixed_background {
   background-image:url('../images/grey.jpg');
   width:500px;
}
#scrolling_page {
   width:500px;
}
#black_banner  { width:500px; height:270px; }
#banner_title  { left:10px;  top:5px;  }
#aikido_left   { left:15px;  top:55px;  }
#aikido_right  { left:430px; top:55px;  }
#rose_sword    { left:100px; top:105px; }

#buttons_set1  { position:absolute; left:48px; top:187px; }
#buttons_set2  { position:absolute; left:48px; top:227px; }

/* lots of elements have single, centred column */
#intro_part1, #intro_part2,
#intro_graphic1, #intro_graphic2,
#welcome_part1, #welcome_part2 {
  position:relative; float:none; visibility:visible;
  left:auto; top:auto; width:100%;
  margin-left:auto; margin-right:auto
}
#intro_graphic1, #intro_graphic2 {
  margin-top:10px; margin-bottom:20px;
}

#intro_imagebar { width:401px; overflow:auto; }

#mapbox { width:100%;height:500px; }
#map { width:400px;height:400px; }
#contacts { height:auto; }

/* Turn off submenus completely for mobiles */
.SubMenu { display:none; }

.PageBox { width:498px; }
.FallbackBox { width:100%; }

.ItemBox, .ItemBoxSmall, .ItemBoxLeft, .ItemBoxRight  {
   float:none; width:435px; height:auto;
   margin-left:auto; margin-right:auto;
}

.FloatBoxLeft, .FloatBoxRight, .FloatBoxInner {
  float:none; clear:both; max-width:100%; overflow:hidden;
  margin-left:auto; margin-right:auto;
}

.NewsBar { white-space:pre-line; }

.PageTitleBox {
   margin-left:0px; margin-right:0px; margin-top:5px; margin-bottom:15px;
}

/* We DON'T mess with the size of .GalleryImage classes    *
 * because the Jssor ScaleSlider function does it for us */

.VideoBox    { width:400px; height:300px; }
.VideoNote   { width:400px; }

.StackFrame  { width:360px; float:none; }

.GridFrame   { width:336px; }

.SenseiSection {
   float:none; clear:both; margin-left:10px; margin-right:10px;
}
.SenseiImageSection { 
   float:none; clear:both; width:250px; margin-left:auto; margin-right:auto;
}
.SenseiImageBox0, .SenseiImageBox1 {
   float:none; clear:both;
   margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px;
}
.SenseiImageBox0 { width:256px; }
.SenseiImageBox1 { width:300px; }

.SenseiImage0 { width:256px; }
.SenseiImage1 { width:300px; }

.SenseiImage2 {
   float:none; clear:both;
   width:210px;
   margin-left:auto; margin-right:auto;
}
.SenseiText, .SenseiText1, .SenseiText2, .SenseiText3, .SenseiText4 { 
   float:none; clear:both; width:400px; margin-left:auto; margin-right:auto;
}

.VariableImage256  { width:256px; }
.VariableImage300  { width:300px; }
.VariableImage400  { width:400px; }
.GalleryIndexImage { width:300px; }


.Certificate { margin-left:5px; margin-right:5px; max-width:460px; width:460px; }
.CertificateImageBox { float:left; width:222px; margin-right:15px; }
.CertificateImage { float:none; margin-left:auto; margin-right:auto; }
.CertificateCaption { float:left; }

.ClassTitle  { width:94%; }
.ClassText, .ClassImage, .ClassVideo, .ClassPhotosBox  {
   float:none;
   margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:20px;
}
.ClassPhotosBox { width:430px; }

.Address     { width:94%; margin-left:auto; margin-right:auto }

.GalleryTitle, .GalleryText { max-width:94%; }
.GalleryThumbBox {
  float:none; clear:both; width:300px;
  margin-left:auto; margin-right:auto;
}

.GalleryCaption, .GalleryShortCaption { top:400px; line-height:40px; }

.IfMobile { display:inline; }
.IfNotMobile { display:none; }

/* Larger fonts for small screens */

.MenuButton span, .MenuButton:link span, .MenuButton:visited span { font-size:18px; }
.BannerText { font-size:38px;}
.SmallBannerText { font-size:24px; }
.PageTitleText, .PageTitle { font-size:22px; }
.TitleText { font-size:24px; }
.SubTitleText, .SubTitle, .SubHeading,
.NormalText, .NormalPara, .CentredPara,
.YearText, .QuoteText { font-size:22px; }
.EmailText { font-size:21px; }
.CaptionText, .GalleryCaption, .GalleryShortCaption { font-size:22px; }  
.SmallCaptionText, .SmallCaption { font-size:16px; }
.CreditText, .GalleryCredit, .GalleryCredit1, .GalleryCredit2, .GalleryCredit3 { font-size:15px; }
.PhotoCreditInSlide, .PhotoCreditInSlideDark, .PhotoCreditInSlideLight { font-size:15px; }
.PhotoCredit, .PhotoCreditThumb { font-size:15px; }
.FootNoteText { font-size:18px; }
.NewsBarText, .NewsBar { font-size:22px; font-weight:700; }