/* CSS Document */
* {
	padding:0px;
	margin:0px;
}

img { display:block; }

body {
	background-color:#48484a;
	font-family: proxima-nova,arial,sans-serif;
	font-size:16px;
	line-height:22px;
	color:#fff;
}

/* text */
h1 {
	font-size:26px;
	line-height:32px;
	font-weight:800;
	margin-bottom:25px;
}
h2 {
	font-size:24px;
	line-height:30px;
	font-weight:800;
	margin-bottom:15px;
}
h3 {
	font-size:19px;
	line-height:25px;
	font-weight:bold;
	margin-bottom:15px;
}
h4 {
	font-size:16px;
	font-weight:bold;
	line-height:22px;
	margin-bottom:15px;
}
a.more {
	font-size:17px;
	font-weight:bold;
	line-height:23px;
	text-decoration:none;
	color:#fff;
}
p { margin-bottom:15px; }


/* Header */
#header {
	background-color:#000;
	width:320px;
	margin:0 auto;
}

/* aux menu */
#aux-mid { display:none; }
#aux-large { display:none; }

/* mobile nav */
#nav-small, #footer-nav-small { margin-bottom:30px; }
#nav-small ul, #footer-nav-small ul { list-style:none; }
#nav-small li, #footer-nav-small li { 
	padding-top:3px;
	background:url(../images/small-nav-dotted.png) top left repeat-x;
}
#nav-small a, #footer-nav-small a {
	display:block;
	color:#fff;
	text-decoration:none;
	font-size:20px;
	line-height:20px; 
	padding:10px 0px 10px 20px;
	background:url(../images/white-menu-arrow.png) 300px center no-repeat;
}
#nav-mid { display:none; }
#nav-large { display:none; }

#content, #content-bottom {
	width:320px;
	margin:0 auto;
}

#left-content-right, #become-member, #shop, #tweets { display:none; }

/* ART BOX */
#art-box {
	background-color:#dbdcdc;
	color:#010101;
	margin-bottom:30px;
}
#art-box h2 {
	font-size:21px;
	line-height:27px;
	margin-bottom:0px;
} 
#art-box h3 {
	font-size:17px;
	line-height:23px;
	color:#f15b2a;
	font-weight:bold;
	margin-bottom:0px;
}
#art-box img { min-width:260px;margin:0 auto; }
#art-box a.more { color:#010101; }
div.art-box-content {
	padding:12px 30px;
	background:url(../images/art-border.png) bottom left repeat-x;
}
div.green-top {
	height:10px;
	background-color:#00a79c;
}

/* BANNER */
#banner { 
	overflow:hidden; 
	width:320px;
	margin-bottom:30px;
	background-color:#383839;
}
#banner img { max-width:320px; }
#banner h2 { 
	color:#00a79c;
	font-size:16px;
	line-height:22px;
	
}
#banner p { 
	font-size:14px;
	line-height:20px;
	margin-bottom:10px;
}
#banner a { font-size:14px; }
div.banner-text {
	padding:10px 35px 0px 35px;
}
#banner a.more { display:block; }
a.banner-left {
	display:block;
	text-decoration:none;
	width:8px;
	height:15px;
	background:url(../images/iphone-left.png) top left no-repeat;
	position:absolute;
	margin:75px 0px 0px -20px;	
}
a.banner-right {
	display:block;
	text-decoration:none;
	width:8px;
	height:15px;
	background:url(../images/iphone-right.png) top left no-repeat;	
	position:absolute;
	margin:75px 0px 0px 262px;	
}
div.banner-nav-wrapper { display:none; }

/* BLOG */
#blog, #main {
	background-color:#383839;
	margin-bottom:30px;
}
#blog h2 { color:#fedd10;margin-bottom:0px; }
#blog h3 { color:#fedd10;margin-bottom:0px; }
#blog h4 { margin-bottom:12px; }
div.blog-top { padding:15px 20px 0px 20px; }
div.blog-item { 
	padding:15px 20px; 
	background:url(../images/blog-border.png) bottom left repeat-x;
	overflow:hidden;
}
div.blog-left { display:none; }
div.feature div.blog-left { 
	display:block;
	margin:0px -20px 10px -20px; 
} 
div.feature div.blog-left img {
	margin:0;
	min-width:320px;
}
div.yellow-top {
	height:10px;
	background-color:#fedd10;
}

/* MAIN */
#main-content {
	padding:15px 20px; 
	overflow:hidden;
	font-size:16px;
	line-height:26px;
}

/* RED BOX */
div.red-box { 
	margin-bottom:30px;
	background-color:#383839;
}
div.red-box h2 { color:#f15b2a; }
div.red-box-content {
	padding:15px;
}
div.red-top { 
	height:10px;
	background-color:#f15b2a;
}

div.no-border { background:none; }

/* FOOTER */
#footer-nav, #credits, #footer-nav-right { display:none; }
#footer-nav-small { background-color:#000; }
#footer {
	width:320px;
	overflow:hidden;
	margin:0 auto;
}

/* STATIC BOXES */
#shop, #tweets { display:none; }
#bottom-top, #bottom-bottom { 
	margin-bottom:30px;
	width:320px;
}
#sponsor { 
	background-color:#dbdcdc;
	padding:15px 0px;
	text-align:center;
}
#sponsor img { display:inherit; }
#bottom-top h2, #bottom-bottom h2 {
	text-align:center;
	font-size:24px;
	line-height:30px;
	color:#2d2e2f;
}
div.sponsor-box{ 
	width:222px;
	margin:0 auto;
	margin-bottom:15px;
}
div.sponsor-item { text-align:center; }
div.sponsor-link a {
	color:#2d2e2f;
	font-size:12px;
	text-decoration:none;
}
a.sponsor-left, a.sponsor-right {
	display:block;
	position:absolute;
	width:20px;
	height:21px;
	text-decoration:none;
}
a.sponsor-left { 
	background:url(../images/sponsor-left.png) top left no-repeat;
	margin-top:40px;
}
a.sponsor-right { 
	background:url(../images/sponsor-right.png) top left no-repeat;
	margin-top:40px;
	margin-left:200px;
}
#ads { width:320px; }
#ads img { min-width:320px; }

@media screen and (min-width: 480px)
{
	#header, #content, #content-bottom { min-width:480px }
	#nav-small a, #footer-nav-small a { background:url(../images/white-menu-arrow.png) 460px center no-repeat; }
	#banner { width:480px; }
	#banner img { max-width:480px; }
	a.banner-left { margin:50px 0px 0px -20px; }
	a.banner-right { margin:50px 0px 0px 422px;	}
	#art-box img { min-width:420px; }
	div.feature div.blog-left img { min-width:480px}
	#footer {
		width:480px;
		overflow:hidden;
	}
	#sponsor { width:480px; }
	#ads { width:480px; }
	#ads img { margin:0 auto; }
}

@media screen and (min-width: 768px)
{
	body {
		font-size:14px;
		line-height:20px;
	}
	
	/* text */
	h1 {
		font-size:24px;
		line-height:25px;
	}
	h2 {
		font-size:17px;
		line-height:23px;
	}
	h3 {
		font-size:16px;
		line-height:22px;
	}
	h4 {
		font-size:14px;
		line-height:22px;
	}
	a.more {
		font-size:12px;
		line-height:18px;
	}
	p { margin-bottom:15px; }

	#nav-small, #submit { display:none; }
	#header { 
		width:768px;
		margin-top:26px;
	}
	#content { 
		width:700px;
		margin:0 auto; 
		overflow:hidden;
	}
	#content-bottom {
		width:768px;
		margin:0 auto; 
		overflow:hidden;
	}
	#left-content, #right-content { overflow:hidden; }
	#left-content-right, #become-member { display:block; }
	
	/* ART BOX */
	#art-box { 
		float:left;
		width:222px;
		margin-right:17px; 
		margin-bottom:20px;
	}
	#art-box img { min-width:inherit; }
	#art-box h2 { font-size:17px; }
	div.art-box-content { padding:12px 10px; }
	div.red-box { 
		width:222px; 
		margin-bottom:20px;
	}
	
	/* BLOG */
	#blog, #main { 
		margin-bottom:20px; 
		width:700px;
	}
	div.blog-top { padding-bottom:15px; }
	div.blog-item { 
		background:none; 
		padding-top:0px;
	}
	div.blog-left {
		display:inline-block;
		float:left;
		width:125px;
		margin-right:20px;
	}
	div.blog-left img { max-width:125px;margin-top:5px; }
	div.blog-right {
		width:515px;
		float:left;
	}
	div.feature div.blog-left {
		margin:0px;
		float:left;
		width:285px;
		margin-right:20px;
	}
	div.feature div.blog-left img { min-width:285px;max-width:285px;margin-top:5px; }
	div.feature div.blog-right { width:355px; }
	
	/* MEMBER */
	#become-member { float:left; }
	#left-content-right { float:right; }
	
	
	/* BANNER */
	#banner { 
		width:700px;
		margin-bottom:20px;
	}
	#banner img { max-width:700px; }
	#banner h2 { 
		font-size:24px;
		line-height:30px;
		margin-bottom:5px;
	}
	div.banner { position:relative; }
	div.banner-text {
		padding:5px 20px 0px 20px;
		height:90px;
		background-color: rgba(0,0,0,0.8);
		position:relative;
		margin-top:-95px;
	}
	#banner a.more { display:inline; }
	a.banner-left { 
		margin:-100px 0px 0px 0px;
		background:url(../images/ipad-left.png) top left no-repeat;
		width:32px;
		height:32px; 
	}
	a.banner-right { 
		margin:-100px 0px 0px 628px;
		background:url(../images/ipad-right.png) top left no-repeat;
		width:32px;
		height:32px; 	
	}
	
	/* nav-mid */
	#nav-mid {
		display:block;
		overflow:hidden;
		padding-left:40px;
		padding-bottom:20px;
		margin-bottom:12px;
	}
	#nav-mid ul { list-style:none; }
	#nav-mid li { float:left; }
	#nav-mid a {
		border-radius: 15px;
		display:block;
		background-color:#49494b;
		color:#fff;
		font-size:16px;
		line-height:22px;
		font-weight:bold;
		padding:0px 16px;
		height:22px;
		text-decoration:none;
		margin-right:20px;
	}
	
	/* FOOTER */
	#footer-nav-small { display:none; }
	#footer {
		width:768px;
		background-color:#b2b6b6;
	}
	#footer-nav {
		display:block;
		overflow:hidden;
	}
	#footer-nav-left { 
		overflow:hidden;
		width:548px;
		margin:0 auto;
		padding:10px 0px;
	}
	div.footer-nav-column {
		width:137px;
		float:left;
		font-size:10px;
		line-height:20px;
	}
	div.column-long { width:165px; }
	div.column-short { width:109px; }
	#footer-nav ul { list-style:none;margin-bottom:10px; }
	#footer-nav a {
		color:#2d2e2f;
		text-decoration:none;
	}
	#credits {
		display:block;
		width:708px;
		margin:0 auto;
		height:40px;
		overflow:hidden;
		padding:0px 30px;
		color:#fff;
		font-size:10px;
		padding-top:10px;
	}
	#credits a {
		text-decoration:none;
		color:#fff;
	}
	#credits-left { float:left; } 
	#credits-right { float:right; }
	
	/* STATIC BOXES */
	#tweets, #shop, #ads, #sponsor { 
		display:block; 
		width:384px;
		height:260px;
		float:left;
		padding:0px;
		text-align: left;
	}
	#shop, #ads, #sponsor { padding-top:30px;height:230px; }
	#ads img { min-width:inherit;margin:0; }
	#ads, #shop { padding-left:50px; width:334px; }
	#sponsor, #tweets { padding-left:110px;width:274px; }
	#bottom-top, #bottom-bottom {
		overflow:hidden;
		width:768px;
		margin-bottom:0px;
		background-color: #DBDCDC;
	}
	#bottom-top { background:url(../images/sponsor-hori.jpg) bottom left repeat-x #DBDCDC; }
	#sponsor, #tweets { background:url(../images/sponsor-vert.jpg) top right repeat-y; }
	
	div.sponsor-box { margin:0 0 15px 0; }
	#bottom-top h2, #bottom-bottom h2 {
		font-size:17px;
		text-align:left;
	}
	#tweets { padding-top:20px;height:240px; }
	#tweets h2 {
		background:url(../images/tweet.png) top left no-repeat;
		height:41px;
		line-height:41px;
		padding-left:70px;
	}
}

@media screen and (min-width: 1020px)
{
	#get-updates, #nav-mid { display:none; }
	#header { width:1020px; }
	#content { width:942px; }
	#content-bottom { width:1020px; }
	#left-content {
		float:left;
		width:222px;
	}
	#right-content {
		float:right;
		width:222px;
	}
	#blog { float:right; }
	#main { float:left; }
	#banner { float:right; }
	
	/* menu */
	#nav-large {
		display:block;
		overflow:hidden;
		padding-bottom:20px;
		margin-bottom:12px;
		padding-left:15px;
	}
	#nav-large ul { list-style:none; }
	#nav-large li { float:left; }
	#nav-large a {
		display:block;
		color:#fff;
		font-size:16px;
		line-height:16px;
		padding:0px 28px 0px 27px;
		text-decoration:none;
		background:url(../images/menu-divide.jpg) right center no-repeat;
	}
	
	#nav-large a.last {
		margin-right:0px;
		padding-right:0px;
		background-image:none
	}
	
	a.banner-left  { display:none; }
	a.banner-right { display:none; }
	
	/* BANNER */
	div.banner-nav-wrapper {
		display:block;
		width:690px;
		padding-right:10px;
		margin-top:10px;
		position:absolute;
		overflow:hidden;
		z-index:100;
	}
	div.banner-nav { 
		display:inline-block;
		background-color: rgba(0,0,0,0.8);
		border-radius: 15px;
		overflow:hidden;
		float:right;
		height:20px;
	}
	div.banner-nav ul { list-style:none; }
	div.banner-nav li { float:left; }
	#banner div.banner-nav a {
		font-size:12px;
		line-height:20px;
		color:#fff;
		text-decoration:none;
		padding:0px 9px 0px 10px;
		background:url(../images/banner-border.png) right center no-repeat;
	}
	#banner div.banner-nav a:hover { color:#00a69c; }
	
	/* FOOTER */
	#footer { width:1020px;padding-top:10px; }
	#footer-nav-left { 
		float:left;
		width:580px;
		padding:10px 40px 10px 40px;
		margin:0;
		background:url(../images/footer-vert.jpg) right 100px repeat-y;
	}
	div.footer-nav-column { width:145px; }
	div.column-long { width:175px; }
	div.column-short { width:115px; }
	#footer-nav-right {
		display:block;
		float:left;
		width:320px;
		padding:10px 20px 10px 20px;
		overflow:hidden;
	}
	#credits { width:960px; }
	
	/* STATIC */
	#bottom-top, #bottom-bottom {
		width:510px;
		float:left;
		background-image:none;
	}
	#sponsor {
		width:240px;
		padding-top:30px;
		padding-left:30px;
		height:225px;
		background:url(../images/sponsor-vert.jpg) top right repeat-y;
	}
	#shop {
		width:224px;
		padding-top:30px;
		height:225px;
		background:url(../images/sponsor-vert.jpg) top right repeat-y;
		padding-left:8px;
		padding-right:8px;
	}
	#tweets {
		width:224px;
		height:235px;
		background:url(../images/sponsor-vert.jpg) top right repeat-y;
		padding-left:8px;
		padding-right:8px;
	}
	#ads {
		padding-top:30px;
		width:260px;
		height:225px;
		padding-left:10px;
	}
	
}

/* text colors */
div.green h1, div.green h2 { color:#00a79c; }
div.yellow h1, div.yellow h2 { color:#fedd10; }
div.red h1, div.red h2 { color:#f15b2a; }