/* Defaults */

body { width: 100%}

#title_window { position: fixed; height: 100%; width: 100%; background: #ffffff; z-index: 1000; display: none;}
	#title_window img { position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -71px}

#wrapper { width: 90%; max-width: 1000px; margin: 0 auto; padding-top: 20px;}
#mobile_nav { display:none; position: fixed; z-index: 10}
#mobile_nav .close {display: none}
#mobile_nav a, #mobile_nav a:hover {color: #ffffff;}
header { float: left; width: 24%; position: fixed;}
	.logo { width: 100%; margin: 0 auto; text-align: center}
	.logo img{ width: 100%; height: auto; max-width: 137px; margin: 0 auto 10px}
	nav { width: 100%; margin: 0 auto; max-width: 201px; text-align: center}
	.navigation { margin: 10px 0 30px}
	.navigation img { width: 100%; height: auto;}
	.navigation li { margin-bottom: 0; height: auto; line-height: normal;}
	.navigation li.line { line-height: 2px}
	.navigation a { color: #ffffff; padding: 5px 0; display: block; font-family: 'Source Sans Pro', sans-serif; font-weight: 400;}
	.navigation a:hover { color: #3eb873;}
	
	.social { width: 100%; max-width: 140px; margin: 0 auto 20px;}
	.social li{ float: left; width: 21%; margin: 0 2%; max-width: 35px; text-align: center;}
	.social img { width: 100%; max-width: 27px; height: auto; }
	header p { color: #ffffff; font-size: 12px; line-height: 18px; font-style: italic; width: 137px; margin: 0 auto; text-align: center;}

#content { float: right; width: 68%; padding-left: 4%; position: relative;}
	.post { width: 100%; margin-bottom: 20px}
		.title {background: #ffffff; width: 100%; padding: 10px 0; position: relative; font-family: 'Source Sans Pro', sans-serif;}
		.titlecurl { position: absolute; background: url(http://crispypixel.com/univision/images/title_curl.png) right bottom; width: 112px; height: 35px; bottom: 0; right: 0}
		
		.box3 {
			background: #8f1b69; /* Old browsers */
			background: -moz-linear-gradient(top,  #06863e 0%, #39ac6b 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#06863e), color-stop(100%,#39ac6b)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #06863e 0%, #39ac6b 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #06863e 0%, #39ac6b 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #06863e 0%, #39ac6b 100%); /* IE10+ */
			background: linear-gradient(top, #06863e 0%, #39ac6b 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06863e', endColorstr='#39ac6b',GradientType=0 ); /* IE6-9 */
		}
		
		.box2 {
			background: #8f1b69; /* Old browsers */
			background: -moz-linear-gradient(top,  #8f1b69 0%, #c03c95 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8f1b69), color-stop(100%,#c03c95)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #8f1b69 0%, #c03c95 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #8f1b69 0%, #c03c95 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #8f1b69 0%, #c03c95 100%); /* IE10+ */
			background: linear-gradient(top, #8f1b69 0%, #c03c95 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f1b69', endColorstr='#c03c95',GradientType=0 ); /* IE6-9 */
		}
		
		.box1 {
			background: #8f1b69; /* Old browsers */
			background: -moz-linear-gradient(top,  #004181 0%, #0054a6 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0054a6), color-stop(100%,#004181)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #004181 0%, #0054a6 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #004181 0%, #0054a6 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #004181 0%, #0054a6 100%); /* IE10+ */
			background: linear-gradient(top, #004181 0%, #0054a6 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004181', endColorstr='#0054a6',GradientType=0 ); /* IE6-9 */
		}
		
		.post_left { float: left; width: 10%}
		.post_right { float: right; width: 90%}
		
		.title h2 { color: #ffffff; font-size: 27px; line-height: 29px; font-weight: bold; margin-bottom: 5px; font-weight: 700; padding: 0 15px 5px;}
		.title h2 a:hover { color: #ffffff;}
		.titledate { font-size: 17px; font-weight: bold; color: #ffffff; font-weight: 700; padding: 0 15px}
		
		.posticon { height: 54px; width: 54px; margin: 0 15px 0 5px; overflow: hidden; position: relative;}
		.posticon img { width: 100%; max-width: 64px; position: absolute;}
			.post .chat img{top: 0;}
			.post .answer img{top:  0;}
			.post .photo img{top: -54px;}
			.post .video img{top: -108px;}
			.post .text img{top: -162px;}
			.post .link img{top: -216px;}
			.post .quote img{top: -270px;}
			.post .audio img{top: -324px;}
		
		.post .container { padding: 8px 8px 15px; background: #ffffff;}
		
		.postcontent { color: #292929; background: #ffffff; position: relative;}
		
		.sharelinks { top: 50%; position: relative; margin-top: -25px}
		
		.postshare {background: rgba(0, 0, 0, 0.6); position: absolute; display: none; height: 100%; width: 100%; text-align: center}
		.postshare a { margin: 0 5px}
		.postshare img {width: 40px !important; height: 40px !important}

		.postcontent h1, .postcontent h2, .postcontent h3, .postcontent h4, .postcontent h5, .postcontent h6, .linkpost a {font-family: "Trebuchet MS", Verdana, sans-serif; padding: 10px 0; margin: 0; font-weight: bold;}
			.postcontent h1, .linkpost a { font-size: 22px}
			.postcontent h2 { font-size: 20px}
			.postcontent h3 { font-size: 18px}
			.postcontent h4 { font-size: 16px}
			.postcontent h5 { font-size: 15px}
			.postcontent h6 { font-size: 14px}
			.linkpost a { display: block}
			
		.postcontent a { color: #3fb874; padding: 10px;}
		.postcontent p a { padding: 0;}
		.postcontent h1 a, .postcontent h2 a {padding: 0 10px; display: block;}
		.postcontent h1.title a {color: #ffffff;}
		.postcontent p, .source { padding: 10px 10px; font-size: 15px; line-height: 22px; font-family: "Trebuchet MS", Verdana, sans-serif; margin: 0; word-wrap: break-word;}
		.postcontent p iframe {width: 100%;}
		.postcontent p:last-child { margin: 0 0 15px 0}
		.postcontent img { width: 100%; height: auto}
		.postcontent ul, .postcontent ol {padding: 10px 10px;}
		.postcontent ol li {margin-bottom: 10px; list-style: decimal outside}
		.postcontent li { list-style: disc outside; margin-left: 35px}
		
		.chatpost li { margin: 0; list-style: none !important}
		.chatname {font-family: "Trebuchet MS", Verdana, sans-serif; font-weight: bold;}
		
		.postfooter { border-top: 1px solid #d8d8d8; padding: 15px; font-family: 'Source Sans Pro', sans-serif; position: relative; background: #ffffff;}
		.tags {padding: 8px 8px 8px 40px; background: url(http://crispypixel.com/univision/images/tags.jpg) left center no-repeat; float: left; }
		.postfooter a {font-weight: 400; color: #292929;}
		.postfooter a:hover { color: #3FB874}
		.postfooter li { float: left; padding: 0 10px 0 0; margin: 0 10px 0 0; border-right: 1px solid #292929; line-height: 14px}
		.postfooter li:last-child { border: none}
			.postnav {position: absolute; padding: 0 3px; background: #ffffff; top: -10px; left: 50%; margin-left: -16px}
			.postnav a { cursor: pointer;}
			
		a.sharebtn {background: url(http://crispypixel.com/univision/images/share.png) 5px center no-repeat #a8a8a8; height: 20px; padding: 5px 8px 5px 32px; font-weight: 700; color: #ffffff; float: right}
		a.sharebtn:hover { background-color: #3FB872; color: #ffffff !important}
		
		#pagination	{ width: 100%;; text-align: center; padding-bottom: 30px; display: none;}
		#pagination a {padding-right: 20px}
		#pagination a:last-child {padding-right: 0}
		#pagination a:hover {color: #3FB874}

		
/* MEDIA QUERIES */
	
@media only screen and (max-width: 780px), (max-device-width: 780px) {
		.posticon { width: 40px; height: 40px;}
			.post .chat img{top: 0;}
			.post .answer img{top:  0;}
			.post .photo img{top: -40px;}
			.post .video img{top: -80px;}
			.post .text img{top: -120px;}
			.post .link img{top: -160px;}
			.post .quote img{top: -200px;}
			.post .audio img{top: -240px;}
}

@media only screen and (max-width: 600px), (max-device-width: 600px) {
		.posticon { width: 30px; height: 30px;}
			.post .chat img{top: 0;}
			.post .answer img{top:  0;}
			.post .photo img{top: -30px;}
			.post .video img{top: -60px;}
			.post .text img{top: -90px;}
			.post .link img{top: -120px;}
			.post .quote img{top: -150px;}
			.post .audio img{top: -180px;}
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	#wrapper { width: 100%; overflow: hidden}
	#mobile_nav { display: block; width: 3%; padding-right: 2%;}
	header { width: 201px; left: -201px}
	#content { width: 93%; padding-right: 2%;}
}