@charset "UTF-8";
/* CSS Document */

body {font-family: 'Source Sans Pro', sans-serif;}

@media only screen and (min-width: 768px) {
	
    .pull-left 			{float: left !important;}
    .pull-right 		{float: right !important;}
	.row1 h1 			{font-size: 2.9em !important; 
						font-weight: 200 !important; 
						color: #dd480e;
						margin-top: 30% !important;
						line-height: 1.1em !important;
						text-align:left !Important;}
	.row1 h2.subheader 	{font-size: 1.3em !important;
						text-align:left !Important;}
	.logo 				{padding-top: 12px !Important; padding-left:25px;}
	.row2 h1 			{font-size: 2.4em !Important;}
	.row2 h2 			{padding-top: 10px; display:block;}
	.row2-2 h1          {font-weight: 200 !Important; 
						font-size: 1.7em !Important; 
						text-align:left !important} 
	.row3 h1, .row4 h1	{font-weight: 200;
						font-size: 1.7em !Important;
						margin-top: 50% !important;
						text-align:left !important;}
	.row3 h1			{margin-top: 30% !important}
	.row2-2 p,
	.row3 p, 
	.row4 p 			{line-height: 1.8em; 
						text-align: left !important;}
	.row3, .row4 		{padding-top: 50px;}
	#submenu			{display: none !Important;}
	.emailField			{width: 99% !important;}
	.borderRight		{ border-right-color: #FFF; border-right-width: 1px; border-right-style: solid;}
	.borderTop			{border-top: none !important; margin-top: 0px !important;}
	.reveal-modal p 	{line-height: 1.6em !important;
						font-size: 1.3em !Important;}
	.thanksbox2 		{margin-top: 0px !important; height: 100px !important;}
	.thanksbox1 		{height: 200px !important;}
}




@media only screen and (min-width: 865px) {
	.row1 h1 			{font-size: 3.4em !important;
						margin-top: 30% !important;
						line-height: 1.1em !important;}
	.row1 h2.subheader 	{font-size: 1.6em !important;
						text-align:left !Important;}
	
	.row2 h1 			{font-size: 2.4em !Important;}
	
	.row3 h1 , .row4 h1	{font-size: 2.2em !important;}
	#submenu			{display: none !Important;}
	
}




/* NAVIGATION STYLES
======================================================  */
a.button.getNotified {
    background: #514a42;
    border: none;
    padding: 0px;
    margin: 0px;
    box-shadow: none;
    padding: 10px 19px;
    margin: 12px;
    border-radius: 3px;
}
a.button.getNotified:hover,
a.button.getNotified:active,
a.button.getNotified:focus {
    background: #DD480E;
}



/* Styles for Mobile View 
======================================================================================= */


.full {width: 100%;}
.borderTop	{border-top: #FFF 1px solid; margin-top:25px;}
.navBar {
	background-color: #FFF;
	z-index: 2000;
	height: 60px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #dad9d6;	
	}
	
/* START Navigation 2 */	
a.navBtn2 {
	font-size: 15px;
	color: #999;
	text-decoration: none;
	display: inline-block;
	padding-right: 12px;
	padding-left: 12px;
	padding-top: 23px;
	padding-bottom: 22px;
	font-weight: 300;
}
.navBar a.navBtn2:hover {
	color:#666666;
}
.navBar a.navBtn2.active  {
	background-image:url(http://www.supperclubapp.com/img/nav_activeArrow.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	color: #666666;
}
/* END Navigation 2 */	

	
#submenu {
	display: none; 
	padding-top: 60px; 
	position:fixed; 
	width: 100%; 
	z-index: 1000; 
	background-color:#FFF;	
}
#submenu li a {
	display: block;
	list-style-type: none;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 15px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	color: #666;
}
#submenu li a:hover {background-color: #F5F5F5;}
#submenu li {
	list-style-type: none;
}
.logo {padding-top: 16px; padding-left:25px;}
a.navBtn {
	margin-top: 12px;
	color: #999999;
	background-color: #FFF;
	border: 1px solid #CCC;
	font-weight: 300;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
a.navBtn:hover {
	color: #666;
	background-color: #ebeae7;
}
.row1 {
	background-color: #ebeae7;
	background-image: url(../img/bkgd_row1.png);
	background-repeat: repeat-x;
	background-position: center 60px;
}
.st_sharethis_custom{
	background: url("http://supperclubapp.com/test/f/img/sm-icon_share.png") no-repeat scroll left top transparent;
	width: 70px;
	padding-top: 0px;
	padding-right: 70px;
	padding-bottom: 2px;
	padding-left: 0;
	cursor: hand; 
	cursor: pointer;
	-khtml-opacity:.55; 
	 -moz-opacity:.55; 
 	-ms-filter:"alpha(opacity=55)";
  	filter:alpha(opacity=55);
  	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.55);
  	opacity:.55;
}
.st_sharethis_custom:hover{
	-khtml-opacity:1; 
	 -moz-opacity:1; 
 	-ms-filter:"alpha(opacity=100)";
  	filter:alpha(opacity=100);
  	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
  	opacity:1;
}
.row1 h1 {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300 !important;
	font-size: 2.0em;
	font-weight: 200;
	color: #dd480e;
	margin-top: 0px;
	display: block;
	padding: 0px;
	margin-bottom: 15px;
	line-height: 1.25em;
	text-align:center;
}
.row1 h2.subheader {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.5em;
	color: #9b9588;
	display: block;
	margin-bottom: 15px;
	text-align:center;
}
.row1 input {
	background-color: #FFF;
	font-size: 1em;
	color:#999;
	height: 62px;
	vertical-align: middle;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-left: 20px;
	-moz-border-radius: 5px 0px 0px 5px;
	border-radius: 5px 0px 0px 5px;
	-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
}
/*.row1 .button {
	color: #FFF;
	background-color: #DD480E;
	height: 62px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	-moz-border-radius: 0px 5px 5px 0px;
	border-radius: 0px 5px 5px 0px;
	-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
	padding-top: 18px;
}*/
.emailField .field.columns {
	padding-right: 0px;
	padding-left: 0.9375em;
}
.emailField .btn.columns {
	padding-right: 0.7375em;
	padding-left: 0px;
	font-size: .9em;
	font-weight: 400;
	background-color: #DD480E;
	-moz-border-radius: 0px 5px 5px 0px;
	border-radius: 0px 5px 5px 0px;
	color: #fff;
}
.emailField {width: 99%; margin-left:auto; margin-right:auto;}
/*.emailField .columns .button {
	padding-right: 0.9375em;
	padding-left: 0em;
}*/

.row2 {
	background-image: url(../img/bkgd_row2.jpg);
	background-repeat: repeat;
	background-position: center top;
	padding-bottom: 35px;
	padding-top: 15px;
}
.navBar .menuIcon {
	height: 70px;
	width: 70px;
	margin-top: 10px;	
	/*border: 1px solid #CCC;
	border-radius: 5px*/
}

.row2-2 {
	background: #ebeae7;
	padding-bottom: 35px;
	padding-top: 15px;
}

.row2 h1 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.8em;
	font-weight: 200;
	color: #FFF;
	display: block;
	margin-top: 30px;
	padding-bottom: 25px;
}
.row2 .text-block {
	color: #FFF;
	font-weight: 300;
	font-size: 14px;
	line-height: 19px;
	display: block;
	width: 85%;
	margin-left:auto;
	margin-right:auto;
	/*text-align:left;*/
}
.row2 h2 {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 200;
	font-size: 1.8em;
	line-height: 1em;
	color: #dd480e;
}
.row2-2 h1, .row3 h1, .row4 h1 {
	font-family: 'Source Sans Pro', sans-serif;
	color: #dd480e;
	font-weight: 200;
	font-size: 1.7em;
	margin-top: 50px;
	text-align: center;
	width: 95%;
	margin-left:auto;
	margin-right:auto;
}

.reveal-modal h2{
	font-family: 'Source Sans Pro', sans-serif;
	color: #dd480e;
	font-weight: 200;
	font-size: 2em;
	margin-top: 50px;
	text-align: left;
	width: 95%;
	margin-left:auto;
	margin-right:auto;
}

.row3 p, .row4 p {
	line-height: 1.6em;
	color: #999;
	text-align: left;
	font-weight:300;
	width: 95%;
	margin-left:auto;
	margin-right:auto;

}

.reveal-modal p {
	line-height: 1.4em;
	font-size: 1em;
	color: #999;
	text-align: left;
	font-weight: 300;
	width: 95%;
	margin-left:auto;
	margin-right:auto;

}

.reveal-modal .button {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 00;
	background-color: #dd480e;
	color: #fff;
	border: none;
	-webkit-appearance: none;
	width: 100%;	
}

.row2-2 p {
	line-height: 1.6em;
	color: #999;
	text-align: center;
	font-weight:300;
	width: 95%;
	margin-left:auto;
	margin-right:auto;
}
.row4 {background-color: #ebeae7;}
.row3, .row4 {padding-top: 20px;}


.row5 .ftr {
	font-size: .8em;
	line-height: 1.4em;
	color: #999;
}
.row5 .ftr a {
	color: #DD4817;
}
.row5 {padding-top: 25px; padding-bottom: 25px;}

.row1 .sociallinks a {
	-moz-opacity: 0.55;
	opacity: 0.55;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=55);
	margin-right: 20px;
}

.row1 .sociallinks a:hover {
	-moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}





/* Side Menu 
======================================================================================= */


ul.sideMenu {margin: 0px; padding: 0px;}
ul.sideMenu li {list-style: none; width: 100%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #F5F5F5;}
ul.sideMenu li a {color: #999; font-size: 14px; display: block; width: 100%}
ul.sideMenu li a:hover {color: #dd480e; }
ul.sideMenu li a.active {color: #5d574b;}
.newsSidebar h3 {font-size: 1.5em; color: #666; font-weight: 300; }
a.newsBtn {width: 100%; color: #fff; padding: 10px; padding-left: 12px; margin-bottom: 30px; display: block; border-radius: 4px; background:#dd480e url(http://www.supperclubapp.com/img/icon-newsletter.png) no-repeat 95% center; }
a.newsBtn:hover {background: #c64411 url(http://www.supperclubapp.com/img/icon-newsletter.png) no-repeat 95% center;}




/* Thank you page 
======================================================================================= */

.thanksbox1 {
	background-color: #fff;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.thanksbox2 {
	background-color: #deddda;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 10px;
}
.thanksbox1 h1{
	font-family: 'Source Sans Pro', sans-serif;
	color: #dd480e;
	font-weight: 200;
	font-size: 2.2em;
	text-align: left;
}
.thanksbox2 h2{
	font-family: 'Source Sans Pro', sans-serif;
	color: #696762;
	font-weight: 200;
	font-size: 1.1em;
	text-align: left;
}
.thanksbox1 p {
	line-height: 1.4em;
	font-size: 1em;
	color: #999;
	text-align: left;
	font-weight: 300;
}
.thanksbox1 .button, .thanksbox2 .button {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	background-color: #dd480e;
	color: #fff;
	border: none;
	-moz-border-radius: 5px;
	border-radius: 5px;	
}
.thanksbox1 .button {
	background-color: #c3c2c0;
}






/* LANDING PAGES 
======================================================================================= */

	a.button.follow, span.follow-yes, span.in-yes, span.maybe-yes, span.out-yes {color:#999999; background-color: #fff; border: 1px solid #e5e5e5; font-weight: 200; 
		-moz-border-radius: 5px; border-radius: 5px; padding: 0.5em 1em 0.4125em; margin-top: 3px; margin-bottom: 0px; font-size: .9em;}
	a.button.follow:hover, span.follow-yes, span.in-yes, span.maybe-yes, span.out-yes {background-color: #e5e5e5; color:#666666;}
	.postImage {background-image:url(../img/missingPhoto-recipe.png); background-repeat: no-repeat; background-position:center; 
	 	background-size: auto 100%; background-color:#CCC; height: 450px;}
	.postDetails p, .postDetails ul { color: #6f6f6f; font-size: .75em; line-height: 1.35em;}
	.postDetails h2 { font-size: 1.7em; font-weight:200; color:#a9a9a9; letter-spacing: .015em; margin-bottom: 5px; margin-top: 8px;}
	.postDetails a {color: #999;}
	.postContent {height: 350px; overflow:scroll;}
	.postbyTitle {color: #6f6f6f; text-transform: uppercase; font-size: .7em; font-weight:500; margin-top: 15px;}
	.profilePhoto {background-repeat: no-repeat; background-position: center; -moz-border-radius: 25px; background-size: 100%; border-radius: 25px; height: 37px; 
		width: 37px; margin-right: 10px; float: left; image-rendering: -moz-crisp-edges;}
	.postHdr {border-bottom: 1px solid #CCC; padding-top: 10px; padding-bottom: 10px;}
	.postBtm {padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #CCC;}
	a.btnLike, span.btnLike-yes {background-image:url(../img/icons.png);background-repeat:no-repeat;background-position: -60px -130px;
		height: 17px; display: inline-block; padding-left: 25px;margin-left: 20px;font-size: 0.8em;} 
	a.btnLike:hover, span.btnLike-yes {background-position: -60px -147px;}
	a.btnComment {background-image:url(../img/icons.png);background-repeat:no-repeat;background-position: 0px -130px;
		height: 17px; display: inline-block; padding-left: 25px; margin-left: 20px; font-size: .8em;} 
	a.btnComment:hover {background-position: 0px -147px;}
	a.btnShare {background-image:url(../img/icons.png);background-repeat:no-repeat;background-position: -125px -130px; width: 50px; height: 17px; display: inline-block; float: right;}
	a.btnShare:hover {background-position: -125px -147px;}	
	img.thumb {position: relative; top: -43px; margin-left: auto; margin-right: auto;}
	.ftrRow {background: #474441; height: 145px;}
	.ftrContent {float: left; width: 50%; margin-left: 0%; color: #fff; margin-top: 3%; line-height: 1.4em;}
	.ftrHeadline {font-size: 1.7em; font-weight: 400; color:#dd480e; margin-bottom: 10px;}
	.ftrBody {font-size: 1.2em; font-weight: 300;}
	
	.ftrBlock {height: 145px;}
	.mobileDLBtns {background-color: #595652; height: 100px;}
	.ftrCopyright {color: #a5a09b; font-size: .7em; padding-top: 25px; line-height: 1.2em;}
	
	.loginpop {padding:0px;}
	.loginpop h2 {padding-top: 0px; margin-top: 0px;}
	.loginpop .formWrap {width: 95%; margin-left: auto; margin-right: auto;}
	.loginpop .loginFtr {background-color: #ebeae7; padding: 20px;}
	
	
	
	/* Photo Template Specific Styles */
	.avatar{ /* selector for avatar class*/
		float: left; /* we press to the left edge, flow around on the right */
		background: #fff; /* background */
		width: 50px; 
		height: 50px; 
		padding: 5px; /* internal padding ( top, right, bottom, left) */
		border-radius: 50%; /* border-radius is equal to 50 percent of a general width, actually 25 pixels, here and a circle was got(there is also with prefix - moz and - o) */
	}
	.avatar img{ /* selector for a picture which is "inside" the avatar class */
		display: block; /* a picture is being displayed as a block, by a width it will be equal to the parent(in the div) */
		width: 100%; /* width 100% */
		border: 0; /* zero border */
		margin: 0; /* external margin is lacking */
		border-radius: 50%; /* read above */
	}
	.comments {border-top: 1px solid #EFEFEF; padding-top: 15px;}
	.comments .commentWrap {clear:both;}
	.comments .commentWrap .comment {margin-bottom: 20px; font-size: .8em; color: #6f6f6f; line-height:1.2em;}
	.comments .commentWrap .comment .commentUser {font-size: .8em; text-transform:uppercase; font-weight:600;}
	.comments .commentWrap .comment .commentTime {color: #c2c2c2; font-size: .8em;}
	
	
	
	/* Event Landing Page */
	table.eventDetails tr th, table.eventDetails tr td {font-size: .8em; color: #58595b;}
	table.eventDetails {border: none; padding: 0px;}
	table.eventDetails tr.even, table.eventDetails tr.alt, table.eventDetails tr:nth-of-type(2n) 
	{background: none repeat scroll 0 0 #FFF;}
	
	
	/* New Home Page */
	.f-dropdown {max-width: 140px; left: 0px; }
	 ul#hover1.f-dropdown.open { position: relative !important; top: 0px !important; left: -20px !important; }
	 .f-dropdown li a {padding: 10px; font-size: 1em;}
	
	
	@media only screen and (max-width: 765px) {
	.postImage {height: 200px; background-size: 120% auto;}	
	.ftrRow {background: #474441; height: 100px;}
	img.thumb {position: relative; top: -21px; margin-left: auto; margin-right: auto;}
	.postContent {height: auto;}
	}