/* * * 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 */