@media aural {
    #p7PMnav {
        volume: silent;
    }
}

/* header styles */


/* revamp-compatability styles */

.show-for-small {
    display:none !important;
}

.show-for-medium {
    display:none !important;
}

a#mobile_version_link {
/* font-size:.75em;
  float:right;
 position:relative;
 top:10px;
 text-align:right; */
}
div#header_container_outer {
/* centres stuff for ie */
    width: 100%;
    text-align: center;
    height:136px;
    padding-top: 10px;
    background:white;
}

div#header_container_inner {
    height:136px;
    width: 844px;
    margin: auto;
  vertical-align:bottom;
}

div#logo_container {
    float: left;
    width: 300px;
    height:116px;
    margin-top:20px;
    margin-bottom:0;
    padding-bottom:0;
    vertical-align:bottom;
    vertical-align:text-bottom;
}

div#lozenge_container {
 float: right;
 text-align: right;
 width:500px;
 height:136px;
 vertical-align:text-bottom;
 position:relative;
}
div#lozenge_container>a  {
    font-size:12px;
    float:right;
    margin-left:1em;
    font-family:Arial, Helvetica, sans-serif;

}

img#tiny_f {
    position:relative;
    /*top: 12px;*/
}

/* hack to stop displacement of FB symbol in footer due to fixed displacement of FB symbol in header */
div#foot img#tiny_f {
  top: 5px;
}

div.review p.c {
    font-size: .9em;
    white-space: normal;
    text-align: justify;
    margin: 0px;
    padding-right: 4px;
    padding-left: 4px;
    color: #333333;
    background:#ffd;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #66a;
    padding-bottom: 8px;
}
div.review p.b{
     font-family: Arial, Helvetica, sans-serif;
    background:#FAFAA7;
  font-size: 1.2em;
 text-align: left;
    margin: 0px;
    padding: 6px 6px 3px 6px;

}


div#lozenge_container table {
    margin-top:10px;
  border-spacing:0;
}

div#sharing_header {
  vertical-align:bottom;
    float:right;
    height:30px;
    margin-bottom:0;
    position:absolute;
    top:100px;
    left:120px;
    display:table;
  width:500px;
}

div#sharing_header_ie {
    vertical-align:bottom;
    float:right;
    height:30px;
    margin-bottom:0;
  padding: 10px 0 0 0;
    position:absolute;
    top:100px;
    left:120px;
    display:table;
}

div#mainsearchform_options0 {
position: relative;
margin-top:0;

}

div#header_container_outer a#mainLogo img {
    vertical-align:bottom;
    vertical-align:text-bottom;
    height:116px;
    position:relative;
}

div#header_container_inner > div {
     vertical-align:bottom;
     vertical-align:text-bottom;
     border-bottom:0;
     margin-bottom:0;
     padding-bottom:0;
}





    /* general styles */

img {
    border:0;
}

body {
    text-align:center; /*for internet explorer. Wrapper resets to left */
    z-index: 2;
    margin: 0px;
    padding: 0px;
    background-color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}

#wrapper {
    margin: 0 2em;
    font-family:Arial,Helvetica,sans-serif;
    text-align:left;  /*see body */
}

.omg {  /*GENERIC "this is important" style: so don't mess with positioning or colour */
    font-weight:bold;
    font-size:1.5em;
}

div#fixedwrap{
    width:800px;
    margin:auto;
    /*for internet explorer;*/
    text-align:left;
    font-family:Arial,Helvetica,sans-serif;
}


h1,h2,h3{
      text-align:center;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}
h1 {
    font-size: 2.8em;
  line-height:100%;
}

img.thumbleft {
    float:left;
    width:100px;
    margin:0em 1em .5em 0em;
}

img.symbolleft {
    float:left;
    width:40px;
    margin:0em 1em .5em 0em;
}

div.google_foot {
    text-align:center;
    margin:auto;
}



/* taster styles on events and review pages */

.review h2,h3 {
  text-align:left;
}


div#latest_events{
    border: 2px solid #066;
    /*background:#e2eeff;*/
    background:#EBFFF8;
}

div#latest_events h5{
    background:#066;
}

div#revtasters img, div#latest_events img{
    width:310px;
}

/* taster styles on ad, venue, etc pages */

div#revtasters, div.revtasters{
    border: 2px solid #c50;
    background:#ffd;
    margin:1em 0;
}


div#revtasters p, div.revtasters p, div#latest_events p, div#offer_tasters p  {
    padding:0.2em 1em;
}

div#latest_events p strong{
    font-size:1.1em;
}

div#revtasters h5, div.revtasters h5, div#latest_events h5, div#offer_tasters h5, div#reviewer_notes h2{
    display:block;
    font-size:1.5em;
    font-weight:bold;
  color:white;
    padding:0.4em 0em;
    margin:0;
    text-indent:.8em;
}

div#revtasters h5, div.revtasters h5, div#reviewer_notes h2{
    background:#c50;
}

div#offer_tasters h5{
    /*background:#EB3841;*/
    background:#CC0210;
}

div#offer_tasters  {
    margin:1em 0;
    border: 1px solid #CC0210;
}



div#revtasters b, div#offer_tasters b {
    font-size:1.3em;
}

/* for ad pages */

#sidebar div#revtasters, #sidebar div#offer_tasters {
    font-size:60%;
}

/* venues and reviews */

.green-data {
    display:block;
    border: 2px solid #357A41;
    padding:.8em;
    background:#D0F2D7;
    margin-bottom:.4em;
}

.nice_box span.green-data {
display:inline;
border: none;
background: none;
margin-bottom: .4em;
color: #357A41;
}


.green-data b {
 color: #357A41;
 font-size:1.1em;
 font-weight:bold;
 position:relative;
 top:-.3em;
}

#nice_box_dark .green-data {
    color: #357A41;
    /*background:#e2eeff; */
}

/*
.review_container blockquote {
    display: none;
}
*/

/* more generic styles */


.error{
    font-family: Arial, Helvetica, sans serif;
    background-color:#FFEBE6;
    border:3px outset #E62E00;
    color:#B22400;
    padding:8px;
    font-weight:bold;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

.nice_box{
    font-family: Arial, Helvetica, sans serif;
    background-color:#e2eeff;
    border:2px solid #B0BBFF;
    padding:8px;
}

.nice_box h4 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
}

#nice_box_dark{
    font-family: Arial, Helvetica, sans serif;
    background-color:#000099;
    border:2px solid #B0BBFF;
    color:#FFFFFF;
    padding:8px;
    font-weight:bold;

}
#nice_box_dark a {
    color:#CCFFFF;
}
.nice_box_pale{
    font-family: Arial, Helvetica, sans serif;
    background-color:#ffd;
    border:2px solid #c50;
    padding:8px;
}
.floatright   {
    float: right;
    margin: 10px 0 10px 10px;
}
.eg {
    font-style:italic;
    font-size:.8em;
    color:#666666;
}

.floatleft {
    float: left;
    margin: 10px 10px 10px 0;
}

    /* link styles */
a:link {
    text-decoration: none;
    color: #000099;
}
@media print {
    a:link {

    }
    a:link[href*='mask_email_send.php']::after { content:" [" attr(href) "] "; }
}

a:visited {
    text-decoration: none;
    color: #000099;
}
a:hover {
    text-decoration: underline;
    color: #FF3300;
}
a:active {
    text-decoration: underline;
    color: #00FFFF;
}



.permalink {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  text-align: right;
  float:right;
  background:#F5F2F3;
  display:block;
  padding:1em;
  margin:1em 0em 1em 1em;
  white-space: nowrap;
}

span.permalink span {
 position: relative;
 top:-.5em;
 padding-right:1em;
}


/* Sponsored links */

p.sponsored {
 padding: 0.8em;
 border: 1px dotted gray;
 text-align: justify;
}

p.sponsored::before {
 content: "Sponsored link: ";
 color: gray;
}


/* for individual venue listings */
span.thumbage img{
    width:110px;
    margin:0 1em 1em 0;
    position:relative;
    float:left;
}

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

div.venue_details {
    float:none;
    margin-top:1em;
    margin-bottom:1em;
    /*background: #F5FCFC; */
    padding:.3em 1em;
/*	border-top:2px solid  #F5FCFC;
    border-bottom:2px solid  #F5FCFC; */
    border:2px solid  #e2eeff;

}
div.venue_details p.blurb{
    font-size:.9em;
    color:grey;
}


    /* styles for the footer */

#foot {
  clear:both;
    background:white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
  background-image: url(/z/spires_foot.png);
  background-repeat:repeat-x;
  background-position: center bottom;
    border-right: #000099;
    margin-bottom: 0px;
    border-left: #000099;
    margin-top: 20px;
    position:relative;
    /*top:100%; this actually causes a massive hold between bottom of content and beginning of footer*/

}


#foot a:link,   #foot a:visited  {
    text-decoration: none;
    margin-right: 3px;
    margin-left: 3px;
    color: #000099
}

#foot a:hover,   #foot a:active  {
    text-decoration: underline;
    color: #0066ff
}

/* end of footer styles */

.taster_title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    text-align: center;
    font-weight:bold;
    padding:0px 0px 14px 0px;
}

.tiny, .tiny a {
 font-family:Arial, Helvetica, sans-serif;
 color:#C4C4C4;
 font-size: xx-small;
 text-decoration: none;
}

.iv {
    display: none;
}

.arrow {
    margin-left: 10px;
}

.DI-title {

text-align: center;
font-size: 29px;
font-weight: bold;
font-style: italic;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 7px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 1.2px;
background-color: #e2eeff;
}
 .DI-title a:link,  .DI-title a:visited {color: #000099}
 .DI-title a:hover, .DI-title a:active {
    color: #0066FF;
    text-decoration: none;
}
.DI-menus {
    clear:both;
    background-color: #fff; /* #e2eeff; */
    padding: 0px;
    margin: 0px;
    width: 100%;
    text-align:left;
}
.DI-shadow {
    clear:both;
    background-image: url(bkgd2-shadow.gif);
    height: 4px;
    width: 100%;
}



a.button, a:active.voucher, a:visited.voucher  {
    float:right;
    position:relative;
    top:-2em;
    display: block;
    border-top: 1px solid #460166;
    border-right: 1px solid #000099;
    border-bottom: 1px solid #000099;
    border-left: 1px solid #460166;
    background-color: #741594;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0.2em;
    margin-bottom:1em;
    margin-right:1em;
    color: #fff;
}

a:hover.voucher {
    background-color: #B0BBFF;
    border-top-color: #000099;
    border-right-color: #460166;
    border-bottom-color: #460166;
    border-left-color: #000099;
    text-decoration: none;
    color: #000066;
}


/*buttonz! default is blue. */




input.buttonz, a.buttonz, .buttonz a, .buttonz a, input.track, button.track {
    white-space: nowrap;
    color: white !important;
    text-decoration: none;
    padding: 3px 10px;
    -webkit-border-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background: #006 url(/dimages/but_blue.png) repeat-x;
    border: 1px solid #006;
    border-top-color: #066;
    border-left-color: #066;
    text-align: center;
    /*text-transform: uppercase; */
    display: inline-block;
    padding: 3px;
    margin: 0.2em 0.2em;
    font-weight: bold;
    font-size:1.1em;
}

p.buttonz a, div.buttonz a {
    line-height:2.5em; /*this stops the pile up when they're above other elements. Margin can't do it. */
}

a:visited.buttonz, .buttonz a:visited, .buttonz a:visited {
color:white !important;
}

input.buttonz:hover, a.buttonz:hover, .buttonz a:hover, .buttonz a:hover, input.track:hover, button.track:hover {
    text-decoration: none;
    background:#B0BBFF;
     color:#006 !important;
     font-weight: bold;
}

div.buttonz, p.buttonz {
    font-size:.8em;
}

/* these use above styles and just overwrite colour and image*/
a.button-orange, input.buttonz, input.track, button.track, .button-orange a, div.button-orange a, p.button-orange a {
 background: #F29900 url(/dimages/but_orange.png) repeat-x;
    border: 1px solid #F78D02;
    border-top-color: #F29900;
    border-left-color: #F29900;
}
a.button-orange:hover, input.buttonz:hover, input.track:hover, button.track:hover, .button-orange a:hover, div.button-orange a:hover, p.button-orange a:hover {
    text-decoration: none;
    background:#FCF6B3;
    color: #F78D02;
}
a.button-red, .button-red a, div.button-red a, p.button-red a {
 background: #D10206 url(/dimages/but_red.png) repeat-x;
    border: 1px solid #D6020D;
    border-top-color: #D10206;
    border-left-color: #D10206;
}
a.button-red:hover, .button-red a:hover, div.button-red a:hover, p.button-red a:hover {
    text-decoration: none;
    background:#FFEDF7;
    color: #D10206;
}
a.button-green, .button-green a, div.button-green a, p.button-green a, button.button-green {
    background: #177A04 url(/dimages/but_green.png) repeat-x;
    border: 1px solid #177A04;
    border-top-color: #25C904;
    border-left-color: #25C904;
}
a.button-green:hover, .button-green a:hover, div.button-green a:hover, p.button-green a:hover, button.button-green:hover {
    text-decoration: none;
    background:#D7FAD7;
    color: black;
}
a.button-teal, .button-teal a, div.button-teal a, p.button-teal a {
    background: #04D9C0 url(/dimages/but_teal.png) repeat-x;
    border: 1px solid #10918B;
    border-top-color: #49F5C4;
    border-left-color: #49F5C4;
}
a.button-teal:hover, .button-teal a:hover, div.button-teal a:hover, p.button-teal a:hover {
    text-decoration: none;
    background:#DEFAF0;
    color: #10918B;
}
a.button-purple, .button-purple a, div.button-purple a, p.button-purple a {
    background: #8D0494 url(/dimages/but_purple.png) repeat-x;
    border: 1px solid #8D11BA;
    border-top-color: #8D11BA;
    border-left-color: #8D11BA;
}
a.button-purple:hover, .button-purple a:hover, div.button-purple a:hover, p.button-purple a:hover {
    text-decoration: none;
    background:#F2D9FC;
    color: #8D11BA;
}

a.button-pink, .button-pink a, div.button-pink a, p.button-pink a, input.button-pink {
    background: #8D0494 url(/dimages/but_pink.png) repeat-x;
    border: 1px solid #CF04C8;
    border-top-color: #F50CED;
    border-left-color: #F50CED;
}
a.button-pink:hover, .button-pink a:hover, div.button-pink a:hover, input.button-pink:hover, p.button-pink a:hover {
    text-decoration: none;
    background:#FCD2FB;
    color: #CF04C8;
}

a.button-white, .button-white a, div.button-white a, p.button-white a {
    background: #FFF url(/dimages/but_white.png) repeat-x;
    border: 1px solid #D6020D;
    border-top-color: red;
    border-left-color: red;
    color: red;

}
a.button-white:hover, .button-white a:hover, div.button-white a:hover, p.button-white a:hover {
    text-decoration: none;
    background:#FFF;
    color: #C50;
}

a.button-black, .button-black a, div.button-black a, p.button-black a {
    background: #FFF url(/dimages/but_black.png) repeat-x;
    border: 1px solid #006;
    border-top-color: #D9F5FF;
    border-left-color: #D9F5FF;

}
a.button-black:hover, .button-black a:hover, div.button-black a:hover, p.button-black a:hover  {
    text-decoration: none;
    background:#E8E6E8;
    color: #006;
}


/* for signpost buttons. To make big, ie demands px not em and we need a bigger bg image */
input.track, button.track {
    background: #F29900 url(/dimages/but_orange_big.png) repeat-x;
  font-size: 2em;
  padding:2px 4px 3px 4px;
  height:50px;
}

input.button-pink {
    color: white;
}

.floatleft_img {
    float:left;
    margin:inherit;
    padding:inherit;
    margin-right:25px;
}



/* .box_shadow, .blue_heading {
  -webkit-box-shadow: 5px 5px 10px 3px rgba(000, 000, 000, 0.3);
  -moz-box-shadow: 5px 5px 10px 3px rgba(000, 000, 000, 0.3);
  box-shadow: 5px 5px 10px 3px rgba(000, 000, 000, 0.3);
}  */

.box_radius, .blue_heading {
  border-radius: 5px;
}

div.publicUserMenu {
  font-size:12px;
  text-align:center;
}

.smallsans {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    color: #333333;
}
.dragon_right {
     margin: 10px 5px 0px -55px;
    padding: 0px;
    clear: right;
    float: right;
  position:relative;
  top:20px;
}
.dragon_left {
  margin: 10px 0px 0px 0px;
    padding: 0px;
    clear: left;
    float: left;
  position:relative;
  top:20px;
}
#rev_table #tagcloud {
    width:100%;
}

/* event tag search */
div#tag_search_setters div.flipper {
  background-color: transparent
}
div#tag_search_setters div.flipper.selected {
  background-color: #E45FD4;
}
div#tag_search_setters div.flipper.not-selected {
  background-color: #CACAB7;
}

span.di.validate.tick img {
  vertical-align: middle;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.padding-top { padding-top: 15px; }
.padding-bottom { padding-bottom: 15px; }
.padding-left { padding-left: 15px; }
.padding-right { padding-right: 15px; }
.no-padding { padding: 0; }

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

.fullWidth { width: 100%; }
.halfWidth { width: 50%; }
.thirdWidth { width: percentage(1/3); }
.quarterWidth { width: 25%; }

/* margins for FontAwesome icons within links (no space required) */
.awesomeMarginLeft, .aml {
  margin-left: 0.3rem !important;
}

.awesomeMarginRight, .amr {
  margin-right: 0.3rem !important;
}

/* super-margins for FontAwesome icons within links (no space required) */
.superAwesomeMarginLeft, .saml {
  margin-left: 0.6rem !important;
}

.superAwesomeMarginRight, .samr {
  margin-right: 0.6rem !important;
}

.show-for-new {
    display: none !import!
}

  img.inline, figure.inline {
    width: 33%;
    float: left;
    clear: left;
    margin: 0 1rem 1rem 0;
  }

  img.inline.right, figure.inline.right {
    float: right;
    clear: right;
    margin: 0 0 1rem 1rem;
  }

figure {
  position: relative;
}

figure img {
  margin: 0 !important;
  float:inherit !important;
  padding: 0 !important;
  width: 100% !important;
}

figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  color: white;
  font-size: 0.9rem;
  padding: 0.5rem;
  font-weight: normal;
  margin: 0;
}

figure figcaption a {
  color: white !important;
  font-weight: bold !important;
}