/* ****************************** begin general styles ****************************** */
body {
  margin: 0px;
  padding: 0px;
  background: #45146b url(../images/bg.jpg) repeat-x top; 
  font-family: sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: #000;
}
img {
  border: 0px;
}
a {
  color: #00a686;
}
a:hover {
  color: #cc1a7a;
}
a img:hover {
  border-color: #cc1a7a;
}
p {
  margin: 18px 0px 18px 0px;
}
ul {
  margin: 18px 0px 18px 0px;
}
li {
  padding: 4px 0px 4px 0px;
}
h1 {
  font-size: 29px;
  line-height: 37px;
  font-family: rockwell, sans-serif;
  font-weight: bold;
  color: #5f1e86;
  margin: 27px 0px 19px 0px;
}
h2 {
  font-size: 25px;
  line-height: 29px;
  font-family: rockwell, sans-serif;
  font-weight: bold;
  color: #5f1e86;
  margin: 23px 0px 19px 0px;
}
h3 {
  font-size: 21px;
  line-height: 25px;
  font-family: rockwell, sans-serif;
  font-weight: bold;
  color: #5f1e86;
  margin: 21px 0px 19px 0px;
}
h1 a, h2 a, h3 a, h4 a {
  color: #5f1e86;
  text-decoration: none;
}


/* ****************************** begin main layout styles ****************************** */
#container {
  width: 100%;
  max-width: 1200px;
/*  background: url(../images/container-bg.png) repeat-y center; */
  background: #fff;
  margin: 0px auto;
  padding: 0px 0px 0px 0px;
}
#header, #header img {
  width: 100%;
  max-width: 1200px;
  background: #5f1e86;
}
#header-small, #header-small img  {
  width: 100%;
  height: auto; 
  display: none;
  background: #5f1e86;
}
#displayNav {
  display: none;
}
#toggleNav {
  display: block;
}

#nav {
  background: #5f1e86;
  border-top: 1px solid #9b72b3;
  border-bottom: 1px solid #9b72b3;
  font-size: 18px;
}
#nav a {
  line-height: 22px;
  font-weight: bold;
  color: #ffe6a3;
  text-decoration: none;
  padding: 10px 12px 10px 12px;
  border-right: 1px solid #9b72b3;
  float: left;
}

#nav a:hover {
  background: #cb1a7a;
  color: #fff;
}
.social-icon {
  padding: 8px 0 4px 10px !important;
  border: 0 !important;
}
.social-icon img {
  width: 24px;
  height: 24px;
}
a.social-icon:hover {
  background-color: transparent !important;
  position: relative;
  top: 1px;
  left: 1px;
}

#column-1 {
  width: 960px;
  background: #fff;
/*  border-top: 12px solid #d0bcf1; */
  border-top: 12px solid #fff; 
  float: left;
}
.column-1-content-area {
  padding: 0px 15px 30px 40px;
}
.column-1-content-area a {
  font-weight: bold;
}
.column-1-content-area img {
  border: 3px solid #00a686;
  background: #00a686;
  max-width: 710px;
}

.section-header {
  background: #00a686;
  border-bottom: 2px solid #207c53;
  font-family: rockwell, sans-serif;
  font-size: 21px;
  line-height: 25px;
  padding: 5px 0px 2px 10px;
}
.section-header a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.section-header a:hover {
  color: #ffe6a3;
}

.practical,
.big,
.restaurants,
.cafes,
.bars,
.stuff,
.about,
.other {
  display: none;
}

.practical-section .practical {
  display: inline !important;
}
.practical-section .cool {
  display: none;
}
.big-section .big {
  display: inline;
}
.big-section .cool {
  display: none;
}
.restaurants-section .restaurants {
  display: inline;
}
.restaurants-section .cool {
  display: none;
}
.cafes-section .cafes {
  display: inline;
}
.cafes-section .cool {
  display: none;
}
.bars-section .bars {
  display: inline;
}
.bars-section .cool {
  display: none;
}

.stuff-section .stuff {
  display: inline;
}
.stuff-section .cool {
  display: none;
}
.about-section .about {
  display: inline;
}
.about-section .cool {
  display: none;
}
.other-section .other{
  display: inline;
}
.other-section .cool {
  display: none;
}

#column-2 {
/*  background: #d0bcf1; */
  width: 200px;
  float: right;
}
#column-2-content-area {
  padding: 12px 15px 30px 15px;
}

#footer {
  background: #5f1e86;
  border-top: 2px solid #9b72b3;
  border-bottom: 1px solid #000;
  color: #fff;
  font-size: 17px;
  line-height: 22px;
  text-align: center;
  padding: 5px 0px 5px 0px;
}
#footer a {
  color: #fff;
}
#footer div {
  display: inline;
}

/* ****************************** begin home content styles ****************************** */

.welcome {
  height: 1px;
  overflow: hidden;
}
.home-section-header {
  border-top: 3px solid #d0bcf1;
  font-family: rockwell, sans-serif;
  font-size: 21px;
  line-height: 25px;
  padding: 3px 0px 10px 0px;
  margin: 15px 30px 0px 0px;
}

.home-section-header a {
  color: #5f1e86;
  font-weight: bold;
  text-decoration: none;
}
.home-section-header a:hover, .see-all:hover {
  color: #cc1a7a;
  text-decoration: underline;
}

.see-all {
  float: right;
  font-size: 17px;
  text-decoration: underline;
}

.home-entries-container {
  padding: 10px 0px 5px 0px;
}
.home-entry {
  width: 22%;
  float: left;
  padding-right: 3%;
  padding-bottom: 1px;
}
.home-entries-container img {
  width: 150px;
  max-width: 150px !important;
  height: 113px;
  border-width: 2px !important;
  margin-bottom: 2px
}
.home-entries-container p {
  margin: 0px 0px 0px 0px;
  font-size: 17px;
  line-height: 22px;
}

.home-entries-container div:hover p a {
  color: #cc1a7a !important;
  display: block;
}
.home-entries-container div:hover img {
  border-color: #cc1a7a !important;
}
/* ****************************** begin content styles ****************************** */

/* %%%%%%%%%% old directory style %%%%%%%%%% */
.directory { font-size: 13px; line-height: 14px; }
.directory a { font-size: 14px; line-height: 18px; display: block; width: 100%; margin-bottom: 2px; }
.directory div { padding: 15px 2% 15px 2%; margin: 0 2% 20px 0; width: 27%; height: 210px; float: left; background: #e8def8; }
.directory div:hover a { color: #cc1a7a; }
.directory div:hover img { border-color: #cc1a7a; }
.directory div:hover { background: #d0bcf1; }
.directory .clear { height: 0px; background: transparent; }
.directory img { width: 95%; height: auto; background: #fff; display: block; }
.directory p { margin: 4px 0px 0px 0px; }

/* %%%%%%%%%% new directory style %%%%%%%%%% */

.directory-new a {
  background: #e8def8;
  width: 27%;
  padding: 15px 2% 0 2%;
  margin: 0 2% 20px 0;
  float: left;
  height: 275px;
  color: #000;
  text-decoration: none;
}
.directory-new a:hover {
  background: #d0bcf1;
}
.directory-new a img {
  display: block;
  width: 97%;
  border: 3px solid #00a686;
  margin: 0 0 3px 0;
}
.directory-new a b {
  color: #00a686;
  display: block;
  text-decoration: underline;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  margin: 0 0 3px 0;
}
.directory-new a p {
  padding: 0;
  margin: 0;
  display: block;
  font-size: 15px;
  line-height: 19px;
  font-weight: normal;
}
.directory-new a:hover img {
  border-color: #cc1a7a;
}
.directory-new a:hover b {
  color: #cc1a7a;
}

/* ****************************** begin ad styles ****************************** */

.ad-container-728x15 {
  width: 728px;
  height: 15px;
  margin: 20px 0px 10px 18px;
}
.ad-container-160x600 {
  width: 160px;
  height: 600px;
}
.ad-container-336x280 {
  width: 336px;
  height: 280px;
}
.ad-container-300x250 {
  width: 300px;
  height: 250px;
}
.ad-container-468x15 {
  width: 468px;
  height: 15px;
  display: none;
  margin: 10px 0px 0px 10px;
}
.ad-container-234x60 {
  width: 234px;
  height: 60px;
  display: none;
  margin: 10px 0px 0px 10px;
}
.ad-container-320x50 {
  width: 320px;
  height: 50px;
  display: none;
  margin: 10px 0px 0px 0px;
}

.banner336x280_right {
  float: right; 
  margin: 0px 0px 30px 30px;
}
.banner336x280_left {
  float: left; 
  margin: 0px 30px 30px 0px;
}

/* ****************************** begin misc styles ****************************** */

#fancybox-title-outside h2 {
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
  color: #fff;
  margin: 0px 0px 6px 0px;
}
#fancybox-title-outside p {
  font-size: 18px;
  line-height: 22px;
  font-weight: normal;
  color: #fff;
  margin: 6px 0px 4px 0px;
}
#fancybox-title-outside {
  font-size: 18px;
  line-height: 22px;
  font-weight: normal;
  color: #fff;
  margin: 0px 0px 4px 0px;
}

.bigstuffnote {
  float: left;
  width: 200px;
  background-color: #d8f5e0;
  padding: 15px;
  margin: 5px 25px 15px 0px;
  border: solid 1px #70cd9a;
}

.bigstuffnote2 {
  float: right;
  width: 200px;
  background-color: #d8f5e0;
  padding: 15px;
  margin: 5px 0px 15px 25px;
  border: solid 1px #70cd9a;
}

.side-photo {
  width: 300px;
}

.borderbox2 table {
  margin: 20px 0px 20px 0px;
}
.callout {
  background-color: #d8f5e0;
  padding: 10px 20px 10px 20px;
  border: dotted 2px #70cd9a;
}

.photo-box-left {
  float: left; 
  background-color: #00a686; 
  margin: 5px 25px 25px 0px; 
  padding: 3px; 
  width: 300px;
}
.photo-box-right {
  float: right; 
  background-color: #00a686; 
  margin: 5px 0px 25px 25px; 
  padding: 3px; 
  width: 300px;
}
.photo-box-right img, .photo-box-left img {
  width: 300px;
  border: 0px !important;
}
.photo-box-right .caption, .photo-box-left .caption {
  padding: 0px 3px 2px 3px;
}

.photobox1 {
  float: right; 
  background-color: #00a686; 
  margin: 10px 10px 30px 30px; 
  padding: 2px; 
}
.photobox2 {
  float: left; 
  background-color: #00a686; 
  margin: 10px 30px 30px 0px; 
  padding: 2px; 
}
.photobox1 img, .photobox2 img {
  border: 0px !important;
}
.caption, .caption a {
  font-weight: normal;
  font-family: arial;
  margin: 5px;
  font-size: 16px;
  color: #fff;
  line-height: 20px;
}

.metro {
  width: 15px;
  height: 15px;
  vertical-align: bottom;
  margin-bottom: 2px;
  margin-left: 3px;
  border: 0px !important;
  background: transparent !important;
}
.no-underline {
  text-decoration: none;
}
.clear {
  clear: both;
}
.clear2 {
  clear: both;
  display: none;
}

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.backtotop {
  text-align: right;
  margin: 20px 0px 10px 0px;
}

.home .backtotop {
  margin: 20px 30px 10px 0px;
}


.pixel-nav .part-x-of-x {
  display: block;
  float: left;
  font-weight: bold;
  padding: 2px 8px 2px 0;
}
.pixel-nav a {
  display: block;
  float: left;
  padding: 2px 8px 2px 8px;
  margin: 0 5px 0 0;
  border: 1px solid #207c53;
  text-decoration: none;
  font-weight: bold;
  background: #00a686;
  color: #fff;
}
.pixel-nav a:hover {
  background: #7fd2c2;
  border: 1px solid #00a686;
}
.pixel-nav .selected {
  background: #fff;
  color: #00a686;
}
.pixel-nav .selected:hover {
  background: #fff;
}

/* ****************************** begin responsive styles for 1024 wide ****************************** */

@media screen and (max-width: 1024px) {

#container {
  padding: 0px 0px 0px 0px;
  background: #fff;
}

/* *** */ } /* *** */

/* ****************************** begin responsive styles for 980 wide ****************************** */

@media screen and (max-width: 980px) {

#container {
  width: 100%;
  padding: 0px;
}
#header, #header img {
  width: 100%;
  height: auto; 
}

#nav {
  font-size: 15px;
  width: 100%;
  background: #5f1e86;
  border-top: 1px solid #9b72b3;
  border-bottom: 1px solid #9b72b3;
  overflow: hidden;
}
#nav a {
  padding: 10px 8px 10px 8px;
}

/* .social-icon { */
/*   display: none; */
/* } */

#column-1 {
  width: 100%;
}

#column-2 {
  display: none;
}

#column-1 img {
  max-width: 700px;
}

#column-1 .wide {
  width: 95%;
  max-width: 700px;
}
#column-1 .tall {
  width: 40%;
  max-width: 700px;
  margin: 0px auto;
}

/* *** */ } /* *** */


/* ****************************** begin responsive styles for 768 wide ****************************** */

@media screen and (max-width: 768px) {

.home .backtotop {
  margin: 20px 15px 10px 0px;
}

#nav-container {
  display: block;
}


.social-icon {
  display: none;
}

.column-1-content-area {
  padding: 10px 15px 20px 15px;
}


#footer div {
  display: block;
}

.ad-container-728x15 {
  margin: 10px 0px 0px 10px;
}


.photo-box-left {
  width: 250px;
}
.photo-box-right {
  width: 250px;
}
.photo-box-right img, .photo-box-left img {
  width: 250px;
}

/* *** */ } /* *** */

/* ****************************** begin responsive styles for 760 wide ****************************** */

@media screen and (max-width: 760px) {
.ad-container-728x15 {
  display: none;
}

.ad-container-468x15 {
  display: block;
}


.banner336x280_right {
  float: none; 
  margin: 0px 0px 20px 00px;
}
.banner336x280_left {
  float: none; 
  margin: 0px 0px 20px 0px;
}

.photobox1 {
  float: none; 
  margin: 10px 0px 20px 0px; 
}
.photobox2 {
  float: none; 
  margin: 10px 0px 20px 0px; 
}

.float-left {
  float: none;
}
.float-right {
  float: none;
}

#column-1 img {
  max-width: 650px;
}


.photo-box-left {
  margin: 5px 15px 20px 0px; 
}
.photo-box-right {
  margin: 5px 0px 20px 15px; 
}

.directory-new a {
  background: #e8def8;
  width: 27%;
  padding: 15px 2% 0 2%;
  margin: 0 2% 20px 0;
  float: left;
  height: 220px;
  color: #000;
  text-decoration: none;
}

/* *** */ } /* *** */


/* ****************************** begin responsive styles for 640 wide ****************************** */

@media screen and (max-width: 640px) {

.directory-new a {
  width: 43%;
  padding: 15px 2% 0 2%;
  margin: 0 2% 20px 0;
  height: 200px;
}

.ad-container-320x50 {
  display: block;
  position: fixed; 
  bottom: 0px; 
  background: #ddd; 
  border-top: 1px solid #999; 
  width: 100%; 
  text-align: center;
}

.bigstuffnote, .bigstuffnote2 {
  display: none;
}

#column-1 img {
  max-width: 530px;
}

.side-photo {
  width: auto;
}

.see-all {
  display: none;
}


.social-icon { 
  display: none; 
} 

#header {
  display: none;
}

#header-small, #header-small img {
  height: auto; 
  display: block; 
  background: #5f1e86;
}

.home .backtotop {
  margin: 20px 10px 10px 0px;
}

body {
  font-size: 16px;
  line-height: 21px;
}

p {
  margin: 14px 0px 14px 0px;
}
ul {
  margin: 14px 0px 14px 0px;
}

h1 {
  font-size: 21px;
  line-height: 25px;
  margin: 17px 0px 15px 0px;
}
h2 {
  font-size: 19px;
  line-height: 23px;
  margin: 15px 0px 15px 0px;
}
h3 {
  font-size: 17px;
  line-height: 21px;
  margin: 14px 0px 14px 0px;
}
#footer {
  margin-bottom: 51px;
}
#footer div {
  font-size: 15px;
}

#column-1 {
  border-top: 0px;
  width: 100%;
}

.column-1-content-area {
  padding: 0px 10px 20px 10px;
}

#displayNav {
  display: block;
  width: 100%;
  background: #3c0b62;
  border-top: 2px solid #9b72b3;
  border-bottom: 2px solid #9b72b3;
  line-height: 19px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  float: left;
  padding: 4px 0px 2px 0px;
  height: 20px;
}

#displayNav a:hover {
  background: #cb1a7a;
  color: #ffe6a3;
}

#toggleNav {
  display: none;
}

#nav {
  display: block !important;
  width: 100%;
  height: 100%; 
  overflow: visible;
}

#nav a {
  display: block !important;
  width: 95%;
  font-size: 16px;
  line-height: 20px;
  border-bottom: 2px solid #9b72b3;
  border-right: 0px;
  padding: 8px 0px 0px 5%;
  height: 20px;
}

#nav a.social-icon {
  display: none !important;
}

.ad-container-336x280 {
  display: none;
}




.section-header {
  margin-top: 10px;
}

.home-section-header {
  border-top: 3px solid #d0bcf1;
  font-family: rockwell, sans-serif;
  font-size: 18px;
  line-height: 23px;
  padding: 6px 0px 1px 0px;
  margin: 20px 10px 0px 0px;
}


.home-entry {
  width: 100%;
  float: none;
  padding-right: 0;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #d0bcf1;
}
.home-entries-container img {
  max-width: 100px !important;
  max-height: 75px;
  float: left;
  height: 113px;
  border-width: 2px !important;
  margin-right: 10px;
}
.home-entries-container p {
  float: left;
  width: 60%;
  margin: 0px 0px 0px 0px;
  font-size: 15px;
  line-height: 19px;
}


.home-entries-container p a {
  text-decoration: none !important;
}
.home-entries-container div:hover p a {
  color: #cc1a7a !important;
  display: block;
}
.home-entries-container div:hover img {
  border-color: #cc1a7a !important;
}

.clear2 {
  display: block;
  clear: both;
}


.photo-box-left {
  margin: 5px 10px 15px 0px; 
  width: 200px;
}
.photo-box-right {
  margin: 5px 0px 10px 15px; 
  width: 200px;
}
.photo-box-right img, .photo-box-left img {
  width: 200px;
}


.directory {
  font-size: 16px;
  line-height: 20px;
}
.directory a {
  font-size: 17px;
  line-height: 21px;
  display: block;
  width: 100%;
  margin-bottom: 2px;
}
.directory div {
  width: 100%;
  padding: 8px 0px 8px 0px;
  float: none;
  margin: 0px 0px 0px 0px;
  background: #fff;
  border-bottom: 2px solid #d0bcf1;
  height: 66px;
}
.directory div:hover a {
  color: #cc1a7a;
}
.directory div:hover img {
  border-color: #cc1a7a;
}
.directory div:hover {
  background: #fff;
}

.directory .clear {
  height: 0px;
  background: transparent;
}

.directory img {
  width: 80px;
  height: 60px;
  background: #fff;
  float: left;
  margin-right: 10px;
}
.directory p {
  width: 500px;
  margin: 0px 0px 0px 0px;
}


/* *** */ } /* *** */
 
/* ****************************** begin responsive styles for 400 wide ****************************** */

@media screen and (max-width: 400px) {

body {
  font-size: 18px;
  line-height: 21px;
}

.directory p {
  width: 300px;
  margin: 0px 0px 0px 0px;
}

.relatedstuff {
  border: 2px solid #d0bcf1;
  padding: 10px 10px 10px 15px;
  margin: 20px 0px 0px 0px;
}
.relatedstuff h3 {
  font-size: 19px;
  line-height: 23px;
  font-family: rockwell, sans-serif;
  font-weight: bold;
  color: #5f1e86;
  margin: 0px 0px 12px 0px;
}
.relatedstuff ul {
  margin: 0px 0px 12px 0px;
}
.relatedstuff li {
  padding: 0px 0px 5px 0px;
  line-height: 17px;
}
.relatedstuff p {
  margin: 0px 0px 5px 0px;
}

.ad-container-468x15 {
  display: none;
}
.ad-container-234x60 {
  display: block;
}

#column-1 img {
  max-width: 95%;
}

.photo-box-left {
  float: none; 
  margin: 5px 0px 15px 0px; 
  padding: 3px; 
  width: 95%;
}
.photo-box-right {
  float: none; 
  margin: 5px 0px 15px 0px; 
  padding: 3px; 
  width: 95%;
}
.photo-box-right img, .photo-box-left img {
  width: 100%;
  margin: 0px;
}

#column-1 .photo-box-right img, #column-1 .photo-box-left img {
  max-width: 100%;
}

/* *** */ } /* *** */

/* ****************************** ****************************** */

.bymanning {
  float: left;
}
.sharethis {
  float: right;
}