/* Reset all margins */
* {
	margin: 0; 
	padding: 0; 
}
html, body {
	width: 100%; 
	height: 100%;
	font-size: 100.01%;
	cursor: default; /* Web page - not a text editor */
}

*[usemap] {
	cursor: hand;
}

/* Reset border for linked images */
img {
	border: none;
}

/* Reset dotted border around links */
a {
   outline: none;
}

/* Reset border, cellpadding and cellspacing for tables */
table, td, tr, th {
	border: none;
	border-collapse: collapse;
}

/* Dashed understrike often applies for links */
.dashed {
	text-decoration: none;
	border-bottom: dashed 0.1em;
}

/* Simplest cleaner */
.clear { clear: both; }

/* The style for text in the center of page (vertical and horizontal) */
#valign {
  	width: 5em;
  	height: 1em;
  	position: relative;
  	top: 50%;
  	margin: 0 auto;
  	border: 0;
	text-align: center;
}




/********** Left and Right columns **********
	
	Description:
		Simple template to create two columned page
		
	Behavior:
		r-columnt margin left greater thatn l-column width
		
	Usage:
		<div class="l-column">
			Menu
		</div>
		<div class="r-column">
			Content
		</div>
*/

.r-column {
	margin-left: 350px;
}          
.l-column {
	width: 300px;
	left: 0;
	position: relative;
	float: left;
	height: auto;
	display: inline-block;
}



/********** Floating blocks **********

	Description:
		Creates right-floating blocks on all width of page.

	Behavior:
		Uses all width of page. Auto-breaks line if doesn't fit.
		Blocks must have the same height for proper work. For custom-height blocks use 'Floating blocks extended' style.
	
	Usage:
		<div class="float-blocks-container">
			<div class="float-block">
				<div class="block"><img src="1.jpg" /></div>
				<div class="block">Field 1</div>
				<div class="block">Field 2</div>
			</div>
		</div>
*/

/* User values */
.float-block {
	width: 200px;
	margin: 20px;
}

/* System values */
.float-block {
	float: left;
}
.float-block .block {
	text-align: center;
}



/**********	Rounded corners **********
	
	Description:
		Creates a block with rounded corners via divs without images.
		
	Behavior:
		Uses a row of center-aligned divs with reducing width to create round effect. Doesn't need any images.
		IE6 needs a fix property 'font-size: 1px'. Must include ie6.css.
		
	Usage (3px radius):
		<div class="rounded-box">
			<span class="r3"></span><span class="r1"></span><span class="r1"></span>
				<div class="inner-box">
					Rounded box without images
				</div>
			<span class="r1"></span><span class="r1"></span><span class="r3"></span>
		</div>
		
		You can repeat 2 or more times the same round, as showed above for 'r1' class, to reach smoother rounding.
		Here it is the sequences of classes for the corners with different radius:
			3 px = r1, r1, r3;
			5 px = r1, r1, r3, r5;
			7 px = 
			10px = r1, r1, r1, r2, r2, r3, r4, r5, r7, r10
			15px = 
			
	This trick also used at Google Mail.
*/

/* User values */
.rounded-box { width: 300px; }
.rounded-box .inner-box { height: 20px; padding: 7px; }
.rounded-box .inner-box, .rounded-box span { background-color: #CCC; } 

/* System values */
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10,
.r11, .r12, .r13, .r14, .r15 { display: block; height: 1px; }
.r15 { margin: 0 15px; }
.r14 { margin: 0 14px; }
.r13 { margin: 0 13px; }
.r12 { margin: 0 12px; }
.r11 { margin: 0 11px; }
.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
.rounded-box .inner-box, 
.rounded-box span {
    clear: both;
}



/********** Wise footer **********

	Description:
		Creates wise footer at the bottom of page. 
		
	Behavior:
		The footer stays at the bottom even if content doesn't takes all the height of the page.
		It is not the analogue of 'position: absolute' or 'fixed'.
		For IE6 css-expression used for emulate wise footer. Must include ie6.css.
		
	Usage:
		<div class="wf-page">
			<div class="wf-content">
				The content
			</div>
		</div>
		<div class="wf-footer">Copyright Andrew Marcus, 2010</div>
*/

/* User values */
.wf-footer {
	height: 10px;
	clear: both;
	margin-top: -20px; /* Must be minus twice as height */
}

/* System values */
.wf-page {
	min-height: 100%;
	height: auto !important;
}           
.wf-content {
	z-index: 1001;
	height: 1%;
}         
.wf-footer {
	position: relative;
	z-index: 1000;
}




/********** Mdashed list **********

	Description:
		Creates <ul> list with &mdash; as bullet.
		
	Behavior:
		Uses the :before selector to insert mdash
		Uses an expression in IE
		Uses special <sup> fix inside created list
		
	Usage:
		<ul class="mdashed">
			<li>Item 1</li>
			<li>Item 2</li>
		</ul>
		
	Based on http://snipplr.com/view/15154/mdash-in-li/
*/

ul.mdashed
{
	list-style-type: none;
}
ul.mdashed li
{
	margin-left: 1.3em;
	padding: 0;
	behavior: expression(!this.before ? this.before = this.innerHTML = '<span style="color: #FFF;">&mdash;&nbsp;</span>' + this.innerHTML : '');
}
ul.mdashed>li:before
{
	content: '\2014\a0';
	float: left;
	margin-left: -1.25em;
}
ul.mdashed sup
{
	position: relative;
	top: -0.5em;
	font-size: 0.75em; //font-size: 0.89em;
	line-height: 0;
	vertical-align: baseline;
}




/* Simple triangle on div's */
.triangle {
		border-left:60px solid #FFF;
		border-right:60px solid #FFF;
		border-bottom:100px solid #000;
		width:0;
		margin-bottom:30px;
}




/* Ruble sign */
@font-face { 
	font-family: "Rubl Sign"; 
	src: url("../files/ruble.eot"); 
}
div.rur { 
	font-family: "Rubl Sign"; 
	text-transform: uppercase; 
	position: relative; 
	display: inline; 
}
.rur div { 
	width: 90%; 
	height: 0.05em; 
	background-color: black; 
	position: absolute; 
	display: inline; 
	top: 60%; 
	left: 0; 
}
.rur_wrapper {
	position: relative;
}




/* image list */
.li_image li {
	background: url("../files/icon.gif") no-repeat 5px 6px;
	padding-left: 20px; 
}