datatables_style_02.css 63 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167
  1. /***
  2. * Created by: Mienard Lumaad
  3. * Date: Nov 26, 2011
  4. * Website: http://themepixels.com/
  5. ***/
  6. @font-face {
  7. font-family: 'BebasNeueRegular';
  8. src: url('../font/BebasNeue-webfont.eot');
  9. src: url('../font/BebasNeue-webfontd41d.eot?#iefix') format('embedded-opentype'),
  10. url('../font/BebasNeue-webfont.woff') format('woff'),
  11. url('../font/BebasNeue-webfont.ttf') format('truetype'),
  12. url('../font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
  13. font-weight: normal;
  14. font-style: normal;
  15. }
  16. html, body, div, span, applet, object, iframe,
  17. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  18. a, abbr, acronym, address, big, cite, code,
  19. del, dfn, em, font, img, ins, kbd, q, s, samp,
  20. small, strike, strong, sub, sup, tt, var,
  21. b, u, i, center,
  22. dl, dt, dd, ol, ul, li,
  23. fieldset, form, label, legend,
  24. table, caption, tbody, tfoot, thead, tr, th, td {
  25. background: transparent;
  26. border: 0;
  27. margin: 0;
  28. padding: 0;
  29. vertical-align: baseline;
  30. }
  31. /************GENERAL STYLES****************/
  32. body { background: #fff url(../images/bgmain.png); font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666; }
  33. body.login { background: #555 url(../images/bgmain.png); }
  34. body.errorpage { background-color: #666; }
  35. a { color: #069; text-decoration: none; outline: none; }
  36. a:hover { text-decoration: underline; }
  37. a.whitelink { color: #ccc; }
  38. a.whitelink:hover { color: #fff; text-decoration: none; }
  39. a img { border: 0; }
  40. input,select,textarea { font-size: 12px; font-family: Arial, Helvetica, sans-serif; outline: none; }
  41. small, .small { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
  42. h1 { font-size: 28px; }
  43. h2 { font-size: 24px; }
  44. h3 { font-size: 20px; }
  45. h4 { font-size: 16px; }
  46. h1,h2,h3 { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; letter-spacing: 0.5px; font-weight: normal; color: #333; }
  47. .radius2 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
  48. .radius3 { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
  49. .radius25 { -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; }
  50. .radius50 { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
  51. .bebas { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; }
  52. .width1 { width: 1px; }
  53. button,input,select,textarea { font-size: 12px; font-family: Arial, Helvetica, sans-serif; margin: 0; }
  54. /***********LOGIN PAGE STYLES*************/
  55. .loginbox { background: #444; padding: 10px; width: 400px; margin: 8% auto 0 auto; position: relative; }
  56. .loginboxinner {
  57. background: #333; padding: 20px; position: relative; border: 1px solid #333;
  58. -moz-box-shadow: inset 0 1px 0 #444; -webkit-box-shadow: inset 0 1px 0 #444; box-shadow: inset 0 1px 0 #444;
  59. }
  60. .loginheader { height: 60px; }
  61. .loginform { margin-top: 20px; }
  62. .loginbox h1 { font-size: 30px; letter-spacing: 1px; color: #555; font-weight: normal; padding-top: 10px; }
  63. .loginbox .logo { position: absolute; top: 20px; right: 20px; }
  64. .loginbox p { margin: 10px 0 15px 0; }
  65. .loginbox label { display: block; color: #ccc; letter-spacing: 1px; font-size: 18px; }
  66. .loginbox input {
  67. padding: 12px 10px; background: #282828 url(../images/loginputbg.png) repeat-x top left; color: #ccc;
  68. font-family: Arial, Helvetica, sans-serif; margin-top: 8px; font-size: 15px; border: 0; width: 340px;
  69. -moz-box-shadow: 0 1px 0 #444; -webkit-box-shadow: 0 1px 0 #444; box-shadow: 0 1px 0 #444; outline: none;
  70. }
  71. .loginbox button {
  72. background: #999; padding: 10px 20px; font-size: 18px; border: 0; letter-spacing: 1px; color: #333; width: 360px;
  73. -moz-box-shadow: 1px 1px 3px #222; -webkit-box-shadow: 1px 1px 3px #222; box-shadow: 1px 1px 3px #222; cursor: pointer;
  74. }
  75. .loginbox button.default { background: #999; color: #333; }
  76. .loginbox button.hover { background: #ccc; color: #000; }
  77. .loginbox button:active { background: #111; color: #fff; }
  78. .loginerror { color: #990000; background: #fbe3e3; padding: 0 10px; overflow: hidden; display: none; }
  79. .loginerror { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
  80. .loginerror p { margin: 10px 0; }
  81. /**********HEADER STYLES**************/
  82. .header {
  83. background: #333 url(../images/headbg.png) repeat-x top left; margin: 10px; position: relative; border: 1px solid #222;
  84. -moz-box-shadow: 1px 1px 3px #666; -webkit-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666;
  85. }
  86. .headerinner { padding: 10px; }
  87. .headercolumn { height: 33px; padding: 12px 10px; border-left: 1px solid #444; border-right: 1px solid #272727; float: left; position: relative; }
  88. .headleft { position: absolute; top: 0; left: 0; }
  89. .headleft .headercolumn { border-color: #2c2c2c; border-left: 0; }
  90. .headleft .headercolumn:first-child { margin-left: 260px; border-left: 1px solid #2c2c2c; }
  91. .headlinkwrap { width: 38px; }
  92. .headlink { position: absolute; top: 0; left: 0; padding: 19px 15px; }
  93. .headlink:hover { background: #373737; }
  94. .searchbox { display: inline-block; }
  95. .searchbox input { border: 0; padding: 9px 8px; font-size: 13px; background: #222; color: #999; width: 200px; font-style: italic; }
  96. .searchbox input { -moz-box-shadow: inset 1px 1px 5px #171717; }
  97. .searchbox input:focus { font-style: normal; }
  98. .headright { position: absolute; top: 0; right: 0; }
  99. .headright img { vertical-align: middle; }
  100. .headright .noalert { display: inline-block; padding: 8px 10px 9px 10px; background: #999; color: #fff; font-weight: bold; }
  101. .headright .noalert:hover { text-decoration: none; }
  102. .headright .notialert { display: inline-block; padding: 8px 10px 9px 10px; background: #cc0000; color: #fff; font-weight: bold; }
  103. .headright .notialert:hover { text-decoration: none; }
  104. .headright .userinfo {
  105. display: inline-block; border: 1px solid #272727; padding: 3px 25px 3px 3px; color: #ccc;
  106. vertical-align: top; background: #373737 url(../images/menudroparrow.png) no-repeat right -31px; position: relative;
  107. -moz-box-shadow: 0 1px 0 #444; -webkit-box-shadow: 0 1px 0 #444; box-shadow: 0 1px 0 #444;
  108. }
  109. .headright .userinfo:hover { text-decoration: none; background-color: #3c3c3c; }
  110. .headright .userinfo span { display: inline-block; padding: 0 10px; }
  111. .headright .userinfodrop {
  112. background: #fff url(../images/arrow2.png) no-repeat right -87px; color: #333; z-index: 20;
  113. border: 1px solid #fff; height: 29px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
  114. }
  115. .headright .userinfodrop:hover { background-color: #fff; color: #333; border: 1px solid #fff; }
  116. .headright .headercolumn:last-child { border-right: 0; }
  117. .headright .headercolumn:first-child { border-left: 0; }
  118. .userdrop {
  119. background: #fff; position: absolute; top: 45px; right: 10px; display: none; overflow: hidden;
  120. z-index: 10; -moz-border-radius: 2px 0 2px 2px; -webkit-border-radius: 2px 0 2px 2px; border-radius: 2px 0 2px 2px;
  121. -moz-box-shadow: 0 0 2px #333; -webkit-box-shadow: 0 0 2px #333; box-shadow: 0 0 2px #333;
  122. }
  123. .userdrop ul { list-style: none; margin: 5px 0; }
  124. .userdrop ul li { display: block; }
  125. .userdrop ul li a { display: block; padding: 8px 10px; color: #666; }
  126. .userdrop ul li a:hover { background: #eee; text-decoration: none; }
  127. .headerinner2 { border-top: 1px solid #444; height: 57px; position: relative; }
  128. .userinfomenu { position: absolute; top: 0; right: 0; }
  129. .userinfomenu img { vertical-align: middle; }
  130. .userinfomenu .userinfo {
  131. display: inline-block; border: 1px solid #272727; padding: 3px 25px 3px 3px; color: #ccc;
  132. vertical-align: top; background: #373737 url(../images/menudroparrow.png) no-repeat right -31px; position: relative;
  133. -moz-box-shadow: 0 1px 0 #444; -webkit-box-shadow: 0 1px 0 #444; box-shadow: 0 1px 0 #444;
  134. }
  135. .userinfomenu .userinfo:hover { text-decoration: none; background-color: #3c3c3c; }
  136. .userinfomenu .userinfo span { display: inline-block; padding: 0 10px; }
  137. .userinfomenu .userinfodrop {
  138. background: #fff url(../images/arrow2.png) no-repeat right -87px; color: #333; z-index: 20;
  139. border: 1px solid #fff; height: 29px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
  140. }
  141. .userinfomenu .userinfodrop:hover { background-color: #fff; color: #333; border: 1px solid #fff; }
  142. .headright .notiactive {
  143. background: #fff; color: #333; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
  144. position: relative; z-index: 20; height: 18px;
  145. }
  146. .notiwrapper { position: relative; display: inline-block; min-height: 50px; }
  147. .notibox {
  148. background: #fff; padding: 10px; position: absolute; z-index: 10; right: 0; top: 32px; width: 300px; line-height: 21px;
  149. -moz-box-shadow: 0 0 2px #333; -webkit-box-shadow: 0 0 2px #333; box-shadow: 0 0 2px #333; border: 1px solid #eee;
  150. -moz-border-radius: 2px 0 2px 2px; -webkit-border-radius: 2px 0 2px 2px; border-radius: 2px 0 2px 2px; display: none;
  151. }
  152. .notibox .loader { font-style: italic; color: #666; display: none; padding: 5px 0; font-size: 11px; }
  153. .noticontent { margin: 5px 0; }
  154. .tabmenu { list-style: none; }
  155. .tabmenu li { display: inline-block; float: left; width: 50%; border-bottom: 1px solid #ddd; }
  156. .tabmenu li a { display: block; font-weight: bold; color: #666; padding: 8px 10px; text-align: center; }
  157. .tabmenu li a:hover { text-decoration: none; color: #333; }
  158. .tabmenu li.current a { background: #ddd; color: #333; }
  159. /***** MESSAGE LIST *****/
  160. .msglist { list-style: none; font-size: 11px; line-height: 16px; }
  161. .msglist li { display: block; background-color: #eee; background-repeat: no-repeat; background-position: 10px 10px; border: 1px solid #ddd; border-top: 0; }
  162. .msglist li:first-child { border-top: 1px solid #ddd; }
  163. .msglist li.message { background-image: url(../images/icons/default/mail.png); }
  164. .msglist li.user { background-image: url(../images/icons/default/users.png); }
  165. .msglist li.call { background-image: url(../images/icons/default/call.png); }
  166. .msglist li.calendar { background-image: url(../images/icons/default/calendar.png); }
  167. .msglist li.settings { background-image: url(../images/icons/default/settings.png); }
  168. .msglist li.new { background-color: #fff; }
  169. .msglist li .msg { margin-left: 35px; background: #f7f7f7; padding: 8px 10px; border-left: 1px solid #ddd; }
  170. .msglist li.new .msg { background: #fff; }
  171. .msglist li a.subject { margin: 2px 0; color: #333; font-weight: bold; display: block; }
  172. .msglist li a.subject:hover { text-decoration: none; color: #666; }
  173. .msgmore a { display: block; text-align: center; color: #666; background: #ccc; padding: 5px 0; margin-top: 5px; font-size: 11px; font-weight: bold; }
  174. .msgmore a:hover { text-decoration: none; background: #bbb; color: #333; }
  175. /***COLUMNS***/
  176. .one_half{ width:48.5%; }
  177. .one_third{ width:31.16%; }
  178. .two_third{ width:65.83%; }
  179. .one_fourth{ width:22.5%; }
  180. .three_fourth{ width:74.5%; }
  181. .one_fifth{ width:17.3%; }
  182. .two_fifth{ width:38.1%; }
  183. .three_fifth{ width:58.9%; }
  184. .four_fifth{ width:67.7%; }
  185. .one_sixth{ width:13.83%; }
  186. .five_sixth{ width:83.17%; }
  187. .one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,
  188. .two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:3%; float:left; }
  189. .last{ margin-right:0 !important; clear:right; }
  190. /**********MAIN CONTENT STYLES*******/
  191. .mainwrapper { margin: 10px; position: relative; }
  192. /**LEFT**/
  193. .mainleft { width: 250px; position: absolute; top: 0; left: 0; padding-bottom: 20px; }
  194. .leftmenu { -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee; }
  195. .leftmenu ul { list-style: none; }
  196. .leftmenu ul li { display: block; position: relative; }
  197. .leftmenu ul li a {
  198. border: 1px solid #ddd; border-top: 0; display: block; background: #fcfcfc url(../images/icons/default/sprites.png); color: #666; padding-left: 35px;
  199. background-repeat: no-repeat; background-position: 8px center; font-weight: bold;
  200. }
  201. .leftmenu ul li a:hover { color: #333; text-decoration: none; background-color: #eee; }
  202. .leftmenu ul li:first-child a { border-top: 1px solid #ddd; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; }
  203. .leftmenu ul li:last-child a { -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; }
  204. .leftmenu ul li a span { display: block; padding: 8px 10px; border-left: 1px solid #eee; background: #fff; }
  205. .leftmenu ul li a:hover span { border-left: 1px solid #ddd; background: #f7f7f7; }
  206. .leftmenu ul li.current a { background-color: #222; color: #fff; border: 1px solid #222; }
  207. .leftmenu ul li.current a span { border-left: 1px solid #444; background: #333; }
  208. .leftmenu ul li a.menudrop:hover span { background: #f7f7f7 url(../images/menudroparrow.png) no-repeat right 0; }
  209. .leftmenu ul li.current a.menudrop:hover span { background: #333 url(../images/menudroparrow.png) no-repeat right -31px; }
  210. .leftmenu ul li a.active { background-color: #eee; }
  211. .leftmenu ul li a.active span { background: #f7f7f7 url(../images/menudroparrow.png) no-repeat right 0; border-left: 1px solid #ddd; }
  212. .leftmenu ul li.current a.active { background-color: #222; }
  213. .leftmenu ul li.current a.active span { background: #333 url(../images/menudroparrow.png) no-repeat right -31px; border-left: 1px solid #444; }
  214. .leftmenu ul li a em { font-style: normal; }
  215. .leftmenu ul li a.dashboard { background-position: -154px -443px; }
  216. .leftmenu ul li a.widgets { background-position: -190px -443px; }
  217. .leftmenu ul li a.tables { background-position: -82px -480px; }
  218. .leftmenu ul li a.elements { background-position: -10px -443px; }
  219. .leftmenu ul li a.charts { background-position: -119px -480px; }
  220. .leftmenu ul li a.media { background-position: -47px -408px; }
  221. .leftmenu ul li a.form { background-position: -154px -262px; }
  222. .leftmenu ul li a.editor { background-position: -154px -262px; }
  223. .leftmenu ul li a.grid { background-position: -190px -443px; }
  224. .leftmenu ul li a.calendar { background-position: -82px -155px; }
  225. .leftmenu ul li a.buttons { background-position: -47px -443px; }
  226. .leftmenu ul li a.chat { background-position: -119px -299px; }
  227. .leftmenu ul li a.contacts { background-position: -82px -227px; }
  228. .leftmenu ul li a.users { background-position: -82px -191px; }
  229. .leftmenu ul li a.error { background-position: -119px -119px; }
  230. .leftmenu ul li .menutip {
  231. position: absolute; z-index: 100; left: 38px; top: 0; background: url(../images/blacktrans.png); color: #fff; padding: 9px 10px; display: none;
  232. -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
  233. }
  234. .leftmenu ul li ul { margin: 0 0 10px 36px; display: none; }
  235. .leftmenu ul li ul li:first-child a { border-top: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
  236. .leftmenu ul li ul li:last-child a { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
  237. .leftmenu ul li ul li a { padding-left: 0; background: #f7f7f7; }
  238. .leftmenu ul li ul li a span { border-left: 0; }
  239. .leftmenu ul li ul li a:hover span { border-left: 0; background: #eee; }
  240. .leftmenu ul li.current ul li a { border-top: 0; border-bottom: 1px solid #272727; }
  241. .leftmenu ul li.current ul li a span { border-left: 0; }
  242. .leftmenu ul li.current ul li a:hover span { background: #2e2e2e; }
  243. /**SHOW ICON ONLY LEFT MENU**/
  244. .lefticon .mainleft { width: 34px; }
  245. .lefticon .leftmenu { overflow: none;}
  246. .lefticon .leftmenu ul li { width: 250px; }
  247. .lefticon .leftmenu ul li a { width: 2px; height: 32px; }
  248. .lefticon .leftmenu ul li a span { display: none; }
  249. .lefticon .maincontent { margin-left: 45px; }
  250. #togglemenuleft { border-top: 1px solid #eee; margin-top: 20px; text-align: center; }
  251. #togglemenuleft a {
  252. display: inline-block; position: relative; top: -13px; width: 22px; height: 22px;
  253. background: url(../images/toggle.png) no-repeat 0 0; cursor: pointer;
  254. }
  255. #togglemenuleft a.toggle { background: url(../images/toggle.png) no-repeat 0 -25px; text-align: left; }
  256. /**CONTENT**/
  257. .maincontent { margin: 0 310px 0 260px; }
  258. .maincontentinner { }
  259. /**MAIN TAB MENU**/
  260. .maintabmenu { list-style: none; margin: 0; line-height: 21px; position: relative; z-index: 5; }
  261. .maintabmenu li { display: inline-block; }
  262. .maintabmenu li a {
  263. padding: 8px 20px 4px 20px; color: #999; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size: 20px;
  264. -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; border: 1px solid #ddd;
  265. letter-spacing: 0.8px; display: block; background: #eee url(../images/titlebg.png) repeat-x top left; text-shadow: 1px 1px #f7f7f7;
  266. }
  267. .maintabmenu li a:hover { text-decoration: none; color: #666; background: #ddd; border-color: #ccc; text-shadow: 1px 1px #e7e7e7; }
  268. .maintabmenu li.current a { display: block; background: #fff; border: 1px solid #ddd; border-bottom: 1px solid #fff; color: #333; }
  269. .maintabmenu li.current a:hover { text-shadow: none; }
  270. .content {
  271. padding: 20px; border: 1px solid #ddd; background: #fff; margin-top: -1px; position: relative; line-height: 21px;
  272. -moz-border-radius: 0 2px 2px 2px; -webkit-border-radius: 0 2px 2px 2px; border-radius: 0 2px 2px 2px;
  273. -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee;
  274. }
  275. .contenttitle { background: #222; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
  276. .contenttitle h2 {
  277. font-size: 18px; letter-spacing: 0.8px; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 0 0 10px;
  278. background-repeat: no-repeat; background-image: url(../images/icons/default/sprites.png); background-position: -154px -443px; color: #fff;
  279. }
  280. .contenttitle h2 span {
  281. display: block; padding: 6px 0 6px 10px; margin-left: 25px; border-left: 1px solid #444; background: #333;
  282. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; text-shadow: 1px 1px #222;
  283. }
  284. .contenttitle h2.inbox { background-position: -82px -335px; }
  285. .contenttitle h2.table { background-position: -82px -480px; }
  286. .contenttitle h2.form { background-position: -154px -262px; }
  287. .contenttitle h2.chart { background-position: -10px -227px; }
  288. .contenttitle h2.image { background-position: -10px -408px; }
  289. .contenttitle h2.button { background-position: -47px -443px; }
  290. .widgetlist { list-style: none; }
  291. .widgetlist li { float: left; margin-right: 10px; margin-bottom: 10px; }
  292. .widgetlist li a {
  293. display: inline-block; padding: 85px 20px 20px 20px; background-repeat: no-repeat; background-position: center 20px; color: #eee; font-weight: bold;
  294. background-color: #bbb; width: 80px; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  295. }
  296. .widgetlist li a:hover { text-decoration: none; }
  297. .widgetlist li a.default { background-color: #bbb; }
  298. .widgetlist li a.hover { background-color: #666; }
  299. .widgetlist li a.events { background-image: url(../images/icons/default/events.png); }
  300. .widgetlist li a.message { background-image: url(../images/icons/default/message.png); }
  301. .widgetlist li a.upload { background-image: url(../images/icons/default/image.png); }
  302. /*****STANDARD TABLE (tables.html)*****/
  303. .stdtable { width: 100%; }
  304. .stdtable .con0 { background: #fcfcfc; }
  305. .stdtable .con1 { background: #f9f9f9; }
  306. .stdtable th, .stdtable td { line-height: 16px; vertical-align: middle; }
  307. .stdtable thead th, .stdtable thead td { padding: 5px 10px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
  308. .stdtable tfoot th, .stdtable tfoot td { padding: 5px 10px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
  309. .stdtable thead th:first-child, .stdtable tfoot th:first-child,
  310. .stdtable thead td:first-child, .stdtable tfoot td:first-child { border-left: 1px solid #ddd; }
  311. .stdtable thead th.head0, .stdtable tfoot th.head0, .stdtable thead td.head0, .stdtable tfoot td.head0 { background-color: #eee; }
  312. .stdtable thead th.head1, .stdtable tfoot th.head1, .stdtable thead td.head1, .stdtable tfoot td.head1 { background-color: #ddd; }
  313. .stdtable thead th.sorting, .stdtable thead td.sorting {
  314. background-image: url(../images/sort_both.png); background-repeat: no-repeat; background-position: right 3px; }
  315. .stdtable thead th.sorting_asc, .stdtable thead td.sorting_asc {
  316. background-image: url(../images/sort_asc.png); background-repeat: no-repeat; background-position: right 4px; }
  317. .stdtable thead th.sorting_desc, .stdtable thead td.sorting_desc {
  318. background-image: url(../images/sort_desc.png); background-repeat: no-repeat; background-position: right 4px; }
  319. .stdtable thead td { font-weight: bold; }
  320. .stdtable thead td.center { text-align: center; }
  321. .stdtable tbody tr td { padding: 8px 10px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; }
  322. .stdtable tbody tr:last-child td { border-bottom: 1px solid #ccc; }
  323. .stdtable tbody tr td:first-child { border-left: 1px solid #ddd; }
  324. .stdtable tbody tr td:last-child { border-right: 1px solid #ddd; }
  325. .stdtable tbody tr:hover td, .stdtable tbody tr.selected td { background: #fffccc; color: #333; }
  326. .stdtable tbody tr.togglerow td { background: #fff; }
  327. .stdtable tbody tr.togglerow:hover td { background: #fff; }
  328. .stdtable tbody tr.hiderow { display: none; }
  329. .tableoptions { background: #eee url(../images/titlebg.png) repeat-x top left; border: 1px solid #ccc; border-top: 0; padding: 8px; }
  330. .tableoptions button {
  331. background: #fcfcfc url(../images/titlebg.png) repeat-x top left; font-size: 11px; color: #666; padding: 7px 10px;
  332. border: 1px solid #bbb; -moz-box-shadow: 1px 1px 2px #ddd; -webkit-box-shadow: 1px 1px 2px #ddd; box-shadow: 1px 1px 2px #ddd; margin: 0; outline: none;
  333. }
  334. .tableoptions button:hover { background: #eee; cursor: pointer; }
  335. .tableoptions select {
  336. background: #fcfcfc url(../images/titlebg.png) repeat-x top left; padding: 6px 5px 7px 5px; border: 1px solid #bbb; margin: 0; outline: none;
  337. -moz-box-shadow: 1px 1px 2px #ddd; -webkit-box-shadow: 1px 1px 2px #ddd; box-shadow: 1px 1px 2px #ddd; font-size: 11px; color: #666;
  338. }
  339. /***** DYNAMIC TABLE (tables.html) *****/
  340. .dataTables_wrapper { position: relative; }
  341. .dataTables_length, .dataTables_paginate { background: #eee url(../images/titlebg.png) repeat-x top left; border: 1px solid #ccc; border-top: 0; padding: 8px; }
  342. .dataTables_wrapper select {
  343. background: #fcfcfc url(../images/titlebg.png) repeat-x top left; padding: 5px; border: 1px solid #bbb; margin: 0; outline: none;
  344. -moz-box-shadow: 1px 1px 2px #ddd; -webkit-box-shadow: 1px 1px 2px #ddd; box-shadow: 1px 1px 2px #ddd; font-size: 11px; color: #666;
  345. }
  346. .dataTables_wrapper input { border: 1px solid #ccc; padding: 6px 5px 7px 5px; width: 200px; }
  347. .dataTables_filter { position: absolute; top: 8px; right: 8px; }
  348. .dataTables_info { position: absolute; bottom: 13px; left: 8px; }
  349. .dataTables_paginate { text-align: right; line-height: 16px; }
  350. .dataTables_paginate span { display: inline-block; }
  351. .dataTables_paginate .paginate_button {
  352. border: 1px solid #ccc; padding: 5px 7px; margin-left: 5px; font-weight: bold; background: #fcfcfc;
  353. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-size: 11px;
  354. -moz-box-shadow: 1px 1px 2px #ddd; -webkit-box-shadow: 1px 1px 2px #ddd; box-shadow: 1px 1px 2px #ddd;
  355. }
  356. .dataTables_paginate .paginate_active {
  357. border: 1px solid #222; background: #333; color: #fff; padding: 5px 7px; margin-left: 5px; font-weight: bold;
  358. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-size: 11px;
  359. }
  360. .dataTables_paginate .paginate_button:hover { background: #ddd; border: 1px solid #ccc; cursor: pointer; color: #333; }
  361. /***** CALENDAR (calendar.html) *****/
  362. #external-events p { font-size: 11px; }
  363. .external-event {
  364. background: #c3e1ff; color: #333; padding: 5px 10px; margin-bottom: 5px; font-weight: bold;
  365. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: move;
  366. }
  367. .fc-header-left span.fc-state-active {
  368. background: #444; color: #fff; border: 1px solid #333; -moz-box-shadow: inset 1px 1px 1px #333; -webkit-box-shadow: insest 1px 1px 1px #333;
  369. }
  370. .fc-header-title { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size: 18px; }
  371. .fc-header-title h2 { font-size: 24px; }
  372. .fc-button-prev:hover, .fc-button-next:hover { color: #fff; background: #444; border-color: #333; }
  373. .fc-button-today:hover { background: #444; border-color: #333; color: #fff; }
  374. /*****STANDARD FORM (forms.html)*****/
  375. .stdform p, .stdform div.par { margin: 15px 0; }
  376. .stdform div.par { overflow: hidden; }
  377. .stdform span.field, .stdform div.field { margin-left: 220px; display: block; position: relative; }
  378. .stdform .formwrapper { display: block; padding-top: 5px; margin-left: 220px; line-height: 25px; }
  379. .stdform label { float: left; width: 200px; text-align: right; padding: 5px 20px 0 0; }
  380. .stdform label.error { float: none; color: #ff6600; font-size: 11px; display: block; text-align: left; font-weight: bold; }
  381. .stdform input {
  382. border: 1px solid #ccc; background: #fcfcfc; padding: 8px 5px; width: 300px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  383. -moz-box-shadow: inset 1px 1px 2px #ddd; -webkit-box-shadow: inset 1px 1px 2px #ddd; box-shadow: inset 1px 1px 2px #ddd; color: #666;
  384. }
  385. .stdform input:focus { background: #fff; -moz-box-shadow: inset 1px 1px 2px #eee; -webkit-box-shadow: inset 1px 1px 2px #eee; box-shadow: inset 1px 1px 2px #eee; }
  386. .stdform .smallinput { width: 40%; }
  387. .stdform .mediuminput { width: 60%; }
  388. .stdform .longinput { width: 80%; }
  389. .stdform input.error { border: 1px solid #ff6600; }
  390. .stdform input[type=radio], .stdform input[type=checkbox] { width: auto; margin: 0; vertical-align: middle; }
  391. .stdform input[type=submit] {
  392. width: auto; margin: 0; font-weight: bold; color: #eee; background: #333; border: 0; padding: 7px 10px;
  393. -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; cursor: pointer;
  394. }
  395. .stdform input[type=reset] {
  396. width: auto; margin: 0; font-weight: bold; color: #666; border: 1px solid #ccc; background: #eee; padding: 7px 10px;
  397. -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; margin-left: 5px;
  398. }
  399. .stdform input[type=submit]:hover { background: #ffdd00; color: #333; }
  400. .stdform input[type=reset]:hover { background: #ddd; cursor: pointer; color: #333; }
  401. .stdform textarea {
  402. border: 1px solid #ccc; background: #fcfcfc; padding: 8px 5px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  403. -moz-box-shadow: inset 1px 1px 2px #ddd; -webkit-box-shadow: inset 1px 1px 2px #ddd; box-shadow: inset 1px 1px 2px #ddd; color: #666;
  404. }
  405. .stdform textarea.error { border: 1px solid #ff6600; }
  406. .stdform select {
  407. border: 1px solid #ccc; padding: 7px 5px; min-width: 40%; background: #fcfcfc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  408. -moz-box-shadow: inset 1px 1px 2px #ddd; -webkit-box-shadow: inset 1px 1px 2px #ddd; box-shadow: inset 1px 1px 2px #ddd; color: #666;
  409. }
  410. .stdform select.error { border: 1px solid #ff6600; }
  411. .stdform textarea:focus, .stdform select:focus {
  412. background: #fff; -moz-box-shadow: inset 1px 1px 2px #eee; -webkit-box-shadow: inset 1px 1px 2px #eee; box-shadow: inset 1px 1px 2px #eee;
  413. }
  414. .stdform button { border: 1px solid #333; background: #333; color: #fff; cursor: pointer; padding: 7px 10px; font-weight: bold; }
  415. .stdform button:hover { background: #111; border: 1px solid #000; color: #fff; }
  416. .stdform button.cancel { background: #eee; color: #666; border: 1px solid #ddd; }
  417. .stdform button.cancel:hover { background: #ddd; border: 1px solid #ccc; }
  418. .stdform small.desc { font-size: 11px; color: #999; font-style: italic; display: block; margin: 5px 0 0 220px; }
  419. .stdform .stdformbutton { margin-left: 220px; }
  420. /***** FORM STYLE 2 (form.html) *****/
  421. .stdform2 p, .stdform2 div.par { border: 1px solid #ddd; background: #fcfcfc; margin: 0; border-top: 0; }
  422. .stdform2 div.terms { border: 0; background: none; }
  423. .stdform2 p:first-child, .stdform2 div.par:first-child { border-top: 1px solid #ddd; }
  424. .stdform div.par { overflow: hidden; }
  425. .stdform2 label { display: inline-block; padding: 20px; vertical-align: top; text-align: left; font-weight: bold; }
  426. .stdform2 label.error { margin-left: 0; padding: 0; }
  427. .stdform2 label small { font-size: 11px; color: #999; display: block; font-weight: normal; line-height: 16px; }
  428. .stdform2 span.field, .stdform2 div.field { margin-left: 220px; display: block; background: #fff; padding: 20px; border-left: 1px solid #ddd; }
  429. .stdform2 .stdformbutton { margin-left: 0; padding: 20px; background: #fff; }
  430. /**DUAL SELECT**/
  431. .dualselect { margin-left: 220px; display: block; }
  432. .dualselect select { height: 200px; width: 40%; }
  433. .dualselect .ds_arrow { display: inline-block; vertical-align: top; padding-top: 60px; margin: 0 10px; }
  434. .dualselect .ds_arrow .ds_prev, .dualselect .ds_arrow .ds_next {
  435. display: block; padding: 5px 10px 7px 10px; border: 1px solid #ccc; margin-bottom: 5px; font-size: 24px; font-weight: bold;
  436. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #eee url(../images/titlebg.png) repeat-x top left;
  437. }
  438. .dualselect .ds_arrow .ds_prev:hover, .dualselect .ds_arrow .ds_next:hover {
  439. background: #444; color: #fff; border-color: #333; cursor: pointer;
  440. }
  441. /*****QUICK FORM (ajax/tabledata.php called from tables.html)*****/
  442. .quickform { margin: 10px; }
  443. .quickform p { margin: 10px 0; }
  444. .quickform label { display: block; margin-bottom: 5px; color: #333; font-weight: bold; width: 100px; }
  445. .quickform .smallinput { width: 60px; }
  446. .quickform .action { margin-left: 120px; }
  447. /**RIGHT**/
  448. .mainright { width: 300px; position: absolute; top: 0; right: 0; }
  449. .mainrightinner { margin-bottom: 20px; }
  450. /**WIDGET BOX***/
  451. .widgetbox {
  452. background: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-bottom: 10px;
  453. -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee;
  454. }
  455. .widgetbox .title {
  456. background: #222; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0;
  457. border-radius: 2px 2px 0 0;
  458. }
  459. .widgetbox .title h2 {
  460. font-size: 18px; letter-spacing: 0.8px; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-weight: normal;
  461. background-repeat: no-repeat; padding: 0 0 0 10px; color: #fff; background-image: url(../images/icons/default/sprites.png);
  462. }
  463. .widgetbox .title h2 span {
  464. display: block; padding: 6px 0 6px 10px; margin-left: 25px; border-left: 1px solid #444; background: #333;
  465. -moz-border-radius: 0 2px 0 0; -webkit-border-radius: 0 2px 0 0; border-radius: 0 2px 0 0; text-shadow: 1px 1px #222;
  466. }
  467. .widgetbox .widgetcontent {
  468. border: 1px solid #ddd; border-top: 0; padding: 10px; line-height: 21px;
  469. -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
  470. }
  471. .widgetcontent ul.linklist { list-style: none; }
  472. .widgetcontent ul.linklist li { border-bottom: 1px dotted #ddd; padding: 1px 0; }
  473. .widgetcontent ul.linklist li a { display: block; padding: 2px 5px; color: #666; }
  474. .widgetcontent ul.linklist li a:hover { background: #f7f7f7; text-decoration: none; }
  475. .widgetbox .titlehover h2 span { background: #333 url(../images/icons/arrow.png) no-repeat right; }
  476. .widgetbox .widgettoggle { overflow: hidden; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
  477. .widgetbox .title h2.chart { background-position: -10px -227px; }
  478. .widgetbox .title h2.calendar { background-position: -82px -155px; }
  479. .widgetbox .title h2.tabbed { background-position: -190px -443px; }
  480. .widgetbox .title h2.general { background-position: -154px -443px; }
  481. .widgetbox .title h2.chat { background-position: -82px -299px; }
  482. .widgetbox .listthumb { list-style: none; margin: 0; }
  483. .widgetbox .listthumb li { padding: 0; margin: 8px 0; }
  484. .widgetbox .listthumb img { vertical-align: middle; }
  485. .widgetbox .thumb { list-style: none; margin: 0; }
  486. .widgetbox .thumb li { display: inline-block; padding: 0; margin-right: 5px; }
  487. /**WIDGET BOX (dashboard.html)**/
  488. .analytics2 { padding: 5px; background: #eee; border: 1px solid #ccc; text-align: center; }
  489. .analytics small { text-transform: uppercase; font-size: 10px; font-weight: bold; color: #069; }
  490. .analytics h1 { font-size: 24px; color: #333; margin: 2px 0; }
  491. .analytics h2 { font-size: 18px; color: #333; text-align: center; }
  492. .analytics h3 { font-size: 16px; color: #333; }
  493. /***** CUSTOM STYLE: WYSIWYG EDITOR *****/
  494. .wysiwyg-dialog-content input.submit, .ui-dialog .wysiwyg input.submit {
  495. background: #333; color: #ccc; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  496. cursor: pointer; border: 1px solid #333;
  497. }
  498. .wysiwyg-dialog-content input.submit:hover, .ui-dialog .wysiwyg input.submit:hover { background: #ffdd00; border: 1px solid #ff9900; color: #333; }
  499. .wysiwyg-dialog-content input.reset, .ui-dialog .wysiwyg input.reset {
  500. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer; font-weight: bold; color: #666; background: #f7f7f7;
  501. }
  502. .wysiwyg-dialog-content input.reset:hover, .ui-dialog .wysiwyg input.reset:hover { background: #eee; }
  503. /*****NOTIFICATION MESSAGE STYLES (media.html)*****/
  504. .notifyMessage { padding: 7px 10px; font-weight: bold; margin: 10px 0; display: none; }
  505. .notifySuccess { border: 1px solid #C1D779; background: #EFFEB9; display: block; }
  506. .notifyError { border: 1px solid #E18B7C; background: #FAD5CF; display: block; }
  507. /***** FORM WIZARD (wizard.html) *****/
  508. .wizard .hormenu { list-style: none; }
  509. .wizard .hormenu li { float: left; width: 33%; }
  510. .wizard .hormenu li a { display: block; }
  511. .wizard .hormenu li a:hover { text-decoration: none; }
  512. .wizard .hormenu li a span.h2 { font-size: 24px; color: #999; text-align: center; display: block; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; }
  513. .wizard .hormenu li a span.dot { display: block; height: 20px; margin-top: 5px; text-align: center; background: url(../images/stepline.png) repeat-x center left; }
  514. .wizard .hormenu li span.label { display: block; text-align: center; font-weight: bold; color: #999; }
  515. .wizard .hormenu li a span.dot span { width: 20px; height: 20px; display: inline-block; background: url(../images/steps.png) no-repeat 0 -40px; }
  516. .wizard .hormenu li:first-child a span.dot { margin-left: 45%; text-align: left; }
  517. .wizard .hormenu li:last-child a span.dot { margin-right: 45%; text-align: right; }
  518. .wizard .hormenu li a.done span.h2,.wizard .hormenu li a.done span.label { color: #333; }
  519. .wizard .hormenu li a.done span.dot span { background-position: 0 -20px; }
  520. .wizard .hormenu li:first-child a.done span.dot span { background-position: 0 0; }
  521. .wizard .hormenu li a.selected span.dot span { background-position: 0 -120px; }
  522. .wizard .hormenu li:first-child a.selected span.dot span { background-position: 0 -100px; }
  523. .wizard .hormenu li a.selected span.h2,.wizard .hormenu li a.selected span.label { color: #333; }
  524. /** TABBED WIZARD **/
  525. .wizard .tabbedmenu { list-style: none; background: #f7f7f7; padding: 10px; padding-bottom: 0; border: 1px solid #ddd; }
  526. .wizard .tabbedmenu li { display: inline-block; margin-right: 5px; position: relative; bottom: -1px; }
  527. .wizard .tabbedmenu li a { display: block; padding: 10px 20px; color: #999; border: 1px solid #ddd; background: #eee; }
  528. .wizard .tabbedmenu li a { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
  529. .wizard .tabbedmenu li a span { font-weight: bold; }
  530. .wizard .tabbedmenu li a span.h2 { color: #999; display: block; font-size: 24px; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-weight: normal; }
  531. .wizard .tabbedmenu li a:hover { text-decoration: none; }
  532. .wizard .tabbedmenu li a.selected, .wizard .tabbedmenu li a.done { background: #fff; color: #333; border-bottom: 1px solid #fff; }
  533. .wizard .tabbedmenu li a.selected span.h2, .wizard .tabbedmenu li a.selected span { color: #333; }
  534. .wizard .tabbedmenu li a.done span.h2, .wizard .tabbedmenu li a.done span { color: #333; }
  535. .stepContainer .content {
  536. border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
  537. -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; padding: 0;
  538. }
  539. .stepContainer .content p { border: 1px solid #ddd; border-bottom: 0; }
  540. .stepContainer .content p:last-child { border-bottom: 1px solid #ddd; }
  541. .stepContainer .par p { margin: 10px 0; padding: 0; border: 0; background: none; }
  542. .stepContainer .par p:last-child { border-bottom: 0; }
  543. .actionBar { padding: 10px 0; position: relative; overflow: none; clear: both; }
  544. .actionBar .loader { float: left; display: none; }
  545. .actionBar a {
  546. float: right; display: inline-block; padding: 5px 15px; background: #333; color: #eee; margin-left: 5px; font-weight: bold; text-shadow: 1px 1px #111;
  547. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  548. }
  549. .actionBar a:hover { text-decoration: none; background: #000; color: #fff; text-shadow: none; }
  550. .actionBar a.buttonDisabled { background: #ccc; color: #666; text-shadow: 1px 1px #ddd; }
  551. .actionBar a.buttonDisabled:hover { background: #ccc; color: #666; text-shadow: 1px 1px #ddd; cursor: default; }
  552. .actionBar .msgBox { margin: 40px 0 10px 0; position: relative; }
  553. .actionBar .msgBox .content { padding: 7px 10px; background: #fffccc; color: #333; border: 1px solid #FEEA7A; }
  554. .actionBar .msgBox .close {
  555. padding: 0 2px 2px 2px; background: none; line-height: 10px; text-transform: lowercase; font-size: 10px; position: absolute; top: 5px; right: 7px;
  556. color: #333; text-shadow: none; font-weight: bold; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px;
  557. }
  558. .actionBar .msgBox .close:hover { background: #333; color: #eee; }
  559. /** VERTICAL WIZARD **/
  560. .verwizard .verticalmenu { list-style: none; float: left; width: 180px; }
  561. .verwizard .verticalmenu li { margin-bottom: 2px; }
  562. .verwizard .verticalmenu a { display: block; padding: 5px; color: #999; }
  563. .verwizard .verticalmenu a:hover { text-decoration: none; }
  564. .verwizard .verticalmenu a.selected { background: #333; color: #fff; }
  565. .verwizard .verticalmenu a.done { background: #333; color: #aaa; }
  566. .verwizard .verticalmenu a span { font-weight: bold; }
  567. .verwizard .stepContainer { margin-left: 200px; }
  568. .verwizard .actionBar { margin: 10px 0 0 200px; }
  569. /*****MEDIA STYLES (media.html)*****/
  570. .imagelist { list-style: none; }
  571. .imagelist li {
  572. float: left; padding: 5px; margin: 0 20px 20px 0; background: #fff; border: 1px solid #ddd; -moz-border-radius: 2px; -webkit-border-radius: 2px;
  573. border-radius: 2px; -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee;
  574. }
  575. .imagelist li img { display: block; margin-bottom: 10px; }
  576. .imagelist li span { display: block; text-align: right;}
  577. .imagelist li span a { vertical-align: middle; }
  578. .imagelist li span a.name { font-weight: bold; float: left; color: #999; }
  579. .imagelist li span a.name:hover { color: #333; text-decoration: none; }
  580. .imagelist li span a.edit, .imagelist li span a.view, .imagelist li span a.delete {
  581. display: inline-block; width: 16px; height: 16px; cursor: pointer; margin-left: 5px; vertical-align: middle; opacity: 0.5;
  582. }
  583. .imagelist li span a.edit:hover, .imagelist li span a.view:hover, .imagelist li span a.delete:hover { opacity: 1; }
  584. .imagelist li span a.edit { background: url(../images/icons/default/editor.png); }
  585. .imagelist li span a.view { background: url(../images/icons/default/glass.png); }
  586. .imagelist li span a.delete { background: url(../images/icons/default/trash.png); }
  587. .photoEdit { width: 480px; }
  588. /*****ELEMENT STYLES (elements.html)*****/
  589. .colorselector {
  590. display: inline-block; height: 28px; width: 28x; vertical-align: middle;
  591. position: relative; vertical-align: middle; margin-left: 5px;
  592. }
  593. .colorselector span {
  594. display: block; height: 28px; width: 28px; position: absolute; left: 0; top: 0;
  595. background: #000 url(../../images/colorpicker/select2.html) no-repeat -4px -4px;
  596. }
  597. /***NOTIFICATION MESSAGES***/
  598. .notification {
  599. height: 51px; overflow: hidden; position: relative; margin-bottom: 20px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  600. -moz-box-shadow: 1px 1px 2px #ddd;
  601. }
  602. .notification p { margin: 14px 10px 0 75px; font-size: 13px; color: #333; }
  603. .notification a.close {
  604. position: absolute; width: 14px; height: 14px; top: 5px; right: 5px; background-image: url(../images/close.png); background-repeat: no-repeat; }
  605. .notification a.close:hover { cursor: pointer; }
  606. .msgalert a.close { background-position: -14px 0; }
  607. .msgalert a.close:hover { background-position: -14px -14px; }
  608. .msginfo a.close { background-position: -42px 0; }
  609. .msginfo a.close:hover { background-position: -42px -14px; }
  610. .msgsuccess a.close { background-position: -28px 0; }
  611. .msgsuccess a.close:hover { background-position: -28px -14px; }
  612. .msgerror a.close { background-position: 0 0; }
  613. .msgerror a.close:hover { background-position: 0 -14px; }
  614. .msgalert { border: 1px solid #eac572; background: #ffe9ad url(../images/notifications.png) no-repeat 0 -52px; }
  615. .msginfo { border: 1px solid #99c4ea; background: #d1e4f3 url(../images/notifications.png) no-repeat 0 -156px; }
  616. .msgsuccess { border: 1px solid #c1d779; background: #effeb9 url(../images/notifications.png) no-repeat 0 -104px; }
  617. .msgerror { border: 1px solid #e18b7c; background: #fad5cf url(../images/notifications.png) no-repeat 0 0; }
  618. /*****BUTTONS & ICONS*****/
  619. .button_alert { background-image: url(../images/icons/default/alert.png); }
  620. .anchorbutton {
  621. display: inline-block; border: 1px solid #ccc; color: #333; -moz-border-radius: 2px; -webkit-border-radius: 2px;
  622. border-radius: 2px; background-position: 7px; background-repeat: no-repeat; background-color: #f7f7f7;
  623. -moz-box-shadow: 1px 1px 2px #e7e7e7; -webkit-box-shadow: 1px 1px 2px #e7e7e7; box-shadow: 1px 1px 2px #e7e7e7;
  624. }
  625. .anchorbutton:hover { text-decoration: none; }
  626. .anchorbutton span { background-color: #fff; display: block; margin-left: 30px; border-left: 1px solid #ddd; padding: 5px 10px; }
  627. /***PROGRESS BAR (dashboard.html)***/
  628. .progress { margin: 5px 0; }
  629. .progress .bar { background: #eee; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 1px; border: 1px solid #ccc; }
  630. .progress .bar { -moz-box-shadow: inset 2px 2px 3px #fff; -webkit-box-shadow: inset 2px 2px 3px #fff; box-shadow: inset 2px 2px 3px #fff; }
  631. .progress .bar .value { height: 5px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background-image: url(../images/progress.png); }
  632. .progress .bar2 { background: #eee; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding: 1px; border: 1px solid #ccc; }
  633. .progress .bar2 { -moz-box-shadow: inset 2px 2px 3px #fff; -webkit-box-shadow: inset 2px 2px 3px #fff; box-shadow: inset 2px 2px 3px #fff; }
  634. .progress .bar2 .value { padding: 0; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color: #fff; }
  635. .progress .bar2 .value { background-image: url(../images/progress.png); background-position: 0 0; font-size: 11px; font-weight: bold; }
  636. .progress .bluebar { background-color: #06f; box-shadow: inset 1px 1px 2px #9af; }
  637. .progress .orangebar { background-color: #F90; }
  638. .progress .redbar { background-color: #cc0000; }
  639. /*****WIDGETS (widgets.html) *****/
  640. .widgetgrid .widgetbox { display: inline-block; vertical-align: top; margin: 0 20px 20px 0; }
  641. .announcement p { margin: 20px 0; color: #666; }
  642. .announcement p:first-child { margin-top: 0; }
  643. .announcement p:last-child { margin-bottom: 0; }
  644. .announcement p span { color: #333; background: #999; padding: 1px 10px; color: #fff; font-size: 11px; display: inline-block; }
  645. .statement table td { text-align: center; }
  646. .statement table tbody tr td:first-child, .statement table thead tr th:first-child { border-left: 0; }
  647. .statement table tbody tr td:last-child, .statement table thead tr th:last-child { border-right: 0; }
  648. .statement table tbody tr:hover td { background: #fff; }
  649. .activitylist { list-style: none; }
  650. .activitylist li { display: block; border-bottom: 1px solid #eee; }
  651. .activitylist li a { display: block; padding: 7px 5px 8px 40px; color: #666; margin: 1px; background-repeat: no-repeat; background-position: 8px center; }
  652. .activitylist li a:hover { text-decoration: none; background-color: #f7f7f7; }
  653. .activitylist li a span { font-size: 10px; color: #999; line-height: 10px; }
  654. .activitylist li.message a { background-image: url(../images/icons/default/mail.png); }
  655. .activitylist li.user a { background-image: url(../images/icons/default/users.png); }
  656. .activitylist li.media a { background-image: url(../images/icons/default/media.png); }
  657. .userlistwidget ul { list-style: none; }
  658. .userlistwidget ul li { font-size: 11px; line-height: 18px; border-bottom: 1px dashed #ddd; padding: 10px 0; }
  659. .userlistwidget ul li:first-child { padding-top: 0; }
  660. .userlistwidget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
  661. .userlistwidget ul li .avatar { float: left; margin-right: 10px; padding: 2px; border: 1px solid #eee; }
  662. .userlistwidget ul li a { font-weight: bold; }
  663. .userlistwidget .more {
  664. display: block; text-align: center; background: #eee; color: #069; padding: 1px 0; font-size: 10px; text-transform: uppercase; font-weight: bold; }
  665. .userlistwidget .more:hover { text-decoration: none; background: #e7e7e7; }
  666. .stdformwidget label { width: 80px; }
  667. .stdformwidget div.par { margin: 13px 0 14px 0; }
  668. .stdformwidget div.field { margin-left: 100px; }
  669. /***** BUTTONS & ICONS *****/
  670. .buttonlist { list-style: none; }
  671. .buttonlist li { display: inline-block; margin-bottom: 15px; margin-right: 10px; }
  672. a.btn {
  673. display: inline-block; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-weight: bold;
  674. background-color: #f7f7f7; background-repeat: no-repeat; background-image: url(../images/icons/default/sprites.png);
  675. -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee; color: #666;
  676. }
  677. a.btn:hover {
  678. text-decoration: none; color: #333; -moz-box-shadow: 1px 1px 5px #ddd; -webkit-box-shadow: 1px 1px 5px #ddd; box-shadow: 1px 1px 5px #ddd;
  679. }
  680. a.btn span {
  681. padding: 5px 10px; margin-left: 35px; display: block; background: #fff url(../images/buttonbg.png) repeat-x 0 -31px; border-left: 1px solid #ccc;
  682. text-shadow: 1px 1px #fff;
  683. }
  684. a.btn2 { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
  685. a.btn2 span { -moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; padding-right: 15px; }
  686. a.btn3 { width: 34px; height: 32px; }
  687. a.btn4 { width: 34px; height: 32px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
  688. a.btn_search { background-position: -10px -12px; }
  689. a.btn_trash { background-position: -47px -12px; }
  690. a.btn_flag { background-position: -82px -12px; }
  691. a.btn_home { background-position: -119px -12px; }
  692. a.btn_link { background-position: -154px -12px; }
  693. a.btn_book { background-position: -190px -12px; }
  694. a.btn_mail { background-position: -10px -47px; }
  695. a.btn_help { background-position: -47px -47px; }
  696. a.btn_rss { background-position: -82px -47px; }
  697. a.btn_archive { background-position: -119px -47px; }
  698. a.btn_info { background-position: -154px -47px; }
  699. a.btn_bell { background-position: -190px -47px; }
  700. a.btn_world { background-position: -10px -83px; }
  701. a.btn_bulb { background-position: -47px -83px; }
  702. a.btn_cloud { background-position: -82px -83px; }
  703. a.btn_clip { background-position: -119px -83px; }
  704. a.btn_folder { background-position: -154px -83px; }
  705. a.btn_lock { background-position: -190px -83px; }
  706. a.btn_tag { background-position: -10px -119px; }
  707. a.btn_note { background-position: -47px -119px; }
  708. a.btn_key { background-position: -82px -119px; }
  709. a.btn_stop { background-position: -119px -119px; }
  710. a.btn_airplane { background-position: -154px -119px; }
  711. a.btn_info2 { background-position: -190px -119px; }
  712. a.btn_alarm { background-position: -10px -155px; }
  713. a.btn_clock { background-position: -47px -155px; }
  714. a.btn_calendar { background-position: -82px -155px; }
  715. a.btn_basket { background-position: -119px -155px; }
  716. a.btn_dollartag { background-position: -154px -155px; }
  717. a.btn_cart { background-position: -190px -155px; }
  718. a.btn_cart2 { background-position: -10px -191px; }
  719. a.btn_user { background-position: -47px -191px; }
  720. a.btn_users { background-position: -82px -191px; }
  721. a.btn_male { background-position: -119px -191px; }
  722. a.btn_female { background-position: -154px -191px; }
  723. a.btn_refresh { background-position: -190px -191px; }
  724. a.btn_chart { background-position: -10px -227px; }
  725. a.btn_pie { background-position: -47px -227px; }
  726. a.btn_address { background-position: -82px -227px; }
  727. a.btn_zip { background-position: -119px -227px; }
  728. a.btn_document { background-position: -154px -227px; }
  729. a.btn_pdf { background-position: -190px -227px; }
  730. a.btn_marker { background-position: -10px -262px; }
  731. a.btn_sign { background-position: -47px -262px; }
  732. a.btn_note { background-position: -82px -262px; }
  733. a.btn_cut { background-position: -119px -262px; }
  734. a.btn_pencil { background-position: -154px -262px; }
  735. a.btn_paint { background-position: -190px -262px; }
  736. a.btn_battery { background-position: -10px -299px; }
  737. a.btn_battery2 { background-position: -47px -299px; }
  738. a.btn_chat { background-position: -82px -299px; }
  739. a.btn_chat2 { background-position: -119px -299px; }
  740. a.btn_message { background-position: -154px -299px; }
  741. a.btn_message2 { background-position: -190px -299px; }
  742. a.btn_phone { background-position: -10px -335px; }
  743. a.btn_call { background-position: -47px -335px; }
  744. a.btn_inbox { background-position: -82px -335px; }
  745. a.btn_inboxo { background-position: -119px -335px; }
  746. a.btn_inboxi { background-position: -154px -335px; }
  747. a.btn_bluetooth { background-position: -190px -335px; }
  748. a.btn_wifi { background-position: -10px -370px; }
  749. a.btn_settings { background-position: -47px -370px; }
  750. a.btn_settings2 { background-position: -82px -370px; }
  751. a.btn_settings3 { background-position: -119px -370px; }
  752. a.btn_hd { background-position: -154px -370px; }
  753. a.btn_hd2 { background-position: -190px -370px; }
  754. a.btn_image { background-position: -10px -408px; }
  755. a.btn_image2 { background-position: -47px -408px; }
  756. a.btn_sound { background-position: -82px -408px; }
  757. a.btn_media { background-position: -119px -408px; }
  758. a.btn_mic { background-position: -154px -408px; }
  759. a.btn_print { background-position: -190px -408px; }
  760. a.btn_laptop { background-position: -10px -443px; }
  761. a.btn_mouse { background-position: -47px -443px; }
  762. a.btn_camera { background-position: -82px -443px; }
  763. a.btn_video { background-position: -119px -443px; }
  764. a.btn_grid { background-position: -154px -443px; }
  765. a.btn_grid2 { background-position: -190px -443px; }
  766. a.btn_list { background-position: -10px -480px; }
  767. a.btn_list2 { background-position: -47px -480px; }
  768. a.btn_table { background-position: -82px -480px; }
  769. .stdbtn {
  770. font-weight: bold; padding: 7px 10px; border: 1px solid #ccc; background: #eee url(../images/buttons.png) repeat-x top left; color: #333;
  771. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer;
  772. }
  773. .stdbtn:hover { text-decoration: none; }
  774. .btn_yellow { background-position: 0 -38px; border-color: #ebb205; color: #ae510d; }
  775. .btn_blue { background-position: 0 -76px; border-color: #0282ce; color: #fff; }
  776. .btn_black { background-position: 0 -114px; border-color: #222; color: #fff; }
  777. .btn_lime { background-position: 0 -152px; border-color: #59bf04; color: #367501; }
  778. .btn_orange { background-position: 0 -190px; border-color: #cd7a03; color: #6e3c17; }
  779. .btn_red { background-position: 0 -228px; border-color: #a31314; color: #fff; }
  780. .stdbtn:active { background: #eee; }
  781. .btn_yellow:active { background: #ffde06; }
  782. .btn_blue:active { background: #0591e5; }
  783. .btn_black:active { background: #333333; }
  784. .btn_lime:active { background: #6adc0b; }
  785. .btn_orange:active { background: #ff9702; }
  786. .btn_red:active { background: #eb2f30; }
  787. /***** CHAT (chat.html) *****/
  788. .contactlist { list-style: none; }
  789. .contactlist li { border-top: 1px solid #eee; position: relative; padding: 1px; }
  790. .contactlist li:first-child { border-top: 0; }
  791. .contactlist li span.msgcount {
  792. position: absolute; top: 12px; right: 30px; font-size: 10px; padding: 3px 5px; line-height: 10px; color: #fff; background: #dd0000; font-weight: bold;
  793. -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
  794. }
  795. .contactlist li a { padding: 8px 10px; display: block; color: #666; }
  796. .contactlist li.online a { background: url(../images/online.png) no-repeat right 16px; }
  797. .contactlist li.new a { font-weight: bold; }
  798. .contactlist li a:hover { background-color: #fcfcfc; text-decoration: none; }
  799. .contactlist li a img { vertical-align: middle; display: inline-block; margin-right: 10px; }
  800. .chatsearch { padding: 5px; background: #eee; border-bottom: 1px solid #ddd; overflow: hidden; }
  801. .chatsearch input {
  802. float: left; border: 1px solid #ddd; padding: 7px 5px 7px 35px; width: 245px; background: #fff url(../images/search.png) no-repeat left center;
  803. color: #ccc;
  804. }
  805. .chatsearch input:focus { color: #333; }
  806. .chatbottom { padding: 8px 10px; background: #f7f7f7; border-top: 1px solid #ddd; }
  807. .chatbottom a { color: #666; font-weight: bold; font-size: 11px; border: 1px solid #ddd; background: #fcfcfc; display: inline-block; padding: 2px 10px; }
  808. .chatbottom a:hover { text-decoration: none; border: 1px solid #bbb; -moz-box-shadow: 0 0 1px #ddd; -webkit-box-shadow: 0 0 1px #ddd; box-shadow: 0 0 1px #ddd; }
  809. .chatcontent { height: 500px; position: relative; padding: 0; }
  810. .chatcontent .messagebox { position: absolute; bottom: 0; left: 0; width: 100%; background: #f7f7f7; border-top: 1px solid #ddd; padding: 10px 0; }
  811. .chatcontent .messagebox input {
  812. border: 1px solid #ccc; padding: 8px 5px 8px 30px; width: 78.6%; display: inline-block; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  813. margin-left: 1%; background: #fff url(../images/icons/default/chat.png) no-repeat 8px 8px;
  814. }
  815. .chatcontent .messagebox input:focus { -moz-box-shadow: 0 0 5px #eee; -webkit-box-shadow: 0 0 5px #eee; box-shadow: 0 0 5px #eee; }
  816. .chatcontent .messagebox button {
  817. border: 0; padding: 7px 0; text-align: center; font-weight: bold; background: #333; color: #fff; display: inline-block; margin-left: 1%;
  818. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; width: 13%;
  819. }
  820. .chatcontent .messagebox button:hover { background: #111; color: #fff; cursor: pointer; }
  821. .chatmessage { height: 425px; border: 1px solid #ddd; margin: 10px; overflow: auto; position: relative; }
  822. #chatmessageinner { }
  823. #chatmessageinner p { padding: 10px; border-bottom: 1px dotted #ddd; }
  824. /***** PAGINATION *****/
  825. .pagination { list-style: none; overflow: hidden; }
  826. .pagination li { display: inline-block; float: left; margin-right: 5px; }
  827. .pagination li.first, .pagination li.previous, .pagination li.next, .pagination li.last { font-size: 18px; }
  828. .pagination li a { display: block; font-weight: bold; border: 1px solid #ccc; padding: 5px 10px; color: #333; line-height: 21px; vertical-align: top; }
  829. .pagination li a { background: #f7f7f7; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
  830. .pagination li a:hover { cursor: pointer; text-decoration: none; background: #eee; }
  831. .pagination li a.current { background: #333; color: #fff; border: 1px solid #272727; }
  832. .pagination li.first a:active, .pagination li.previous a:active, .pagination li.next a:active, .pagination li.last a:active {
  833. background: #333; color: #fff; border 1px solid #272727;
  834. }
  835. .pagination li a.disable { color: #ccc; }
  836. .pagination li a.disable:hover { background: #f7f7f7; cursor: default; }
  837. .pagination li a.disable:active { background: #f7f7f7; border: 1px solid #ccc; color: #ccc; }
  838. /***** CHECKBOX STYLES *****/
  839. .checkbox { display: inline-block; width: 16px; height: 16px; background: url(../images/checkbox.png) no-repeat 0 0; vertical-align: middle; }
  840. .checkbox input { opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; filter: alpha(opacity=00); }
  841. .radio { display: inline-block; width: 16px; height: 16px; background: url(../images/radio.png) no-repeat 0 0; vertical-align: middle; }
  842. .radio input { opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; filter: alpha(opacity=00); }
  843. .checked { background-position: 0 -16px; }
  844. /***** ERROR PAGES *****/
  845. .errorWrapper { width: 700px; text-align: center; margin: 80px auto 0 auto; }
  846. .errorWrapper span { color: #fff; font-size: 14px; font-style: italic; text-shadow: 1px 1px #555; }
  847. .errorWrapper a {
  848. display: inline-block; padding: 10px 30px; background: #999; color: #222; font-weight: bold; margin-top: 20px;
  849. -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  850. }
  851. .errorWrapper a.default { color: #222; background: #999; }
  852. .errorWrapper a.hover { background: #fff; color: #333; }
  853. .errorWrapper a:hover { text-decoration: none; }
  854. .pageErrorTitle { color: #fff; font-size: 56px; text-shadow: 1px 1px #333; }
  855. /***** FOOTER *****/
  856. .footer { margin: 10px 0; font-size: 11px; }
  857. /**** CUSTOM STYLES *****/
  858. .center { text-align: center; }
  859. .block { display: block; }
  860. .margintop10 { margin-top: 10px; }
  861. .textright { text-align: right; }
  862. .tooltipflot { font-size: 11px; padding: 5px 10px; background: url(../images/blacktrans.png); color: #eee; }
  863. .noright { margin-right: 0; }
  864. .radiusbottom0 { -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; }
  865. .padding0 { padding: 0 !important; }
  866. .width100 { width: 100px !important; }
  867. #popwizard { padding: 20px; }
  868. #popwizard .stepContainer { height: 268px !important; }
  869. #popwizard .actionBar { padding-top: 30px; }
  870. .pie { font-size:10px; text-align:center; padding:2px; color:#fff; text-shadow: 1px 1px #444; }
  871. .quickform .notifyMessage { margin: 0; margin-bottom: 20px; }
  872. .stdform .vsmallinput { width: 60px; }
  873. .borderTop0 { border-top: 0; }
  874. .color333 { color: #333; }
  875. .floatleft { float: left; }
  876. .loaders img { margin-right: 10px; display: inline-block; }
  877. .chartplace { margin-bottom: 10px; height: 150px; }
  878. .average { font-size: 10px; text-transform: uppercase; color: #069; font-weight: bold; border-top: 1px dashed #ccc; padding-top: 5px; }
  879. .average h3 { display: inline-block; vertical-align: bottom; margin-left: 10px; font-size: 16px; }
  880. .ui-datepicker-inline .ui-datepicker-calendar td a:hover { background: #ddd; text-decoration: none; color: #666; text-shadow: none; }
  881. .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-today a {
  882. background: #333; text-decoration: none; color: #fff; text-shadow: none; font-weight: bold;
  883. }
  884. @media screen and (max-width: 1024px) {
  885. .maincontent { margin-right: 260px; margin-left: 230px; }
  886. .mainright { width: 250px; }
  887. .contenttitle, .widgetbox .title { height: 32px; overflow: hidden; }
  888. .contenttitle h2, .widgetbox .title h2 { font-size: 16px; }
  889. .mainleft { width: 220px; }
  890. .notification p { }
  891. .noright { margin-right: 0; }
  892. .errorWrapper { width: auto; }
  893. .chatcontent .messagebox input { width: 74.3%; }
  894. }
  895. @media screen and (max-width: 700px) {
  896. .maincontent { margin-right: 0; }
  897. .mainright { position: relative; margin-top: 10px; width: auto; }
  898. .mainright .widgetbox { width: 48%; float: left; margin-right: 4%; }
  899. .mainright .widgetbox:nth-child(even) { margin-right: 0; }
  900. .footer { clear: both; }
  901. .searchbox input { width: 150px; }
  902. .chatcontent .messagebox input { width: 75%; }
  903. .imagelist li img { width: 240px; }
  904. .floatright { display: none; }
  905. }
  906. @media screen and (max-width: 650px) {
  907. #userPanel { border-left: 0; }
  908. #searchPanel { border-right: 0; }
  909. .imagelist li img { width: 200px; }
  910. .stdform p, .stdform div.par { background: none; }
  911. .stdform label { display: block; text-align: left; float: none; width: auto; }
  912. .stdform span.field, .stdform div.field, .dualselect,
  913. .stdform .formwrapper, .stdform .formwrapper { margin-left: 0; }
  914. .stdform small.desc { margin: 5px 0 0 0; }
  915. .stdform .stdformbutton { margin-left: 0; }
  916. .stdform2 p, .stdform2 div.par { background: none; }
  917. .stdform2 label { display: block; padding: 7px 10px; background: #f7f7f7; border-bottom: 1px solid #ddd; float: none; width: auto; }
  918. .stdform2 span.field, .stdform2 div.field { display: block; margin-left: 0; border-left: 0; }
  919. .verwizard .actionBar { margin: 0; }
  920. }
  921. @media screen and (max-width: 580px) {
  922. .headerinner { border-bottom: 1px solid #222; }
  923. }
  924. @media screen and (max-width: 570px) {
  925. .tablewrapper { width: 100%; overflow: auto; }
  926. .mainright .widgetbox { float: none; margin-right: 0; width: auto; margin-bottom: 10px; }
  927. .one_half, .one_third, .two_third, .three_fourth,
  928. .one_fourth, .one_fifth, .two_fifth, .three_fifth,
  929. .four_fifth, .one_sixth, .five_sixth {
  930. float: none; width: auto; margin-right: 0; margin-bottom: 20px; display: block;
  931. }
  932. .chartbox .one_half { float: left; margin-right: 3%; width: 48.5%; }
  933. .searchbox input { width: 200px; }
  934. .imagelist li { margin: 0 10px 10px 0; }
  935. .imagelist li img { width: 150px; }
  936. .imagelist li span a.name { font-size: 11px; }
  937. .imagelist li span a.edit, .imagelist li span a.view, .imagelist li span a.delete { display: none; }
  938. /* CALENDAR STYLES */
  939. .fc-header-left { font-size: 11px; }
  940. .fc-button, .fc-button-content { height: auto; }
  941. .fc-button-month .fc-button-content,
  942. .fc-button-agendaWeek .fc-button-content,
  943. .fc-button-agendaDay .fc-button-content,
  944. .fc-button-today .fc-button-content { padding: 2px 5px; }
  945. .fc-header-title h2 { font-size: 14px; }
  946. .maintabmenu li a { padding: 8px 10px; font-size: 16px; }
  947. .verwizard .verticalmenu { font-size: 11px; width: auto; float: none; }
  948. .verwizard .stepContainer { margin-left: 0; margin-top: 20px; }
  949. .wizard .tabbedmenu li a { padding: 5px; }
  950. .wizard .tabbedmenu li a h2 { font-size: 16px; }
  951. .wizard .tabbedmenu li a span { font-weight: normal; font-size: 11px; }
  952. }
  953. @media screen and (max-width: 480px) {
  954. .maincontent { margin-right: 0; }
  955. .mainright .widgetbox { }
  956. .widgetlist li { width: 48%; margin-right: 4%; }
  957. .widgetlist li:nth-child(even) { margin-right: 0; }
  958. .widgetlist li a { width: auto; display: block; }
  959. .headerinner2 .searchbox { border-right: 0; }
  960. .headerinner2 .searchbox input { width: 150px; }
  961. .searchbox input { width: 150px; }
  962. .stdtable td, .stdtable th { font-size: 11px; }
  963. .chatcontent .messagebox input { width: 70%; }
  964. .wizard .tabbedmenu li a { padding: 10px 20px; }
  965. .wizard .tabbedmenu li a h2 { font-size: 20px; }
  966. .wizard .tabbedmenu li a span { display: none; }
  967. .widgetgrid .widgetbox { width: auto !important; display: block; margin-right: 0; }
  968. }
  969. @media screen and (max-width: 430px) {
  970. body { font-size: 11px; }
  971. button, input, select, textarea { font-size: 11px; }
  972. .loginbox { width: auto; margin: 10px; }
  973. .loginbox input { width: 95%; }
  974. .loginbox button { width: 100%; }
  975. .userinfomenu .userinfo { font-size: 11px; }
  976. .userdrop ul li a { font-size: 11px; }
  977. .headerinner2 .searchbox input { width: 70px; font-size: 11px; }
  978. .notibox { width: 250px; }
  979. .tabmenu li a, .widgetlist li a { font-size: 11px; }
  980. .dataTables_wrapper input { width: 70px; }
  981. .deletebutton { display: none; }
  982. .tableoptions select { padding: 2px; }
  983. .tableoptions button { padding: 2px 5px; }
  984. .stdtablecb thead th:first-child, .stdtablecb tbody tr td:first-child { display: none; }
  985. .flatmode { display: none; }
  986. .vs2 { margin-left: 0 !important; }
  987. .imagelist li img { width: 210px; }
  988. .multipletabmenu li a {
  989. width: auto; padding: 5px; font-size: 11px; font-weight: bold; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif;
  990. letter-spacing: 0;
  991. }
  992. .dualselect select { 30%; }
  993. .dualselect .ds_arrow { margin: 0; }
  994. .stdform button, .stdform input[type="reset"] { padding: 5px; }
  995. .stdform2 span.field, .stdform2 div.field, .stdform2 .stdformbutton { padding: 10px; }
  996. .stepContainer h2 { font-size: 16px; }
  997. .fc-header-left, .fc-button-today { display: none; }
  998. .fc-header-title h2 { font-size: 20px; }
  999. .fc-header-center { text-align: left; }
  1000. .chatcontent .messagebox input { width: 150px; }
  1001. .chatcontent .messagebox button { margin-left: 5px; width: 60px; }
  1002. .errorWrapper a { display: block; margin-top: 0; padding: 20px 0; font-size: 12px; }
  1003. .errorWrapper span { display: block; margin-bottom: 20px; }
  1004. .footer { font-size: 10px; }
  1005. }
  1006. /** theme **/
  1007. .theme { display: inline-block; position: fixed; bottom: 10px; left: 0; background: #fff; border: 1px solid #ccc; border-left: 0; }
  1008. .theme { -moz-box-shadow: 0 0 5px #ddd; -webkit-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd; overflow: hidden; }
  1009. .theme { -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; }
  1010. .theme h4 { font-size: 10px; text-transform: uppercase; font-weight: normal; background: #333; padding: 5px; color: #ccc; }
  1011. .theme a { display: inline-block; width: 16px; height: 16px; margin: 5px; }
  1012. .theme a.darkblue { background: #001F3E; }
  1013. .theme a.gray { background: #ccc; }