* {
margin: 0;
padding: 0;
}

body {
background-image: url(../images/bg-repeat.jpg);
background-repeat: repeat;
font-family: sans-serif;
line-height: 1.2em;
background-color: #f3f3f3;
color: #444;
height: 100%;
width: auto;
}

.star {
width: 30px;
height: 30px;
text-align: center;
background-color: rgb(240,240,240);
vertical-align: middle;
line-height: 30px;
border-width: 0px 2px 2px 2px;
border-style: solid;
border-color: rgb(240,240,240);
border-radius: 0px 0px 5px 5px;
float: right;
margin-right: -41px;
margin-top: -61px;
cursor: pointer;
}


a .star:hover {
background-color: rgb(220,220,220);
border-color: rgb(220,220,220);
}


#wrapper {
max-width: 800px;
margin: 60px auto 30px;
padding:60px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
border-top: 2px solid rgb(240,240,240);
position: relative;
}

.quote {
	margin-top: 40px;
	height: auto;
	width: 50%;
	background-color: rgb(250,250,250);
	color: rgb(30,30,30);
	border-left: 10px solid rgb(240,240,240);
	padding: 20px 10px 0px 10px;
	font-style: italic;
	font-weight: bold;
	font-size: 12px;
	text-align: justify;
	letter-spacing: 0.07em;
	text-wrap: normal;
}

.social {
    padding: 10px;
}

.social ul {
   margin: 0;
   padding: 0;
   text-align: center;
}
.social li {
   font-size: 16px;
   display: inline;
   list-style: none;
   padding: 10px 5px 10px 15px;
}

ul {
margin: 0 0 0 15px;
position: relative;
}

li {
margin: 0 0 5px 0;
font-size: 13px;
}

p {
text-align: justify;
font-size: 13px;
}

.clear {
clear: both;
}

a {
color: #444;
text-decoration: none;
}

a:hover {
text-decoration:underline;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}

h3 {
font-weight: bold;
font-size: 14px;
}

ul#schools li .details1 {
float: left;
width: 20%;
}

ul#schools li .details2 {
float: left;
text-align: center;
width: 60%;
}

ul#schools li .details3 {
float: left;
text-align: center;
width: 20%;
}

ul#schools h5 {
font-style: italic;
}

ul#schools h4 {
font-weight: bold;
}

h2.sectionHead {
clear: both;
font:bold 20px/12px 'verdana',sans-serif;
margin: 60px -60px;
border-left: 52px solid #444;
color: #444;
padding:1px 0 0 8px;
letter-spacing: -1px;
text-transform: uppercase;
position: relative;
}

h2.sectionHead:before {
content: "";
position: absolute;
width: 45px;
height: 45px;
left: -105px;
top: -15px;
}

h2#titleName {
margin: 20px -60px 10px;
font-size: 24px;
font-weight: bold;
}

h2#ribbon:before {
background-position: left -45px;
}

h2#tools:before {
background-position: left top;
}

h2#learn:before {
background-position: right top;
}

h2#eye:before {
background-position: -90px top;
}

h2#clock:before {
background-position: -45px top;
}

h2#chat:before {
background-position: -45px bottom;
}

h2#titleName:before {
background-position: -90px bottom;
}

#bio {
position: relative;
}

#bio #avatar {
float: left;
margin: 0 20px 0 0;
}

#bio h2 {
font-size: 16px;
}

#bio p {
clear: left;
margin:40px auto;
padding:40px 45px;
max-width: 720px;
background: #fbfbfb;
border: 1px solid #f3f3f3;
border-radius: 8px;
position: relative;
border-width: 0 1px 1px;
border-color: #fff #f3f3f3 #e8e8e8;
line-height: 1.6em;
}

#bio iframe {
margin: 0 auto;
display: block;
}

#bio p a {
text-decoration: none;
border: none;
background: #444;
color: #fff;
padding: 3px 5px;
margin: -3px 0 0 0;
}

#bio p a:hover {
text-decoration:none;
color: #fff;
background: #222;
}

#bio a.selectedWork {
visibility: hidden;
padding: 0;
margin: 0;
}

ul#recommends li {
margin: 0 0 30px 0;
clear: both;
}

ul#recommends li > h3 {
background: rgb(245,245,245);
color: rgb(160,160,160);
padding-left: 5px;
line-height: 25px;
margin:0 0 30px -5px;
border-left: 1px solid rgb(220,220,220);
}

ul#seenOn li {
display: inline-block;
position: relative;
border-top: 1px solid #eee;
margin-right: 2px;
height: 36px;
border-radius: 4px;
line-height: 30px;
}

ul#seenOn li img {
height:100px;
width:auto;
padding: 3px;
}

ul#skills {
margin: 0;
width: 100%;
overflow: hidden;
}

ul#skills.ready {
background: none;
}

ul#skills li {
position: relative;
right: 100%;
background-color: #444;
color: #fff;
font: bold 9px/20px sans-serif;
letter-spacing: 1px;
margin-bottom: 3px;
padding: 3px 1.1428571428571428% 0;
text-transform: uppercase;
z-index: 1;
}

ul#skills li:after {
content: "";
position: absolute;
top: 0;
right: 5px;
line-height: 26px;
width: 50px;
text-align: right;
color: #aaa;
}

ul#skills li.s100:after {
content: "100%";
}

ul#skills li.s90:after {
content: "90%";
}

ul#skills li.s80:after {
content: "80%";
}

ul#skills li.s70:after {
content: "70%";
}

ul#skills li.s60:after {
content: "60%";
}

ul#skills li.s50:after {
content: "50%";
}

ul#skills li.s40:after {
content: "40%";
}

ul#skills li.s30:after {
content: "30%";
}

ul#skills li.s20:after {
content: "20%";
}

ul#skills li.s10:after {
content: "10%";
}

ul#skills li span {
display: none;
}

ul#skills li:hover {
background: #222;
}

li.s100 {
width: 97.71428571428571%;
}

li.s90 {
width: 87.71428571428571%;
}

li.s80 {
width: 77.71428571428571%;
}

li.s70 {
width: 67.71428571428571%;
}

li.s60 {
width: 57.714285714285715%;
}

li.s50 {
width: 47.714285714285715%;
}

li.s40 {
width: 37.714285714285715%;
}

li.s30 {
width: 27.714285714285715%;
}

li.s20 {
width: 17.714285714285715%;
}

li.s10 {
width: 7.714285714285714%;
}

#honorsAwards li {
padding-left: 5px;
margin-bottom: 8px;
}

ul#jobs,ul#schools,ul#recommends,ul#seenOn {
margin: 0;
list-style: none;
}

ul#jobs li,ul#schools li,ul#recommends li {
margin: 0 0 20px 0;
clear: both;
}

ul#jobs li .details,ul#recommends li .details {
float: left;
width: 40%;
}

ul#jobs li p,ul#schools li > p,ul#recommends li > p {
float: right;
width: 57%;
margin-bottom: 25px;
}

.details h5 {
font-style: italic;
}

#copyright {
text-align: center;
font:bold 10px sans-serif;
text-transform: uppercase;
color: #aaa;
margin: 20px 0 20px;
text-shadow: 1px 1px 1px #fff;
}

body.respond {
background: #fff;
}

body.respond #wrapper {
margin: 0 auto;
padding:30px;
background: #fff;
box-shadow: none;
}

body.respond h2.sectionHead {
font-size: 15px;
letter-spacing: -1px;
margin: 40px 0 50px -60px;
padding-left: 8px;
}

body.respond h2#titleName {
margin: 20px 0 10px -60px;
}

body.respond p {
text-align: left;
}

body.respond #bio h2 {
font-size: 12px;
}

body.respond #bio p {
padding:0;
background: #fff;
max-width: 100%;
border: none;
}

body.respond ul#seenOn li {
height: auto;
line-height: 1em;
}

body.respond ul#seenOn li img {
width: 96%;
height: auto;
padding: 2%;
}

body.respond ul#jobs li .details,body.respond ul#schools li .details,body.respond ul#recommends li .details {
float: none;
width: 100%;
}

body.respond ul#jobs li p,body.respond ul#schools li > p,body.respond ul#recommends li > p {
float: none;
width: 100%;
margin-bottom: 50px;
margin-top: 10px;
}

button {
width: 140px;
height: 40px;
border-radius: 5px;
background-color: rgb(250,250,250);
color: rgb(60,60,60);
cursor: pointer;
}

button:hover {
width: 140px;
height: 40px;
border-radius: 5px;
background-color: rgb(240,240,240);
color: rgb(20,20,20);
cursor: pointer;
}