@import url('zero.css');

body { font-family: Verdana, arial, helvetica, sans-serif; font-size: 12px; background-color: #afafaf; }

h1,h2,h3,h4 { }
h1 { font-size: 120%; margin-bottom: 1.5em; margin-top: 1.5em; text-shadow: #bebebe 1px 1px -2px; color: black; }

h3 { font-weight: normal !important; padding-bottom: 0.5em; margin: 1.5em 0 1em 0; font-size: 110%; display: block; border-bottom: 1px solid #afafaf; }

h4 { font-weight: bold; color: #646464; margin-bottom: 0.8em; }

p { margin: 0.4em 0 1em 0; line-height: 1.2; }

strong { font-weight: bold; }

a { color: #646464; }
  a:hover { color: black; }

a.icon-url { text-decoration: none; }
 a.icon-url * { vertical-align: text-top; }

ul { margin: 0.4em 0 1em 0; }

ol { margin-bottom: 1em; list-style: decimal; list-style-position: inside; }
  ol li { margin: 0.4em 0 0.4em 0; line-height: 1.3; }
    ol li ul { padding-top: 0.4em; padding-left: 20px; list-style: disc; }

.cl { clear: left; }
.cb { clear: both; }

.first { margin-top: 0; }

.error input { background-color: #ffb6c1; } 
 
/* Flashes */

.flash { border: 2px solid black; background-color: #afafaf; padding: 1em; margin-bottom: 1.5em; opacity: 0; }  
  .info { padding-left: 30px; background: #ffffcc url(../images/icons/lightbulb.png) no-repeat 6px 10px; }

/* TODO */
.template { display: none !important; }
 
/* Wrapper elements */

#container { width: 800px; margin: 0 auto; background-color: white; padding: 0 0 30px 0; }
#header { padding: 0; height: 121px; background: url(../images/logo-bg.png) repeat-x top left; }
#main { padding: 20px; min-height: 400px; }
#footer { width: 780px; margin: 0 auto; padding: 5px 10px; line-height: 1.2; font-size: 80%; }

#header .logo { float: left; width: 254px; height: 121px; background-image: url(../images/logo.png); }
#header .foobar { width: 400px; float: right; padding-right: 20px; padding-top: 10px; text-align: right; color: white; font-size: 90%; }
  #header .foobar a { color: white; }
  #header .foobar .help { margin-bottom: 70px; font-size: 100%; }
    #header .foobar .help span { font-weight: bold; }

/* Custom fields */

.cph-field * { display: inline !important; }

/* Form styling */

form fieldset { margin-bottom: 1em; }
  form fieldset .legend {  }

form .fi { margin-bottom: 0.5em; }
  form .fi label { display: block; width: 200px; float: left; }
  form .fi .inner { margin-left: 200px; }
    form .fi table td { padding-left: 0; }
    form table { margin-bottom: 0; }

form.narrow .fi label { width: 100px; }
  form.narrow .fi .inner { margin-left: 100px; }

/* Login form */

#login .fi label { width: 150px; }
#login .fi input { width: 150px; }
#login .buttons, #login p { padding-left: 152px; }

/* Table styling */  
  
table { margin-top: 0em; margin-bottom: 1.5em; }
  table th { background: black url(../images/gradient.png) top left repeat-x; color: #fff; padding: 5px; border-right: 1px solid white; }
  table td { padding: 3px; }
  table td.numeric { text-align: right; }
/* TODO: remove? Dashboard styling */
  table tr.odd td { background-color: #dcdcdc; }
  table tr.empty td { background-color: #dcdcdc; text-align: center; color: #000; padding: 10px 0; font-size: 110%; }
  table td ul { margin-bottom: 0; }

.toggle-section { margin: 1em 0 1em 0; padding-left: 25px; background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px; }
  .toggle-section h5 { margin-bottom: 1em; }
  .toggle-section h5 label { font-size: 110% !important; }
  .toggle-section table { margin-bottom: 0.5em; }

/* Dashboard */

#dashboard .section { width: 350px; float: left; margin-right: 20px; }

#dashboard ul { width: 350px; }
  #dashboard ul li { padding: 0px 0px 5px 0px; }

#dashboard .cattle .date-box { background: url(../images/red.png) rgb(59,4,2) repeat-x top left; }
#dashboard .sheep .date-box { background: url(../images/green.png) rgb(0,64,22) repeat-x top left; }

#dashboard .date-box { width: 65px; height: 65px; color: white; float: left; margin-right: 10px; background: url(../images/grey.png) #222222 repeat-x top left; }
  #dashboard .date-box * { text-align: center; font-size: 90%; }
  #dashboard .date-box .month { padding: 5px 0 0 0; }
  #dashboard .date-box .day { padding: 5px 0; font-size: 120%; }

#dashboard .detail { margin-left: 65px; }

/* Error styling */

.error-explanation { color: #95170A; margin-bottom: 1.5em; }
  .error-explanation h1 { color: #95170A; }
  .error-explanation ul { list-style: disc; list-style-position: inside; padding-left: 10px; }
    .error-explanation li { margin-bottom: 0.5em; }

/* Columns */

.three-column .column { float: left; width: 200px; margin-right: 20px; }
.two-column .column { float: left; width: 400px; margin-right: 10px; }

/* Registration checklist */

.checklist th { background-image: none; background-color: #fff; font-weight: bold; color: #000; }
  .checklist td,
  .checklist th { padding-right: 20px; vertical-align: middle; }
  .checklist .check { width: 10px; height: 20px; }
.checklist tr.completed td.check { background: url(../images/tick.png) no-repeat center center; }
  .checklist ul { list-style: disc; list-style-position: inside; }
    .checklist li { padding: 0.2em 0 0.2em 0; }
.checklist a {
  width: 150px;
  display: block; 
  padding: 7px 7px 7px 25px;
  background-color: #afafaf; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border: 1px solid #000; 
  text-decoration: none; 
  color: #fff;
}
.checklist a.completed {
  background: rgb(156, 205, 113) url(../images/tick.png) no-repeat 3px center;
}
.checklist a.disabled { 
  opacity: 0.4;
}

/* Registration-form specific styles */

form.registration th.breed { width: 200px; }
form.registration th.count { width: 100px; text-align: center; }
form.registration td.count { text-align: center; }

form.registration .housing-management .other { padding-top: 0.4em; }  
  
/* Search forms */

.search-form { margin-bottom: 2em; }

/* Block */

.block { padding: 10px; background-color: #afafaf; }

dl { margin-bottom: 1em; }
dl dt { clear: left; float: left; width: 270px; font-weight: bold; }
dl dd { margin-bottom: 0.5em; }

/* Summary table */
table.summary th { background: none; font-weight: bold; color: #000; padding-left: 0; }

/* Questionnaire */

form.questionnaire .fi { margin-bottom: 1em; }
form.questionnaire .fi label { width: 300px; }
form.questionnaire .fi input,
form.questionnaire .fi .inner { margin: 0 0 0.5em 320px; }
form.questionnaire .fi .inner { padding-top: 1em; }
form.questionnaire .fi .inner input { margin: 0; display: inline; width: auto;}