/*

CSS File TOC
------------------------

1. CSS Reset
2. Common
3. Header
   3.1 Contact Form
4. Contents
   4.1  Main Panel
   4.2  Sidebar Panel

*/



/*========================*/
/*===  1. CSS Reset    ===*/
/*========================*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}


/*========================*/
/*===  2. Common       ===*/
/*========================*/


#wrapper {
	width:850px;
	margin:0 auto;
	padding:0px 40px;
}

img {
	border:none;
}

p {
	font-size:12px;
	width:90%;
	text-align:justify;
	line-height:20px;
}

h1 {
	font-size:50px;
	text-align:left;
	float:left;
	font-weight:bold;
}

h2 {
	font-size:40px;
	text-align:left;
	font-weight:bold;
	line-height:50px;
}

h3 {
	font-size:20px;
	text-align:left;
	line-height:25px;
	font-weight:bold;
}

h4 {
	font-size:14px;
	text-align:left;
	line-height:22px;
}

h5 {
	font-size:18px;
	text-align:left;
	line-height:35px;
	font-weight:bold;
	text-indent:0px;
}

h6 {
	font-size:14px;
	text-align:left;
	line-height:22px;
	padding:0;
	margin:0;
}

a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

p {
	font-size:11px;
	text-align:justify;
	line-height:20px;
	padding:0;
}

ul {
	list-style:none;
}

li {
	list-style:none;
	line-height:18px;
	font-size:11px;
	margin-bottom:9px;
}


.clearfix {
	visibility:hidden;
	clear:both;
	height:0;
}

.bold {
	font-weight:bold;
}

/*========================*/
/*===  3. Header       ===*/
/*========================*/

.header {
	width:100%;
	height:149px;
	margin:0 auto;
	line-height:35px;
}

.headerwrapper {
	width:850px;
	display:block;
	margin:0 auto;
	padding:36px 0px 0px 0px;
	height:113px;
	margin:0 auto;
}


/*===========================*/
/*===  3.1 Contact Form   ===*/
/*===========================*/ 

#contact-form {
}

#form_errors {
	font-family:Tahoma, Helvetica, sans-serif;
	font-size:12px;
	color:#FFBFBF;
	width:200px;
}

#form_thanks {
	font-family:Tahoma, Helvetica, sans-serif;
	font-size:12px;
	color:#E5FFBF;
}

#contact-form label {
	font-family:Tahoma, Helvetica, sans-serif;
	font-size:12px;
}

#contact-form input[type=text], #contact-form textarea {
	display:inline-block;
	outline:0 none;
	height:32px;
	width:180px;
	margin:0;
	padding:8px 10px;
	overflow:hidden;
	border:1px solid;
	font:9pt/100% Arial, Helvetica, sans-serif;
	color:#777;
	text-shadow:1px 1px 0px #fff;
	text-overflow:ellipsis;
	white-space:nowrap;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	background:#f5f5f5;
	background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #f5f5f5));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5', GradientType=0);
	border-color:#ccc;
	-moz-box-shadow:0px 0px 1px #fff inset;
	-webkit-box-shadow:0px 0px 1px #fff inset;
	box-shadow:0px 0px 1px #fff inset;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.grey-gloss {
	color:#666;
	background: #f6f6f6;
	background: -moz-linear-gradient(top, #f7f7f7, #e1e1e1 50%, #d6d6d6 51%, #b8b8b8);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f7f7), color-stop(.5, #e1e1e1), color-stop(.5, #d6d6d6), to(#b8b8b8));
	/*text-shadow*/
	text-shadow: 0 1px 0px #f6f6f6;
	/*Box Shadow*/
	-moz-box-shadow: 0px -1px 0px #fafafa, 0px 1px 0px #9a9a9a, 0px 3px 3px rgba(0, 0, 0, .25);
	-webkit-box-shadow: 0px -1px 0px #fafafa, 0px 1px 0px #9a9a9a, 0px 3px 3px rgba(0, 0, 0, .25);
	box-shadow: 0px -1px 0px #fafafa, 0px 1px 0px #9a9a9a, 0px 3px 3px rgba(0, 0, 0, .25);
}
.grey-gloss:hover {
	color:#606060;
	background: #c8c8c8;
	background: -moz-linear-gradient(top, #ebebeb, #d0d0d0 50%, #c6c6c6 51%, #a3a3a3);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ebebeb), color-stop(.5, #d0d0d0), color-stop(.5, #c6c6c6), to(#a3a3a3));
	text-shadow: 0 1px 0px #f0f0f0;
}
.grey-gloss:active {
	color:#999;
	background: #b8b8b8;
	background: -moz-linear-gradient(top, #d6d6d6, #bebebe 50%, #b7b7b7 51%, #9e9e9e);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(.5, #bebebe), color-stop(.5, #b7b7b7), to(#9e9e9e));
	/*text-shadow*/
	text-shadow: 0 1px 0px #cacaca;
	/*Box Shadow*/
	-moz-box-shadow: 0px -1px 0px #999, 0px 1px 0px #e2e2e2, 0px 3px 3px rgba(0, 0, 0, 0);
	-webkit-box-shadow: 0px -1px 0px #999, 0px 1px 0px #e2e2e2, 0px 3px 3px rgba(0, 0, 0, 0);
	box-shadow: 0px -1px 0px #999, 0px 1px 0px #e2e2e2, 0px 3px 3px rgba(0, 0, 0, 0);
}
.button {
	font-size: 12px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin: 0 4px;
	padding: 9px 13px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	border: none;
	outline: none;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: bottom;
	zoom: 1;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}


/*===========================*/
/*===  4. Contents        ===*/
/*===  4.1 Main Panel     ===*/
/*===========================*/

#contents {
	width:100%;
	padding:75px 0px 70px 0px;
}

#main {
	width:475px;
	float:left;
	/* Change Float:left to Float:right for layout 2 */
}

.section {
	width:100%;
	float:left;
	padding:0px 0px 0px 0px;
}

.work_item {
	width:100%;
	float:left;
	padding:25px 0px 25px 0px;
}

.portfolio_item {
	width:100%;
	float:left;
	padding:25px 0px 25px 0px;
}

.year {
	font-size:12px;
	text-align:left;
	float:right;
	padding-top:6px;
}

.tag {
	width:60px;
	height:21px;
	line-height:22px;
	float:right;
	font-size:9px;
	text-align:center;
}

.winner_tag {
	width:55px;
	height:21px;
	line-height:21px;
	float:right;
	font-size:10px;
	text-indent:14px;
	text-align:center;
}

/*===========================*/
/*===  4.2 Sidebar Panel  ===*/
/*===========================*/

#sidebar {
	width:260px;
	float:left;
	margin-left:94px;
	/* Change margin-left:94px; to margin-right:94px; for layout 2 */
}

.contact_Info_items {
	width:100%;
	float:left;
	padding:25px 0px 25px 0px;
}

.contact_Info_items ul {
	list-style:none;
}

.contact_Info_items ul li {
	list-style:none;
	line-height:18px;
	font-size:12px;
	padding-left:30px;
	margin-bottom:12px;
}

.web_icon {
	background:url(../images/website.png) no-repeat;
	height:21px;
}

.msg_icon {
	background:url(../images/msg.png) no-repeat;
}

.skype_icon {
	background:url(../images/skype.png) no-repeat;
	height:21px;
}

.twitter_icon {
	background:url(../images/twitter.png) no-repeat;
}

.locate_icon {
	background:url(../images/locate.png) no-repeat;
}

.pdf_icon {
	background:url(../images/pdf.png) no-repeat;
}

.education_items {
	width:100%;
	float:left;
	padding:25px 0px 25px 0px;
}

.skills {
	float:left;
	width:130px;
	padding:25px 0px 25px 0px;
}

.skills ul {
	float:left;
	list-style:none;
}

.skills ul li {
	float:left;
	display:block;
	clear:both;
	line-height:15px;
	padding:0;
	margin:0;
	line-height:23px;
	list-style:none;
}

.languages {
}

.references {
	width:100%;
	padding:25px 0px 25px 0px;
}

.award {
	width:100%;
	padding:25px 0px 25px 0px;
}

.my_best_work {
	width:270px;
	padding:25px 0px 25px 0px;
}

.twitter_feed {
	padding:25px 0px 25px 0px;
}

.best_work_gallery {
	width:76px;
	height:76px;
	float:left;
	margin:0px 16px 16px 0px;
}

.gallery li {
	display:inline;
}

.gallery li {
	padding-right:10px;
}

.gallery li.ast {
	padding-right:0px;
}

.testimonialWidget {
	padding:25px 0px 25px 0px;
}

.testimonialWidget ul.testimonialList {
	margin: 0;
	padding: 18px 6px 6px px;
	min-height: 40px;
	list-style: none outside none;
	overflow: hidden;
	height:auto !important;
}

ul.testimonialList li {
	top: 18px;
	left: 34px;
	margin: 0;
	padding: 0 28px 12px 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right bottom;
	display: none;
	height:auto !important;
}

ul.testimonialList li.current {
	display: block;
	height:auto !important;
}

ul.testimonialList p {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	text-align:left;
}

ul.testimonialList cite {
	display: none;
	margin: 0;
	padding: 0;
	height:auto !important;
}

.testimonialWidget .testimonialDetail {
	padding: 10px 10px 10px 0px;
	height: 18px;
}

.testimonialDetail .testimonialAuthor {
	font-weight:bold;
	font-size: 12px;
	line-height: 18px;
}

.testimonialDetail .testimonialArrows {
	float: right;
}

.testimonialDetail .testimonialArrows span {
	float: left;
	margin: 0 0 0 5px;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.testimonialDetail .testimonialArrows span {
	background-image: url(../images/testimonial-arrows.png);
}

.testimonialDetail .testimonialArrows span.arrowLeft {
	background-position: 0 -18px;
}

.testimonialDetail .testimonialArrows span.arrowLeft:hover {
	background-position: 0 0;
}

.testimonialDetail .testimonialArrows span.arrowLeft.inactive {
	background-position: 0 -36px;
}

.testimonialDetail .testimonialArrows span.arrowRight {
	background-position: -18px -18px;
}

.testimonialDetail .testimonialArrows span.arrowRight:hover {
	background-position: -18px 0;
}

.testimonialDetail .testimonialArrows span.arrowRight.inactive {
	background-position: -18px -36px;
}

/* Email Notification */


.success {
	font-family:Tahoma, Arial; font-size:12px;

	position:absolute;
	margin:30px 0px 0px 400px;
  
   background-color: #ECFFAA;
    background-image: url("../images/accept.png");
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #99C600;
	
	border-radius: 4px 4px 4px 4px;
    clear: both;
    cursor: pointer;
  
    line-height: 40px;
  	 height: 40px;
    padding: 10px 20px 10px 60px;
	width:600px;
 
}