cody/static/css/cody.css

Cody CMS

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