@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%; background-color:#FFF;
	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: #999;
    overflow:hidden;
	background:#FFF;
}



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

ul{
	margin:12px 0 12px 0px;
}
ol {
	margin:12px 0 12px 0px;
}

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


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:#E0E0E0;
    box-shadow:inset 0 0 7px #CCC;
    border:solid 1px #CCC;
}

.left{
    float:left;
}

.right{
    float:right;
}

/*Image Hover*/
div.roll-gallery {
    background:url(../images/magnify_48.png) center center no-repeat #000 ;
    height: 100px;
    margin:0px 0px 0px 0px;
    position: absolute;
    width: 100px;
    z-index: 10;
}

div.roll-video {
    background:url(../images/play_48.png) center center no-repeat #000 ;
    height: 100px;
    margin:0px 0px 0px 0px;
    position: absolute;
    width: 100px;
    z-index: 10;
}

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

.menu {
    margin:0px;
}

.menu ul {
    list-style:none;
}

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

#menu_left ul li {
    display:inline;
    float:left;
    margin-right: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:#FAFAFA;
    text-decoration: none;
    font: bold 14px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    color: #402e16;
    border:solid 1px #F3F3F3;
}

.menu ul li a:hover {
    background:#FFF;
}

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

#menu_left{
display:block;
width:50%;
float:left;
}

#menu_right{
display:block;
width:50%;
float:right;
}








































/*page*/
#wrapper{
    margin:0px auto;
    width: 860px;
 height:430px;   background:#FFF url(../images/black_paper.png) repeat top left;
    position:relative;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.30);
}

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

.white-page{
    width:100%;
    height:100%;
    background:#FFF 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:#FFF url(../images/bgbook-left-white.png) repeat-y;
    padding:20px;
}

.black-page{
    width:100%;
    height:100%;
    background:#F7F5F5 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:90px;
    text-align:center;
    color:#666;
}

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

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

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 #333;
}

.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:#f5f5f5;
	
	
}
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;
}

/* PAGE : experience */
.experience h5{
   color:#FFF; 
}

.experience p{
    float:left;
	text-align:justify;
	padding-bottom:10px;
	border-bottom:dotted 1px #CCC;
	
}

.experience span.expdate{
	color:#EEE;
	font-style:italic;
}

/* 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:200px;
    height:390px;
    float:right;
}

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

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

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

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

.textarea-label:hover,.textarea-label:focus {
    background-color:#F8F8F8;
    box-shadow:inset 0 0 7px #CCC;
    border:solid 1px #CCC;
    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 #CCC;
    color:#999;
    text-decoration: none;
    font-size:12px;
    font-family:inherit;
    text-align:center;
    cursor:pointer;
}

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

.error_messages{
    color:#F00;
    font-size:11px;
    font-style:italic;
    margin:3px 0px;
}

.error_messages li{
    list-style:none;
    margin-bottom:3px;
}
#success_page h5{margin:10px 0px 5px 0px; padding:0px; color:#666;}
#success_page p{margin:0px; padding:0px;}

/* PAGE : social */
.social-icon{
    width:185px;
    height:59px;
    float:left;
    margin-right:20px;
    margin-bottom:10px;
	padding-top:11px;
}

.social-icon img{
    width:48px;
    height:48px;
}

.social-icon:nth-child(2n) {
    margin-right: 0;
}

.social-icon .boxinside{
    width:125px;
    height:40px;
    float:left;
    margin-top:5px;
    margin-left:10px;
}

.social-icon .icon{
    float:left;
}

.social-icon p{
    float:left;
    font-size:11px;
}

.social-icon h5{
    margin:0 0 5px 0;
}

.inside a:link{
    color:#999;
    text-decoration:none;
}

.inside .social-icon a:visited{
    color:#999;
    text-decoration:none;
}

.social-icon:hover a{
    color:#666;
    text-decoration:none;
}

/* Twitter - at the bottom of booklet */
.twitter-tl{
    width:645px;
    height:20px;
    margin:0px auto;
    margin-top:20px;
}

.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;
    font-weight:bold;
}

/* 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:#333;
}

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

div.rrt-inner span.rrt-meta a{
    color:#666;
    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 #F5F5F5;
	background:#F5F5F5;
	color:#444;
	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: #F5F5F5;
	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;
}