/* reset ------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* general Bkgnd: F4F4F4 Black: #333334 Grey: #9d9d9c Blue: #4d94cc Yellow: #fcc14e - as background color Yellow 40%: #fee6b8 - as highlighting Yellow text: #f3ad25 - as font color ------------------------------------------------------------------*/ body { background-color: #F4F4F4; color: #333334; font-family:"Trebuchet MS", Arial, Verdana; font-size: 12px; } h1 { margin: 0 0 15px; font-size: 14px; font-weight: bold; color: #414141; } h2 { margin: 0 0 15px; font-size: 12px; font-weight: bold; color: #414141; } h3 { margin: 2px 0 15px 0; font-size: 16px; font-weight: bold; color: #0D7FC6; } h4 {} h5 {} ul, ol { margin: 0 0 14px 0; } p, form { margin: 0 0 14px 0; } p { margin: 0 0 2px; padding: 0; font-size: 13px; color: #666; line-height: 15px; } a { color: #333334; text-decoration: none } a:hover { color: #333334; text-decoration: underline } a:visited { color: #333334 } input, textarea, select { font-size: 11px; font-family: Arial, sans-serif; color: #4F535C; margin-left: 0 } strong { font-weight: bold; color: #b63d94; } em { font-style: italic; } sup { font-size: 8px; vertical-align: super; } sub { font-size: 8px; vertical-align: sub; } .img_left { float: left; margin: 0 10px 10px 0; } .img_right { float: right; margin: 0 0 10px 10px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .odd { background-color: #f0f0f0; } .hidden { display: none; } .warning { clear: both; padding: 5px 10px; background: #fef9f9; border: 1px solid #f00; color: #f00; text-align: left; } body p.notification { margin-left: 2px; margin-right: 2px } /*-----------------------------------*/ p.notification { clear: both; margin: 5px 0 5px 0; padding: 10px 10px 10px 36px; border: 1px solid; background-position: 10px 11px !important; background-repeat: no-repeat !important; } p.success { border-color: #9adf8f; background: #d5ffce url(../images/icon_tick_circle.png); color: #556652; } p.error { border-color: #df8f8f; background: #ffcece url(../images/icon_cross_circle.png); color: #665252; } /*-----------------------------------*/ .ui-datepicker-trigger { vertical-align: top; margin-top: 2px; margin-left: 4px; } /* Page layout ------------------------------------------------------------------*/ body > section { width: 1000px; margin: 0 auto; } body > section > div { clear: both; margin: 10px 2px 0 2px } /* Top navigation ------------------------------------------------------------------*/ header { width: 100% } header > img { display: inline-block; border: none; margin: 7px 10px 7px 2px; vertical-align: top; height: 58px } header > span#breadcrumb { display: inline-block; font-size: 14px; font-weight: bold; margin: 32px 10px 10px 200px; vertical-align: top; color: #333334 } header > span#breadcrumb a { text-decoration: none; color: #4d94cc } header > span#breadcrumb a:visited { text-decoration: none } header > span#breadcrumb a:hover { text-decoration: underline } header > section { display: block; float: right; margin: 30px 4px 10px 10px; vertical-align: top; font-size: 14px; font-weight: bold } header > section > a { margin-left: 16px; } header > nav { clear: both; background-color: #333334; height: 24px; padding: 15px; margin: 0 2px 0 2px; } header > nav ul {} header > nav li { display: inline-block; margin: 6px 12px 4px 8px } header > nav a { color: white; font-size: 16px; font-weight: bold } header > nav a:hover { color: white; text-decoration: underline; } header > nav a:visited { color: white; } header > nav a.active { color: #f3ad25 } /* footer ------------------------------------------------------------------*/ footer { clear: both; width: 1000px; margin: 15px auto 0 auto; } footer #copyright { width: 400px; text-align: left; display: inline-block; margin-left: 2px; } footer #version { float: right; width: 200px; text-align: right; margin-right: 2px } /* dashboard layout ------------------------------------------------------------------*/ #dashboard nav { clear: both } #dashboard nav > section { vertical-align: top; background-color: white; border: 1px solid #CFCFCF; display: inline-block; width: 190px; padding: 8px ; margin: 12px 14px 5px 1px; box-shadow: 2px 2px 5px lightgrey; -moz-box-shadow: 2px 2px 5px lightgrey; -webkit-box-shadow: 2px 2px 5px lightgrey} #dashboard nav > section ul { list-style-type: circle; } #dashboard nav > section li { margin: 8px 2px 8px 22px; font-size: 14px } /* tree edit layout ------------------------------------------------------------------*/ #left_nav { width: 343px; display: inline-block; margin-top: 7px } #right_cont { display: inline-block; width: 645px; margin-top: 7px; vertical-align: top; box-shadow: 2px 2px 5px lightgrey; -moz-box-shadow: 2px 2px 5px lightgrey; -webkit-box-shadow: 2px 2px 5px lightgrey } /* tree manager ------------------------------------------------------------------*/ #tree { width: 322px; background: white; border: solid 1px #CFCFCF; margin: 0px 0 0 2px; box-shadow: 2px 2px 5px lightgrey; -moz-box-shadow: 2px 2px 5px lightgrey; -webkit-box-shadow: 2px 2px 5px lightgrey } body#images #tree, body#files #tree, body#forms #tree { margin-top: 10px } #tree.jstree li.deleted a { color: #BBB; } #tree.jstree > ul { margin: 0 0 8px 5px } #tree.jstree > ul > li { margin-top: 8px } #tree.jstree li.invisible a { color: #999; } #tree.jstree a.jstree-clicked { background: #fcc14e } #tree.jstree .jstree-hovered { background: #fee6b8; border: solid 1px #fee6b8 } #tree.jstree a { height: 18px; width: 90%; padding: 4px 2px 0 1px; border: solid 1px white } #tree.jstree a.jstree-hovered { padding: 4px 2px 0 1px } #tree.jstree li[rel=root] > a { font-size: 13px; color: #4d94cc; font-weight: bold } #tree.jstree li[rel=root] > a.jstree-clicked { border: solid 1px #fcc14e } /* item/page/content editor with "#right_cont" ------------------------------------------------------------------*/ label.kind { display: inline-block; width: 13px; height: 16px; text-align: center; vertical-align: top; border: 3px solid lightgrey; padding: 1px 4px 4px 6px; font-size: 16px; color: lightgrey; font-weight: bolder; } #block_selector { } #block_selector #stringlist { display: inline-block; margin: 22px 0px 0px 15px } #block_selector #stringlist a { margin: 0 } #block_selector div { margin: 12px } #block_selector img { vertical-align: top; } #block_selector a { color: #333334; font-weight: bolder; font-size: 13px; display: inline-block; vertical-align: top; margin: 7px 0 0 12px } #block_selector a:visited { color: #333334; } #block_selector a:hover { color: #4d94cc; } #template_selector { } #template_selector label { margin: 0 32px 0 4px; color: #333334; font-weight: bolder; font-size: 13px } #template_selector label:last-of-type { margin-right: 0 } #template_selector h3 { margin-top: 20px } #template_selector h3:first-child { margin-top: 10px } #template_selector > div { margin: 5px 0 7px 0 } #template_selector img { padding-top: 2px; vertical-align: top } #template_selector article { display: inline-block; width: 230px; vertical-align: top } #template_selector article a { margin: 5px 0px 0px 10px; color: #333334; font-weight: bolder; font-size: 13px; height: 19px; display: inline-block; vertical-align:top } #template_selector article a:visited { color: #333334; } #template_selector article a:hover { color: #4d94cc; } #template_selector article span { display: block; margin: 0px 0 2px 10px; padding: 0; font-size: 12px; color: #666;} #left_nav #ltabs { margin-top: 10px; padding: 0 } #left_nav #ltabs .ui-widget-header { border: none; background: none; background-color: #F4F4F4 } #left_nav #ltabs li.ui-state-default a, li.ui-state-default a:visited { color: #333334; cursor: pointer } #left_nav #ltabs li.ui-state-active a, li.ui-state-active a:visited { color: #f3ad25; cursor: pointer } #left_nav #ltabs li { border-color: #cccccc; } #content_div { border: 1px solid #ccc; background-color: rgb(240, 240, 238);} #content_div #content_buttons { margin: 5px; text-align: center; } #content_div { border: 1px solid #ccc; background-color: rgb(240, 240, 238);} #content_div textarea { width: 798px; } #content_div tr.mceLast { display: none } #content_data { background: white; border: solid 1px #cfcfcf; margin: 2px 0 0 2px } #content_data form { } #content_data section { margin: 10px; } #content_data section > div { margin: 10px 5px 5px 8px; } #content_data section button { margin-top: -1px; height: 25px } #content_data > div { margin: 10px 5px 5px 8px; border: 1px solid #cfcfcf; } #content_data input { font-size: 13px; height: 19px; line-height: 22px } #content_data label { font-size: 13px; height: 19px; line-height: 22px; margin-bottom: 4px; color: #4d94cc; font-weight: bolder; } #content_data #preview { max-width: 440px; box-shadow: 4px 4px 7px lightgrey; border: solid 1px darkgrey; -moz-box-shadow: 4px 4px 7px lightgrey; -webkit-box-shadow: 4px 4px 7px lightgrey; } #content_data label[for=title] { display: block; text-align: left; float: none; } #content_data #tabs { margin: 5px 17px 5px 14px; border-radius: 0; } body#images #content_data #tabs, body#files #content_data #tabs, body#forms #content_data #tabs { margin-top: 16px } #content_data #tabs > div { padding: 5px 5px 5px 5px; margin: 0px 0 0 2px; border: solid 1px #cfcfcf } #content_data #tabs .ui-widget-header { border: none; background: none; background-color: #F4F4F4 } #content_data #tabs.ui-widget-content { background: none; background-color: white } #content_data #tabs li.ui-state-default a, li.ui-state-default a:visited { color: #333334 } #content_data #tabs li.ui-state-active a, li.ui-state-active a:visited { color: #f3ad25 } #content_data #tabs li { border-color: #cccccc; } #content_data #content {} #content_data #content #contentButtons { border: none; margin: 5px 0 5px 0; padding-left: 0px } #content_data #content article { border: solid 1px #cfcfcf; margin: 5px 2px 18px 2px; padding: 5px; width: 575px; height: 55px; border-radius: 3px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 2px 2px 5px lightgrey; -moz-box-shadow: 2px 2px 5px lightgrey; -webkit-box-shadow: 2px 2px 5px lightgrey; background-color: white } #content_data #content h4 { margin: 10px 0 10px 3px; color: #4d94cc } #content_data #content article > img { display: inline-block; box-shadow: 1px 1px 5px grey; margin: 16px 0 0 8px; vertical-align: top } #content_data #content article > div.actions { display: inline-block; vertical-align:top; margin-top: 14px; float: right } #content_data #content article > div.actions > span { display: inline-block; margin-left: 5px; background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png) } #content_data #content article > div > h5 { display: inline-block; width: 340px; margin: 2px 0 2px 8px; font-size: 12px } #content_data #content article > div.input { vertical-align:top; display: inline-block; width: 410px } #content_data #content article > div.input > textarea { display: inline-block; width: 400px; overflow: hidden; height: 30px; border-color: #cfcfcf; margin-left: 8px } #content_data #content article > div.input > select { display: inline-block; margin: 20px 0 0 8px } #content_data #content article > div.inputE { vertical-align:top; display: inline-block; width: 340px } #content_data #content article > div.inputE > ul { z-index: 999; position: relative } #content_data #content article > div.inputE .ui-menu { width: 150px } #content_data #content article > div.inputE > img { vertical-align: top; box-shadow: 1px 1px 5px grey; height: 50px; margin: 2px 0 0 8px; } #content_data #content article > div.inputE > img.icon { box-shadow: none; height: 16px; margin: 20px 0 0 8px; } #content_data #content article > div.inputE > span { margin: 22px 0 0 6px; overflow: hidden; display: inline-block; width: 200px } #content_data #content article > div.inputE > p { margin: 6px 0 0 8px; display: inline-block; width: 330px; overflow: hidden; height: 45px } #content_data #seo { } #content_data #seo div { margin: 10px 0 10px 4px } #content_data #seo label { width: 80px; vertical-align: top; display: inline-block } #content_data #seo input { width: 300px; vertical-align: top; display: inline-block } #content_data #seo textarea { width: 390px; vertical-align: top; display: inline-block } #content_data #seo span { font-size: 13px; margin-top: 5px; display: inline-block } #content_data #options { } #content_data #options div { margin: 10px 0 10px 4px } #content_data #options label { margin-left: 16px; width: 80px; vertical-align: top; display: inline-block; text-align: right } #content_data #options label:first-child { margin: 0; width: 115px; text-align: left } #content_data #options label[for=validto] { width: 18px } #content_data #options input[type=text] { width: 300px; vertical-align: top; display: inline-block } #content_data #options textarea { border: solid 1px #c0c0c0; width: 300px; } #content_data #options input[type=text].dater { width: 90px; } #content_data #options input[type=checkbox] { margin-top: 0px } #content_data #options span { font-size: 13px; margin-top: 5px; display: inline-block } #content_data #options label { width: 80px; vertical-align: top; display: inline-block } #content_data #options p { display: inline-block; } #content_data #options .filelink { display: inline-block; vertical-align: top; margin-top: 5px } #content_data #options div.radios { margin: 0; display: inline-block } #content_data #options div.radios label { width: inherit; display: inline-block; margin: 0 20px 0 0 } #content_data #options div.radios input[type=radio] { margin-top: 1px; } #content_data #options div label.language { color: #f3ad25 } #content_data #action_buttons { margin: 15px 17px 5px 15px } #content_data #action_buttons span#last_modif { margin:10px 2px 0 0 ; float: right; display: inline-block } /* back office tables + edit forms ------------------------------------------------------------------*/ #records { border-collapse:collapse; text-align: left; margin: 8px 0px 2px 0px; width: 100%; box-shadow: 2px 2px 5px lightgrey; -moz-box-shadow: 2px 2px 5px lightgrey; -webkit-box-shadow: 2px 2px 5px lightgrey } #records th { background-color: #99defd; border: solid 1px #cfcfcf; padding: 6px; } #records td { background-color: white; border: solid 1px #cfcfcf; padding: 6px 4px 10px 6px } #records .right { text-align: right } #records .center { text-align: center } #records td a, #records td a:visited { color: #333334; } #records td a:hover { color: #4d94cc; } #records td.edit span { background-position: -64px -112px; background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png); width: 16px; height: 16px; display: inline-block; vertical-align: bottom; margin: 0px 4px -1px 0; } #record { background-color: white; border: solid 1px #cfcfcf; padding: 8px; box-shadow: 2px 2px 5px lightgrey; -moz-box-shadow: 2px 2px 5px lightgrey; -webkit-box-shadow: 2px 2px 5px lightgrey } #record label:first-child { width: 100px; margin-left: 0 } #record label { width: 80px; vertical-align: top; display: inline-block; color: #4d94cc; font-weight: bolder; text-align: left; margin: 5px 0 0 20px } #record label.choice { width: inherit; margin-left: 2px; margin-right: 10px; color: inherit; font-weight: normal } #record textarea { width: 300px; height: 24px; vertical-align: top; display: inline-block; border-color: #cfcfcf } #record input[type=text] { width: 300px; vertical-align: top; display: inline-block } #record input.number { width: 20px; } #record input#domain { width: 100px } #record select#domains { width: inherit } #record fieldset > div { margin: 10px } #record #action_buttons { margin: 15px 11px 0px 11px; border-top: solid 1px #cfcfcf; padding: 11px 0 6px 0;} #record fieldset div > span { margin-top: 5px; margin-left: 3px; display: inline-block } #record label.error { color: red; width: inherit } /* Templates ------------------------------------------------------------------*/ #templates fieldset { vertical-align: top; display: inline-block } #templates fieldset#left { width: 470px; border-right: solid 1px #cfcfcf; margin-right: 20px; } #templates fieldset#right { width: 480px } #templates fieldset#right > div.actions { margin: 15px 11px 0px 0px; border-top: solid 1px #cfcfcf; padding: 11px 0px 6px 0px } #templates fieldset#right > div h4 { margin: 12px 0px 6px 0 } #templates fieldset#right article * { vertical-align: top } #templates fieldset#right article span.mover { display: inline-block; margin: 6px 0 0 5px; background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png) } #templates fieldset#right article input { margin: 6px 12px 0 6px; width: 270px } #templates fieldset#right article img { margin-top: 2px } /* login - NOT OK ------------------------------------------------------------------*/ nav h1#logintitle { color: white } #login h1 { width: 505px; margin: 0; padding: 170px 295px 10px 0; color: #fff; text-align: right; font-size: 24px; } #logon { width: 300px; padding: 7px 295px 30px 50px; text-align: right; } #logon fieldset { float: none; width: 255px; } #logon fieldset div { padding-bottom: 5px; } #logon .action_buttons { margin-left: 120px; text-align: left } #logon .action_buttons input { width: 69px; height: 24px; border: 0; color: #fff; font-size: 13px; font-weight: bold; font-family: Verdana, Arial, sans-serif; cursor: pointer; } /* Data from forms ------------------------------------------------------------------*/ #data table { width: 100% } #data table th { font-weight: bold; text-align: left; padding: 6px 6px 4px 6px } #data table td { font-weight: normal; text-align: left; padding: 4px 6px 4px 6px } #data table tr:nth-child(even) { background-color: #e9e9e9 } #data table tr:hover td { background-color: lightgrey; cursor: pointer; } #data table td.date { width: 70px } #data table td.status { width: 35px } #data #record label { margin-top: 1px; } #data form#formdata { margin: 0px; border: solid 1px #c0c0c0; padding: 10px } #data form#formdata #action_buttons { border-top: solid 1px #c0c0c0; padding: 10px 0 0 156px; } #data form#formdata #action_buttons button { margin-right: 10px } #data form#formdata fieldset { border: none; padding: 0; margin: 0 } #data form#formdata fieldset > div { margin: 10px 0 15px 0 } #data form#formdata fieldset > div > label { display: inline-block; width: 160px; text-align: right; padding: 0 13px 0 0; font-weight: bold; vertical-align: top; line-height: 24px } #data form#formdata fieldset > div > label.error { text-align: left; padding: 0 0 0 213px; color: red; display: block; width: inherit } #data form#formdata fieldset > div > input.error, #data form#formdata fieldset > div > textarea.error { border: 1px solid red } #data form#formdata fieldset > div > input[type=text], #data form#formdata fieldset > div > textarea { width: 400px } #data form#formdata fieldset > div > input[type=text].number { width: 70px } #data form#formdata fieldset > div > div { display: inline-block; } #data form#formdata fieldset > div > div > label { display: inline-block; margin: 0 20px 0 7px; vertical-align: top; color: black; line-height: 24px } #data form#formdata fieldset > div > div > input { vertical-align: baseline; } #data form#formdata fieldset strong { color: black } #data form#formdata fieldset div#info { margin-top: -10px } #data form#formdata fieldset div#info div { padding-top: 6px }