/*
Theme Name: Radio PRI
Description: Portfolio Theme based on Distressed Leather Boots
Author: Sherrie Gonzalez
Author URI: http://www.sherriegonzalez.com
Tags: leather, fluevog, distressed, portfolio
*/

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";

body {
	background-color: #fff;
	font-family: 'Helvetica', Arial, san-serif;
	padding: 0;
	margin: auto;
	width: 100%;
	min-width: 330px;
	text-align: left; 
	height: 100%;
}

.main-container {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -250px; /* the bottom margin is the negative value of the footer's height */
}

.code-imac img {
	width: 100%;
}

#header{
	position: relative;
	width: 100%;
}

.top-bar {
	width: 100%;
	top: -10px;
	position: relative;
	height: 70px;
	background: #000;
	/* background: #444 url(images/grey_bg.png) repeat; */
	z-index: 2000;
	-moz-box-shadow: 0px 10px 15px -7px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 10px 15px -7px rgba(0,0,0,0.5);
	box-shadow: 0px 10px 15px -7px rgba(0,0,0,0.5);
}

.head-container, .content-container, .footer-container, .top_container {
	width: 980px;
	margin: 0 auto;
	position: relative;
}

.head-container {
	height: 350px;
}

#head_stitch {
	z-index: 1;
	background: url(images/stitch_b.png) repeat-x; 
	position: absolute;
	height: 70px;
	width: 100%;
	bottom: -50px;
}
#buckle{
	z-index: 10;
	background: url(images/buckle.png) no-repeat; 
	height: 500px;
	width: 200px;
	position: absolute;
	left: 0;
	top: -60px;
}
#blurb{
	position: absolute;
	top: 100px;
	left: 200px;
	width: 600px;
	color: #fff;
}
#sidebar{
	display: none;
}
#access {
	z-index: 10;
	/* font: 26px/2em 'Satisfy', cursive; */
	font: 400 18px/2em 'Helvetica', Arial, san-serif;
	position: absolute;
	top: 10px;
	right: 0;
	text-decoration: none;
	line-height: 3;
	display: block;
}
	#access a {
		color: #ccc;
		margin: 0 10px 0 10px;
	}
	#access a:visited {
		color: #ccc;
		text-decoration: none; 
	}

	#access a:hover {
		color: #fff; 
		text-decoration: none; 
	}
	#access ul li {
		margin-right: 10px;
		float: left;
	}

		#access ul li a {
			color: #ccc;
			text-decoration: none;
		}

		#access ul li a:active {
			text-decoration: none; 
			color: #fd53ff;
		}

		#access ul li.current_page_item a {
			color: #fd53ff;
			text-decoration: none; 
		}

.social {
	display: block;
}
.icon {
	width: 100px;
	height: 100px;
	position: absolute;
}
.icon:hover {
	margin-top: -2px;
}
	#twit_but {
		background: url(images/twit_button.png) no-repeat; 
		top: 30px;
		right: 100px;
	}
	#fb_but {
		background: url(images/fb_button.png) no-repeat; 
		top: 110px;
		right: 0;
	}
	#ln_but {
		background: url(images/ln_button.png) no-repeat; 
		top: 210px;
		right: 70px;
	}

#content{
	/* background: url(images/wood_dark.jpg) repeat; */
	position: relative;
	width: 100%;
	padding: 50px 0;
	min-height: 200px;
	max-height: 100%;
	text-align: left;
}

.intro {
	width: 60%;
	float: left;
}
.code-imac {
	float: left;
	width: 40%;
}
#about {
	position: relative;
	float: left;
	max-width: 450px;
	margin: 0 80px 0 130px;
}

#thumbnails {
	width: 900px;
	padding: 50px 0;
	margin: 0 10px 0 0;
}
	#thumbnails h2 {
		display: none;
	}
#gallery a img {
	height: 145px;
	width: 145px;
	position: relative;
	float: left;
	margin: 20px 20px 20px 0;
	background: #000;
	padding: 15px;
	box-shadow: 3px 5px 15px #333;
	-webkit-box-shadow: 3px 5px 15px #333;
	-moz-box-shadow: 3px 5px 15px #333;
}
#gallery a img:hover {
	background: #fd53ff;
}
#me {
	background: #000;
	width: 200px;
	height: 200px;
	float: left;
	padding: 15px;
	position: relative;
	margin: 70px 0 0 10px;
	box-shadow: 3px 5px 15px #333;
	-webkit-box-shadow: 3px 5px 15px #333;
	-moz-box-shadow: 3px 5px 15px #333;
	/* -webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg); */
}

#web {
	background: url(images/pol_bg.png) repeat;
	height: 250px;
	width: 250px;
	padding: 10px 10px 50px 10px;
	border: 1px solid #fff;
	box-shadow: 3px 5px 15px #333;
	-webkit-box-shadow: 3px 5px 15px #333;
	-moz-box-shadow: 3px 5px 15px #333;
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	margin: 0 auto;
}

#print {
	background: url(images/pol_bg.png) repeat; 
	height: 250px;
	width: 250px;
	padding: 10px 10px 50px 10px;
	border: 1px solid #fff;
	box-shadow: 3px 5px 15px #333;
	-webkit-box-shadow: 3px 5px 15px #333;
	-moz-box-shadow: 3px 5px 15px #333;
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	margin: 0 auto;
}
#brand {
	background: url(images/pol_bg.png) repeat;
	height: 250px;
	width: 250px;
	padding: 10px 10px 50px 10px;
	border: 1px solid #fff;
	-webkit-box-shadow: 3px 5px 15px #333;
	box-shadow: 3px 5px 15px #333;
	-moz-box-shadow: 3px 5px 15px #333;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	margin: 0 auto;
}
#ui {
	background: url(images/pol_bg.png) repeat;
	height: 250px;
	width: 250px;
	padding: 10px 10px 50px 10px;
	border: 1px solid #fff;
	box-shadow: 3px 5px 15px #333;
	-webkit-box-shadow: 3px 5px 15px #333;
	-moz-box-shadow: 3px 5px 15px #333;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	margin: 0 auto;
}
.photo-container {
	width: 25%;
	float: left;
	position: relative;
	top: 20px;
}
.photo-container:hover {
	margin-top: -5px;
}
.footer-container {
	padding-top: 30px;
}
ul.xoxo li.widget-container {
	float: left;
	width: 20%;
	margin-right: 30px;
	padding-left: 10px;
	border-right: 1px dotted #aaa;
	min-height: 200px;
}
ul.xoxo:last-of-type li.widget-container {
	border-right: 0;
	margin-right: 0;
	width: 24%;
}
#foot_text {
	position: relative;
	clear: both;
	padding: 20px 0 40px 0;
	width: 100%;
}
	#foot_text p {
		font-size: 14px;
		text-align: center;
		color: #ccc;
	}
		#foot_text p a {
			text-decoration: none;
			color: #ccc;
		}
#footer {
	font-size: 15px;
	color: #ccc;
	background: #000;
	/* background: #444 url(images/grey_bg.png) repeat; */
	-moz-box-shadow: 0px -10px 15px -7px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px -10px 15px -7px rgba(0,0,0,0.5);
	box-shadow: 0px -10px 15px -7px rgba(0,0,0,0.5);
	width: 100%;
	min-height: 250px;
	overflow: auto;
	position: relative;
}
	#footer h2 {
		color: #000;
		text-shadow: 0px 1.5px 3px #666;
	}
		#footer ul li {
		line-height: 2em;
	}
		#footer ul li a {
			text-decoration: none;
			color: #ccc;
		}
		#footer ul li a:hover {
			color: #fff;
		}
.clear {
	clear: both;
	margin: 0;
}

.website {
	width: 100%;
	clear: both;
	display: table;
}

.collection {
	clear: both;
	margin: 40px auto;
}

.web_img {
	width: 50%;
	display: table-cell;
}

.web_img img {
	width: 100%;
}

/* gallery styles */

#gallery .soliloquy-container {
	margin-bottom: 20px;
	float: left;
}

#gallery .soliloquy-container .soliloquy .soliloquy-slides img {
	margin: 0 auto;
}

#gallery .soliloquy-container .soliloquy-control-nav {
	text-align: center;
	top: 10px;
	position: relative;
}

#gallery .spacer {
	height: 40px;
	clear: both;
}

.gallery_text {
	width: 45%;
	display: table-cell;
	vertical-align: middle;
}

@media only screen and (max-width: 960px) {
	.head-container, .content-container, .top_container, #thumbnails {
		width: 100%;
	}
	.head-container {
		height: auto;
		min-height: 0;
		padding: 10px 0;
	}
	.photo-container {
		width: 50%;
		top: 30px;
	}
	.photo-container:hover {
		margin-top: 0;
	}
	#content {
		padding: 10px 0 80px 0;
	}
	.top-bar {
		height: auto;
		padding: 10px 0;
	}
	.top-bar h1.menu-toggle {
		display: block;
		top: -10px;
	}
	#access {
		display: none;
		width: 85%;
		margin: 0 auto;
		clear: both;
		position: relative;
		padding-bottom: 30px;
	}
	#access ul li {
		margin-right: 20px;
		border-bottom: 1px dotted #aaa;
		width: 46%;
	}
	#blurb{
		display: none;
	}

	#buckle {
		display: none;
	}
	.intro {
		width: 54%;
		float: left;
		margin-left: 40px;
	}
	.footer-container {
		width: 70%;
	}
	ul.xoxo li.widget-container, ul.xoxo:last-of-type li.widget-container {
		width: 43%;
		padding-left: 0;
		border-right: 0;
	}
	#about {
		margin: 20px 50px;
		max-width: none;
		float: none;
	}
	#me {
		margin: 40px;
	}
	.social {
		margin: 10px auto;
		width: 300px;
	}
	.icon {
		position: relative;
		float: left;
	}
		#twit_but {
			top: -10px;
			right: 15px;
		}
		#fb_but {
			top: 5px;
			right: 10px;
		}
		#ln_but {
			top: -15px;
			right: 0;
		}
	#gallery {
		margin: 0 auto;
		width: 90%;
	}
	#thumbnails {
		padding: 10px 0;
	}
	#gallery .soliloquy-container {
		float: none;
		clear: both;
		margin: 0 auto;
	}
	#gallery .soliloquy-container .soliloquy-control-nav {
		top: 10px;
	}
	.gallery_text {
		width: 90%;
		margin: 10px auto 20px auto;
		float: none;
		display: block;
	}
	.website {
		display: block;
		margin-bottom: 30px;
	}
	.breaker {
		border-bottom: 1px solid #000;
		-webkit-box-shadow: 0px 1px 2px #FFE4C4;
		-moz-box-shadow: 0px 1px 2px #FFE4C4;
		box-shadow: 0px 1px 2px #FFE4C4;
		width: 80%;
		margin: 30px auto;
	}
	.web_img {
		width: 70%;
		float: none;
		clear: both;
		margin: 0 auto;
		display: block;
	}

}

@media only screen and (max-width: 645px) {
	#content {
		padding: 10px 0 40px 0;
	}
	.head-container {
		min-height: 130px;
	}
	.photo-container {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	#ui, #brand, #web, #print {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
	}
	.footer-container {
		width: 70%;
	}
	#blurb{
		display: none;
	}
	#access {
		border-top: 1px dotted #aaa;
	}
	#access ul li {
		margin-right: 20px;
		clear: both;
		border-bottom: 1px dotted #aaa;
		width: 100%;
	}
	.intro, .code-imac {
		width: 90%;
		float: none;
		margin: 20px auto;
	}
	ul.xoxo li.widget-container, ul.xoxo:last-of-type li.widget-container {
		width: 100%;
		clear: both;
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom: 1px dotted #aaa;
		min-height: 0;
	}
	ul.xoxo:last-of-type li.widget-container {
		border-bottom: 0;
	}
	#about {
		margin: 0 30px 20px 30px;
		float: left;
	}
	#me {
		margin: 50px 0 0;
		left: 190px;
	}
}

@media only screen and (max-width: 600px) {
	#wpadminbar {
		position: fixed!important;
	}
}

@media only screen and (max-width: 550px) {
	#gallery {
		margin: 0 20px;
		width: 70%;
	}
	#gallery.slider {
		width: 90%;
	}
	.web_img {
		width: 95%;
	}
	h1#title {
		font: 800 30px 'Helvetica', Arial, san-serif
	}
	.intro p {
		font: 400 18px/1.7em 'Helvetica', Arial, san-serif;
	}
}

@media only screen and (max-width: 480px) {
	#me {
		left: 0;
		margin: 30px auto 10px;
		float: none;
	}
	#content {
		padding: 20px 0;
	}
	#gallery {
		margin: 0 auto;
		width: 90%;
	}
	#gallery.slider {
		width: 90%;
	}
	#gallery .website.mobile .soliloquy-container .soliloquy .soliloquy-slides>li:first-child img {
		margin-top: 60px;
	}
	#gallery a img {
		height: 100px;
		width: 100px;
	}
}