/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

/* Main Elements */ /*font-family: 'Source Sans Pro',*/
html { font-family: helvetica neue, helvetica, sans-serif; background-color: rgb(238, 240, 243); color: #556270; }
body { text-align: center; }
.center { text-align: center; }
#footer { margin: 100px 0 20px; color: #aaa; }
.separator { margin: 0 3px; }
.nav-spacer { height: 67px; }
.right { float: right; }
.mobile-show { display: none; }

/* Profiles and Regions */
.cover { width: 100%; max-width: 960px; z-index: 5; position: absolute; margin-top:-120px; height: 120px;  background: url('../img/gradient-grey.png') bottom left repeat-x;  font-family: helvetica neue, serif; }

/* Arrows */
.arrow { position: fixed; z-index: 4; top: 40%; height: 150px; width: 60px; background-color: white; border: 1px solid #ddd; cursor: pointer; }
.arrow.next { right: 0px; background: url("../img/arrow-right.png") no-repeat scroll 25px 55px rgb(255, 255, 255); }
.arrow.previous { left: 0px; background: url("../img/arrow-left.png") no-repeat scroll 15px 55px rgb(255, 255, 255); }
.arrow.next:hover { background-color: #ddd; }
.arrow.previous:hover { background-color: #ddd; }

/* Messages */
/*.welcome-wrapper { background-color: white; padding: 30px 30px 20px; margin-bottom: 30px;  }
.messages { position: fixed; z-index: 11; top: 66px; width: 100%;  padding: 20px 15px; background-color: rgb(255, 107, 107); border-top: 1px solid rgba(52, 73, 94, .2); color: white; font-size: 110%; font-family: helvetica; text-shadow: 0 1px 1px rgba(22, 22, 22, .4); text-align: left; text-align: center; }
.messages a { color: white; }
.messages .tip.wander { }*/
/*.messages .tip:before {
    content:"";
    position: fixed;
    z-index: 80;
    margin-top: -33px;
    margin-left: 120px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid rgb(255, 107, 107);
}
.messages .tip.wander:before { 
    right: 170px; 
/*    margin-top: 40px; */
/*    border-bottom: none;    */
/*    border-top: 25px solid rgb(255, 107, 107);  
}
*/

/* Maps */
.map-wrapper { display: none; }
#map { width: 100%; height: 550px; }
#map.bookmarks { display: block; height: 220px; margin: 0px 0 0px; border: none; }
/*.map-overlay { display: none; position: absolute; width: 98%; height: 180px; z-index: 3; }*/

/* Modals */
.modal { display: none; position: fixed; z-index: 100; top: 15%; left: 50%; width: 300px; margin: 0 -170px; background-color: white; padding: 20px; }
.modal.signup { border: 1px solid #ddd;}
#overlay { display: none; position: fixed; z-index: 5; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .8); }
#overlay.dark { z-index: 20; }

/* Containers */
.container { width: 960px; margin: 0 auto; text-align: left; }
.container.content { margin-top: 10px; }
.container.profile { background-color: white; padding-top: 8px; }
.container.small { max-width: 350px; text-align: center; }
.dark-background { position: fixed; top: 0; width: 100%; height: 100%; padding-top: 15%; background-color: #555; color: white; }
.location.profile { border-bottom: 1px dotted #ddd; padding: 15px 20px; }
.location.profile:hover { background-color: #fdfdfd; }

.tag-wrapper { padding: 15px 20px; border-bottom: 1px dotted #ddd; background-color: white; cursor: pointer; }
.tag-wrapper:hover { background-color: #fdfdfd; }

.col-left { width: 20%; float: left; }
.col-right { width: 75%; float: right; }
.comment { margin-bottom: 10px; }

.breadcrumb { padding: 15px 0; font-size: 105%; color: #aaa; text-shadow: 0 1px 2px rgba(255, 255, 255, .8); }
.tag-header { padding: 20px; background-color: #eee; color: white; }
.tag-header a { color: white; }


/* Search */
.dropdown { position: fixed; z-index: 25; padding: 0; top: 70px; background-color: white; text-align: left; border-radius: 3px; box-shadow: 0px 1px 8px rgba(22, 22, 22, .3); }
.dropdown.profile { display: none; right: 20px; width: 150px; }
.dropdown.tag {  display: none; left: 50%; margin: 0 -60px; width: 150px; }
.dropdown:before {
    content:"";
    position: fixed;
    z-index: 26;
    margin-top: -15px;
    margin-left: 135px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid white;
}
/*.dropdown.profile:before {
    margin-left: 110px;
}*/

/* Headers and text */
h1 { font-size: 150%; font-weight: 800; margin-bottom: 6px; }
h1.home { margin-top: 60px; }
h1.home-first { margin-top: 30px; }
h1 a { text-decoration: none; color: #556270; }
h2 { font-size: 200%; color: rgb(52, 73, 94); font-weight: 800; text-align: left; }
h3 { font-size: 150%; color: rgb(52, 73, 94); margin: 0 0 5px; font-weight: 400; }
h3 b { font-weight: 800; }
h3.name { color: white; text-shadow: 0 0 3px rgba(0, 0, 0, .7); margin: 50px 20px; font-size: 230%; }
h3.tag-name { margin-top: 40px; }
h4 { display: block; margin-bottom: 3px; font-size: 115%; font-weight: 800; color: #556270; }

p { font-family: 'Source Sans Pro', helvetica nueu, helvetica, sans-serif; line-height: 1.3em; color: #999; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
p.welcome-message { font-size: 105%; margin-bottom: 15px; }
p.signin { margin-bottom: 15px; }
p.media-hover { margin-bottom: 10px; }

a { color: rgb(52, 152, 219); text-decoration: none; } /*rgb(133, 161, 204)*/
a.button { display: block; padding: 20px 50px; margin-bottom: 5px; background-color: rgb(106, 153, 213); color: white; text-align: center; text-decoration: none; border-radius: 3px; cursor: pointer; }
a.button.signin { padding: 15px 0px; font-size: 110%; }
a.button.signin.home { width: 180px;}
a.button:hover { background-color: rgba(106, 153, 213, .8);}
a.remove-location { display: block; float: right; margin-top: -40px; text-decoration: none; color: #888; }
a.comment-source { margin-left: 4px; text-decoration: none; color: #bbb; }
a.bookmark { font-size: 105%; text-decoration: none; }
a.group { text-decoration: none; }
a.search-focus { text-decoration: underline; }
a.buy-deal { display: block; float: right; padding: 10px 25px; margin-top: -10px; background-color: rgb(52, 152, 219); color: white; border-radius: 3px; }
span.no-bookmarks { display: block; padding: 20px 0 30px; text-align: center; font-size: 110%; }
span.highlight { font-weight: 800; color: rgb(255, 107, 107); }

/* Signup pagges */
.container.small h1 { font-size: 300%; }
.container.small h1 a { color: white; text-decoration: none; }
.container.small a.button { display: block; margin: 0 auto; width: 100%; margin-bottom: 10px; padding: 18px 0; background-color: rgb(44, 170, 255); color: white; text-decoration: none; }
.container.small a.button:hover { background-color: rgba(44, 170, 255, .7);}
.container.small input[type=text] { width: 100%; margin-bottom: 10px; }
.container.small input[type=submit] { width: 100%; }
span.tagline { display: block; margin: 5px 0 25px; }

/* Inputs */
label { display: block; text-align: left; }
input[type=text] { padding: 12px 0; text-indent: 10px; }
input[name=bookmark] { margin-bottom: 15px; }
input[name=search].nav { display: none; padding: 0; margin: 0; background-color: transparent; color: #eee; width: 350px; border: none; outline: 0;}
input[name=search].home { width: 100%; padding: 18px 0; margin-top: 10px; margin-bottom: 30px; border: 1px solid #ccc; }

textarea { width: 100%; padding: 10px; height: 80px; margin-bottom: 5px; border: 1px solid #BBB; border-radius: 3px; }

/*input[name=bookmark] { -webkit-appearance:none; border: none; padding-right: 35px; padding-bottom: 8px; background: url("../img/heart.png") no-repeat scroll 0 0px rgb(238, 240, 243); color: white; cursor: pointer;}*/
/*input[name=bookmark]:hover { color: rgb(238, 240, 243); background-color: rgba(255, 107, 107, .99); }*/
/*input[name=bookmark].active { color: rgb(238, 240, 243); background-color: rgb(255, 107, 107); }*/
/*input[name=bookmark].active:hover { color: rgb(238, 240, 243); background-color: rgb(255, 107, 107);  }*/

/* Heart input */
.heart { margin-bottom: -12px; background-color: white; }
.heart:hover { background-color: rgba(255, 107, 107, .8); } 
.heart.active { background-color: rgb(255, 107, 107); }

/* Forms */
form { display: inline; }

/* Lists */
ul.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; text-align: left; background-color: rgb(52, 73, 94); color: white; font-size: 110%; }
ul.nav li { display: inline-block; padding: 22px 0; cursor: pointer; text-shadow: 0 1px 2px rgba(22, 22, 22, .3) }
ul.nav li.logo { background-color: rgb(44, 62, 80); }
ul.nav li.logo a { padding: 30px; }
ul.nav li.logo:hover { background-color: rgb(255, 107, 107); }
ul.nav li.name { position: fixed; left: 50%; margin: 0 -60px; }
ul.nav li a { text-decoration: none; color: #eee; }

ul.nav li.center { position: absolute; left: 50%; margin: 0 -120px; padding: 0; }
ul.nav li.center a { display: inline-block; min-width: 50px; }
ul.nav li.center a.wander { background-color: rgb(255, 107, 107); padding: 22px 30px; }
ul.nav li.center a.wander:hover { background-color: rgba(255, 107, 107, .8); }
ul.nav li.center a.dropdown-tag { font-size: 150%; }
ul.nav li.center a.dropdown-tag:hover { color: #ccc }

ul.nav li.profile { float: right; padding-left: 15px; padding-right: 15px; }
ul.nav li.bookmark { float: right; padding-left: 15px; padding-right: 15px; }

ul.nav li.breadcrumb { margin-left: 10px; padding-right: 25px; border-right: 1px solid rgb(55, 65, 80); font-weight: 100;  }
ul.nav li.breadcrumb:hover { color: #eee; }
ul.nav li.breadcrumb b { font-weight: 400; }
ul.nav li.breadcrumb .down-arrow { color: #ddd; font-size: 70%; margin-left: 5px; }

ul.location-nav { margin: 20px 0 10px; }
ul.location-nav li { display: inline; margin-right: 20px; cursor: pointer; }
ul.location-nav li.current { font-weight: 800; }

ul.filters { margin-bottom: 30px; background-color: white; color: #666; font-family: helvetica neue, serif; }
ul.filters li { display: inline-block; padding: 22px 30px; border-right: 1px dotted #ddd;  }
ul.filters li:first-child { padding-left: 25px; }
ul.filters li.logout { float: right; }
ul.filters li.logout a { color: #999; }
ul.filters li.current { font-weight: 800; }
ul.filters li.current:after {
    content:"";
    position: absolute;
    margin-top: 22px;
    margin-left: 23px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid white; ;
}

ul.dropdown { font-size: 90%; }
ul.dropdown li { padding: 0 20px; min-width: 150px; border-bottom: 1px dotted #eee; }
ul.dropdown li:last-child { border-bottom: none; }
ul.dropdown li a {  display: block; width: 100%; padding: 15px 0; color: #999; }
ul.dropdown li:hover { color: #666; background-color: #eee; }

ul.location-details { margin: 3px 0 12px; font-size: 105%; }
ul.location-details li { display: inline; margin-right: 15px; color: #aaa; }
ul.location-details li a { color: #bbb; text-decoration: none; }

ul.footer { margin-top: 5px; padding-top: 15px; color: #aaa; text-align: center; } 
ul.footer li { display: inline; margin-right: 20px; }
ul.footer li a { color: #aaa; text-decoration: none; }
ul.footer li a:hover { text-decoration: underline; }


.deal { margin-bottom: 15px; padding: 25px; background-color: white; border: 1px solid #ddd; box-shadow: 0 1px 5px rgba(22, 22, 22, .1); }

/* Loading indicators */
.loading { background-image: url('../img/ajax-loader.gif'); background-repeat:no-repeat; background-position: center; height: 120px; }
.loading.dark { background-image: url('../img/ajax-loader-dark.gif'); }

/* Images */
img.search { height: 60px; margin-right: 5px; vertical-align: middle; }
img.group { height: 60px; margin-right: 5px; vertical-align: middle; cursor: pointer; }
img.profile { vertical-align: middle; margin: -25px 3px -20px 0; border-radius: 20px; height: 40px; }
img.profile-big { vertical-align: middle; border-radius: 30px; border: 2px solid rgba(255, 255, 255, .5); margin-top: -10px; height: 55px; }
img.checkin {  }

/* Friend Wrapper */
.friend-wrapper { display: inline; position: relative; }
.friend-wrapper:hover .caption { display: block; }
.friend-wrapper .caption { display: none; position: absolute; z-index: 4; top: -60px; white-space:nowrap; padding: 5px 10px; background-color: rgba(22, 22, 22, .8); color: white; border-radius: 3px; }

/* Media Wrapper */
.media-wrapper { width: 33.3%; float: left; position: relative; background-color: transparent; }
.media-wrapper .border { position: relative; border: 1px solid white; }
.media-wrapper.region { width: 33.3%; text-align: center; position: relative; }
.media-wrapper.region:hover .media { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); }
.media-wrapper.region .border { position: relative; margin: 8px; border: 10px solid white; }
.media  { width: 100%; display: block; cursor: pointer; }
.regions { margin: 0 -8px; }
 
/* Media Captions */
.media-wrapper .caption { position: absolute; z-index: 1; left: 0; font-weight: 400; top: 100%; margin-top: -40px; margin-left: 10px; color: #EEE; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-shadow: 0 -1px 1px #222; text-align: left; cursor: pointer; }
.media-wrapper.region .caption { top: 45%; width: 100%; margin: 0; font-size: 230%; font-family: helvetica, sans-serif; font-weight: 800; text-align: center; }
.media-wrapper .caption.like { display: none; top: 0; margin-top: 10px; }
.media-wrapper:hover .caption.like { display: block; }

@media all and (max-width:1100px) {
    img.home {width:1100px;}
}

@media all and (max-width:1000px) {
/*    .nav { padding-left: 5px; padding-right: 5px; }*/
/*    .dropdown.region { left: 0; margin: 0; padding: 25px 1%; width: 98%; }*/
    .container { width: 98%; margin: 0 1%; }
    .container.small { margin: 0 auto; width: 350px; text-align: center; }  
/*    #map { width: 40%; margin-right: 20px; }*/
}

@media all and (max-width:900px) {
 
}

@media all and (max-width:800px) {
    .mobile-hide { display: none !important; }
    .mobile-show { display: inline !important; }
    .media-wrapper.groups { width: 33%; }
}

@media all and (max-width:600px) {
    .mobile-hide { display: none !important; }
    .mobile-show { display: inline !important; }
    .map-overlay { display: block; }
    
    .arrow { display: none; }
    
    .container { width: 98%; margin: 0 1%; }
    .container.small { margin: 0 auto; width: 300px; text-align: center; }
    .nav .container { width: 100%; margin: 0; }
        
    .media-wrapper.region { width: 50%; }
    .media-wrapper.region .caption { font-size: 150%; }
    .media-wrapper.groups { width: 50%; }
    
    ul.nav li.breadcrumb { display: none; }
    ul.nav li.wander a { padding-left: 20px; padding-right: 20px; }

    h3.name { font-size: 170%; margin-top: 70px;}
    
/*    #map { float: none; width: 98%; height: 180px; margin: -35px 0 20px; }*/
    #map.bookmarks { float: none; width: 98%; height: 220px; }
    
    .col-left { width: 100%; float: none; }
}

/* Clearfix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* Heart */
/*.heart {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 18px;
    top: 0;
    width: 18px;
    height: 30px;
    background: white;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
.heart:hover:after { color: red; }*/
/*.heart:hover:after { color: red; }*/
/*.heart:hover { color: red; }                    */