@import "jQuery_UI_uniq.css"; @import "iPhoneCheckboxes.css"; @import "visualize.css"; /* --- 1. CSS RESET --- */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,address,code,del,dfn,em,img,q, dl,dt,dd,ol,ul,li, table,caption,tbody,tfoot,thead,tr,th,td,br,fieldset,textarea{font-family:"Lucida Sans Unicode","Lucida Grande","Trebuchet MS", Helvetica, Arial, sans-serif;line-height:20px;letter-spacing:.1px;word-spacing:1px;margin:0;padding:0;border:0;vertical-align:baseline;} h1,h2,h3,h4,h5,h6,hr,p,ul,ol,dl,pre,address,table,form{margin:0 0 20px} p,h1, h2, h3, h4, h5, h6, ul.check_list, ul.arrowlist{padding-left:2px;} strong, b{font-weight:bold;} em, dfn, i{font-style:italic;} a, input { outline:none; } /* --- 2. GLOBAL DEFINITIONS --- */ body { color:#555; font-size:12px; background:#f0f0f0; } hr { clear:both; float:left; width:100%; margin-top:15px; margin-bottom:20px; border:0; height:0px; border-top:1px solid #e5e5e5; border-bottom:1px solid #f4f4f4; } fieldset hr { border-bottom:1px solid #fff; } h1 { color::#333; font-size:28px; clear:both; } h2 { color:#333; font-size:18px; } h5 { text-transform:uppercase; font-size:16px; margin-bottom:15px; } h1 span { color:#1a1a1a; } /* --- 3. LAYOUT --- */ #container { min-width:700px; max-width:1600px; } #bgwrap { float:left; position:relative; width:100%; background:url('stripe.png') fixed 0 0 repeat-y; } /* --- 3.1 SIDEBAR --- */ #primary_left { clear:both; float:left; width:230px; position:relative; } /* --- 3.1.1 LOGO --- */ #primary_left #logo { clear:both; float:left; width:230px; height:155px; overflow:hidden; background:url('logo_bg.png') 0 0 no-repeat; padding-top:15px; } /* --- 3.1.2 MENU --- */ #menu ul { list-style-type:none; } #menu ul li { clear:both; float:left; background:url('menu_spacer.png') 0 100% no-repeat; width:220px; padding:3px 0; } #menu ul li.nobg { background:none; } #menu ul li a { clear:both; float:left; text-decoration:none; color:#bbb; padding-left:16px; height:40px; } #menu ul li a img { clear:both; float:left; width:32px; height:32px; margin:4px; } #menu ul li a span { text-transform:uppercase; font-size:13x; text-shadow:1px 1px #000; float:left; width:137px; padding:10px 10px 7px 10px; font-family:Arial, Helvetica, sans-serif; } #menu ul li.current a span { background:url('menu_arrow.png') 100% 50% no-repeat; color:#fff; margin-left:5px; text-shadow:#0A5482 1px 1px 0px; } #menu ul li.current a span { margin-left:5px!important; } #menu ul li a:hover span { color:#fff; } #menu ul li.current a { /*padding-left:43px;*/ } #menu ul li.current { background:url('menu_current.png') top right no-repeat; } #menu ul li.current li a { } #menu ul ul { clear:both; float:left; width:175px; display:inline; padding:10px 0 10px 30px; margin-bottom:3px; } #menu ul ul li { } #menu ul ul li, #menu ul ul li a { background:none; height:auto!important; font-size:11px; } #menu ul ul li a { clear:both; float:left; width:140px; padding:3px; text-shadow:1px 1px #000!important; } #menu ul ul li a:hover { color:#fff; } /* --- 3.2 MAIN CONTENT AREA --- */ #primary_right { float:right; width:100%; margin-left:-255px; min-height:1000px; overflow:hidden; } #primary_right .inner { clear:both; float:left; padding:30px; margin-left:230px; position:relative; } /* --- 4.x NOTIFICATIONS --- */ .notification { width: auto; display: block; position: relative; padding:10px 20px 20px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; margin-bottom: 30px; } .notification span { background: url('close.png') no-repeat right top; display: block; width: 19px; height: 19px; position: absolute; top:-9px; right: -8px; } .notification .text { overflow: hidden; } .notification p { width: auto; color: #555; font-size: 11px; line-height: 10px; text-align: justify; float: left; margin-right: 15px; *margin-top: 15px; /*IE8 fix*/ margin-bottom:0!important; padding-top:12px; } .notification strong { font-size:22px; } .autoWidth{ width: auto; } .autoWidth p { width: auto; float: left; } /*SUCCESS BOX*/ .success { border-top: 1px solid #edf7d0; border-bottom: 1px solid #b7e789; background: #dff3a8; background: -moz-linear-gradient(top,#dff3a8,#c4fb92); background: -webkit-gradient(linear, left top, left bottom, from(#dff3a8), to(#c4fb92)); } .success:before { content: url(success.png); float: left; margin: 10px 15px 0px 15px; } .success strong { color: #61b316; margin-right: 15px; } /*WARNING BOX*/ .warning { border-top: 1px solid #fefbcd; border-bottom: 1px solid #e6e837; background: #feffb1; background: -moz-linear-gradient(top,#feffb1,#f0f17f); background: -webkit-gradient(linear, left top, left bottom, from(#feffb1), to(#f0f17f)); } .warning:before { content: url(warning.png); float: left; margin: 2px 15px 0px 25px; } .warning strong { color: #e5ac00; margin-right: 15px; } /*QUICK TIP BOX*/ .tip { border-top: 1px solid #fbe4ae; border-bottom: 1px solid #d9a87d; background: #f9d9a1; background: -moz-linear-gradient(top,#f9d9a1,#eabc7a); background: -webkit-gradient(linear, left top, left bottom, from(#f9d9a1), to(#eabc7a)); } .tip:before { content: url(tip.png); float: left; margin: 7px 15px 0px 15px; } .tip strong { color: #b26b17; margin-right: 15px; } /*ERROR BOX*/ .error { border-top: 1px solid #f7d0d0; border-bottom: 1px solid #c87676; background: #f3c7c7; background: -moz-linear-gradient(top,#f3c7c7,#eea2a2); background: -webkit-gradient(linear, left top, left bottom, from(#f3c7c7), to(#eea2a2)); } .error:before { content: url(error.png); float: left; margin: 7px 15px 0px 15px; } .error strong { color: #b31616; margin-right: 15px; } /*SECURE AREA BOX*/ .secure { border-top: 1px solid #efe0fe; border-bottom: 1px solid #d3bee9; background: #e5cefe; background: -moz-linear-gradient(top,#e5cefe,#e4bef9); background: -webkit-gradient(linear, left top, left bottom, from(#e5cefe), to(#e4bef9)); } .secure:before { content: url(secure.png); float: left; margin: 5px 15px 0px 15px; } .secure strong { color: #6417b2; margin-right: 15px; } /*INFO BOX*/ .info { border-top: 1px solid #f3fbff; border-bottom: 1px solid #bedae9; background: #e0f4ff; background: -moz-linear-gradient(top,#e0f4ff,#d4e6f0); background: -webkit-gradient(linear, left top, left bottom, from(#e0f4ff), to(#d4e6f0)); } .info:before { content: url(info.png); float: left; margin: 5px 15px 0px 21px; } .info strong { color: #177fb2; margin-right: 15px; } /*MESSAGE BOX*/ .message { border-top: 1px solid #f4f4f4; border-bottom: 1px solid #d7d7d7; background: #f0f0f0; background: -moz-linear-gradient(top,#f0f0f0,#e1e1e1); background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e1e1e1)); } .message:before { content: url(message.png); float: left; margin: 12px 15px 0px 15px; } .message strong { color: #323232; margin-right: 15px; } /*DONWLOAD BOX*/ .download { border-top: 1px solid #ffffff; border-bottom: 1px solid #eeeeee; background: #f7f7f7; background: -moz-linear-gradient(top,#f7f7f7,#f0f0f0); background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#f0f0f0)); } .download:before { content: url(download.png); float: left; margin: 3px 15px 0px 18px; } .download strong { color: #037cda; margin-right: 15px; } /*PURCHASE BOX*/ .purchase { border-top: 1px solid #d1f7f8; border-bottom: 1px solid #8eabb1; background: #c4e4e4; background: -moz-linear-gradient(top,#c4e4e4,#97b8bf); background: -webkit-gradient(linear, left top, left bottom, from(#c4e4e4), to(#97b8bf)); } .purchase:before { content: url(purchase.png); float: left; margin: 6px 15px 0px 15px; } .purchase strong { color: #426065; margin-right: 15px; } /*PRINT BOX*/ .print { border-top: 1px solid #dde9f3; border-bottom: 1px solid #8fa6b2; background: #cfdde8; background: -moz-linear-gradient(top,#cfdde8,#9eb3bd); background: -webkit-gradient(linear, left top, left bottom, from(#cfdde8), to(#9eb3bd)); } .print:before { content: url(print.png); float: left; margin: 6px 15px 0px 15px; } .print strong { color: #3f4c6b; margin-right: 15px; } /* --- 4.x DASHBOARD ICONS MENU --- */ ul.dash { list-style-type:none; } ul.dash li { float:left; margin:0 15px 15px 0; width:100px; height:100px; position:relative; z-index:80; border:1px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; background:#fbfbfb; background: -moz-linear-gradient(top,#fbfbfb,#f5f5f5); background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f5f5f5)); } .selected { border:2px solid #e6791c!important; box-shadow:none!important; -moz-box-shadow:none!important; -webkit-box-shadow:none!important; } ul.dash li:hover { cursor:hand; } ul.dash li a { text-decoration:none; clear:both; float:left; width:100px; height:100px; } ul.dash li a img { clear:both; float:left; display:inline; margin:10px 0 5px 18px; } ul.dash li a span { clear:both; float:left; width:100%; text-align:center; color:#666; font-size:11px; } ul.dash li .bubble { position:absolute; font-size:9px; padding:1px 6px 1px 3px; line-height:12px; font-weight:bold; letter-spacing:-1px; top:-7px; right:-8px; color:#fff; z-index:90; border:1px solid #b20606; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; background:#ff2e2e; background: -moz-linear-gradient(top,#ff2e2e,#c80606); background: -webkit-gradient(linear, left top, left bottom, from(#ff2e2e), to(#c80606)); } .clearboth { clear:both; } table.fancy { border-top:2px solid #333; margin-bottom:20px; border-bottom:1px solid #f4f4f4; } table.fancy th { color:#666; text-transform:uppercase; font-size:13px; padding:10px 20px; vertical-align:middle; background:#f5f5f5; font-family:Arial, Helvetica, sans-serif; border-top:1px solid #f4f4f4; } table.fancy td { line-height:20px; padding:10px 20px; font-size:11px; border-bottom:1px solid #e5e5e5; border-top:1px solid #f4f4f4; text-align:center; } table.normal { border:1px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; } table.fullwidth { width:100%; } table.normal td { padding:5px 15px; } table.normal thead th { background: -moz-linear-gradient(top,#fbfbfb,#f5f5f5); background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f5f5f5)); text-transform:uppercase; font-size:10px; font-weight:normal; border-bottom:1px solid #ccc; text-shadow:-1px -1px #fff; padding:5px 15px; text-align:left; } table.normal thead th:hover { cursor:pointer; } table.normal tbody { border-top:1px solid #fff; background:#f4f4f4; } table.normal tbody tr.odd td { background:#fafafa; } table.normal tbody td { font-size:11px; vertical-align:middle; } fieldset { border:1px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; padding:20px 20px 0 20px; background:#fbfbfb; background: -moz-linear-gradient(top,#fbfbfb,#f5f5f5); background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f5f5f5)); margin-bottom:15px; } table tfoot { background:#fafafa; } table tfoot td { border-top:1px solid #fff; background: -moz-linear-gradient(top,#fbfbfb,#f5f5f5); background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f5f5f5)); } fieldset legend { border:1px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; background:#fbfbfb; background: -moz-linear-gradient(top,#fbfbfb,#f5f5f5); background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f5f5f5)); padding:5px 20px; text-transform:uppercase; font-size:11px; } input, select { padding:6px 10px; background:#eee; color:#888; border-width:1px; border-style:solid; border-color:#d9d9d9 #eaeaea white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size:11px; margin-right:15px; } select option { padding:6px 10px; } input.sf { width:180px; } input.mf { width:270px; } input.lf { width:360px; } input[type="radio"], input[type="checkbox"] { margin-right:5px; font-size:10px; } .validate_success { color:#739F1D; } .validate_error { color:red; } fieldset p { } input[type="checkbox"] + label { display: block; height: 16px; } p label { display:inline-block; width:150px; font-size:11px; vertical-align:middle; } label.fix { position:relative; top:-7px; } .field_desc { color:#bbb; font-style:italic; } a.table_icon { float:left; margin-right:5px; padding:5px 5px 0px 5px; border:1px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; background: -moz-linear-gradient(top,#fbfbfb,#f5f5f5); background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f5f5f5)); } a.button_link, input[type="submit"], input[type="reset"], .ui-dialog .ui-dialog-buttonpane button { color:#fff; text-decoration:none; font-size:14px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-shadow:0 1px 1px #0c507b; letter-spacing:0px; text-transform:uppercase; padding:8px 12px 6px 12px; margin:0 10px 5px 0; background: #3aa3e6; background: -moz-linear-gradient(top, #87c6ee, #3aa3e6 2%, #028fe8); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #87c6ee), color-stop(.01, #3aa3e6), to(#028fe8)); border:1px solid #0082d5; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; outline:none; } .ui-dialog .ui-dialog-buttonpane button { -moz-box-shadow: none!important; -webkit-box-shadow: none!important; box-shadow: none!important; font-size:12px; font-family:Arial, Helvetica, sans-serif!important; letter-spacing:0; font-weight:bold; display:inline-block; } a.button_link:hover, input[type="submit"]:hover, input[type="reset"]:hover, .ui-dialog-buttonpane button:hover { text-shadow: 0 1px 1px #6f3a02; border:1px solid #e6791c; border-bottom:1px solid #d86f15; background: #f48423; background: -moz-linear-gradient(top, #ffdf9e, #f5b026 2%, #f48423); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.01, #f5b026), to(#f48423)); cursor:pointer; } /* --- 4.x PAGINATOR --- */ ul.paginator { list-style-type:none; float:right; } ul.paginator li { float:left; } ul.paginator li a { padding:4px 6px; margin:0 5px 0 0; text-decoration:none; font-size:11px; color:#666; border:1px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; background: -moz-linear-gradient(top,#fbfbfb,#f5f5f5); background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f5f5f5)); } ul.paginator li a.current { border:1px solid #1a1a1a; color:#ccc; background:url('button_repeater.png') 0 0 repeat-x; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 1px 1px 0px #999; -webkit-box-shadow: 1px 1px 0px #999; box-shadow: 1px 1px 0px #999; } /* --- 3.x COLUMNS --- */ .column {display:block; min-height:50px;} .one_half{ width:48%; } .one_third{ width:30.66%; } .two_third{ width:65.33%; } .one_fourth{ width:22%; } .three_fourth{ width:74%; } .one_fifth{ width:16.8%; } .two_fifth{ width:37.6%; } .three_fifth{ width:58.4%; } .four_fifth{ width:67.2%; } .one_sixth{ width:13.33%; } .five_sixth{ width:82.67%; } .one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:4%; float:left; } .last{ margin-right:0 !important; clear:right; } /* --- 4.x TOOLTIPS --- */ #easyTooltip { position:relative; padding:10px 15px 10px 15px; color:#FFF; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; min-width:60px; text-shadow: 0 1px 1px #6f3a02; line-height:16px; z-index:100; border:1px solid #e6791c; border-bottom:1px solid #d86f15; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background: #f48423; background: -moz-linear-gradient(top, #ffdf9e, #f5b026 2%, #f48423); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.01, #f5b026), to(#f48423)); } #easyTooltip:before { content:"\00a0"; display:block; position:absolute; bottom:-16px; left:46px; width:0; height:0; border:8px solid transparent; border-top-color:#b25708; } #easyTooltip:after { content:"\00a0"; display:block; position:absolute; bottom:-14px; left:47px; width:0; height:0; border:7px solid transparent; border-top-color:#f48423; } table { border-spacing:0; }