/*
WIKO UKRAINE CSS Document 
Ver. 1.0
Author Mr. Maksym Fedyay

CSS Structure

1. Page LayOut
	1.1 Basics
	1.2 Header
		1.2.1 Logo LayOut
		1.2.2 Main Tabs LayOut
		1.2.3 Sticker LayOut
	1.3 titleBar
	1.4 Title
	1.5 Body
	1.6 Two Columns content
		1.6.1 Left Column
		1.6.2 Right Column
		1.6.3 Side Menu
		1.6.4 Listing
			1.6.4.1 Classic Listing portrait
			1.6.4.2 Classic Listing landscape
	1.7 Footer
2. Form LayOut
	2.1 inputs
	2.2 tables
	2.3 errors
3. Text LayOut
	3.1 Normal
	3.2 Specific text with icons
4. buttons layout
	4.1 pagination
	4.2 button
5. List LayOut
	5.1 Sample One
	5.2 Sample Two
6. 
	6.1
	6.2
*/


/*1. Page LayOut =============================================================*/

	/*1.1 Basics =============================================================*/
		* {
			margin:0pt;
			padding:0pt;
		}
		
		body {
			color:#555555;
			font-family:Verdana,Arial,'Bitstream Vera Sans',sans-serif;
			font-size:14px;
			font-size-adjust:none;
			font-style:normal;
			font-variant:normal;
			font-weight:normal;
			line-height:160%;
			text-align:center;
			background:#FFFFFF url(../images/bg-pattern.jpg) fixed;
		}
		
		a img{
			background:none; 
			border:none;
		}
		
		a:link, a:visited {
			border-bottom: 1px solid #a1cfd4;
			color: #069;
			text-decoration: none;
		}
		
		a:hover {
			border-color: #069;
			background: #069;
			color: #fff;
		}
	
		hr{
			border: 0;
			width: 100%;
			margin: 0 auto;
			border: 1px solid #BCD2E6;
			margin-bottom: 15px;
			margin-top: 15px;
		}
		
		.wrapper{
			margin:0 auto;
			text-align:left;
			width:960px;
			position:relative;		
		}
		
		
		div.bluewrapper{
					background:#CFDFF1;
					-webkit-border-radius:15px;
					-moz-border-radius:15px;
					text-shadow:0 1px 0 #FFFFFF;
					color:#333333;
					border-right: 1px solid #A6C5E6 ;	
					border-left: 1px solid #A6C5E6 ;	
					border-bottom: 1px solid #A6C5E6 ;	
					padding:10px;
		}	
		
		div.whitewrapper{
			border:1px solid #64A5F4/*#BCD2E6*/;
			background:#FFFFFF;
			padding: 10px;
			margin: 5px 0px 5px 0px;
		}			
	/*1.2 Header =============================================================*/
		#header {
			border-bottom:3px solid #AF2212;
			background:#FFFFFF;	
			width:100%;
			clear: both; 
		}
				
		.clearfix:after {
			content: "."; 
			display: block; 
			height: 0; 
			clear: both; 
			visibility: hidden;
		}
		
		/* Hides from IE-mac \*/
		* html .clearfix {height: 1%;}
		/* End hide from IE-mac */
			
		/*1.2.1 Logo LayOut ==================================================*/
			#logo {
				float:left;
				width:359px;
				margin-top: 10px;
				margin-right: 0pt;
				margin-bottom: 0pt;
				margin-left: 0pt;
			}
			
			#logo span, #logo a {
				background: url(../images/logo.png) no-repeat 0px 0px;
				border:medium none;
				display:block;
				height:126px;
				width:359px;
			}		
		/*1.2.2 Main Tabs LayOut =============================================*/
			#mainTabs {
				float:left;
				width:100%;
			}
			#nav {
				list-style:none;
				margin:0;
				padding:0;
				font-family:Arial, Helvetica, sans-serif;
				font-size:24px;
				font-weight:bold;
				position:relative;
				
			}
			#nav li {
				float:left;
				width:170px;
				margin:0;
				padding:0;
				text-align:center;
			}
			
			#nav li a {
				display:block;
				padding:15px;
				height:100%;
				color:#FFF;
				text-decoration:none;
				margin-right:2px;
				border-bottom:0px;
				text-shadow: #000000 0 1px 1px;
				-webkit-border-top-left-radius:5px;
				-webkit-border-top-right-radius:5px;
				-moz-border-radius-topleft:5px;
				-moz-border-radius-topright:5px;
				background: #234B78 url(../images/bg.png) repeat 0px -80px;
			}
			
			
			#nav li:hover a, #nav li a:hover {
				background-position:0px 0px;
				border-bottom:0px;
				background-color:#A81A1D;
			}
			
			#nav #current a {
				background-position:0px 0px;
			}
			
			#nav #current a:hover {
				background-position:0px 0px;
				border:0px !important;
			}
	
			


		/*1.2.3 Sticker LayOut ==============================================*/	
			#sticker {
				float: right;
				width: 396px;
				height: 120px;
				margin: 0 0 20px;
				padding: 6px 16px 0;
				background:#FFFFFF url(../images/sticker.png) 0px -20px no-repeat;
			}
			
/*			#sticker img{
				float: left;
				margin: 6px 12px 0 4px;
				padding: 4px;
				background: #fff;
			}*/
	
			#sticker a:link, #sticker a:visited {
				margin-top: 11px;
				padding: 1px 0;
				border-bottom: 1px solid #069;
				
			}
	
			#sticker a:hover {
				border-bottom: 1px solid #333333;
				background: none;
				color:#333333;
			}
			#sticker div{
			font-family:Georgia, "Times New Roman", Times, serif;
				font-size:22px;
				letter-spacing:2px;
				padding:15px;
			}			
	/*1.3 titleBar ==========================================================*/
		#titleBar{
			background-color:#CFDFF1;
			background-image:url(../images/bg-inner-shadow-top.png);
			background-position:center top;
			background-repeat:no-repeat;
			border-bottom:1px solid #A6C5E6;
			margin:0;
			padding-top:1px;
			clear:both;
		}	
		
		div#titleBar h1{
			color:#002B44;
			font-family:Georgia,"Times New Roman",Times,serif;		
			/*font-family:Helvetica,Arial,sans-serif;*/
			font-weight:normal;
			margin:10px 0pt 0pt;
			font-size:48px;
			line-height:1em;
			margin-bottom:12px;
			text-shadow:0 1px 0 #FFFFFF;			
		}
	/*1.4 Title ==============================================================*/
		#title{
			height:70px;
			clear:both;
		}		
	/*1.5 Body ===============================================================*/
		img {
			border:none;
			background:none;
		}
	
		.demo {
			border:2px solid #FFCC66;
			margin:15px;
		}
		
		#content {
			/*background: url(../images/bg-body.png) repeat-y center;*/
			float:left;
			padding:0px 0px 30px;
			width:100%;
			-moz-background-clip:border;
			-moz-background-inline-policy:continuous;
			-moz-background-origin:padding;
			background:transparent url(../images/bg-content-grad.png) repeat-x scroll center top;
			border-top:1px solid #FFFFFF;
			padding-bottom:50px;			
		}
		
	/*1.6 Two Columns content ================================================*/
		/*1.6.1 Left Column ==================================================*/
			div.onecolumn {
				float:left;
				margin:0 10px 10px 0;
				width:200px;
				/*border:1px dotted #64A5F4;*/
				padding:10px;
				z-index:1000000;
			}		
		/*1.6.2 Right Column =================================================*/
			div.twocolumn {
				float:left;
				margin:0 10px 10px 0;
				padding:10px;
				width:705px;
				margin-top:-1px;
				background: url(../images/bg-content.png) no-repeat left top;
				/*border-top:1px solid #64A5F4;*/
				border-left:2px solid #234B78;
			}
			
			div.last {
				margin-right:0 !important;
			}		
		/*1.6.3 Side Menu ====================================================*/
			#menu ul {
				list-style: none;
				margin: 0 !important;
				padding: 15px 0 0 0;
		   }	
			
			#menu {
				width: 231px;
				margin: -11px;
		   }
		
			#menu li a {
				height: 34px;
				height: 24px;
				background:none; 
				border-bottom:none;
				text-shadow:0 1px 1px #ffffff;
				-webkit-border-bottom-left-radius:5px;
				-webkit-border-top-left-radius:5px;
				-moz-border-radius-bottomleft:5px;
				-moz-border-radius-topleft:5px;
				
			}
			
			#menu li a:link, #menu li a:visited {
				color: #5E7830;
				display: block;
				padding: 6px 0 6px 10px;
			}
			
			#menu li a:hover {
				color: #26370A;
				border-top:#ADC9E8 2px solid;
				border-left:#ADC9E8 2px solid;
				border-bottom:#ADC9E8 2px solid;
				padding: 4px 0 4px 8px;					
			}
			
			#menu li #current {
				color: #26370A;
				border-top:#003366 2px solid;
				border-left:#003366 2px solid;
				border-bottom:#003366 2px solid;
				padding: 4px 0 4px 8px;
			}		
			
			div.list-nav{
				-webkit-border-bottom-left-radius:5px;
				-moz-border-radius-bottomleft:5px;	
				border-left:#003366 1px solid;
				border-bottom:#003366 1px solid;	
				font-size:12px;
				margin-left:5px;
			}
			div.list-nav a {
				text-shadow:0 1px 1px #ffffff;
				-webkit-border-radius:0px !important;
				-moz-border-radius:0px !important;				
				padding: 2px 0 2px 6px !important;
				
			}			
/*			div.list-nav a:link, div.list-nav a:visited {
				color: #5E7830;
				display: block;
				
			}*/			
			
			div.list-nav a:hover{
				border:none !important;
				background-color:#D7EBFF !important;
/*				-webkit-border-bottom-left-radius:5px !important;
				-moz-border-radius-bottomleft:5px !important;	*/				
			}	
			
/*			div.list-nav a:active{
				color:#FFFFFF !important;
				border:none !important;
				background-color:#003366 !important;
			}	*/
			
			div.list-nav-page{
				background-color:#FFFFE6!important;
				border-bottom:#D7EBFF 1px solid!important;
				border-top:#D7EBFF 1px solid!important;
/*				-webkit-border-bottom-left-radius:5px !important;
				-moz-border-radius-bottomleft:5px !important;	*/				
			}						
			
		/*1.6.4 Listing ====================================================*/
			/*1.6.4.1 Classic Listing portrait =============================*/
	
				div.doc-contents div {
					/*border: #C5C5C5 1px solid;*/
					float: left;
				}
				
				div.doc-contents img {
					border:#CCCCCC 4px solid;
					-webkit-border-radius:4px;
					-moz-border-radius:4px;
					margin-right:3px;
					margin-bottom:3px;
					
				}
				
				div.doc-contents div.main-pic-shadow div {
					background:#E2E2E2 url(../images/bg-frame.png) repeat-x top;
					border-top: #FFFFFF 1px solid ;
					border-left: #E3E3E3 1px solid ;
					border-right: #E3E3E3 1px solid ;
					border-bottom: #C5C5C5 1px solid ;
					width: 320px;
					padding: 18px;
					margin-right:0px;
					-webkit-border-radius:15px;
					-moz-border-radius:15px;
					
				}
				div.doc-contents div.main-pic-shadow{
					border:none;
					background-color:#000000;
					padding-bottom:15px;
					background: url(../images/bg-frame-shadow.png) no-repeat bottom;
					
				}
				div.doc-contents div.main-pic-shadow img{
					border-bottom:#FFFFFF 1px solid !important;
					border-top:#C5C5C5 1px solid !important;
					border-left:none !important;
					border-right:none !important;
					
				}
				div.doc-contents div.main-pic-shadow a{
					border:none;
					background:none;
				}				
				div.doc-contents div.description {
					width: 335px;
					/*padding: 5px;*/
					
				}
				
				div.doc-contents div.information {
					width: 100%;
					margin: 5px;
					padding: 5px;
					
				}
				
				div.doc-contents div.extra-pics {
					width: 100%;
					margin: 5px;
					
				}			

				div.doc-contents div.extra-pics a{
					border:none;
					background:none;
				}

				div.extra-pics img {
					background:url(../images/bg-frame.png) repeat-x;
					border:#CCCCCC 4px solid;
					-webkit-border-radius:4px;
					-moz-border-radius:4px;	
					margin-right:3px !important;
					margin-bottom:3px;
				}
			

			
			/*1.6.4.2 Classic Listing landscape ============================*/
			

			
			
			
	/*1.7 Footer =============================================================*/
	
	
		#footer {
			background:#F2F2F2 url(../images/bg-inner-shadow-top.png) no-repeat scroll center top;
			border-top:4px solid #D9D9D9;
			color:#999999;
			float:left;
			font-size:11px;
			padding:0pt 0pt 10px;
			text-align:center;
			width:100%;
		}

		.foot-note {
			-moz-border-radius:13px;
			-webkit-border-radius:13px;
			background-color:#E9EBED;
			border:4px solid #E1E3E5;
			color:#444444;
			margin-top:40px;
			padding:13px 30px;
		}

/*2. Form LayOut ==============================================================*/
	/*2.1 inputs ==============================================================*/
		input.textfield{
			background:#F9F9F9 none repeat scroll 0%;
			border:2px solid #DDDDDD;
			color:#777777;
			font-family:Arial,Verdana,sans-serif;
			font-size:130%;
			padding:4px;
			/*width:250px;*/
		}
		
		input.smalltextfield{
			background:#F9F9F9 none repeat scroll 0%;
			border:2px solid #DDDDDD;
			color:#777777;
			font-family:Arial,Verdana,sans-serif;
			font-size:130%;
			padding:4px;
			width:100px;
		}		
		
		input.textfield, textarea {
			width: 350px;
			padding: 4px;
			border: 2px solid #ddd;
			color: #777;
			background: #f9f9f9;
			font-size: 130%;
			font-family: Arial, Verdana, sans-serif;
		}
		

		input.textfield:focus, textarea:focus, input.smalltextfield:focus {
			border:2px solid #9EC1E0;
			color:#333333;
		}	
	/*2.2 tables ==============================================================*/
		table, td{
			/*width: 250px;*/
			margin: 0 0 10px 0;
			border: 1px solid #ddd;
			text-align:left;
			vertical-align:top;
		}
		
		table.formtable {
			text-align:right;
			/*font-weight:bold;*/
			padding:25px 10px 0 0;
			border-collapse: collapse;
			border:none;
		}
		
		
		table.formtable td, table.formtable td.alt {
			/*width: 250px;*/
			margin: 0 0 10px 0;
			padding: 15px 15px 15px 0;
			border-bottom: 1px solid #ddd;
			border-top:none;
			border-left:none;
			border-right:none;
			text-align: left;
			vertical-align: top;
		}
		
		table.formtable tr.last td {
			border-bottom: none;
		}
		
		table.formtable td.info {
			color: #999;
			font-size: 11px;
			line-height: 130%;
		}
			
	/*2.3 errors ==============================================================*/
		
/*3 Text LayOut ==============================================================*/
	/*3.1 Normal =============================================================*/	

		div#content h4, div#colorbox h4{
			color:#002B44;
			font-family:Arial,Helvetica,sans-serif;
			font-size:20px;
			border:0pt none;
			font-size-adjust:none;
			font-stretch:normal;
			font-style:italic;
			font-variant:normal;
			font-weight:normal;
			letter-spacing:0pt;
			line-height:1.4em;
			margin:20px 0px 0px 0px;

		}		
		
		
		div#content h3, div#colorbox h3{
			border:0pt none;
			color:#CC0000;
			font-family:Georgia,Helvetica,"Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
			font-size:2em;
			font-size-adjust:none;
			font-stretch:normal;
			font-style:italic;
			font-variant:normal;
			font-weight:normal;
			letter-spacing:0pt;
			line-height:1.4em;
			margin:20px 0px 0px 0px;
		}
		
		div#content h2{
			border-bottom:3px solid #BCD2E6;
			clear:both;
			color:#333333;
			font-family:Helvetica,Arial,"Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
			font-size:2.7em;
			font-weight:normal;
			letter-spacing:0pt;
			line-height:1.3em;
			margin:0px 0px 10px 0px;
			/*padding:0.95em 0pt 0pt;*/
		}
		
		div#content h1{
			color:#002B44;
			font-family:Georgia,"Times New Roman",Times,serif;		
			/*font-family:Helvetica,Arial,sans-serif;*/
			font-weight:normal;
			margin:10px 0pt 0pt;
			font-size:48px;
			line-height:0.8em;
			margin-bottom:12px;
			text-shadow:0 1px 0 #FFFFFF;			
		}
		
		div#content ul, ol{
		margin-left:20px;}
		
	/*3.2 Specific text with icons =================================================*/
/*4. buttons layout ============================================================*/
	/*4.1 pagination =============================================================*/
		div#pagination {
			clear:both;
			font-size:14px;
			font-weight:bold;
			margin-bottom:30px;
			margin-left:auto;
			margin-right:auto;
			overflow:hidden;
			text-align:center;
			font-family:Geneva, Arial, Helvetica, sans-serif;
		}
		#wrap div#pagination form {
			margin:0;
			overflow:hidden;
		}
		#pagination a, #pagination input.text, #pagination span {
			display:inline-block;
			float:none;
		}
		#pagination a {
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
			background-color: #E0E0E0;
			border:5px solid #E0E0E0;
			margin:0 3px;
			padding:2px 10px;
		}
		#pagination a:hover {
			background-color:#234B78;
			border-color:#234B78;
			color:#FFFFFF;
			text-decoration:none;
		}
		#pagination a:active {
			background-color:#234B78;
			border-color:#234B78;
		}
		#pagination a.disabled {
			color:#999999;
			cursor:default;
		}
		#pagination a.disabled:hover {
			background-color:#E0E0E0;
			border-color:#E0E0E0;
			color:#999999;
			cursor:default;
		}
		#pagination input.text {
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
			background-image:none;
			border:4px solid #E0E0E0;
			font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
			font-size:95%;
			font-size-adjust:none;
			font-stretch:normal;
			font-style:normal;
			font-variant:normal;
			font-weight:bold;
			line-height:normal;
			margin:0;
			padding:3px 8px 4px;
			width:30px;
		}
		#pagination span {
			border:1px solid transparent;
			color:#999999;
			margin-right:5px;
			padding:5px 8px;
		}
	
	/*4.2 button ===============================================================*/
	/*4.2 go top button ========================================================*/
		
		div.gotop{
			width:78px;
			height:78px;
			border:#003366 2px solid;
			background:#FFFFFF url(../images/up.png) no-repeat 13px 10px;
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
		}