/* ---------------------------------------------------------------------- */
/*	Reset & Clearfix (http://meyerweb.com/eric/tools/css/reset/)
/* ---------------------------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}del{text-decoration:line-through}hr{background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0}mark{background-color:#ffffb3;font-style:italic}input,select{vertical-align:middle}ins{background-color:red;color:white;text-decoration:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}

/* Clearfix */
.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;height:0;line-height:0;visibility:hidden;width:0}* html .clearfix,:first-child+html .clearfix{zoom:1}

/* Some basic settings */
h1, h1 .button { font-size: 32px; }
h2, h2 .button { font-size: 28px; }
h3, h3 .button { font-size: 17px; }
h4, h4 .button { font-size: 15px; }
h5, h5 .button { font-size: 14px; }
h6, h6 .button { font-size: 12px; }
small { font-size: 10px; }
ol { list-style: decimal; }
ul { list-style: disc; }
li { margin-left: 30px; }
img { margin-bottom: 5px; }
dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,blockquote,article,p { margin-bottom: 20px; }

/* ---------------------------------------------------------------------- */
/*	Basic Elements & Classes
/* ---------------------------------------------------------------------- */
body {
	background:#ddd;
	color: #333;
	font: 11px/1.7 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

html, body, .wrapper { height: 100%; }
body > .wrapper { height: auto; min-height: 100%; }

::-moz-selection { background: #000000; color: #fff; text-shadow: none; }
::selection { background: #450753; color: #fff; text-shadow: none; }

h1, h2, h3, h4, h5, h6 {
	color: #474747;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-weight: 400;
	line-height: 1.25;
	margin-bottom: 15px;
}

h3, h4, h5 { font-weight: 600; }

a, a > * {
	color: #3a3a3a;
	text-decoration: none;
	-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	   -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	    -ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	     -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	        transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
}

a:hover, a > *:hover { color: #450753; }

.container {
	margin: 0 auto;
	position: relative;
	width: 960px;
}

/*-------------------------*/
/* Page Header
/*-------------------------*/
#header {
		height:70px;
		background:#000000;
}
	#header .title {
		float:left;
		margin:0;
		font-family: 'Lato';
		font-weight:400;
		line-height:70px;
		color:#FFF;
	}
		#header a { color:#FFF; }
	#header .title .android {
		color:#CCC;
		font-size:16px;
	}
	#header .play-link {
		float:right;
		padding:12px 0;
	}
/*-------------------------*/
/* Page Content
/*-------------------------*/
#content {
	padding:10px 0; 
	padding-bottom: 50px;
}
	#main {
		float:left;
		overflow:hidden;
		width:780px;
		margin-right:20px;
	}
	#main #picture {
		position:relative;
		text-align:center;
		border:1px solid #999;
		border-radius:15px;
	}	
		#main #picture img {
			display:block;
			max-width:100%;
			margin:0;
			border-radius:15px ;
		}
		#main #picture .transparent {
			width:100%;
			height: 40px;
			position:absolute;
			bottom:0;
			z-index:20;
			background-color:#000;
			border-radius:0 0 15px 15px ;
			filter: alpha(opacity=70);
			-moz-opacity:0.7;
			-khtml-opacity: 0.7;
			opacity: 0.7;
		}
		#main #picture .buttons {
			position:absolute;
			bottom:0;
			width:100%;
			z-index:100;
			height: 40px;
			margin:0;
			line-height:40px;
		}
			#main #picture .buttons li {
				display:inline-block;
				margin:0;
			}
			#main #picture .buttons a {
				display: block;
				width: 25px;
				height:25px;
				text-indent: -9999px;
			}
				#main #picture .buttons .like a {
					background:url(../img/icon-like.png) no-repeat 0 0;
					line-height:35px;
				}
				#main #picture .buttons .unlike a {
					background:url(../img/icon-unlike.png) no-repeat 0 0;
					line-height:27px;
				}
				#main #picture .buttons .like:hover a,
				#main #picture .buttons .unlike:hover a {
					background-position:0 -25px;
				}
			#main #picture .buttons .rating {
				margin:0 20px;
				color:#FFF;
				font-size:18px;
				font-weight:700;
			}
	.one-forth {
		float:left;
		width:220px;
		margin-right:20px;
		text-align:center;
		font-style:italic;
	}
	.one-forth.last { margin-right:0; }
	.three-forth {
		float: left;
		width:720px;
		margin-right:20px;
	}
	#aside {
		float:right;
		width:160px;
		min-height:600px;
		overflow:hidden;
	}
		#aside .widget {
			width:160px;
			height:600px;
			margin-bottom:10px; 
		} 
/*-------------------------*/
/* Page Footer
/*-------------------------*/
#footer {
	margin-top:-50px;
	height:50px;
	background:#FFF;
	line-height:50px;
}
	#footer ul {
		list-style:none;
	}
		#footer li {
			float:right;
			display:inline-block;
			margin:0 30px 0 0;
		}
		#footer .android {
			float:left;
		}

/* ---------------------------------------------------------------------- */
/*	Media Queries
/* ---------------------------------------------------------------------- */
@media only screen and (max-width: 959px) {
	body 
	.container {
		width:90%;
	}
	/*-------------------------*/
	/* Page Header
	/*-------------------------*/
	#header {
		height:160px;
	}
		#header .title {
			float:none;
			width:100%;
			text-align:center;
		}
		#header .title .android {
			display:block;
			line-height:16px;
		}
		#header .play-link {
			float:none;
			width:100%;
			text-align:center;
		}
			#header .play-link a { display:block; }
	/*-------------------------*/
	/* Page Content
	/*-------------------------*/
	#content { }
		#main {
			float:none;
			width:100%;
			margin-right:0;
		}
			#main #picture {
				width:99%;
				padding:0;
			}
	img {
		max-width:100%;
		}
	.one-forth, .three-forth {
		float:none;
		width:100%;
	}
		#aside {
			float:none;
			width:100%;
			min-width:234px;
			min-height:60px;
		}
			#aside .widget {
				margin:10px auto;
				width:234px;
				height:60px;
			}

	/*-------------------------*/
	/* Page Footer
	/*-------------------------*/
	#footer {
		text-align:center;
	}
	#footer li {
		float:none;
		width:100%;
	}
}