@import url('reset.css');


/* Every style of every page is below here 
1. heading
2. alignment 
3. image hover
4. float
5. nav
6. page
7. frontpage
8. about
9. works
10. skills
11. experience
12. contact
13. social
*/

*{
    margin:0;
    padding:0;
}
#loading-wrapper {
	height:100%; width:100%; 
	z-index: 100;
}

#loading-image {
	width: 32px;
	height: 32px;
	padding:10px;
	position: fixed;
	top: 50%;
    left: 50%;
    margin-left: -70px;
	z-index: 102;
	
}

body{
    font-family: 'Tahoma',Tahoma, sans-serif;
    font-size:11px;
    color: #ccc;
    overflow:hidden;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}



p{
	font-size:11px;
	line-height:18px;
	margin-bottom:12px;
	
}

/*heading*/
h1,h2,h3,h4,h5,h6 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-variant:normal;
    font-weight:bold;
    white-space:normal;
	margin-bottom:12px;
	color:#ddd;
}


h1 {
    font-size:34px; line-height:36px;
}

h2 {
    font-size:32px; line-height:34px;
}

h3 {
    font-size:28px; line-height:30px;
}

h4 {
   font-size:24px; line-height:26px;
}

h5 {
    font-size:16px; line-height:18px;
}

h6 {
    font-size:14px; line-height:16px;
}

/*Image alignment and frame*/
img.alignleft {
    display: inline;
    float: left;
    margin-right: 15px;
    margin-top: 3px;
}

img.alignright {
    display: inline;
    float: right;
    margin-left: 15px;
    margin-top: 5px;
}

img.frame{
    padding:8px;
    background-color:#444;
    box-shadow:inset 0 0 7px #222;
    border:solid 1px #555;
}

.left{
    float:left;
}

.right{
    float:right;
}

.dropcap-bg{background-color:#999;padding:12px 5px 8px 5px;margin:7px 10px 0px 0px;width: 35px;height: 25px;text-align: center;font-size:36px;font-family: 'Open Sans Condensed', sans-serif;font-weight:bold;color:#FFF;}

/*nav*/
#nav{
    width:840px;
    height:30px;
    margin:0 auto;
    margin-top:7%;
}

#menu {
    margin:0px;
}

#menu ul {
    list-style:none;
}

#menu ul li {
    display:inline;
    float:right;
    margin-bottom:10px;
    margin-left:5px;
}

#menu ul li.li-social {
    display:inline;
    float:left;
    margin-bottom:10px;
    margin-left:0px;
}

#menu ul li a {
    padding:10px 10px 20px 10px;
    background-color:#2d2d2d;
    text-decoration: none;
    font: bold 14px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    color: #402e16;
    border:solid 1px #333;
}

#menu ul li a:hover {
    background:#4B4B4B;
}

#menu ul li a.active {
   background:#4B4B4B!important;
}


#wrapper{
    margin:0px auto;
    width: 860px;
 height:430px;   
    position:relative; 
	display:block;
	
}

.shadow{padding-bottom: 25px;background: url("../images/shadow.png") bottom center no-repeat;width: 430px;}


/*page*/
.cover-page{
    width:100%;
    height:100%;
    background:#FFF url(../images/black_paper.png) repeat;
    border-right:solid 1px #FFF;
    padding:10px;
}

.white-page{
    width:100%;
    height:100%;
    background:#555555 url(../images/bgbook-right-white.png) repeat-y;
    padding:20px 20px;
}

/*this is used for social page*/
.white-page-left{
    width:100%;
    height:100%;
    background:#555555 url(../images/bgbook-left-white.png) repeat-y;
    padding:20px;
}

.black-page{
    width:100%;
    height:100%;
    background:#555555 url(../images/bg-book-left.png) repeat-y;
    padding:20px 20px;
}

.black-page .page-title{
    width:390px;
    height:40px;
    float:left;
    text-align:right;
    margin-top:140px;
}

.black-page .page-title .icon{
    margin-right:10px;
    float:right;
    width:34px;
    height:34px;
}

.black-page .page-subtitle{
    width:380px;
    height:20px;
    background:url(../images/subtitle-line-left.png) no-repeat;
    float:left;
    color:#2D2D2D;
    padding:5px 5px 5px 5px;
    text-align:right;
}

.black-page .page-title h1{
	 color:#999;
}

.black-page .page-subtitle h5{
	color:#2D2D2D;
}

.white-page .page-title{
    width:390px;
    height:40px;
    float:left;
    text-align:right;
    margin-top:140px;
}

.white-page .page-title .icon{
    margin-right:10px;
    float:left;
    width:34px;
    height:34px;
}

.white-page .page-subtitle{
    width:380px;
    height:20px;
    background:url(../images/subtitle-line-right.png) no-repeat;
    float:left;
    padding:5px 5px 5px 5px;
    text-align:left;
}

.white-page .page-title h1{
	 color:#999;
}

.white-page .page-subtitle h5{
	color:#FFF;
}

/*inside of black-page, white-page-left, and white-page*/
.inside{
    max-width:390px;
    height:390px;
	padding-right:5px;
}



/* PAGE : frontpage */
.front-page{
    padding-top:60px;
    text-align:center;
    color:#ccc;
}

.front-page h1{
    margin-top:20px;
   
}

/* PAGE : about */
.aboutme{
text-align:left;	

}

/* Personal info */
	.personal-info {
		float:right;
		width:170px;
		min-height:100px;
		margin-left:20px;
		padding:0px 0 0 0px;
		
	}
	.personal-info li {
		font-size:12px;
		margin:5px 0px 15px 0px;
		overflow: hidden;
	}
	.personal-info li label {
		color:#FFF;
		background-color:#999;
		float:left;
		padding:4px 7px;
		
	}
	.personal-info li span {
		float:left;
		width:160px;
		margin-top:5px;
		
	}

ol.ol-style, ul.ul-style {
    padding: 0 0 0 20px;
    /*--Distance between the order numbers--*/
}

ul.ul-style li {
    margin: 0;
    padding: 5px 0px;
    list-style:disc;
}

ol.ol-style li {
    margin: 0;
    padding: 5px 0px;
    list-style:decimal;
}

/* PAGE : works */
.thumbnail{
    width:100px;
    height:100px;
    float:left;
    background-color:#333;
    box-shadow:inset 0 0 7px #000;
    margin-right:10px;
    margin-bottom:18px;
    padding:8px;
    border:solid 1px #393939;
}

.thumbnail:hover{
    float:left;
    background-color:#292929;
    box-shadow:inset 0 0 7px #000;
    border:solid 1px #333;
}

.thumbnail img{
    width:100px;
    height:100px;
}

.thumbnail:nth-child(3n) {
    margin-right: 0;
}

/* PAGE : skills */
ul.ul-skill {
    margin: 0px 0px 0px 0px;
    padding:0px;
}

ul.ul-skill li {
    margin:0px;
	padding:10px 10px;
    list-style:none;
    border-bottom:dotted 1px #CCC;
    width:355px;
	height:18px;
	
}

ul.ul-skill li:hover {
    background-color:#333;
	
	
}
ul.ul-skill li:first-child{
 
	margin: 0px!important;
    
}

ul.ul-skill li:last-child{
    margin: 0px!important;
    
}

ul.ul-skill h5 {
   line-height:16px;
}

span.stars{
    float:right;
    margin-right:3px;
    margin-top:-30px;
}

/* EXPERIENCE */
/* WORK EDU */
.year{float:right;margin-right:0px;background-color:#999999;padding:5px;text-align:right;color:#FFF;font-family: 'Open Sans Condensed', sans-serif;font-weight:bold;font-size:14px;}
.role{float:left;margin-right:0px;background-color:#999999;padding:5px;text-align:right;color:#FFF;font-family: 'Open Sans Condensed', sans-serif;font-weight:bold;font-size:14px;}
.place{color:#eee;font-family: 'Open Sans Condensed', sans-serif;font-weight:bold;font-size:14px;}
.workedu-top{width:100%;float:left;}
.workedu-bottom{width:100%;float:left;margin-top:5px;margin-bottom:15px; border-bottom:solid 1px #666;}
.workedu-last{margin-bottom:0px!important;}

/* PAGE : contact */
.googlemap-iframe{
    border:0;
    margin:0;
}

.contact-info{
    width:175px;
    padding-right:10px;
    height:390px;
    float:left;
	text-align:justify;
    
}

.contact-detail dd{
    margin: 0 0 10px 30px;
    padding:0;
    width:130px;
}

.contact-detail dt{
    float:left;
    width:20px;
}

.contact-detail dt img{
    padding:0 5px 0 0;
    vertical-align:text-top;
}

.contact-form{
    width:390px;
    height:390px;
    float:left;

}

.contact-label{
    float:left;
    margin:2px 0px 10px 0px;
	width:100px;
}

.text-label{
    background-color:#444;
    box-shadow:inset 0 0 7px #222;
    border:solid 1px #555;
    color:#999;
    height:30px;
    width:378px;
    font-size:11px;
    margin:2px 0px 10px 0px; 
	float:left;
	padding:0px 5px;
}

.text-label:hover, .text-label:focus{
    background-color:#555;
    box-shadow:inset 0 0 7px #222;
    border:solid 1px #555;
    color:#999;
    }

.textarea-label{
    background-color:#444;
    box-shadow:inset 0 0 7px #222;
    border:solid 1px #555;
    color:#999;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:11px;
    height:80px;
    width:378px;
    resize:none;
	overflow:hidden;
	padding:5px;
	float:left;
    }

.textarea-label:hover,.textarea-label:focus {
    background-color:#555;
    box-shadow:inset 0 0 7px #222;
    border:solid 1px #555;
    color:#999;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    overflow:hidden;
    resize:none;
	
    
}

.sendbutton{
    margin:10px 10px 10px 0px;
    width:80px;
	padding:0px 5px;
    height:25px;
    background:url(../images/contact-bg.png);
    border:solid 1px #666;
    color:#EEE;
    text-decoration: none;
    font-size:12px;
    font-family:inherit;
    text-align:center;
    cursor:pointer;
	float:left;
}

.sendbutton:hover{
    background:url(../images/contact-bghover.png);
    border:solid 1px #666;
    color:#EEE;
    text-decoration: none;
    font-size:12px;
    font-family:inherit;
    text-align:center;
    cursor:pointer;
}

.error-highlight {border:1px solid #F00;}

.success-contact{display:none;float:right;margin:10px 0px 0px 0px;font-size:12px;text-align:left;min-width:100px;padding:5px;height:11px;}
.loading-contact {float:left;background:url(../images/contact-loader.gif) no-repeat 1px;height:25px;width:25px;display:none; margin-top:10px;}
.loading-contact img{height:24px;width:24px;}

/* Twitter - at the bottom of booklet */

.footer-container{
	 margin:0px auto;
	 width:860px;
}
/* BASIC - COPY RIGHT AND SOCIAL MEDIA */
.socialmedia-icon{background-color:#666;width:24px;height:24px;float:right;margin-left:5px;}

.facebook-icon:hover{ background-color:#36C;}
.twitter-icon:hover{ background-color:#0CF;}
.youtube-icon:hover{ background-color:#F00;}
.vimeo-icon:hover{ background-color:#0CF;}
.deviantart-icon:hover{ background-color:#663;}
.flickr-icon:hover{ background-color:#F39;}
.tumblr-icon:hover{ background-color:#33516D;}



.twitter-tl{
    width:645px;
    height:20px;
   float:left;
    margin-top:0px;
}

.twitter-tl .twitter-tl-icon{
    width:40px;
    height:40px;
    float:right;
    margin-right:5px;
}

.twitter-tl .twitter-tl-content{
    width:600px;
    height:20px;
    float:right;
	
}

/* container */
div.related-tweets{
    ;
}

/* inner div */
div.rrt-inner{
    height:48px;
    padding:4px;
    overflow:hidden;
}

/* ul list */
div.rrt-inner ul{
    float:left;
    padding:0 0 0 0;
    margin:0 0 0 0;
}

div.rrt-inner li{
    float:left;
    margin:0 0 0 0;
    list-style-type:none;
    position:relative;
}

/* author img */
div.rrt-inner span.rrt-author-img{
    
}

/* author name */
div.rrt-inner strong a{
    
}

/* tweet body */
div.rrt-inner span.rrt-body {
    display:block;
}

/* tweet content */
div.rrt-inner span.rrt-content{
    color:#fff;
}

/* tweet date and source line */
div.rrt-inner span.rrt-meta {
    color:#999;
    display:block;
    font-size:0.764em;
    margin:3px 0 0;
}

div.rrt-inner span.rrt-meta a{
    color:#999;
    text-decoration:none;
}

div.rrt-inner span.rrt-meta a:hover{
    text-decoration:underline;
}

/* customize date link */
div.rrt-inner a.rrt-date {
    
}

/* customize source link */
div.rrt-inner a.rrt-source {
    color:#09C;
}

/* customize links */
div.rrt-inner a.rrt-link {
    color:#09C;
}

/* customize @user links */
div.rrt-inner a.rrt-at {
    color:#09C;
}

/* customize #hashtags links */
div.rrt-inner a.rrt-hashtag {
    color:#09C;
}


.aToolTip {
	border:2px solid #333;
	background:#333;
	color:#CCC;
	margin:0;
	padding:6px 12px;
}

.aToolTip .aToolTipContent {
	position:relative;
	margin:0;
	padding:0;
}


/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
	background: red;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #222;
	position: relative;
}

.jspDrag
{
	background: #999;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}

/* OVERLAY */
.image-overlay, .video-overlay, .audio-overlay, .link-overlay, .gallery-overlay, .web-overlay {position: relative;}
.image-overlay .image-overlay-bg, .video-overlay .video-overlay-bg,.link-overlay .link-overlay-bg,.web-overlay .web-overlay-bg{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index: 1;zoom: 1;}
.image-overlay .image-overlay-bg {background: #999 url(../images/image-overlay.png);background-repeat:no-repeat;background-position:center;}
.video-overlay .video-overlay-bg {background: #999 url(../images/video-overlay.png) no-repeat center center;}
.link-overlay .link-overlay-bg {background: #999 url(../images/link-overlay.png) no-repeat center center;}
.web-overlay .web-overlay-bg {background: #999 url(../images/web-overlay.png) no-repeat center center;}
.ie .image-overlay .image-overlay-bg, .ie .video-overlay .video-overlay-bg,.ie .link-overlay .link-overlay-bg, .ie .web-overlay .web-overlay-bg {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

/* TOOL TIPS TIPSY */
.tipsy-s .tipsy-arrow {bottom: 0;left: 50%;margin-left: -5px;border-top-style: solid;border-bottom: none;border-left-color: transparent;border-right-color: transparent;}
.tipsy-arrow-s {border-top-color: #fff;}
.tipsy-arrow {position: absolute;width: 0;height: 0;line-height: 0;border: 5px dashed #fff;}
.tipsy {font-size: 10px;position: absolute;padding: 5px;z-index: 100000;}
.tipsy-inner {background-color: #fff;color: #444;max-width: 200px;padding: 5px 8px 4px 8px;text-align: center;}
.tipsy-arrow-w {border-right-color: #fff;}
.tipsy-w .tipsy-arrow {left: 0;top: 50%;margin-top: -5px;border-right-style: solid;border-left: none;border-top-color: transparent;border-bottom-color: transparent;}