﻿@font-face {
  font-family: Monotype_Corsiva;
  src: url(Font/MTCORSVA.woff);
}

body
{
  font-family: Monotype_Corsiva;
  font-size: 24px;
  margin: 0px;
  padding: 10px;
}
.BaseWidth
{
    max-width: 950px;
    width: 100%;
}
h1
{
  font-family: Monotype_Corsiva;
  font-size: 40px;
  font-weight: bold;
  text-align: center; 
  z-index: 10;
  padding: 0px;
  text-shadow: 0 2px 3px #FFFFFF, 0 -2px 3px #FFFFFF, 2px 0 3px #FFFFFF, -2px 0 3px #FFFFFF;
}
.SubTitle
{
  font-family: Monotype_Corsiva;
  font-size: 30px;
  font-weight: bold;
  text-align: left;
  padding: 0px;
}
.Menu
{
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  padding: 4px;
  color: White;
}
.MenuPopup
{
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  padding: 4px;
  color: White;
  border: solid 1px black;
}
.SmallMenu
{
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding-right: 4px;
  color: black;
}
.DescriptionBlock
{
  font-family: Monotype_Corsiva;
  font-size: 24px;
  font-weight: normal;
  text-align: justify;
  z-index: 10;
  color: black;
  text-indent: 30px;
  vertical-align: top;
  text-shadow: 0 2px 3px #FFFFFF, 0 -2px 3px #FFFFFF, 2px 0 3px #FFFFFF, -2px 0 3px #FFFFFF;
}
.Small
{
  font-family: Monotype_Corsiva;
  font-size: 18px;
  color: black;
}
a
{
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}
a:active
{
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}
a:hover
{
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}
a:link
{
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}
a:visited
{
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}
.email
{
  font-family: Monotype_Corsiva;
  font-size: 24px;
  font-weight: normal;
}
.email:active
{
  font-family: Monotype_Corsiva;
  font-size: 24px;
  font-weight: normal;
}
.email:hover
{
  font-family: Monotype_Corsiva;
  font-size: 24px;
  font-weight: normal;
  text-decoration: underline;
}
.email:link
{
  font-family: Monotype_Corsiva;
  font-size: 24px;
  font-weight: normal;
}
.email:visited
{
  font-family: Monotype_Corsiva;
  font-size: 24px;
  font-weight: normal;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .BannerLogo
    {
        width: 35%;
    }
    .Banner3StarLogo
    {
        right: 0px;
        width: 12%;
        min-width: 34px;
        max-width: 64px;
    }
    .FullMenu
    {
        display: none;
    }
    .HamburgerMenu
    {
        display: table;
    }
    .WelcomeTextBox
    {
        padding-left: 5%;
        padding-right: 5%;
        width: 90%;
    }
    .OurCottagesPicture
    {
        float: none; 
        margin-right: 0px;
        width: 100%;
    }
    .OurCottagesMap
    {
        float: left; 
        width: 100%;
    }
    .BinderHeader
    {
        width: 80%;
        max-width: 342px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .BannerLogo
    {
        width: 24%;
    }
    .Banner3StarLogo
    {
        left: 0px;
        width: 7.16%;
    }
    .FullMenu
    {
        display: none;
    }
    .HamburgerMenu
    {
        display: table;
    }
    .WelcomeTextBox
    {
        padding-left: 26.3%;
        padding-right: 26.3%;
        width: 47.4%;
    }
    .OurCottagesPicture
    {
        float: left; 
        margin-right: 10px;
        width: 313px;
    }
    .OurCottagesMap
    {
        float: left; 
        width: calc(100% - 325px);
    }
    .BinderHeader
    {
        width: 342px;
        max-width: 342px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .BannerLogo
    {
        width: 21%;
    }
    .Banner3StarLogo
    {
        left: 0px;
        width: 7.16%;
    }
    .FullMenu
    {
        display: table;
    }
    .HamburgerMenu
    {
        display: none;
    }
    .WelcomeTextBox
    {
        padding-left: 26.3%;
        padding-right: 26.3%;
        width: 47.4%;
    }
    .OurCottagesPicture
    {
        float: left; 
        margin-right: 10px;
        width: 313px;
    }
    .OurCottagesMap
    {
        float: left; 
        width: calc(100% - 325px);
    }
    .BinderHeader
    {
        width: 342px;
        max-width: 342px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 970px) {
    .BannerLogo
    {
        width: 200px;
    }
    .Banner3StarLogo
    {
        left: 0px;
        width: 68px;
    }
    .FullMenu
    {
        display: table;
    }
    .HamburgerMenu
    {
        display: none;
    }
    .WelcomeTextBox
    {
        padding-left: 26.3%;
        padding-right: 26.3%;
        width: 47.4%;
    }
    .OurCottagesPicture
    {
        float: left; 
        margin-right: 10px;
        width: 313px;
    }
    .OurCottagesMap
    {
        float: left; 
        width: calc(100% - 325px);
    }
    .BinderHeader
    {
        width: 342px;
        max-width: 342px;
    }
}



