@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body, html { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; }
	
.container { width: 1175px; margin: 0 auto; position: relative; }
#title { font-size: 26px; color: #ffffff; font-weight: 300; padding: 0 0 0 27px; position: absolute; top: 0; left: 273px; background: #57b6dd; width: 875px; height: 80px; }
#title:before { content: ''; display: block; width: 0; height: 0; border-left: 27px solid transparent; border-top: 18px solid #41a1c9; position: absolute; bottom: -18px; left: 0; }
#title:after { content: ''; display: block; height: 33px; width: 124px; background: url('../images/logo-small-white.png') no-repeat; position: absolute; top: 7px; right: 20px; }
#title.notVerified { background: #ff0000; }
#title.notVerified:before { border-top: 18px solid #B60101; }
#title.notVerified:after { content: 'Not Verified'; display: inline; width: 150px; text-align: right; background: none; }

#steps .step { float: left; width: 150px; padding: 10px 0 0 45px; margin-right: 20px; }
#steps .step h1 { font-weight: 400; font-size: 22px; margin: 0; margin-top: -5px; }
#steps .step p { font-weight: 400; font-size: 14px; margin: 0; }
#steps #step1 { background: url('../images/profile-step-1.png') no-repeat left 10px; }
#steps #step2{ background: url('../images/profile-step-2.png') no-repeat left 10px; }
#steps #step3 { background: url('../images/profile-step-3.png') no-repeat left 10px; }

#sidebar { width: 270px; padding: 15px 15px 40px 15px; display: table-cell; vertical-align: top; background: #efefef; color: #252525; text-align: center; }
#info { width: 875px; display: table-cell; vertical-align: top; }
#footer { display: block; padding: 20px 70px; width: 1035px; background: #252525; text-align: center; color: #ffffff; vertical-align: top; }

#sidebar { font-weight: 300; }
#sidebar #picture { padding-bottom: 20px; width: 270px; height: 270px; vertical-align: middle; display: table-cell; font-size: 0; }
#sidebar #picture img { max-height: 270px; max-width: 270px; }
#sidebar .name { font-size: 22px; }
#sidebar .location { font-size: 16px; margin-bottom: 20px; }
#sidebar .twitter { }
#sidebar .element { margin: 10px 0; width: 270px; }

#info .contents { padding: 100px 40px 40px 40px; }

#info h2 { font-size: 36px; font-weight: 700; margin: 0; color: #353535; }
#info h1 { font-size: 72px; font-weight: 700; margin: -.3em 0 0 0; color: #353535; }

#info .bio { margin: 20px 0 0 0; }

#widget { float: right; width: 300px; margin: 80px 0 0 40px; padding-bottom: 40px; }
#widget .price { height: 36px; padding-left: 45px; background: url('../images/moneybag.png') no-repeat 5px; width: 255px; }
#widget .price .label { float: left; margin-right: 5px; }
#widget .price .label1 { font-size: 24px; font-weight: 700; margin-top: -8px; }
#widget .price .label2 { font-size: 14px; margin-top: -4px; }
#widget .price .value { float: left; }
#widget .price .value .dollars { font-size: 42px; float: left; margin-top: -11px; }
#widget .price .value .cents { font-size: 18px; float: left; }

#widget .duration { height: 37px; padding-left: 45px; background: url('../images/clock.png') no-repeat 0; width: 255px; margin-top: 20px; }
#widget .duration .label { float: left; margin-right: 5px; }
#widget .duration .label1 { font-size: 24px; font-weight: 700; margin-top: -8px; }
#widget .duration .label2 { font-size: 14px; margin-top: -4px; }
#widget .duration .value { float: left; font-size: 28px; }

#footer .element a { color: #ffffff; font-size: 12px; }

.clear { clear: both; }

@media screen and (max-width: 1174px) {
	.container { width: 300px; }
	#title { width: 300px; left: 0; padding: 5px 0; height: 38px; }
	#title span { display: none; }
	#title:before { border: 0; }
	#title:after { right: 50%; margin-right: -62px; }
	#sidebar { display: block; background: transparent; }
	#widget { float: none; margin: 0; padding: 10px 0 0 0; }
	#info { display: block; width: 300px; height: auto; }
	#info .contents { padding: 15px; }
	#info h1 { display: none; }
	#info h2 { display: none; }
	#steps { padding: 5px; width: 290px; }
	#steps h1 { display: none; }
	#steps h2 { display: none; }
	#steps .step { display: none; }
	#footer { width: 280px; padding: 20px 10px; }
}