/* 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;
}