/* CSS global BODY styles */
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: url('../img/bkg/bkg.jpg');
}
html{
  overflow-y:scroll;    
}
body {
	font-family: 'Georgia', "Tahoma", sans-serif;
	font-size: 13px;
	color: #474747;
}
select {
	margin: 0px;
	padding: 0px;
}
ul, ol, li, dl, dt, dd, p, div, h1, h2, h3, h4, h5, h6, form, fieldset, input {
	margin: 0;
	padding: 0;
	text-indent: 0;
}
ol li {
	margin-left: 25px;
}
thead {
	color: #FFFFFF;
}
fieldset {
	border: none;
}
.textVersion {
	display: none;
}
p {
	line-height: 18px;
}
a, a:visited {
	color: #18606d;
	text-decoration: none;
	font-weight: normal;
}
a:hover {
	text-decoration: underline;
}
strong a, strong a:visited {
	font-weight: bold;
}
a img {
	border: none;
}
span.clearfix {
	float: none;
	display: block;
}
/* ------------------------------------------------------------------------------ MAIN DIVS */
.clearfix {
	clear: both;
	font-size: 0px;
	height: 0px;
	float: none;
}
.wrapper{
  min-height:100%;  
  height:auto !important;  
  height:100%;  
  margin:0 auto -50px;
}
.pushFooter{
  height:50px;
}
.contener {
	width: 940px;
	padding: 0px 10px;
	margin: 0px auto;
}       

.topBorder{
  border-top: 3px solid #3fb4df;
}     
.ajaxWraper{
  overflow:hidden;
}
.ajaxContener{
  position:relative;
  z-index:2;
}
/* --------------------------------------------------------------------- TOP */
.top {
	position: relative;
	height: 80px;
	padding-top: 30px;
	margin-bottom: 10px;   
  z-index:3;
}
.top .logo {
	float: left;
}
.top .mainMenu {
  height:27px;
  overflow:hidden;
	float: right;
	padding: 32px 0px 0px 0px;
}
.top .mainMenu ul {
	list-style-type: none;
	position:relative;
}
.top .mainMenu ul li {
	float: left;
	padding: 0px 0px 0px 0px;
	margin-left:25px;
}
.top .mainMenu ul li a {
	font-size: 23px;
	color: #838383;
}
.top .mainMenu ul li a:hover {
	text-decoration: none;
}
.top .mainMenu ul li a span {
	display: block;
}
.top .mainMenu ul li.back {
	margin-left:0px;
	border-bottom: 1px solid #C4C4C4;
  z-index: 8;
  position: absolute;
  height:0px;
  top:25px;
}
/* --------------------------------------------------------------------- .TOP */      
/* --------------------------------------------------------------------- WHITE BOX */        
/* ------------------------------------------------------ white box*/
.whiteLongBox {
	height: 200px;
	background: #FFF;
	margin-bottom: 50px;
	position: relative;
	min-width: 960px;
}
.whiteLongBox .leftGreyBkg {
	height: 100%;
	width: 10px;
	position: absolute;
	left: 0px;
	top: 0px;
	background: url('../img/bkg/bkg.jpg');
}
.whiteLongBox .rightGreyBkg {
	height: 100%;
	width: 10px;
	position: absolute;
	right: 0px;
	top: 0px;
	background: url('../img/bkg/bkg.jpg');
}
.whiteLongBox .rightLine {
	margin-right: 10px;
	height: 100%;
	background: url('../img/bkg/white_box_line.png') top right no-repeat;
}
.whiteLongBox .leftLine {
	margin-left: 10px;
	height: 100%;
	background: url('../img/bkg/white_box_line.png') bottom left no-repeat;
}                                                                       
/* ------------------------------------------------------ .white box*/
        
/* ------------------------------------------------------ main page banner */
.mainPageBannerText{
}
.mainPageBannerText h1{
  font-size:30px;
  color:#3fb4df;
  padding:25px 0px 10px 44px;
  display:block;
}
.mainPageBannerText ul{
  list-style-type:none;
}
.mainPageBannerText ul li{
  padding:0px 0px 10px 44px;
  background: url('../img/ico/check.png') 11px 2px no-repeat;
}
.mainPageBannerText ul li h2{
  font-size:30px;
  display:block;                    
	color:#828282;
}
/* ------------------------------------------------------ .main page banner */    
/* --------------------------------------------------------------------- .WHITE BOX */
/* --------------------------------------------------------------------- CONTENT */
.content{
  padding-top:10px;
}       
.content h1, .content h2 {
	font-size: 30px;
	padding: 0px 0px 20px 0px;
	color:#828282;
}
                 
/* ----------------------------------------- widget info list box  */   
.widgetInfoBox dl {
	font-style: italic;
	padding: 0px 0px 0px 0px;
}
.widgetInfoBox dl dt {
	font-size: 14px;
	line-height: 16px;
	padding: 15px 0px 4px 0px;    
	margin-top:10px; 
	border-top: 1px solid #c4c4c4;
}
.widgetInfoBox dl dt.first{
  border-top:0px;
  padding-top:5px;
  margin-top:5px;
}
.widgetInfoBox dl dd {
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	padding: 0px 0px 5px 23px;
	background: url('../img/bkg/blue_arrow.png') 10px 5px no-repeat;
}           
.widgetInfoBox dl dd.last{
  padding-bottom:15px;
	border-bottom: 1px solid #c4c4c4;
}           
.widgetInfoBox dl dd a{
  color:#474747;
  font-weight:bold;
}   
.widgetInfoBox dl dd span a{
  font-weight:normal;
  color:#18606d;
}      
/* ----------------------------------------- .widget info list box  */   

/* ------------------------------------------------------ main page */   
.mainPage{
  padding-bottom:50px;
}
/* ----------------------------------------- about */   
.content .mainPageBox h2 {
	font-size: 30px;
	padding-bottom: 20px;
	display: block;
}
.content .mainPageAbout {
	width: 670px;
	float:left;
}
.content .mainPageAbout p {
	font-style: italic;
	font-size: 12px;
	line-height: 19px;
	font-family: georgia;
	padding-bottom: 15px;
}   
.content .mainPageAbout img{
  float:right;
  margin-left:30px;
  margin-top:4px;
}                                                                     
/* ----------------------------------------- .about */   
/* ----------------------------------------- skills */
.content .aboutSkills {
	float: right;
	width: 220px;
	padding-right: 0px;
}
.content .aboutSkills ul {
	list-style-type: none;
}
.content .aboutSkills ul li {
	display: block;
	clear:both;
	padding-bottom: 16px;
}
.content .aboutSkills ul li .name {
	line-height: 18px;
	font-size:14px;
	font-weight:normal;
	display:inline;
	font-style:italic;
}
.content .aboutSkills ul li .starBox {
	float: right;
	height: 18px;
	width: 105px;
	background: url('../img/ico/circle_ico.png');
}
.content .aboutSkills ul li .starEnable {
	float: right;
	height: 18px;
	width: 105px;
	text-indent:-9999px;
	background: url('../img/ico/circle_ico.png') bottom left repeat-x;
}
.content .aboutSkills ul li .starEnable1 {
	width: 21px;
}
.content .aboutSkills ul li .starEnable2 {
	width: 42px;
}
.content .aboutSkills ul li .starEnable3 {
	width: 63px;
}
.content .aboutSkills ul li .starEnable4 {
	width: 84px;
}
.content .aboutSkills ul li .starEnable5 {
	width: 105px;
}                         
/* ----------------------------------------- .skills */
/* ------------------------------------------------------ .main page */  
                  
/* ------------------------------------------------------ about page */  
.content .abouExperience{
  padding:30px 0px 0px 0px;
}          
.content .abouExperience .widgetInfoBox{   
  width:264px;
} 
/* ------------------------------------------------------ .about page */
  
/* ------------------------------------------------------ portoflio page */  
.content .portfolioHead{
  float:left;
}  

/* ------------------------------------------------------ portoflio slider button */  
.content .portfolioProjectSlider{
  float:right;
  position:relative;
  top:-15px;
}
.content .portfolioProjectSlider .prev, .content .portfolioProjectSlider .next{
  cursor:pointer;
  float:left;
  width:19px;
  height:21px;
  margin-top:15px;
  background: url('../img/button/portfolio_slider_button.png');
}
.content .portfolioProjectSlider .next{
  background-position: top right;
}
.content .portfolioProjectSlider .disabled{
  opacity:0.5;
  cursor:text;
}
.content .portfolioProjectSlider .info{       
  float:left;
  width:80px;
  text-align:center;
  font-size:35px;
  font-weight:normal;
  font-style:italic;
  color:#9c9c9c;
}                                                                                                                                                                       
/* ------------------------------------------------------ .portoflio slider button */

/* ----------------------------------------- project list */
.content .portfolioProjectList{
  padding-bottom:0px;
  position:relative;
}
.content .portfolioProjectList ul{
  list-style-type:none;     
  position:relative;
}
.content .portfolioProjectList ul li{
  float:left;
  margin:0px 33px 33px 0px;            
  border:1px solid #C4C4C4;  
  background: #FFF;        
  padding:2px;    
  display:block;
  width:285px;
  height:150px;   
  position:relative;  
  overflow:hidden;   
}
.content .portfolioProjectList ul li.last{
  margin-right:0px;
}
.content .portfolioProjectList ul li a{      
  display:block;
  width:285px;
  height:150px;      
  overflow:hidden;     
  text-decoration:none;
  position:relative;      
  background: url('../img/loading2.gif') 50% 50% no-repeat;    
}
.content .portfolioProjectList ul li a strong.name {
	background: #C4C4C4;                                     
	color:#FFFFFF;
	font-size: 13px;
	font-weight: normal;
	display: block;
	padding: 15px 8px 5px 20px;
	text-decoration: none;
	font-family: georgia, arial;
	font-style: italic;       
  position:absolute;
  margin-top:0px;              
  height:25px;
  overflow:hidden;
  text-align:right;
  float:right;
  right:0px;
}	
.content .portfolioProjectList ul li a strong.name span {
	font-size: 11px;
	color: #808080;
	font-weight: bold;   
}                
.content .portfolioProjectList ul li a img{

}                
.content .portfolioProjectList ul li a img.black{
  position:absolute;
  top:0px;
  left:0px; 
  display:none;
}     
.content .portfolioProjectList ul li .topLeft, .content .portfolioProjectList ul li .topRight, .content .portfolioProjectList ul li .bottomLeft, .content .portfolioProjectList ul li .bottomRight {
	position:absolute;
	background-repeat: no-repeat; 
	float:left;
}
.content .portfolioProjectList ul li .topLeft {
	background-position: top left; 	
} 
.content .portfolioProjectList ul li .topRight {
	background-position: top right; 
} 
.content .portfolioProjectList ul li .bottomLeft {
	background-position: bottom left; 
} 
.content .portfolioProjectList ul li .bottomRight {
	background-position: bottom right; 
}        
/* ----------------------------------------- project list */

/* ----------------------------------------- project details */
.portfolioProjectDetails{
  padding-bottom:50px;  
}
.portfolioProjectDetailsScreen{
  float:right;
  width:655px;
  margin-top:-15px;
}           
.portfolioProjectDetailsScreen .topBkg{
  width:670px;
  height:70px;
  background: url('../img/bkg/safari_top_bkg.png')
}
.portfolioProjectDetailsScreen .topBkg span{
  display:block;
}
.portfolioProjectDetailsScreen .topBkg span.title{
  padding:22px 20px 0px 20px;
  text-align:center;
  color:#3e3e3e;
  font-family:Arial;
  font-size:12px;
  line-height:14px;
  font-weight:bold;
}
.portfolioProjectDetailsScreen .topBkg span.link{
  padding:9px 0px 0px 213px; 
  line-height:14px;
  text-align:left;
  color:#3e3e3e;
  font-family:Arial;
  font-size:12px;
  font-weight:bold;
}
.portfolioProjectDetailsScreen .repeatBkg{
  width:655px;
  padding:0px 0px 0px 15px;
  background: url('../img/bkg/safari_repeat_bkg.png')
}       
.portfolioProjectDetailsScreen .bottomBkg{
  width:670px;
  height:37px;
  background: url('../img/bkg/safari_bottom_bkg.png')
}
.portfolioProjectDetailsScreen img{
  background: #FFF url('../img/loading2.gif') center center no-repeat;     
}
.portfolioProjectDetailsAbout{
  width:250px;
  float:left;
}                
.portfolioProjectDetailsAbout .text p{
  font-style:italic;
  padding:3px 0px;
}
/* -------------------------------- switch project menu */
.portfolioProjectDetailsAbout .projectList{
  padding-top:20px;          
	border-bottom: 1px solid #c4c4c4;  
	position:relative;
}
.portfolioProjectDetailsAbout .projectList a.showList{
  background: #c4c4c4;
	color: #FFF;
	padding: 2px 15px 2px 15px;
	border: none;
	font-family: Georgia;
	font-size: 12px;          
  line-height:12px;
	font-style: italic;
	float:right;
}
.portfolioProjectDetailsAbout .projectList .projectListContener{
  display:none;
  position:absolute;
  height:482px;
  bottom:0px;
  overflow:hidden;
  background: url('../img/bkg/bkg.jpg');
}
.portfolioProjectDetailsAbout .projectList  .portfolioListMenu {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	top: 0;
	position: relative;
	height: 100%;
	width: 250px;
}
.portfolioProjectDetailsAbout .projectList  .portfolioListMenu li {
	height: 37px;
	text-align: right;
	display: block;
	cursor: hand;
}
.portfolioProjectDetailsAbout .projectList  .portfolioListMenu li a {
	background: #C4C4C4; 
	color:#FFFFFF;
	font-size: 13px;
	font-weight: normal;
	display: inline;
	padding: 15px 8px 5px 20px;
	text-decoration: none;
	font-family: georgia, arial;
	font-style: italic;
}
.portfolioProjectDetailsAbout .projectList  .portfolioListMenu li a span {
	font-size: 11px;
	color: #808080;
	font-weight: bold;
}                            
/* -------------------------------- .switch project menu */
/* -------------------------------- switch project button */
.portfolioProjectDetailsAbout .switchProject a.getNext, .portfolioProjectDetailsAbout .switchProject a.getPrev{
	background: #3fb4df;
	color: #FFF;
	padding: 2px 15px 2px 15px;
	border: none;
	font-family: Georgia;
	font-size: 12px;
	font-style: italic;
	margin-top: 20px;
	cursor: pointer;
	float:left;
}
.portfolioProjectDetailsAbout .switchProject a.getNext{
  float:right;
}                      
/* -------------------------------- .project list button */
/* ----------------------------------------- .project details */
/* ------------------------------------------------------ portoflio page */        
                            
/* ------------------------------------------------------ about page */
.aboutPage{     
	padding-bottom:50px;
}     
.aboutText{
  width:610px;
  float:left;
}                   
.aboutText .text p{
  padding:10px 0px 10px 0px;
  font-style:italic;
}                  
.aboutSub{
  width:280px;
  float:right;
}                                        
/* ------------------------------------------------------ .about page */

/* ------------------------------------------------------ contact page */
.contactPage{     
	padding-bottom:50px;
}
/* -----------------------------------------  contact details */
.contactDetails {
	width: 250px;
	float: left;
}
/* -----------------------------------------  .contact details */
/* -----------------------------------------  contact form */
.contactForm {
	width: 640px;
	float: right; 
}
.contactForm form {
}
.contactForm form ul {
	list-style-type: none;
}
.contactForm form ul li{
  padding-bottom:5px;
}
.contactForm form fieldset {
	float: left;
	width: 310px;
}
.contactForm form fieldset.request {
	float: right;
}
.contactForm form label {
	display: block;
	line-height: 21px;
	font-family: Georgia;
	font-size: 14px;
	font-style: italic;
	padding: 8px 0px 4px 2px;
}
.contactForm form label.error {
	color: red;
	font-size: 12px;
	padding: 0px 0px 0px 2px;
}
.contactForm form .iText, .contactForm form textarea {
	background: #FFF;
	height: 17px;
	width: 288px;
	padding: 5px 10px;
	border: 1px solid #c4c4c4;
	font-family: Georgia;
	font-size: 12px;
	font-style: italic;
}
.contactForm form textarea {
	height: 150px;
	min-width: 288px;
	max-width: 288px;
}
.contactForm form .iButton {
	background: #3fb4df;
	color: #FFF;
	height: 20px;
	padding: 0px 15px;
	border: none;
	font-family: Georgia;
	font-size: 12px;
	font-style: italic;
	margin-top: 10px;
	cursor: pointer;
	clear: both;
	float: right;
}
.contactForm form .infoSend{
  font-style:italic;
  text-align:right;
  padding:5px 0px;
}
.contactForm .sendSuccess{
  font-style:italic;
  text-align:center;
  padding:11px 0px;
}
.contactForm .sendError{
  font-style:italic;
  text-align:center;
  padding:11px 0px;
  color:red;
}

/* -----------------------------------------  .contact form */
/* ------------------------------------------------------ contact page */       
/* --------------------------------------------------------------------- .CONTENT */
/* --------------------------------------------------------------------- .FOOTER */
.footer {   
  height:49px;
	border-top: 1px solid #C4C4C4;
	position: relative;     
  z-index:3;
}
.footer .copy {
	font-size: 11px;
	font-style: italic;
	display: block;
	padding: 20px 0px 10px 0px;
}

.goToTop{
  position:fixed;
  bottom:-40px;
  right:10px;
  z-index:100;
}
.goToTop a{
  background: #3FB4DF;
  padding: 2px 15px;
  font-style:italic;
  height:15px;
  display:block;
  color:#FFF;
  font-size:12px;
}

.keyInfo{
  width:89px;  
  height:85px;   
  position:fixed;
  bottom:40px;
  right:10px;
  z-index:100;
  opacity:0;
  filter:alpha(opacity=0);
}
.keyInfo .keys{ 
}
.keyInfo .keys span{
  display:block;
  width:25px;
  height:25px;    
  background: red;  
  float:left;
  margin:0px 7px 7px 0px;
}
.keyInfo .keys span.up{
  margin-left:32px;
  margin-right:30px;
  background: url('../img/button/keyboard_up.png');
}
.keyInfo .keys span.left{
  background: url('../img/button/keyboard_left.png');
}
.keyInfo .keys span.down{
  background: url('../img/button/keyboard_down.png');
}
.keyInfo .keys span.right{
  margin-right:0px;          
  background: url('../img/button/keyboard_right.png');
}
.keyInfo .keys span.active{
  background-position: 0 -25px;
}
.keyInfo .info{
  clear:both;
  border-top:1px solid #c4c4c4;
  display:block;
  padding:5px 0px;
  text-align:center;
  font-style: italic;
  font-size:11px;
  line-height:13px;
}