@import url(http://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300);
body, html          {margin: 0; padding: 0;}

html                {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

body                {background: #444; font-family: Arial, Helvetica, sans-serif;}

@-ms-viewport       {width: device-width;}

p                   {margin-top: 0px;}

h1, h2, h3, h4, h5, h6 {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: normal; margin-top: 0px;}

.link               {text-align: center; margin: 20px;}
.link a             {color: #800; text-decoration: none; font-weight: bold;}

/*----------------------------------------------------------------------------------------------------------------------------*/

#container          {min-width: 320px; margin: auto;}

@media screen and (min-width: 512px) {
  #container        {max-width: 1024px; margin: auto;}
}

/*----------------------------------------------------------------------------------------------------------------------------*/

#headerouter        {position: relative;}
#header             {width: 100%; height: 190px; margin: 0;
                     background: #578115; /* For browsers that do not support gradients */
                     background: -webkit-linear-gradient(bottom, #578115, #c7dd3c);
                     background:      -o-linear-gradient(   top, #578115, #c7dd3c);
                     background:    -moz-linear-gradient(   top, #578115, #c7dd3c);
                     background:         linear-gradient(to top, #578115, #c7dd3c);}

#logo               {width: 192px; height: 190px; text-align: center; position: absolute; top: 0; left: 0;}
#logo .iconout      {width: 63px; height: 45%; margin: auto; position: relative;}
#logo .iconinn      {width: 63px; height: 63px; margin: 0 0 10% 0; position: absolute; bottom: 0;
                     background: url('images/leaf.jpg') no-repeat center; background-size: cover;
                     border: 1px solid white; border-radius: 5px;}
#logo h1            {font-size: 32px; line-height: 120%; color: #fff; margin: 0;
                     text-shadow: 1px 0 1px #360, 0 1px 1px #360, -1px 0 1px #360, 0 -1px 1px #360;}


#banner             {width: 100%; height: 100%; font-size: 0;
                     background: url('images/bannernew.jpg') no-repeat center; background-size: cover;}

#banner .fourstar, #banner .goldawrd, #banner .wifi
                    {position: absolute; border: 1px solid #000; border-radius: 7px;}
#banner .fourstar   {bottom:   5px; right: 10px; background: #fff; padding: 3px;}
#banner .goldawrd   {bottom:   5px; right: 77px; background: #fff; padding: 3px;}
#banner .wifi       {bottom: 100px; right: 10px; background: #fff; padding: 2px;}

#banner .fourstar img, #banner .goldawrd img
                    {height: 85px}
#banner .wifi img   {width: 59px;}

@media screen and (min-width: 512px) {
  #header             {margin: 4px 0; border: 2px solid white; border-radius: 10px;}
  #banner             {border-radius: 10px;}

  #banner .fourstar   {bottom: 5px; right:   5px;}
  #banner .goldawrd   {bottom: 5px; right:  86px;}
  #banner .wifi       {bottom: 5px; right: 167px;}

  #banner .fourstar img, #banner .goldawrd img
                      {height: 104px}
  #banner .wifi img   {width: 56px;}
}

@media screen and (min-width: 800px) {
  #logo             {width: 20%; height: 190px; text-align: center; position: static;}
  #banner           {float: right; width: 80%; height: 100%; border-radius: 0 10px 10px 0;}
}

/*----------------------------------------------------------------------------------------------------------------------------*/

#headerouter .show-menu  {
                     color: #fff; text-transform: uppercase; font: bold 15px/100% 'Open Sans', Arial, Helvetica, sans-serif;
                     padding: 8px; display: inline-block; position: absolute; top: 10px; right: 10px; z-index: 100;
                     border-radius: 15px; box-shadow: 0 0 15px #248;
                     background: #578115; /* For browsers that do not support gradients */
                     background: -webkit-linear-gradient(bottom, #578115, #c7dd3c);
                     background:      -o-linear-gradient(   top, #578115, #c7dd3c);
                     background:    -moz-linear-gradient(   top, #578115, #c7dd3c);
                     background:         linear-gradient(to top, #578115, #c7dd3c);}
#headerouter input[type=checkbox]{display: none;}
#headerouter input[type=checkbox]:checked ~ #navbar {display: block;}


#navbar             {display: none; width: 90%; position: absolute; top: 10px; right: 5%;}
#navbar ul          {list-style: none; padding: 0; font-size: 0; border-bottom: 1px solid #eeffbb;
                     background: #578115; /* For browsers that do not support gradients */
                     background: -webkit-linear-gradient(bottom, #578115, #a5bb1a);
                     background:      -o-linear-gradient(   top, #578115, #a5bb1a);
                     background:    -moz-linear-gradient(   top, #578115, #a5bb1a);
                     background:         linear-gradient(to top, #578115, #a5bb1a);}




#navbar li          {width: 100%; height: 32px; display: block; text-align: center; padding: 0 4px; border: 1px solid #eeffbb; border-bottom: none;}
#navbar a           {width: 100%; height: 32px; font-size: 16px; line-height: 32px; text-decoration: none; color: #fff; display: block;
                     text-shadow: 1px 0 1px #360, 0 1px 1px #360, -1px 0 1px #360, 0 -1px 1px #360;}

@media screen and (min-width: 512px) {
  #headerouter .show-menu  {display: none;}

  #navbar             {display: block; width: 100%; position: static;}
  #navbar ul          {border: 1px solid #eeffbb; border-radius: 10px;}

  #navbar li          {width:  20%; display: inline-block; vertical-align: top; border: none; border-right: 1px solid #578115;}
  #navbar li:last-child {border-right: none;}
}

/*----------------------------------------------------------------------------------------------------------------------------*/

#mainbody           {background: #fff; padding: 20px;}
#mainbody .title    {margin-bottom: 20px;}
#mainbody .title h1 {color: #cc0000; display: inline; line-height: 100%; margin: 0;}
#mainbody .title h2 {color: #444444; display: inline;}

@media screen and (min-width: 512px) {
  #mainbody         {border-radius: 10px; margin: 4px 0;}
}

/*----------------------------------------------------------------------------------------------------------------------------*/

#footer             {}

#captions           {display: block; font-size: 0;}
#captions h1        {font-size: 32px; margin: 0; font-weight: 300; line-height: 100%; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;}
#captions p         {font-size: 16px; font-weight: 300; margin: 20px 0 0 0;}
#captions q         {font-size: 16px; font-weight: 300; margin: 20px 0 0 0; font-style: italic; display: block;}
#captions a         {width: 100%; display: block; text-decoration: none; padding: 20px; margin: 4px 0;}
#captions span      {width: 100%; display: block; text-decoration: none; padding: 20px; margin: 4px 0;}

#visitmasham        {background: #a4c420;}
#visitmasham h1     {color: #fff;}
#visitmasham p      {color: #fff;}

#tripadvisor        {background: #fff;}
#tripadvisor img    {max-width: 100%;}
#tripadvisor p      {color: #444;font-size: 14px; margin: 4px 0; text-align: right;}
#tripadvisor q      {color: #444;}

#mashcomm           {background: #fff;}
#mashcomm    img    {width: 33%; padding: 0 20px 0 0; display: inline-block; vertical-align: middle;}
#mashcomm    h1     {width: 66%; color: #444; display: inline-block; vertical-align: middle;}
#mashcomm    p      {color: #444;}

@media screen and (min-width: 512px) {
#footer             {margin: 0;}

#captions           {display: table; border-collapse: collapse; font-size: 0;}
#captions h1        {font-size: 32px; margin: 0; font-weight: 300; line-height: 100%; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;}
#captions p         {font-size: 16px; font-weight: 300; margin: 20px 0 0 0;}
#captions a         {width: 33%; display: table-cell; vertical-align: top; border-radius: 10px; text-decoration: none; padding: 20px; margin: 0;}
#captions span      {width: 33%; display: table-cell; vertical-align: top; border-radius: 10px; text-decoration: none; padding: 20px; margin: 0;}
}