@charset "utf-8";

/*	___________________________________
	
	sergeiasanov.ru
	
	Sergei Asanov (http://sadesign.ru)
	18/08/2009
	___________________________________
*/

@import url(/css/typo.css);
@import url(/css/jquery.lightbox-0.5.css);

body {  margin:0; padding:0;}
a { text-decoration: underline;  cursor: pointer; cursor: hand; color:#009aea;}
a:hover { color:#ff0048; }


#contentbox { position:relative;}

.phrase { margin-top:50px; margin-bottom:-20px; width:78%; margin-left:55px;}
.ny {background:url(/i/2011_bg.jpg) no-repeat center; width:100%; height:394px; margin-top:80px; text-align:center;}
.ny .order { padding-top:330px;}

.opening { background: url(/i/leto.jpg) no-repeat; margin-top:120px; margin-left:-100px; padding-left:100px; margin-bottom:160px;}
.opening  .text { padding-top:20px; line-height:21px;}

#outer, #visual { min-height: 100%; position: relative;	min-width: 980px; }
#visual { overflow: hidden; }
#outer {max-width: 1300px; margin: auto; text-align: left; display:block;}

#contacts { position: relative; margin-top:-155px;}
	#contacts .color-line { height:4px; background:url(/i/color_line.gif);}
	#contacts .color-line-blur { height:27px; background:url(/i/color_line_blur_contacts.jpg) repeat-x;}
	#contacts .phone { position: relative; top:0; left:20%; width: 35%; padding-top:30px; margin-left:-80px; padding-left:80px; line-height:19px; padding-bottom:5px; background:url(/i/phone.gif) 0 34px no-repeat;}
	#contacts .phonenumber { font-size:22px; padding-top:9px;}
	#contacts .phone .comm {color:#cccfd0; font: 10px/11px PT Sans Caption, sans-serif; margin-left:-80px; padding-top:12px;}
	noindex:-o-prefocus,#contacts .phone .comm {font: 10px/11px Arial, sans-serif} /* Special for Opera */
	#contacts .mail { position: absolute; top:0; left: 65%; width: 30%; padding-top:30px; margin-left:-80px; padding-left:80px; line-height: 19px; background:url(/i/mail.gif) 0 34px no-repeat;}
	#contacts .mailaddress { font-size:22px; padding-top:8px; }
	#contacts .mail .comm {color:#cccfd0; font: 10px/11px PT Sans Caption, sans-serif; margin-left:-80px; padding-top:13px;}
	noindex:-o-prefocus,#contacts .mail .comm  {font: 10px/11px Arial, sans-serif} /* Special for Opera */

header.page_header { position: relative; height: 125px;}	
	header.page_header  .color-line { height:1px; background:url(/i/color_line.gif) repeat-x;}
	header.page_header  .color-line-blur { height:27px; background:url(/i/color_line_blur.jpg) repeat-x;}
	header.page_header  .contacts-link {position:absolute; top:0px; right:4%; margin-right:123px;}
	header.page_header  #logo { margin-left:20%; margin-top:23px; position: relative;}
		header.page_header  #logo .sign { position: absolute; top:0; left:-32px; background:url(/i/sadesign_logo.png) no-repeat; width:24px; height:25px;}
		header.page_header  #logo a.sergeiasanov { display:block; position:relative; top:4px; width: 154px; height:20px; background:url(/i/sergeiasanov.png) top;}
		header.page_header  #logo img.sergeiasanov { display:block; position:relative; top:4px; width: 154px; height:20px; background:url(/i/sergeiasanov.png) top;}
		header.page_header  #logo a:hover.sergeiasanov { background-position: bottom;}
		header.page_header  #logo .desc { position: absolute; top:3px; left: 165px; color:#b9bdbe; font: 10px/11px PT Sans Caption, sans-serif; width:150px;}					
		noindex:-o-prefocus,header #logo .desc {font: 10px/11px Arial, sans-serif} /* Special for Opera */
		header.page_header  .phone { position: absolute; top:50px; right:4%;}		
	header.page_header  .phone { position: absolute; top:50px; right:4%;}
	header.page_header  nav { position:absolute; top:34px; left:20%; margin-left:340px; font-size: 16px;}
	  header.page_header  nav ul {}
		header.page_header  nav li { height:24px; }
		  header.page_header  nav ul li a { padding-left:13px;}			
		  header.page_header  nav ul li a:hover { border-bottom-color: #ff0048;}
		  header.page_header  nav .cur { background-repeat: no-repeat; color:#859a10; padding:0 14px; display:block; height:26px;}
		  header.page_header  nav .cur a {color:#859a10; padding:0;}
		  header.page_header  nav li#about_current { background-image:url(/i/nav/about.gif);}
		  header.page_header  nav li#portfolio_current { background-image:url(/i/nav/portfolio.gif);}
		  header.page_header  nav li#tools_current { background-image:url(/i/nav/tools.gif);}	
		  header.page_header  nav li#blog_current { background-image:url(/i/nav/blog.gif);}								
		  header.page_header  nav span.numworks {color:#b9bdbe; font: 10px PT Sans Caption, sans-serif; padding-left:5px; }
  		  header.page_header  nav span.rss {color:#b9bdbe; font: 10px PT Sans Caption, sans-serif; padding-left:7px; letter-spacing:1px;}
		  noindex:-o-prefocus,header nav span.numworks {font: 10px/11px Arial, sans-serif; }/* Special for Opera */
		  header.page_header  nav .cur span.numworks {color:#859a10;}		  


.content { padding-left: 20%; margin-top:50px; position: relative; }

/*		
	MAIN FAVWORK 27.05.2010
	____________________________________________________________________
*/

#favworks { margin-left:-20%; min-height: 900px;}
#favworks li { float: left;  height:270px; margin-right:30px; text-align: center; width:278px; margin-top:40px;}
#favworks li .pic { padding-bottom:10px; height:170px; display:table-cell; position: relative; vertical-align: bottom; text-align:center;}
#favworks li header { line-height:19px; }
#favworks li header a:visited {color:#4d6199;}

a.psv { display: block; width: 278px; height:160px; background:url(/i/portfolio/psv/thumb.gif) top no-repeat;}
a.psv:hover { background-position: bottom;}

.maintexts p { margin-top:0;}
.maintexts td { padding-right:50px; padding-top:20px;}
.maintexts li {padding:1px 0;}


/*		
	INFORMATION 20.01.2011
	____________________________________________________________________
*/
#information { font-size: 14px; padding-top: 40px; margin-left: 4%; border-top: solid 1px #dcdede; position: relative; height: 400px;}
#information .blog { width: 20%;}
#information .blog time { color:#b9bdbe; font: 10px/11px PT Sans Caption, sans-serif; display:  block;} 
#information .blog article { padding-top: 15px;}

#information h2 a, #information h1.head2 a  { color: #333738;}
#information h2 .rss { color:#b9bdbe; font-size:10px;}
#information h2.vid { background: url(/i/icons/video.gif) 0 2px no-repeat; padding: 0 0 0 38px; margin: 0 0 0 -38px;  }
#information h2 .num { font-size:10px;}
#information h4.fav { background: url(/i/icons/fav.png) 0 5px no-repeat; padding: 0 0 0 15px; margin: 25px 0 -5px -15px;}

#information .webdevelopment { position: absolute; left: 23%; top:40px; width:33%;}
#information .analytics { position: absolute; left: 60%; top:40px; width:30%;}
#information .photo { position: absolute; left: 23%; top:300px; width:34%; }
#information .photo ul li { margin-top:10px;}
#information .photo ul li { float:left; margin-right:10px;}
#information .photo img { border: solid 1px #afb6b8; padding:2px;}
#information .video { position: absolute; left: 54%; top:300px; width:30%;}

#information .price { color: #b20234;}
span.rub {font-size: 1em;}
span.rub {text-transform: uppercase; }
span.rub span { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: 3px 0 0 -.65em; //display: none; }
span.rub span:before { content: '\2013'; }

/*		
	PORTFOLIO LIST PAGE 31.05.2010
	____________________________________________________________________
*/

#portfoliolinks {margin-top:20px; margin-left:-22px;}
#portfoliolinks article {padding:10px 0; font-size:16px;}
#portfoliolinks header {background-repeat: no-repeat; line-height:23px; background-position: 0 4px; padding-left:22px;}
#portfoliolinks article a:visited.portflink  {color:#4d6199;}
#portfoliolinks time { color:#b9bdbe; font: 10px/11px PT Sans Caption, sans-serif; padding-left:22px; display:  block;}

#numofworks { font-family: 'PT Sans Caption'; color: #eceded; font-size: 14px; font-weight: bold; text-align: center; background: url(/i/portfolio/numofworks_bg.gif) no-repeat; width:235px; height: 205px; position: absolute; top:20px; left: 20%; margin-left:520px; z-index:1000;}
#numofworks .number { font-family: 'PT Sans Narrow'; font-size: 106px; font-weight: bold; letter-spacing:-10px; padding-left: 15px;}
#numofworks .txt { padding-left:30px; margin-top:-20px;}
#numofworks .heart { color: #fadde4;}

ul.portfolio-order { position:absolute; top:20px; left:20%; margin-left: 250px;}
ul.portfolio-order li { float: left; margin-right:20px;}
ul.portfolio-order a { 	text-decoration: none; border-bottom: 1px dashed;}
ul.portfolio-order a.current { color: #000; background: #edeeee; border: none; cursor: default; padding:0 3px;}

/*		
	TOOLS LIST PAGE 31.05.2010
	____________________________________________________________________
*/

#tools { width:98%;}
#tools article {float:left; margin-right:7%; height:270px}
#tools article .pic { padding-bottom:10px; height:170px; display:table-cell; position: relative; vertical-align: bottom;}
#tools article header { line-height:19px; }
#tools article header a:visited {color:#4d6199;}

/*		

/*		
	PORTFOLIO ANY WORK PAGE 27.05.2010
	____________________________________________________________________
*/

.centerbox { text-align: center; margin-top:70px; }
.work { width:950px; margin:0 auto; text-align:left; position: relative;}
.work .opened { font-style: italic; padding-top:5px; color: #a0a7a9}
.work .linkbox { margin-top:10px; position: relative; width: 830px;}
.work .linkbox .link { position: absolute; top:0; left:24px; font-size:16px;}
.work .linkbox .link a { }
.work .linkbox .link a:hover { border-bottom-color:#ff0048; }
.work .linkbox .link .comm { padding-left:10px; color:#b9bdbe;}
.work .linkbox .favicon { position: relative; top:2px;}
.work .social { margin-bottom:20px;}
.work .desc { font-size:16px; margin-top:20px; margin-bottom:10px; margin-left:24px; width:775px;}
.workpic { position:relative; margin-left:-15px; padding-bottom:50px;}
.workpic .social { position:absolute; top:-20px; left:835px; width:150px;}
.workpic .comm { position:absolute; top:11px; left:835px; color:#b9bdbe; font-size: 12px; width:140px;}
noindex:-o-prefocus,.workpic .comm {font: 10px/11px Arial, sans-serif; }/* Special for Opera */
.workpic .people { font-size: 14px; color:#333738;}
.workpic .people .position { font-style: italic; color: #a0a7a9;}
.workpic .name { padding-bottom: 10px;}
.workpic .name a { color: #333738; text-decoration: none;}
.workpic .name a:hover { text-decoration: underline;}
.workpic img { background: url(/i/loader.gif) center 200px no-repeat;}	
.fullcontent { padding-left: 5%; padding-top:50px;}



.maintext { width: 60%; line-height: 21px;}
.myphoto { margin-left:-120px; padding: 10px 0;}

	
/*		
	FLIP 02.02.2010
	____________________________________________________________________
*/		
form#flipper { padding-top:20px;}
form#flipper label {display: block; padding-bottom:20px; }
form#flipper textarea {font-size:18px; padding:4px; line-height:1.3em; width:550px; height:120px; margin-top:2px;}


/*		
	BLOG LJRSS 24.04.2010
	____________________________________________________________________
*/	

aside {position: absolute; top:30px; right:4%; padding-bottom:50px;}
#ljrss {width:200px;}
#ljrss article { padding-bottom:30px; padding-top:10px;}
#ljrss article header { font: 12px "Trebuchet MS", Tahoma, Arial;}
#ljrss article header a {color:#000; font-weight:bold;}
#ljrss article header a:hover {color:#ff0048;}
#ljrss article .date  {font: 9px Arial; color:#a2abb1;}
#ljrss article .post { font-size: 9px; line-height:11px; padding-top:3px; color:#333; padding-bottom:5px;}
#ljrss article .post a { color:#333;}
#ljrss article .comments a { display:block; background:url('/i/blog_comments.gif') no-repeat left top; color:#fff; text-align: center; width:21px; height:15px; font-size:10px; font-weight: bold; padding-top:3px; text-decoration:none;}
#ljrss article .comments a:hover {background-position: bottom;}
.asanovblog { margin-bottom:10px;}
.asanovblog .blog { width:48px; float: left; margin-right:50px; margin-top:-1px; }
 noindex:-o-prefocus,.asanovblog .blog  {margin-right:-50px; }/* Special for Opera */
.asanovblog a.asanovjj {background: url(/i/asanov_jj.gif) no-repeat 60px top; text-indent: -2000px; height:20px; display: block; width:158px;}
.asanovblog a:hover.asanovjj {background-position:60px bottom;}
blockquote { font-style: normal; margin:0 0 0 10px; padding:0;}


/*		
	PORTFOLIO WORK 01.09.2010
	____________________________________________________________________
*/	
strike { color:#999;}
a.pic { display: block; background:url(/i/img_icon.gif) 0 1px no-repeat; padding-left:20px;}

.tasks { padding-bottom:50px; padding-right:50px;}
ul.list { list-style:circle; padding-left:14px; padding-bottom:20px;}
ul.list li { padding-bottom:6px;}
ul.list li ul { list-style-type: lower-latin; padding-left:30px; padding-top:6px;}
.bigitem {font-size:17px; padding:5px 0;}
item { font-size:12px;}
a.dotted {  text-decoration: none; border-bottom: dashed 1px #312e28; color:#312e28}
a:hover.dotted { border-bottom: dashed 1px #c62700; color:#c62700}
.int { padding-bottom:10px; padding-top:10px; padding-left:18px;}

span.help { background:#fff4f4; color:#683333; padding:1px 4px;}

a.lj_button { display:block; width:107px; height:20px; background:url(/i/lj_button.gif) no-repeat top;}
a:hover.lj_button { background-position:bottom;}

.ya_button { display:block; width:107px; height:20px; background:url(/i/ya_button.gif) no-repeat top;}
a:hover.ya_button { background-position:bottom;}

/*		
	NY SALE 30
	____________________________________________________________________
*/
#sale-button { position: absolute; top: 50px; right:4%; z-index:100;}
#sale-button .sale-ok { width: 150px; background: #d3f905; color: #d3f905;}
.salebutton { display: block; background: url(/i/sale/salebutton_bg.jpg) left top no-repeat; width: 217px; height: 50px; color: #fff; font-weight: bold; font-size:16px; position: relative; padding:10px 0 0 20px; text-decoration: none;}
.salebutton:hover {background-position: 0 -60px; color:#fff;}
.salebutton:active {background-position: bottom; color:#fff;}
.salebutton .get { border-bottom: solid 1px;}
.salebutton .purpose { display:block; position:absolute; top:33px; left:20px; font-size:11px;}
.salebutton .p30  { display:block; position:absolute; top:6px; right:10px; font-size:37px; font-family: PT Sans Narrow}
.terms { font-size:11px; color:#b9bdbe; padding-left:6px;}

#fancybox-outer { background: #fff url(/i/sale/saleform_bg.jpg) no-repeat !important;}
#fancybox-content { padding:20px;}
#fancybox-overlay { cursor: default !important;}
form#sale-form { padding: 20px; font-size:16px;}
form#sale-form label { display: block;  line-height:23px; padding-bottom: 10px;}
form#sale-form input { font-size:16px; padding: 5px; width:100%}
form#sale-form .rules {font-size: 14px; padding-bottom:20px; width:380px;}
form#sale-form input.button { width: auto; font-size:25px; margin-top:20px; font-family: PT Sans Caption;}

/*		
	FOOTER
	____________________________________________________________________
*/

footer.page_footer { font-size: 14px; padding-top:20px;  margin-top:90px; padding-bottom:20px; border-top: solid 1px #dcdede; position: relative;}
	footer.page_footer  .aga { position:absolute; top:-30px; left: 20%; color: #b9bdbe; font: 10px/11px PT Sans Caption,sans-serif;}
	footer.page_footer  .aga a {color: #b9bdbe; text-decoration: none;}
	footer.page_footer  #copy { padding-left: 20%; padding-bottom:20px;}
	footer.page_footer  a.lj { position:absolute; top:20px; left:20%; margin-left:270px; display: block; background: url(/i/lj.png) no-repeat; padding-left: 24px;}
	footer.page_footer  a.twitter { position:absolute; top:20px; left:20%; margin-left:450px; display: block; background: url(/i/twitter.png) no-repeat; padding-left: 20px;}
	footer.page_footer  .social { position:absolute; top:20px; left:20%; margin-left: 640px; width:160px; }
	footer.page_footer  .liveinternet { position:absolute; top:20px; left:20%; margin-left:640px;}