@charset "utf-8";

/* ################################################### */
/*                                                     */
/*              hey guys                               */
/*                                                     */
/* ################################################### */

/* Fonts */

@font-face
{
	font-family: 'Chrono Regular';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebRegular.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebRegular.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Medium';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMedium.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebMedium.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Medium Italic';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMediumItalic.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebMediumItalic.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Light';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLight.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebLight.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Light Italic';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLightItalic.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebLightItalic.woff') format('woff');
}

/* ----- RESET BROWSER DEFAULTS ----- */
*
{
	margin: 0;
	padding: 0;
}

a
{
	text-decoration: none;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-weight: normal;
}

a img
{
	outline: none;
}

ul
{
	list-style: none;
}
	
/* ----- BASIC PAGE SET-UPS ----- */	
html
{
	min-width: 324px;
	padding: 5px 0px;

	background: #223a54;

	color: #ffffff;
}

body
{
	background: rgba(34,58,84,1);
	color: #ffffff;
	
	font-family: "Chrono Regular";
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 18px;
	line-height: 24px;
}

strong
{
	font-family: "Chrono Medium";
	font-weight: normal;
}

em
{
	font-family: "Chrono Medium Italic";
	font-style: normal;
}

strong em,
em strong
{
	font-family: "Chrono Medium";
	font-style: normal;
	font-weight: normal;
}
	
header,
section#demo,
section#new,
section#summary,
section#screenshots,
section#sources-list,
section#about,
section#help,
section#faq,
footer
{
	width: 100%;
	margin: 10px auto;
	padding-left: 10px;
	padding-right: 10px;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

/* ----- HEADER ----- */

header a
{
	display: inline-block;
	margin: 0;
	position: relative;
	z-index: 10;
}

div#shopmark
{
	font-size: 30px;
	height: 51px;
	line-height: 51px;
/* 	background-image: url("img/shopmark.svg"); */
	background-image: url("//signserver.panic.com/get/svg");
	background-size: 48px 49px;
	background-repeat: no-repeat;
	background-position: 0% 50%;
	padding-left: 59px;
	margin: 0px 0px 20px 0;
	color: #56626d;
	letter-spacing: -2px;
}

h1
{
	font-size: 54px;
	line-height: 56px;
	font-weight: 100;
	color: #ffffff;
	font-family: "Chrono Light Italic";
	letter-spacing: -5px;
}

h1 em,
section#about em strong
{
	color: #fa004b;
	font-family: inherit;
}

h1 em
{
	
}

header p
{
	font-size: 24px;
	line-height: 28px;
	font-family: "Chrono Light";
}

section p a,
section li a
{

	text-decoration: underline;
}

a.appstore_button
{
	width: 290px;
	height: 60px;
	background-image: url("/images-global/app-store-button.svg");
	-webkit-background-size: 216px 60px;
	-moz-background-size:    216px 60px;
	-ms-background-size:     216px 60px;
	-o-background-size:      216px 60px;
	background-size:         216px 60px;
	background-position: right 0%;
	background-repeat: no-repeat;
	border-radius: 4px;
	display: block;
	margin: 20px 0 10px 0;
	position: relative;
	z-index: 10;
	font-size: 0;
 	color: transparent;
}

a.appstore_button:before
{
	content: " ";
	width: 60px;
	height: 60px;
	background-image: url("img/download-icon.svg");
	-webkit-background-size: 60px 60px;
	-moz-background-size:    60px 60px;
	-ms-background-size:     60px 60px;
	-o-background-size:      60px 60px;
	background-size:         60px 60px;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
}


/* ----- HEADINGS -------------------- */

h2
{
	font-size: 48px;
	line-height: 48px;
	font-family: "Chrono Light Italic";
	font-weight: normal;
	margin: 20px 0;
	letter-spacing: -3px;
}

section#new h2 { color: #febb0a; }
section#about h2 { color: #0f7fff; }
section#summary h2 { color: #fa004b; }
section#help h2 { color: #25ff3e; }

section ul
{
	font-family: "Chrono Light";
	list-style: none;
}

/* ----- DEMO -------------------- */

section#demo
{	
	display: block;
	margin: 0 auto;
	position: relative;

	background-image: url("img/thewires.svg");

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	height: 253px;
	
	margin: 100px auto 60px auto;

}

div#ipad
{
	position: absolute;
	top: 50%;
	left: 50%;

	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.35);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.35);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.35);
	-o-transform: translateX(-50%) translateY(-50%) scale(0.35);
	transform: translateX(-50%) translateY(-50%) scale(0.35);
}

figure.ipad
{

	width: 556px;
	height: 731px;
	margin: 0 auto;
	position: relative;
			
	background-color: #131516;
	border-radius: 8px;
}

figure.ipad img { display: none; }

figure.ipad figure
{
	width: 100%;
	height: 697px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	background-size: contain;
	position: absolute;
	top: 17px;
	left: 17px;

	opacity: 0;
	
	-webkit-animation-name: fade-in-out;
	-moz-animation-name: fade-in-out;
	-ms-animation-name: fade-in-out;
	-o-animation-name: fade-in-out;
	animation-name: fade-in-out;
	
	-webkit-animation-duration: 40s;
	-moz-animation-duration: 40s;
	-ms-animation-duration: 40s;
	-o-animation-duration: 40s;
	animation-duration: 40s;
	
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-ms-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

figure.ipad figure.active
{
	opacity: 1;
}

#board1 { background-image: url("img/01-Data.png"); }
#board2 { background-image: url("img/03-Personal.png"); }
#board3 { background-image: url("img/04-Clinic.png"); }
#board4 { background-image: url("img/02-Edit.png"); }

#board1
{
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

#board2
{
	-webkit-animation-delay: 10s;
	-moz-animation-delay: 10s;
	-ms-animation-delay: 10s;
	-o-animation-delay: 10s;
	animation-delay: 10s;
}

#board3
{
	-webkit-animation-delay: 20s;
	-moz-animation-delay: 20s;
	-ms-animation-delay: 20s;
	-o-animation-delay: 20s;
	animation-delay: 20s;
}

#board4
{
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	-ms-animation-delay: 30s;
	-o-animation-delay: 30s;
	animation-delay: 30s;
}

figcaption
{
	position: absolute;
	line-height: 1.2em;
	width: 200px;
	text-align: center;
}

figcaption:before
{
	content: " ";
	height: 100px;
	width: 100px;
	display: block;
	position: absolute;
	border: 1px solid #ffffff;
	opacity: 0.9;
}

@-webkit-keyframes fade-in-out
{
	0% { opacity: 0; }
	1%, 25% { opacity: 1; }
	26%, 100% { opacity: 0; }
}

@-moz-keyframes fade-in-out
{
	0% { opacity: 0; }
	1%, 25% { opacity: 1; }
	26%, 100% { opacity: 0; }
}

@-ms-keyframes fade-in-out
{
	0% { opacity: 0; }
	1%, 25% { opacity: 1; }
	26%, 100% { opacity: 0; }
}

@-o-keyframes fade-in-out
{
	0% { opacity: 0; }
	1%, 25% { opacity: 1; }
	26%, 100% { opacity: 0; }
}

@keyframes fade-in-out
{
	0% { opacity: 0; }
	1%, 25% { opacity: 1; }
	26%, 100% { opacity: 0; }
}

/* Data */

#board1 figcaption:nth-of-type(1)
{
	top: -50px;
	left: -248px;
}

#board1 figcaption:nth-of-type(1):before
{
	top: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
	width: 150px;
}

#board1 figcaption:nth-of-type(2)
{
	top: -141px;
	left: 480px;
}

#board1 figcaption:nth-of-type(2):before
{
	top: 10px;
	left: -100px;
	border-bottom: 0;
	border-right: 0;
	height: 150px;
}

#board1 figcaption:nth-of-type(3)
{
	top: 170px;
	left: 570px;
}

#board1 figcaption:nth-of-type(3):before
{
	width: 150px;
	top: 24px;
	left: -50px;
	border-top: 0;
	border-left: 0;
}

#board1 figcaption:nth-of-type(4)
{
	top: 390px;
	left: 560px;
}

#board1 figcaption:nth-of-type(4):before
{
	top: 24px;
	left: -30px;
	border-top: 0;
	border-left: 0;
	width: 120px;
	height: 80px;
}

#board1 figcaption:nth-of-type(5)
{
	top: 530px;
	left: -220px;
}

#board1 figcaption:nth-of-type(5):before
{
	width: 175px;
	top	: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
}


#board1 figcaption:nth-of-type(6)
{
	top: 330px;
	left: -238px;
}

#board1 figcaption:nth-of-type(6):before
{
	width: 150px;
	top	: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
}

/* Personal */

#board2 figcaption:nth-of-type(1)
{
	top: 75px;
	left: -218px;
}

#board2 figcaption:nth-of-type(1):before
{
	top: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
	width: 175px;
}

#board2 figcaption:nth-of-type(2)
{
	top: 90px;
	left: 500px;
}

#board2 figcaption:nth-of-type(2):before
{
	top: 24px;
	left: -50px;
	border-top: 0;
	border-left: 0;
	width: 150px;
	height: 80px;
}

#board2 figcaption:nth-of-type(3)
{
	top: 480px;
	left: 560px;
}

#board2 figcaption:nth-of-type(3):before
{
	width: 170px;
	bottom: 24px;
	left: -80px;
	border-bottom: 0;
	border-left: 0;
}

#board2 figcaption:nth-of-type(4)
{
	top: 400px;
	left: -225px;
}

#board2 figcaption:nth-of-type(4):before
{
	width: 200px;
	top: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
}

#board2 figcaption:nth-of-type(5)
{
	top: -100px;
	left: 350px;
}

#board2 figcaption:nth-of-type(5):before
{
	top: 12px;
	left: -90px;
	border-bottom: 0;
	border-right: 0;
	height: 100px;
}

/* Clinic */

#board3 figcaption:nth-of-type(1)
{
	top: -50px;
	left: -195px;
}

#board3 figcaption:nth-of-type(1):before
{
	top: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
}

#board3 figcaption:nth-of-type(2)
{
	top: -100px;
	left: 550px;
}

#board3 figcaption:nth-of-type(2):before
{
	top: 12px;
	left: -90px;
	border-bottom: 0;
	border-right: 0;
	height: 100px;
}

#board3 figcaption:nth-of-type(3)
{
	top: 220px;
	left: 520px;
}

#board3 figcaption:nth-of-type(3):before
{
	top: 24px;
	left: 0;
	border-top: 0;
	border-left: 0;
}

#board3 figcaption:nth-of-type(4)
{
	top: 508px;
	left: -195px;
}

#board3 figcaption:nth-of-type(4):before
{
	top: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
}

/* Edit */

#board4 figcaption:nth-of-type(1)
{
	top: 20px;
	left: 550px;
}

#board4 figcaption:nth-of-type(1):before
{
	top: 24px;
	left: -100px;
	border-top: 0;
	border-left: 0;
	width: 150px;
	height: 70px;
}

#board4 figcaption:nth-of-type(2)
{
	top: 540px;
	left: -268px;
}

#board4 figcaption:nth-of-type(2):before
{
	top: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
	width: 175px;
}

#board4 figcaption:nth-of-type(4)
{
	top: 484px;
	left: 594px;
}

#board4 figcaption:nth-of-type(4):before
{
	width: 170px;
	top: 24px;
	left: -80px;
	border-top: 0;
	border-left: 0;
}

#board4 figcaption:nth-of-type(3)
{
	top: 175px;
	left: -225px;
}

#board4 figcaption:nth-of-type(3):before
{
	height: 130px;
	width: 130px;
	top: 24px;
	left: 100px;
	border-top: 0;
	border-right: 0;
}

#board4 figcaption:nth-of-type(5)
{
	top: -70px;
	left: 90px;
}

#board4 figcaption:nth-of-type(5):before
{
	top: 10px;
	left: -60px;
	border-bottom: 0;
	border-right: 0;
	height: 50px;
}

section#demo { display: none; }
	
/* ----- NEW -------------------- */

section#new li
{
	font-size: 18px;
	line-height: 24px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 58px 58px;
	min-height: 58px;
	padding-top: 5px;
	padding-left: 78px;
	margin: 20px auto;
	letter-spacing: 0px;
}

section#new li#new-ui
{ 
	background-image: url("img/web-sb-design.svg");
}

section#new li#new-boards
{
	background-image: url("img/web-sb-multiple-boards.svg");
}

section#new li#new-panels
{
	background-image: url("img/web-sb-new2.svg");
}

section#new li#new-sharing
{
	background-image: url("img/web-sb-sharing.svg");
}

section#new li#new-wallpapers
{
	background-image: url("img/web-sb-wallpaper.svg");
}

section#new li#new-hdout
{
	background-image: url("img/web-sb-hd.svg");
}

section#new li#new-free
{
	background-image: url("img/web-sb-free.svg");
}

section#new li h3
{
	font-size: 18px;
	line-height: 24px;
	display: inline-block;
	font-family: "Chrono Medium";
}

/* ----- ABOUT -------------------- */

section#about p
{
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 24px;
	display: inline-block;
}

strong#panel-clock,
strong#panel-weather,
strong#panel-calendar,
strong#panel-mail,
strong#panel-twitter,
strong#panel-feeds,
strong#panel-graph,
strong#panel-table,
strong#panel-photos,
strong#panel-countdown,
strong#panel-text,
strong#panel-diy
{
	padding: 0 6px 0 28px;
	font-family: "Chrono Medium";
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: 20px 20px;
}

strong#panel-clock { background-image: url("img/web-sb-panel-clock.svg"); }
strong#panel-weather { background-image: url("img/web-sb-panel-weather.svg"); }
strong#panel-calendar { background-image: url("img/web-sb-panel-calendar.svg"); }
strong#panel-mail { background-image: url("img/web-sb-panel-mail.svg"); }
strong#panel-twitter { background-image: url("img/web-sb-panel-twitter.svg"); }
strong#panel-feeds { background-image: url("img/web-sb-panel-feeds.svg"); }
strong#panel-graph { background-image: url("img/web-sb-panel-graph.svg"); }
strong#panel-table { background-image: url("img/web-sb-panel-table.svg"); }
strong#panel-photos { background-image: url("img/web-sb-panel-photo.svg"); }
strong#panel-countdown { background-image: url("img/web-sb-panel-countdown.svg"); }
strong#panel-text { background-image: url("img/web-sb-panel-text.svg"); }
strong#panel-diy { background-image: url("img/web-sb-panel-diy.svg"); }

/* ----- SUMMARY -------------------- */

section#summary
{
	margin: 40px auto;
}

section#summary h2
{
	margin-bottom: 0;
}

section#summary h2 a
{
	text-decoration: underline;
}

section#summary p
{
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-family: "Chrono Regular";
}

/* ----- HELP -------------------- */

section#help h2
{
	margin: 40px 0 -20px 0;
}

section#help p
{
	font-size: 20px;
	line-height: 24px;
	margin: 20px 0;
	font-family: "Chrono Regular";
}

section#help ul
{
	position: relative;
}

section#help ul li
{
	display: block;
	height: 50px;
	background-color: #3c464f;
	margin: 20px auto;
	border-radius: 4px;
	font-family: "Chrono Light";
	padding: 10px 0px 10px 60px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

section#help ul li.active div.collapsed,
section#help ul li div.expanded
{ 
	display: none;
}

section#help ul li div.collapsed,
section#help ul li.active div.expanded
{
	display: block;
	white-space: nowrap;
	overflow: hidden;
}

section#help ul li#twitter
{
	background-color: #3c464f;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, left top, right top, from(#48b9cf), to(#3c464f));
	
	background: -webkit-linear-gradient(left, #48b9cf 52px, #3c464f 52px);
	background: -moz-linear-gradient(left, #48b9cf 52px, #3c464f 52px);
	background: -ms-linear-gradient(left, #48b9cf 52px, #3c464f 52px);
	background: -o-linear-gradient(left, #48b9cf 52px, #3c464f 52px);
	background: linear-gradient(left, #48b9cf 52px, #3c464f 52px);
}

section#help ul li#library
{
	background-color: #3c464f;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, left top, right top, from(#fdca61), to(#3c464f));
	
	background: -webkit-linear-gradient(left, #fdca61 52px, #3c464f 52px);
	background: -moz-linear-gradient(left, #fdca61 52px, #3c464f 52px);
	background: -ms-linear-gradient(left, #fdca61 52px, #3c464f 52px);
	background: -o-linear-gradient(left, #fdca61 52px, #3c464f 52px);
	background: linear-gradient(left, #fdca61 52px, #3c464f 52px);
}

section#help ul li#email
{	
	background-color: #3c464f;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 52px 0, 52px 0, from(#d82931), to(#3c464f));
	
	background: -webkit-linear-gradient(left, #d82931 52px, #3c464f 52px);
	background: -moz-linear-gradient(left, #d82931 52px, #3c464f 52px);
	background: -ms-linear-gradient(left, #d82931 52px, #3c464f 52px);
	background: -o-linear-gradient(left, #d82931 52px, #3c464f 52px);
	background: linear-gradient(left, #d82931 52px, #3c464f 52px);
}

section#help ul li h3
{
	font-size: 30px;
	line-height: 30px;
	letter-spacing: -1px;
}

section#help ul li p
{
	font-size: 14px;
	line-height: 16px;
	margin: 0;
}

section#help ul li.active p
{
	font-size: 16px;
	line-height: 50px;
	text-align: center;
}
	
section#help ul li.active p a
{
	text-decoration: underline;
}

/* ----- SCREENSHOTS ----------------------- */

div.status-board-screenshots
{
	display: block;
	margin: 0 auto;
	line-height: 0;
	text-align: left;
}

figure[itemprop="associatedMedia"]
{
	display: inline-block;
	margin: 0 1% 0 0;
	width: 17%;
}


img[itemprop="thumbnail"]
{
	width: 100%;
}

figcaption[itemprop="caption description"]
{
	display: none;
}



/* ----- FAQ ----------------------- */

section#faq
{
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-ms-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-timing-function: ease-in;
	-o-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
}

section#faq.hidden
{
	opacity: 0;
	position: absolute;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-ms-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform: scaleY(0);
}

section#faq h2
{
	color: #f07e2b;
	
}

section#faq h3
{
	font-family: "Chrono Medium";
	color: #F98E4C;
	margin: 20px 0 10px 0;
}

section#faq p,
section#faq ul,
section#faq ol

{
	font-family: "Chrono Regular";
	margin: 0 20px 10px 20px;
}

section#faq li
{
	display: list-item;
	margin-left: 0px;
}

section#faq ul li
{
	list-style-type: disc;
}

section#faq ol li
{
	list-style-type: decimal;
}


section#faq em
{
	font-family: "Chrono Medium Italic";
}

section#faq.revealed
{
	position: static;
	opacity: 1;
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
}

/* ----- SOURCES LIST -------------------- */

#statusboard2-sources header div p
{
	font-size: 24px;
	line-height: 36px;
	margin: 0.5em auto;
	display: inline-block;
}

section#sources-list article
{
	min-height: 95px;
	background: #ccc;
	color: #333;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
	padding: 25px 33px 20px 33px;
	margin-bottom: 30px;
}

#sources-list article a
{
	display: block;
	color: #0156bf;
	margin-top: 10px;
	padding-left: 130px;

}

#sources-list article p
{
	font-size: 16px;
	line-height: 24px;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	padding-left: 130px;
	vertical-align: center;
}

#source-id-stathat p
{
	background-image: url(img/source-logo-stathat.png);
	-webkit-background-size: 100px 62px;
	-moz-background-size: 100px 62px;
	-o-background-size: 100px 62px;
	background-size: 100px 62px;
	background-position: 0 5px !important;
	min-height: 87px;

}

#source-id-hockey p
{
	background-image: url(img/source-logo-hockey.png);
	-webkit-background-size: 100px 68px;
	-moz-background-size: 100px 68px;
	-o-background-size: 100px 68px;
	background-size: 100px 68px;
	background-position: 0px 5px !important;
	min-height: 73px;
}

#source-id-appviz p
{
	background-image: url(img/source-logo-appviz.png);
	-webkit-background-size: 90px 84px;
	-moz-background-size:    90px 84px;
	-o-background-size:      90px 84px;
	background-size:         90px 84px;
	background-position: 5px 0px !important;
	min-height: 84px;
}

#source-id-feedpress p
{
	background-image: url(img/source-logo-feedpress.png);
	-webkit-background-size: 100px 36px;
	-moz-background-size:    100px 36px;
	-o-background-size:      100px 36px;
	background-size:         100px 36px;
	background-position: 0px 15px !important;
	min-height: 56px;
}

#source-id-vigil p
{
	background-image: url(img/source-logo-vigil.png);
	-webkit-background-size: 77px 80px;
	-moz-background-size:    77px 80px;
	-o-background-size:      77px 80px;
	background-size:         77px 80px;
	background-position: 10px 10px !important;
	min-height: 90px;
}

#source-id-curio p
{
	background-image: url(img/source-logo-curio.png);
	-webkit-background-size: 80px 93px;
	-moz-background-size:    80px 93px;
	-o-background-size:      80px 93px;
	background-size:         80px 93px;
	background-position: 10px 0px !important;
	min-height: 93px;
}

#source-id-gosquared p
{
	background-image: url(img/source-logo-gosquared.png);
	-webkit-background-size: 75px 76px;
	-moz-background-size:    75px 76px;
	-o-background-size:      75px 76px;
	background-size:         75px 76px;
	background-position: 10px 10px !important;
	min-height: 86px;
}

#source-id-supermechanical p
{
	background-image: url(img/source-logo-supermechanical.png);
	-webkit-background-size: 100px 100px;
	-moz-background-size:    100px 100px;
	-o-background-size:      100px 100px;
	background-size:         100px 100px;
	background-position: 0px 0px !important;
	min-height: 100px;
}


/* ----- FOOTER -------------------- */

footer {
	text-align: center;
	font-size: 20px;
	line-height: 20px;
	padding: 10px 0;
	margin: 3em auto 1em auto !important;
	color: #959ea6;
	position: relative;
}

footer a {
	color: #959ea6;
	text-decoration: underline;
}						

/* ########################################### */
/*                                             */
/*                                             */
/*                                             */
/* ----- Wider than 643px -------------------- */
/*                                             */
/*                                             */
/*                                             */
/* ########################################### */

@media screen and (min-width: 643px)
{

	html 
	{ 
		padding: 0; 
	}
	
	/* ----- PAGE SET-UPS -------------------- */
	body
	{
		font-size: 18px;
		line-height: 32px;
		min-width: 580px;
		position: relative;
	}
	
	header,
	section#new,
	section#summary,
	section#about,
	section#screenshots,
	section#sources-list,
	section#help,
	section#faq,
	footer
	{
		width: 580px;
		margin: 20px auto;
		padding: 0;
	}
	
	/* ----- HEADER -------------------- */
	
	div#shopmark
	{
		margin: 0px 0 20px 0;
	}
	
	h1
	{
		font-size: 96px;
		line-height: 96px;
		letter-spacing: -6px;
	}
	
	header p
	{
		font-size: 34px;
		line-height: 45px;
	}
	
	/* ----- APP STORE BUTTON -------------------- */
	
	a.appstore_button
	{
		margin: 40px 0 20px 0;
		font-size: 26px;
	}

	/* ----- HEADINGS -------------------- */
	
	h2
	{
		font-size: 70px;
		line-height: 70px;
		letter-spacing: -5px;
	}

	/* ----- DEMO -------------------- */

	section#demo
	{
		display: block;
		background-size: 2846px 542px;
		height: 542px;
	}

	div#ipad
	{
		-webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
		-moz-transform: translateX(-50%) translateY(-50%) scale(0.75);
		-ms-transform: translateX(-50%) translateY(-50%) scale(0.75);
		-o-transform: translateX(-50%) translateY(-50%) scale(0.75);
		transform: translateX(-50%) translateY(-50%) scale(0.75);
	}	
		
	/* ----- NEW -------------------- */
	
	section#new li
	{
		font-size: 26px;
		line-height: 32px;
		padding-top: 0;
	}
	
	section#new li h3
	{
		font-size: 26px;
		line-height: 32px;
	}
	
	/* ----- ABOUT -------------------- */
							
	section#about div
	{
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-o-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 25px;
		-moz-column-gap: 25px;
		-o-column-gap: 25px;
		column-gap: 25px;
	}
	
	section#about p
	{
		line-height: 32px;
	}
	
	section#about h2
	{
		margin: 40px 0 0 0;
	}

	/* ----- SUMMARY -------------------- */

	section#summary h2
	{
		margin-top: 40px;
	}

	section#summary p
	{
		font-size: 20px;
		line-height: 32px;
	}
	
	/* ----- SCREENSHOTS -------------------- */
	
	section#screenshots { display: none; }

	
	/* ----- HELP -------------------- */
	
	section#help ul li.active p
	{
		font-size: 24px;
		line-height: 50px;
	}
	
	/* ----- SOURCES -------------------- */
	
}

/* ########################################### */
/*                                             */
/*                                             */
/*                                             */
/* ----- Wider than 867px -------------------- */
/*                                             */
/*                                             */
/*                                             */
/* ########################################### */

@media screen and (min-width: 867px)
{

	/* ----- PAGE SET-UPS -------------------- */
	body
	{
		font-size: 18px;
		line-height: 32px;
		position: relative;
		min-width: 854px;
	}

	header,
	section#new,
	section#summary,
	section#about,
	section#screenshots,
	section#help,
	section#faq,
	footer
	{
		width: 854px;
		margin: 20px auto;
	}
	
	/* ----- HEADER -------------------- */

	div#shopmark
	{
		margin: 0 0 20px 0;
		font-family: "Chrono Regular";
	}
	
	h1
	{
		font-size: 130px;
		line-height: 130px;
		font-family: "Chrono Light Italic";
		letter-spacing: -11px;
	}
	
	header p
	{
		font-size: 34px;
		line-height: 45px;
	}
	
	/* ----- HEADINGS -------------------- */
	
	h2
	{
		font-size: 70px;
		line-height: 70px;
		letter-spacing: -5px;
		margin: 20px 0;
	}
	
	/* ----- DEMO -------------------- */
	
	section#demo
	{
/* 		background-size: 3795px 723px; */
		height: 723px;
	}
	
	div#ipad
	{
		-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
		-moz-transform: translateX(-50%) translateY(-50%) scale(1);
		-ms-transform: translateX(-50%) translateY(-50%) scale(1);
		-o-transform: translateX(-50%) translateY(-50%) scale(1);
		transform: translateX(-50%) translateY(-50%) scale(1);
	}	
	
	/* ----- NEW -------------------- */
	
	section#new
	{
		position: relative;
	}

	section#new li
	{
		font-size: 26px;
		line-height: 32px;
		padding-top: 14px;
	}

	/* ----- SUMMARY -------------------- */

	section#summary h2
	{
		margin-top: 20px;
	}
	
	/* ----- HELP SECTION -------------------- */
	
	section#help ul
	{
		margin: 40px 0;
		height: 70px;
		position: relative;
	}
		
	section#help ul li
	{
		position: absolute;	
		display: block;
		background-color: #3c464f;
		width: 218px;
		border-radius: 4px;
		font-family: "Chrono Light";
		padding: 10px 0px 10px 60px;
		background-position: 0 50%;
		background-repeat: no-repeat;
		cursor: pointer;
		margin: 0;
	}
	
	section#help ul li.active div.collapsed,
	section#help ul li div.expanded
	{ 
		opacity: 0;
		visibility: hidden;
	}
	
	section#help ul li div.collapsed,
	section#help ul li.active div.expanded
	{
		opacity: 1;
		visibility: visible;
	}
	
	section#help ul li#twitter
	{
		left: 0;
	}
	
	section#help ul li#library
	{
		left: 288px;
	}
	
	section#help ul li#email
	{
		left: 576px;
	}
	
	section#help ul li.active
	{
		position: absolute;
		z-index: 10;	
		top: 0;
		left: 0 !important;
		right: 0;
		bottom: 0;
		width: 794px;
	}
		
	section#help ul li h3
	{
		font-size: 30px;
		line-height: 30px;
		letter-spacing: -1px;
	
	}
	
	section#help ul li p
	{
		font-size: 14px;
		line-height: 16px;
		margin: 0;
	}
}