/* @group LAYOUT */

body { background: #EEE url(../img/bg.png) repeat; margin: 0px; padding: 0px; font: 12px/14px "Helvetica", Arial, Helvetica, Geneva, sans-serif; }

.clear	{ clear:both; }
.clearfix:after	{ content: "."; visibility: hidden; display: block; height: 0px; clear: both; }
.alignleft	{ text-align: left; }
.alignright	{ text-align: right; }
.strong { font-weight: bolder; }
.italic { font-style: italic; }
.georgia { font-family: Georgia, "Times New Roman", Times, serif; }

#topborder { margin: 0; padding: 0; width: 100%; height: 40px; background: #333; border-bottom: 1px solid #FFF; }
#topmenuwrap { margin: 0 auto; padding: 0; width: 980px; height: 100%; background: transparent; overflow: hidden; }
#topmenuleft { margin: 0; padding: 0; width: 320px; height: 100%; float: left; position: relative; }
#topmenuright { margin: 0; padding: 0; width: 640px; height: 100%; float: right; position: relative; }

#wrap { margin: 0 auto; margin-bottom: 20px; padding: 0; width: 980px; height: 100%; background: transparent; overflow: hidden; }
#sidenav { margin: 0; padding: 0; width: 320px; height: auto; float: left; position: fixed; border-right: 1px dotted #DDD; }
#content { float: right; width: 640px; height: auto; background: transparent; }
#helpcontent { margin: 0 auto; margin-bottom: 20px; padding: 0; width: 980px; height: 100%; background: transparent; }

h1 { color: #111; font: bold 26px/28px "Helvetica", Arial, Helvetica, Geneva, sans-serif; text-shadow: #FFF 1px 1px 0px; }
h2 { font: bold 18px/20px "Helvetica", Arial, Helvetica, Geneva, sans-serif; }
h6 { color: #111; font: 14px/20px "Helvetica", Arial, Helvetica, Geneva, sans-serif; }
p { color: #111; font: 12px/14px "Helvetica", Arial, Helvetica, Geneva, sans-serif; }
a {	color:  #111; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }
blockquote { margin: 20px 0 0 0; padding: 10px; width: auto; height: auto; background: #FFF; border-left: 5px solid #DDD; font: italic 14px/18px Georgia, "Times New Roman", Times, serif; color: #333; }

ul { margin: 20px 0 0 40px; padding: 0; }
li { list-style-type: disc; margin: 0; padding: 0; color: #333; font: 12px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }

.headline { color: #777; padding: 5px; margin-top: 20px; background-color: #DDD; border-bottom: 1px solid #FFF; border-top: 1px solid #CCC; text-shadow: #FFF 1px 1px 0; }

/* @group TOPLEVEL DOCS */
#docs { margin: 12px 0 0 0; padding: 0; width: 320px; height: 28px; float: left; position: relative; }
#docs ul { padding: 0; margin: 0; width: 320px; height: 28px; }
#docs li { float: right; list-style-type: none; padding: 0 20px 0 0; margin: 0; }
#docs a { border: none; }
	#docs img { margin: 0; padding: 0; width: 20px; height: 20px; border: none; }

/* @group TOPLEVEL NAV */
#nav { margin: 12px 0 0 0; padding: 0; width: 640px; height: 28px; float: left; position: relative; }
#nav ul { padding: 0; margin: 0; width: 640px; height: 28px; }
#nav li { float: left; list-style-type: none; padding-right: 20px; margin: 0 20px 0 0; border-right: 1px dotted #555; }
#nav a { color: #777; font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-decoration: none; margin: 0; text-transform: uppercase; }
#nav a:hover { color: #EEE; border-bottom: 5px solid #4ECDC4; }

/* @group PERSONAL INFO */
#imgframe { background: url(../img/frame.jpg) no-repeat; width: 240px; height: 290px; margin: 20px 20px 0 0; float: right; position: relative; }
.profileimg { margin: 20px 0 0 20px; padding: 0; border: none; }
.name { margin: 20px 20px 0 0; float: right; width: 300px; height: auto; }
.about { margin: 20px 20px 0 0; float: right; width: 300px; height: auto; }
.address { margin: 20px 20px 0 0; float: right; width: 300px; height: auto; }

/* @group CONTACT INFO */
.tele { background: url(../img/contact/telephone.png) no-repeat 0 2px; margin: 20px 20px 0 0; padding: 0 0 0 20px; float: right; width: auto; height: 16px; }
.mail { background: url(../img/contact/mail.png) no-repeat 0 2px; margin: 0 20px 0 0; padding: 0 0 0 20px; float: right; width: auto; height: 18px; clear: both; }
	.mail a { text-decoration: none; border-bottom: 1px dotted #333; }
	.mail a:hover { border: none; }
.web { background: url(../img/contact/web.png) no-repeat 0 2px; margin: 0 20px 0 0; padding: 0 0 0 20px; float: right; width: auto; height: 18px; clear: both; }
	.web a { text-decoration: none; border-bottom: 1px dotted #333; }
	.web a:hover { border: none; }

/* @group SOCIAL INFO */
#social { margin: 20px 20px 0 0; width: 300px; height: auto; background: transparent; float: right; position: relative; }
	#social ul { padding: 0; margin: 0; width: auto; height: auto; float: right;}
	#social li { list-style-type: none; padding: 0; margin: 0 0 0 5px; float: left; }
	#social img, #social a, #social a:hover { text-decoration: none; border: none; }

/* @group OBJECTIVE, EMPLOYMENT, EDUCATION INFO */
#objective, #employment, #education { margin: 0; padding: 0; width: 640px; height: auto; clear: both; }
#employment a { text-decoration: none; border-bottom: 1px dotted #333; }
#employment a:hover { border: none; }
.objectiveblock, .workblock, .edublock { margin: 20px 0 0 0; padding: 0 0 20px 0; border-bottom: 1px dotted #DDD; }
	.institution { margin: 0; padding: 0; width: 350px; height: auto; float: left; position: relative; }
	.date { margin: 0; padding: 2px 6px; background: #FFF; width: auto; height: auto; float: right; position: relative; border: 1px solid #DDD; }
	.description { margin: 0; padding: 10px 0 0 0; clear: both; }

#top-link  { display: none; position: fixed; right: 20px; bottom: 20px; text-decoration: none; background: url(../img/top.png) no-repeat; width: 24px; height: 24px; }
#top-link a, #top-link a:hover { text-decoration: none; border: none; }

/* @group SKILLS INFO */
#skills { margin: 0; padding: 0; width: 300px; height: auto; float: left; position: relative;}
.skillblock { margin: 20px 0 0 0; padding: 0 0 20px 0; border-bottom: 1px dotted #DDD; }
	.skillname { margin: 0; padding: 0; width: 185px; height: auto; float: left; position: relative; }
	.skillrating { margin: 0; padding: 2px 6px; background: transparent; width: auto; height: auto; float: right; position: relative; }
	.skilldesc { margin: 0; padding: 10px 0 0 0; clear: both; }
	
.fivestar { background: url(../img/skills/50.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.fourhalfstar { background: url(../img/skills/45.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.fourstar { background: url(../img/skills/40.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.threehalfstar { background: url(../img/skills/35.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.threestar { background: url(../img/skills/30.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.twohalfstar { background: url(../img/skills/25.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.twostar { background: url(../img/skills/20.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.onehalfstar { background: url(../img/skills/15.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }
.onestar { background: url(../img/skills/10.png) no-repeat; margin: 0; padding: 0; width: 105px; height: 20px; }

/* @group AWARDS INFO */
#awards { margin: 0; padding: 0; width: 300px; height: auto; float: right; position: relative; }
.awardblock { margin: 20px 0 0 0; padding: 0 0 20px 0; border-bottom: 1px dotted #DDD; }
	.awardname { margin: 0; padding: 0; width: 300px; height: auto; float: left; position: relative; }
	.awarddesc { margin: 0; padding: 10px 0 0 0; clear: both; }

/* @group PORTFOLIO INFO */
#portfolio { margin: 0; padding: 0; width: 640px; height: auto; clear: both; overflow: hidden; }
	#portfolio ul { margin: 0; padding: 0; }
 	#portfolio li { padding: 0; margin: 20px 20px 0 0; float: left; display: inline; float: left; }
 	#portfolio li.last { list-style-type: none; padding: 0; margin: 20px 0 0 0; float: left; }
 	#portfolio img { width: 145px; height: 145px; background: #333; z-index: 9999; }