301 lines
		
	
	
		
			5.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
		
		
			
		
	
	
			301 lines
		
	
	
		
			5.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
| 
								 | 
							
								/* 
							 | 
						||
| 
								 | 
							
								*
							 | 
						||
| 
								 | 
							
								* Easy front-end framework
							 | 
						||
| 
								 | 
							
								*
							 | 
						||
| 
								 | 
							
								* Copyright (c) 2009 Alen Grakalic
							 | 
						||
| 
								 | 
							
								* http://easyframework.com/license.php
							 | 
						||
| 
								 | 
							
								*
							 | 
						||
| 
								 | 
							
								* supported by Templatica (http://templatica.com)
							 | 
						||
| 
								 | 
							
								* and Css Globe (http://cssglobe.com)
							 | 
						||
| 
								 | 
							
								*
							 | 
						||
| 
								 | 
							
								*/
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								for more info about the strucure of this file 
							 | 
						||
| 
								 | 
							
								please read http://easyframework.com/documentation.php
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								*/
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* HTML elements  */		
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									h1, h2, h3, h4, h5, h6{
							 | 
						||
| 
								 | 
							
										font-weight:normal;
							 | 
						||
| 
								 | 
							
										margin:0;
							 | 
						||
| 
								 | 
							
										line-height:1em;
							 | 
						||
| 
								 | 
							
										}	
							 | 
						||
| 
								 | 
							
									h1{font-size:2em;margin-bottom:.5em;}	
							 | 
						||
| 
								 | 
							
									h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}	
							 | 
						||
| 
								 | 
							
									h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
							 | 
						||
| 
								 | 
							
									h4{font-size:1.25em;margin-bottom:.6em;}
							 | 
						||
| 
								 | 
							
									h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
							 | 
						||
| 
								 | 
							
									ul, ol, dl{padding:0;}
							 | 
						||
| 
								 | 
							
									ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
							 | 
						||
| 
								 | 
							
									li{margin:0 0 0 2em;display:list-item;list-style-position:outside;}	
							 | 
						||
| 
								 | 
							
									blockquote, dd{padding:0 0 0 2em;}
							 | 
						||
| 
								 | 
							
									pre, code, samp, kbd, var{font:100% mono-space,monospace;}
							 | 
						||
| 
								 | 
							
									pre{overflow:auto;}
							 | 
						||
| 
								 | 
							
									abbr, acronym{
							 | 
						||
| 
								 | 
							
										text-transform:uppercase;
							 | 
						||
| 
								 | 
							
										border-bottom:1px dotted #000;
							 | 
						||
| 
								 | 
							
										letter-spacing:1px;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									abbr[title], acronym[title]{cursor:help;}
							 | 
						||
| 
								 | 
							
									small{font-size:.9em;}
							 | 
						||
| 
								 | 
							
									sup, sub{font-size:.8em;}
							 | 
						||
| 
								 | 
							
									em, cite, q{font-style:italic;}
							 | 
						||
| 
								 | 
							
									img{border:none;}			
							 | 
						||
| 
								 | 
							
									hr{display:none;}	
							 | 
						||
| 
								 | 
							
									table{width:100%;border-collapse:collapse;}
							 | 
						||
| 
								 | 
							
									th,caption{text-align:left;}
							 | 
						||
| 
								 | 
							
									form div{margin:.5em 0;clear:both;}
							 | 
						||
| 
								 | 
							
									label{display:block;}
							 | 
						||
| 
								 | 
							
									fieldset{margin:0;padding:0;border:none;}
							 | 
						||
| 
								 | 
							
									legend{font-weight:bold;}
							 | 
						||
| 
								 | 
							
									input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* //  HTML elements */	
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* common */		
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									.left{float:left;margin-right:1em;}
							 | 
						||
| 
								 | 
							
									.right{float:right;margin-left:1em;}
							 | 
						||
| 
								 | 
							
									.center{text-align:center;}
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									.clear{clear:both;}
							 | 
						||
| 
								 | 
							
									.first{margin-left:0 !important;}
							 | 
						||
| 
								 | 
							
									.last{margin-right:0 !important;}
							 | 
						||
| 
								 | 
							
									.top{margin-top:0 !important;}
							 | 
						||
| 
								 | 
							
									.bottom{margin-bottom:0 !important;}	
							 | 
						||
| 
								 | 
							
									.hidden, .print{display:none;}
							 | 
						||
| 
								 | 
							
									.graphic{
							 | 
						||
| 
								 | 
							
										margin:0;
							 | 
						||
| 
								 | 
							
										padding:0;
							 | 
						||
| 
								 | 
							
										display:block;
							 | 
						||
| 
								 | 
							
										overflow:hidden;
							 | 
						||
| 
								 | 
							
										text-indent:-8000px;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* // common */			
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* base */
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									body, table, input, textarea, select, li, button{
							 | 
						||
| 
								 | 
							
										font:1em Helvetica, Arial, Sans-Serif;
							 | 
						||
| 
								 | 
							
										line-height:1.5em;
							 | 
						||
| 
								 | 
							
										color:#333;
							 | 
						||
| 
								 | 
							
										}		
							 | 
						||
| 
								 | 
							
									body{
							 | 
						||
| 
								 | 
							
										font-size:13px;
							 | 
						||
| 
								 | 
							
										background:#fff;
							 | 
						||
| 
								 | 
							
										margin:0;
							 | 
						||
| 
								 | 
							
										padding:0;
							 | 
						||
| 
								 | 
							
										text-align:center;
							 | 
						||
| 
								 | 
							
										}	
							 | 
						||
| 
								 | 
							
									a, a:visited{
							 | 
						||
| 
								 | 
							
										text-decoration:none;
							 | 
						||
| 
								 | 
							
										color:#06C;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									a:hover{color:#999;}
							 | 
						||
| 
								 | 
							
									ins{text-decoration:none;color:#900;font-style:italic;}
							 | 
						||
| 
								 | 
							
									code{color:#555;}
							 | 
						||
| 
								 | 
							
									pre{
							 | 
						||
| 
								 | 
							
										margin-left:2em;
							 | 
						||
| 
								 | 
							
										padding-left:2em;
							 | 
						||
| 
								 | 
							
										border-left:1px solid #ccc;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									blockquote{
							 | 
						||
| 
								 | 
							
										margin-left:2em;
							 | 
						||
| 
								 | 
							
										border-left:1px solid #ccc;
							 | 
						||
| 
								 | 
							
										font-style:italic;
							 | 
						||
| 
								 | 
							
										}	
							 | 
						||
| 
								 | 
							
									dt{font-weight:bold;}
							 | 
						||
| 
								 | 
							
									th, td{padding:.5em 1em;line-height:1.5em;}		
							 | 
						||
| 
								 | 
							
									th{background:#eee;}
							 | 
						||
| 
								 | 
							
									td{border-bottom:1px solid #eee;}
							 | 
						||
| 
								 | 
							
									caption{font-style:italic;color:#777;margin:.5em 0;}	
							 | 
						||
| 
								 | 
							
									fieldset{
							 | 
						||
| 
								 | 
							
										border:1px solid #ccc;
							 | 
						||
| 
								 | 
							
										padding:1em 2em;
							 | 
						||
| 
								 | 
							
										margin:0 0 1.5em 0;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									legend{padding:2px 5px;}	
							 | 
						||
| 
								 | 
							
									form div.col{clear:none;}form div.first{clear:both;}
							 | 
						||
| 
								 | 
							
									form div{overflow:hidden;}
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									input[type="text"], input[type="password"], textarea, .field, .area, select{
							 | 
						||
| 
								 | 
							
										border:1px solid #aaa;
							 | 
						||
| 
								 | 
							
										padding:5px;
							 | 
						||
| 
								 | 
							
										background:#fff;
							 | 
						||
| 
								 | 
							
										width:200px;
							 | 
						||
| 
								 | 
							
										line-height:1em;
							 | 
						||
| 
								 | 
							
										margin:0;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									select{width:212px;}
							 | 
						||
| 
								 | 
							
									textarea, .area{overflow:auto; height:150px; width:400px;}
							 | 
						||
| 
								 | 
							
									input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus, .focus{background:#f5f5f5;outline:none;}
							 | 
						||
| 
								 | 
							
									.submit{}
							 | 
						||
| 
								 | 
							
									button{
							 | 
						||
| 
								 | 
							
										border:none;
							 | 
						||
| 
								 | 
							
										background:#555;
							 | 
						||
| 
								 | 
							
										color:#fff;
							 | 
						||
| 
								 | 
							
										padding:0 2.5em;
							 | 
						||
| 
								 | 
							
										height:2em;
							 | 
						||
| 
								 | 
							
										line-height:2em;
							 | 
						||
| 
								 | 
							
										cursor:pointer;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
									.note, .success, .error{display:block;}
							 | 
						||
| 
								 | 
							
									.error{color:#900;}
							 | 
						||
| 
								 | 
							
									.success{color:#060;}
							 | 
						||
| 
								 | 
							
									.note{font-weight:bold;}
							 | 
						||
| 
								 | 
							
									.notvalid{border:1px solid #900 !important;}
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									.pullquote{
							 | 
						||
| 
								 | 
							
										width:20%;
							 | 
						||
| 
								 | 
							
										float:left;
							 | 
						||
| 
								 | 
							
										margin-right:2em;
							 | 
						||
| 
								 | 
							
										padding-right:2em;
							 | 
						||
| 
								 | 
							
										border-right:1px solid #ccc;
							 | 
						||
| 
								 | 
							
										text-align:right;
							 | 
						||
| 
								 | 
							
										font-size:1.1em;
							 | 
						||
| 
								 | 
							
										font-style:italic;
							 | 
						||
| 
								 | 
							
										color:#777;
							 | 
						||
| 
								 | 
							
										margin-bottom:.5em;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									.boxout{
							 | 
						||
| 
								 | 
							
										width:20%;
							 | 
						||
| 
								 | 
							
										float:right;
							 | 
						||
| 
								 | 
							
										margin-left:2em;
							 | 
						||
| 
								 | 
							
										padding:1em 2em;
							 | 
						||
| 
								 | 
							
										border:1px solid #ccc;
							 | 
						||
| 
								 | 
							
										margin-bottom:.5em;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									#easy_tooltip{
							 | 
						||
| 
								 | 
							
										border:1px solid #e1e1e1;
							 | 
						||
| 
								 | 
							
										padding:2px 10px;
							 | 
						||
| 
								 | 
							
										background:#f5f5f5;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* base */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* layout */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									#container{	
							 | 
						||
| 
								 | 
							
										margin:0 auto;
							 | 
						||
| 
								 | 
							
										width:920px;
							 | 
						||
| 
								 | 
							
										text-align:left;
							 | 
						||
| 
								 | 
							
										position:relative;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									.inner{
							 | 
						||
| 
								 | 
							
										position:relative;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									#header{
							 | 
						||
| 
								 | 
							
										position:relative;
							 | 
						||
| 
								 | 
							
										}	
							 | 
						||
| 
								 | 
							
									#footer{
							 | 
						||
| 
								 | 
							
										position:relative;
							 | 
						||
| 
								 | 
							
										clear:both;
							 | 
						||
| 
								 | 
							
										}	
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
									.content{
							 | 
						||
| 
								 | 
							
										clear:both;
							 | 
						||
| 
								 | 
							
										padding:1em 0;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									.main, .secondary, .tertiary, .quaternary{
							 | 
						||
| 
								 | 
							
										float:left;
							 | 
						||
| 
								 | 
							
										display:inline;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									.main{width:700px;}
							 | 
						||
| 
								 | 
							
									.secondary{width:200px;margin-left:20px;}
							 | 
						||
| 
								 | 
							
									.tertiary{}
							 | 
						||
| 
								 | 
							
									.quaternary{}
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
									/* grid */
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
										.cols{} /* main column container class */
							 | 
						||
| 
								 | 
							
										.col{
							 | 
						||
| 
								 | 
							
											float:left;
							 | 
						||
| 
								 | 
							
											display:inline;
							 | 
						||
| 
								 | 
							
											width:48%;margin-left:4%; /* 2 equal width columns layout - default */
							 | 
						||
| 
								 | 
							
											}	
							 | 
						||
| 
								 | 
							
										.cols3 .col{width:30%;margin-left:5%;} /* 3 equal width columns layout */
							 | 
						||
| 
								 | 
							
										.cols4 .col{width:22%;margin-left:4%;} /* 4 equal width columns layout */
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
										/* use following classes to build custom grid (add as many as you want) */
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
										.col1, .col2, .col3{float:left;display:inline;}
							 | 
						||
| 
								 | 
							
										.col1{}
							 | 
						||
| 
								 | 
							
										.col2{}
							 | 
						||
| 
								 | 
							
										.col3{}
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
										.indent1{}
							 | 
						||
| 
								 | 
							
										.indent2{}
							 | 
						||
| 
								 | 
							
										.indent3{}
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
									/* grid */	
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* // layout */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* navigation */
							 | 
						||
| 
								 | 
							
									
							 | 
						||
| 
								 | 
							
										#nav, #nav ul, #nav li{
							 | 
						||
| 
								 | 
							
											margin:0;
							 | 
						||
| 
								 | 
							
											padding:0;
							 | 
						||
| 
								 | 
							
											list-style:none;
							 | 
						||
| 
								 | 
							
											}	
							 | 
						||
| 
								 | 
							
										#nav li{
							 | 
						||
| 
								 | 
							
											float:left;
							 | 
						||
| 
								 | 
							
											display:inline;
							 | 
						||
| 
								 | 
							
											position:relative;
							 | 
						||
| 
								 | 
							
											line-height:32px;
							 | 
						||
| 
								 | 
							
											height:32px;
							 | 
						||
| 
								 | 
							
											margin-right:2em;
							 | 
						||
| 
								 | 
							
											}	
							 | 
						||
| 
								 | 
							
											
							 | 
						||
| 
								 | 
							
										#nav ul{
							 | 
						||
| 
								 | 
							
											position:absolute;
							 | 
						||
| 
								 | 
							
											left:0;
							 | 
						||
| 
								 | 
							
											top:32px;
							 | 
						||
| 
								 | 
							
											padding:5px 10px;
							 | 
						||
| 
								 | 
							
											width:200px;	
							 | 
						||
| 
								 | 
							
											background:#fff;
							 | 
						||
| 
								 | 
							
											display:none;
							 | 
						||
| 
								 | 
							
											z-index:1000;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										#nav ul li{
							 | 
						||
| 
								 | 
							
											float:none;
							 | 
						||
| 
								 | 
							
											display:block;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
								/* //navigation */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* header */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									#header h1{
							 | 
						||
| 
								 | 
							
										line-height:50px;
							 | 
						||
| 
								 | 
							
										height:50px;
							 | 
						||
| 
								 | 
							
										margin:0;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									#header h1 a{		
							 | 
						||
| 
								 | 
							
										}		
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* // header */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* clearfix */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.inner:after, .content:after, .cols:after, .fixed:after{
							 | 
						||
| 
								 | 
							
										content:"."; 
							 | 
						||
| 
								 | 
							
										display:block; 
							 | 
						||
| 
								 | 
							
										height:0; 
							 | 
						||
| 
								 | 
							
										clear:both; 
							 | 
						||
| 
								 | 
							
										visibility:hidden;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									.inner, .content, .cols, .fixed{display:block;min-height:1%;}
							 | 
						||
| 
								 | 
							
									* html .inner, * html .content, * html .cols, * html .fixed{height:1%;}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* // clearfix */
							 |