/* General styles */

body {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 62.5%;
    color: #2d2d2d;
}

.hiddenElement {display: none;}

li {list-style: none;}

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


/* Top */

#top {
    background-color: #2393c8, transparent; /* SVG */
    background-image: linear-gradient(rgba(0,0,0,0) 91%, rgba(0,0,0,0.1) 100%), url(img/banner-bg-lines.png), url(img/banner-bg-gradient.png), url(img/banner-bg.png) ;
    background-image: -webkit-linear-gradient(rgba(0,0,0,0) 91%, rgba(0,0,0,0.1) 100%), url(img/banner-bg-lines.png), url(img/banner-bg-gradient.png), url(img/banner-bg.png) ;
    background-image: -moz-linear-gradient(rgba(0,0,0,0) 91%, rgba(0,0,0,0.2) 100%), url(img/banner-bg-lines.png), url(img/banner-bg-gradient.png), url(img/banner-bg.png) ;
    background-repeat: no-repeat, repeat-x, no-repeat, repeat;
    background-position: left top, center center, center 16px, left top;
    border-top: 5px solid rgba(0,0,0,0.4);
    padding-top: 1em;
    padding-bottom: 1.7em;
}

header nav .left {
    margin-left: 47em;
}

header nav li {float: left;}

header nav li+li {margin-left: 3em;}

header nav a {
    font-size: 1.6em;
    color: #fff;
    font-weight: 100;
    margin-top: 0.6em;
    display: block;
    cursor: pointer;
}

header nav a:hover,
header nav a:focus {color: #fff;}

header li.active a {color: #f9eed0;}

header form {position: relative;}

header label {
    position: absolute;
    left: 0.6em;
    top: 0.4em;
}

header #searchEvents {
    border: none;
    border-radius: 0.3125em;
    font-size: 1.6em;
    font-family: "Lucida Grande", Lucida, sans-serif;
    margin-bottom: 2em;
    padding: 0.4375em 0.4375em 0.4375em 2em;
    height: 1.5em;
    width: 11em;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    width: 14.4375em;
}

header #searchEvents:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 255, 255, 0.75);
    outline: 0 none;
}

input[type="search"] {color: #2D2D2D;}

header i.icon-search {
    color: #b2afaf;
    font-size: 1.6em;
    line-height: 1.75em;
}

#banner h1 {
    margin-top: 0.7em;
    float: left;
}

h1 a {
    display: inline-block;
    text-indent: -99999em;
    background: url(img/logo.png) no-repeat left top; /* SVG */
    opacity: 0.95;
}

#banner h1 a {
    width: 35.3em;
    height: 14.3em;
}

#banner h2 {
    color: #fff;
    display: inline-block;
    font-size: 3.2em;
    font-weight: 100;
    margin-left: 3.625em;
    margin-top: 1.25em;
    opacity: 0.5;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

#top.loggedIn {padding-bottom: 1.3em;}

.loggedIn nav .left {margin-left: 0;}

.loggedIn #searchEvents {
    margin-bottom: 0;
}

.loggedIn h1 {
    position: absolute;
    top: 0.8em;
    left: 50%;
    margin-left: -9.65em;
}

.loggedIn h1 a {
    width: 12.0625em;
    height: 4.875em;
    background-size: contain;
    margin-top: 0;
}

.userName {
    cursor: pointer;
}

.userName a img {
    vertical-align: middle;
    margin-right: 0.5em;
    width: 1.25em;
}


/* Content - general */

.container {width: 120em;}

input[type="file"] {
    height: 1.92857142857143em;
    line-height: 1.92857142857143em;
}

div#loading {
    background-color: rgba(255,255,255,0.5);
    color: #868686;
    font-size: 2em;
    padding: 10px;
    position: fixed;
    left: 10px;
    bottom: 10px;
}

div#error {
    background-color: rgba(255,255,255,0.5);
    color: #860000;
    font-size: 2em;
    padding: 10px;
    position: fixed;
    left: 10px;
    bottom: 10px;
} 

/*
.btn-primary {
    background-image: linear-gradient(#64b1e2 0%, #19719a 100%);
    border-color: #1c6f99;
    background-color: #499bca;
}

.btn-primary:hover {
    border-color: #136289;
    background-color: #3180ac;
    background-image: linear-gradient(#1e8dc3 0%, #19719a 100%);
}
*/


/* Home - page */

section {
    clear: both;
    padding-top: 3.6em;
}

#content hgroup {
    background: url(img/heading-bg.png) repeat-x left 0.3em; /* Test with Retina */
    width: 100%;
    margin-bottom: 3em;
}

#content hgroup h3 {
    font-size: 2.6em;
    text-transform: uppercase;
    color: #868686;
    margin-left: 0.76923076923077em;
    padding-left: 0.38461538461538em;
    padding-right: 0.38461538461538em;
    background-color: #fff;
    float: left;
    padding-top: 0.2em;
}

#events-filter {
    float: right;
    margin-right: 2em;
    padding-left: 1em;
    background-color: #fff;
}

#events-filter legend {display: none;}

#events-filter label {
    font-size: 1.6em;
    color: #868686;
}

#events-filter label,
#events-filter .selectors {display: inline-block;}

#events-filter .selectors {
    margin-left: 1em;
    margin-right: 1em;
    position: relative;
}

#events-filter .selected {
    font-size: 1.5em;
    color: #2d2d2d;
    background: linear-gradient(#fff, #ededed);
    background: -moz-linear-gradient(#fff, #ededed);
    background: -webkit-linear-gradient(#fff, #ededed);
    border: 1px solid #d6d6d6;
    border-radius: 0.33333333333333em;
    padding-left: 0.8em;
    padding-right: 2.93333333333333em;
    line-height: 2.26666666666667em;
    display: inline-block;
    font-family: "Lucida Grande", Lucida, sans-serif;
}

#events-filter .selected:hover {
    text-decoration: none;
}

#events-filter .selectors i {
    position: absolute;
    font-size: 1.6em;
    right: 0.625em;
    top: 10px;
    color: #2d2d2d;
}


/* List of events */

div.event-wrapper {
    float: left;
    width: 48.333333333333%;
    margin-bottom: 3.5em;
}

div.event-wrapper:nth-child(even) {
    clear: left;
    margin-right: 2.5%;
}

.event .left {
    width: 37.241379310345%;
    position: relative;
}

.event:nth-child(odd) .left {
    margin-left: 1.724137931034%;
}

.event img {
    width: 20em;
    height: 15em;
}

span.date {
    font-weight: bold;
    font-size: 1.8em;
    color: #696969;
    display: inline-block;
    line-height: 1.66666666666667em;
    text-shadow: 0px 1px 0px #fff;
    background-color: rgba(227,226,223,0.95);
    padding-left: 1.11111111111111em;
    padding-bottom: 0.16666666666667em;
    min-width: 6em;
    position: absolute;
    z-index: 10;    
}

span.dateShadow {
    border-color: #b2b0ad transparent transparent transparent;
    border-style: solid;
    border-width: 3em;
    position: absolute;
    top: 3.3em;
}

.mask {
    width: 20em;
    height: 15em;
    position: relative;
    overflow: hidden;
    top: 1.6em;
    left: 1.5em;
    border-left: 1px solid #fff;
}

span.locality {
    background-color: rgba(0,0,0,0.7);
    line-height: 1.66666666666667em;
    font-size: 1.8em;
    color: #fff;
    padding-right: 0.55555555555556em;
    padding-left: 1.11111111111111em;
    display: block;
    position: absolute;
    top: 7.44444444444444em;
    right: 0.05555555555556em;
}

span.locality a {color: #fff;}

.event .right {width: 57.586206896552%;}

.event h4 a {
    margin-top: 0.4em;
    margin-bottom: 0.53333333333333em;
    color: #2d2d2d;
    display: inline-block;
    font-size: 3em;
}

.event h4 a.smaller {
    font-size: 2.5em;
}

#content .event p {
    color: #a4a4a4;
    font-family: "Lucida Grande", Lucida, sans-serif;
    font-size: 1.6em;
    line-height: 1.25em;
    margin-bottom: 1em;
}

.attending {
    font-size: 1.4em;
    color: #2D2D2D;
    line-height: 1.71428571428571em;
    display: inline-block;
    margin-left: 0.8em;
}


/* Tags */

section+section {
    padding-top: 2.6em;
}

nav.tags li {
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    position: relative;
    background: url(img/tag-neb.svg) no-repeat left top;
}

nav.tags a {
    font-family: "Lucida Grande", Lucida, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #909090;
    background-color: #f4f4f4;
    border: 1px solid #d6d6d6;
    border-left: none;
    line-height: 1.66666666666667em;
    display: inline-block;
    padding-right: 0.66666666666667em;
    padding-bottom: 0.16666666666667em;
    padding-left: 0.5em;
    margin-left: 1em;
    border-radius: 0 0.16666666666667em 0.16666666666667em 0;
}

nav.tags a span {
    font-weight: normal;
    color: #acacac;
    padding-left: 0.3em;
}


/* Popular events */

.popularEvents {
    position: relative;
    width: 120em;
}

.popularEvents div {        
    width: 96.666666666667%;
    margin-left: 1.666666666667%;
    margin-right: 1.666666666667%;
/*
    width: 103em;
    margin-left: 8.5em;
*/
}

.popularEvents article {
    position: relative;
    width: 22.413793103448%;
    margin-right: 3.448275862069%;
    float: right;
/*
    margin-right: 5.5em;
    width: 21.6em;
*/
}

.popularEvents article:nth-child(4) {margin-right: 0;}

.popularEvents span.locality {
    right: 2.55555555555556em;
}

.popularEvents h4 {
    margin-top: 1.5em;
    margin-left: 1.6em;
}

.popularEvents nav a {
    width: 3.8em;
    height: 4.6em;
    background: url(img/carousel-nav.png); /* SVG */
    background-repeat: no-repeat;
    text-indent: -99999em;
    position: absolute;
    top: 8.2em;
}

.popularEvents a.prev {
    background-position: left top;
    left: 0;
}

.popularEvents a.next {
    background-position: right top;
    right: 0;
}

a.prev:hover {background-position: left -4.6em;}
a.next:hover {background-position: right -4.6em;}

a.prev.disabled {background-position: left bottom;}
a.next.disabled {background-position: right bottom;}

a.prev.disabled,
a.next.disabled {cursor: default;}


/* Create event - Page */

h2 {
    font-size: 3em;
    margin-bottom: 1.5em;
}

.container.register {
    margin-left: 30em;
    width: 60em;
    margin-top: 4em;
}






/* Footer */

footer {
    margin-top: 2em;
    margin-bottom: 4em;
}

footer p {
    text-align: center;
    color: #c3c2c2;
    font-size: 1.3em;
}


/* Clearfix */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}


/* General styles [PROVISIONAL] */

.eventDetail h1,
.eventDetail h2,
.eventDetail h3 {
    line-height: 40px;
}

.eventDetail h1 {
    font-size: 38.5px;
    margin-top: 30px;
}

.eventDetail h2 {
    font-size: 31.5px;
    margin-top: 20px;
}

.eventDetail h3 {
    font-size: 25px;
    margin-top: 20px;
}

.eventDetail p, .register p {
    margin: 10px 0;
    font-size: 14px;
    line-height: 18px;
}

.eventDetail p strong {
    font-weight: bold;
}

.eventDetail img {
    margin: 10px 10px 10px 0;
}

.eventDetail ul li {
    margin-top: 10px;
    font-size: 14px;
    line-height: 18px;
    display: inline-block;
}

.register {
    margin-top: 30px;
}

.register label {
    font-size: 16px;
}

#facebook-login-box {
   display: inline-block;
   width: 120px;
   height: 120px;
}

#twitter-login-box {
   display: inline-block;
   width: 120px;
   heigth: 120px;
   padding-left: 0.5em;
}