/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */


	body {
		background: #525252 url(../images/rock-bg.jpg) no-repeat top center;
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: underline;
		color: inherit;
	}

	header, #header {
		margin: 20px auto 0px;
		width: 50%;
		min-width: 320px;
		height: 90px;
		overflow: hidden;
/* 		background-color: #ffffff; */

	}
	h1 {
        text-indent: -200%;
        background: #ffffff url(../images/logo.gif) no-repeat center center;
        text-align: center;
        overflow: hidden;
        margin: auto;
        height: 90px;
        outline: #ededed solid 1px;
        outline-offset: -5px;
        position: fixed;
        width: 50%;
        min-width: 320px;
        -webkit-box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
        box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
        top:50;
	}
	h2  {
		color: #0979b2;
		font: 36px/1.25em 'Arvo', Arial, sans-serif;
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.75);
		margin: 0 0 0 0;
		padding: 0 252px 0 0;
	}
	.container {
        background-color: #efefef;
        width: 80%;
        margin: 0  auto;	
        -webkit-box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
        box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
    }
    #content {
        background-color: #efefef;
        padding: 40px 0 40px 40px;
        min-height: 255px;
    }

	#services {
        color: #b2b2b2;
        font: 21px/1.25em 'Arvo', Arial, sans-serif;
        background-color: #efefef;
        padding: 20px 0 20px 40px;
        margin: 30px auto;
        display: block;
        overflow: hidden;
    }
    #services a {
        text-decoration: none;
    }
    #services a:hover {
        color: #0979b2;
    }
    #services li {
        display: block;
        float: left;
        padding: 10px 0;
    }

	.picture {
		/* outline: solid #0979b2 2px;  */
		outline: solid rgba(9, 121, 178, 0.75) 10px;		

		outline-offset: -10px;
		float: right;
		margin-right: -8%;

	}
	#headshot {
		background: transparent url(../images/headshot.jpg) no-repeat center center;
		width: 252px;
		height: 252px;
	}
	.picture img {
		display: block;
	
	}
	.pvc {
		white-space:nowrap;
	}
	.mih {
		font-weight: bold;
	}
	
	
	
	#link-linkedin {
		width: 20%;
	}
	#link-twitter {
		width: 16%;
	}
	#link-portfolio {
		width: 18%;
	}
	#link-blog {
		width: 12%;
	}
	#link-dribbble {
		width: 18%;
	}
	#link-email {
		width: 12%;
	}

	#services a {
		color: inherit;
	}
	#services li:last-child {
		margin-right: 0;
		padding-right: 0;
	}
	
/*
	.one {
		color: #6298b2;
	}
	.two {
		color: #8fa7b2;
	}
*/

/* ============================= */
/* ! Layout for tablet version   */
/* ============================= */

@media screen and (max-width: 960px) and (min-width: 641px) {

	body {
		
	}

}

@media screen and (max-width: 820px) {
    h2 {
        margin-right: 4%;
        padding-right: 272px;
    }
    .picture {		
        position: absolute;
        right: 4%;
        float: none;
        margin-right: 0;
        }

    }	
    
@media screen and (max-width: 700px) {
    h2 {
        padding: 0;
        margin: 0 0 20px 0;
    }
    #content {
        padding: 20px;
    }
    .picture {
        position: relative;
        float: none;
        right: auto;
        margin: 0 auto 20px;
    }
}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media screen and (max-width: 640px) {

	body {
		
	}
	h1 {
		background-size: 200px 40px;
	}
	#services li:nth-child(1n) {
		width: 33%;
		}
	#services li:nth-child(1) {
		width: 34%;
		}
	#services li:nth-child(4n) {
		clear: left;
		width: 34%;
		}
/*
	.container {
		width: 100%;
		min-width: 600px;
	}
*/
}


/* ========================================== */
/* ! Provide higher res assets for Retina Display   */
/* ========================================== */

@media (-webkit-min-device-pixel-ratio: 2), (device-pixel-ratio: 2) { 

h1 {
		background: #ffffff url(../images/logo2x.gif) no-repeat center center;
		background-size: 271px 54px;
}
	#headshot {
		background: transparent url(../images/headshot2x.jpg) no-repeat center center;
		background-size: 252px 252px;
	}
}