foodsoft/public/stylesheets/sass/main.sass

// colors which are used in the foodsoft
!main_red = #ED0606
!hover_yellow = #ffff72
!boxContent = #e4eed6
!lightGrey = #efefef
!darkGreen = #78b74e
!lightGreen = #e4eed6

/* General rules ...
body
  :background-color #fff
  :color black
  :margin 0
  :padding 1% 0 0 0
  :min-width 990px
  :font-size 62.5%
  :font-family verdana, arial, sans-serif

#loader
  :position fixed
  :top 1px
  :right 1px
  :background #FFF
  :padding 10px
  :color black
  :border
    :width 2px
    :style solid 
    :color = !main_red

a, a:visited
  :text-decoration underline
  :color black

a:hover
  :color = !main_red

h1, h2
  :color = !main_red

h1
  :font-size 2.2em
  :line-height 0.8em
  :padding 1em 0 5px 5%
  :margin 0 0 1em 0
  :border-bottom 
    :width 1px
    :style dotted 
    :color = !main_red

h2
  :font-size 1.4em
  :margin-top .5em
    
h3
  :font-size 1em
  :margin-top 1.5em
    
input
  :color #2e2e2e

abbr, acronym
  :cursor help

input, textarea, select
  border: 1px solid #D7D7D7
  font-family: verdana, arial, helvetica, sans-serif
  font-size: 0.9em
  padding-left: .2em
  padding-right: .2em

input:focus, textarea:focus, select:focus
  border-color: #000

input[type="button"], input[type="submit"], input[type="reset"]
  background: #EEEEEE none repeat scroll 0%
  border: 1px outset #CCCCCC
  color: #222222
  padding: 0.1em 0.5em
  font-size: 1em
  font-weight: bold
  min-width: 34px

select
  max-width: 15em

option
  border-top: 1px solid #D7D7D7
  margin: .2em 0

span.click-me
  cursor: pointer
.left
  float: left
.right
  float: right
.clear
  clear: both

.description
  color: grey
  font-size: 0.9em

.hidden
  display: none

// ********************************* loginpage
#login
  :margin auto
  :width 27em
  :font-size 1.2em

#login #meta
  :margin-top 2em
  :padding-top .3em
  :border-top 1px dotted #ED0606
  :color #2e2e2e

    
// ******************************** - Logo - head
#header 
  :margin 0
  :padding 0


#logo 
  :background = !main_red
  :height 1.1em
  :width 8em
  :padding 0 20px
  :text-align left
  :line-height 54px
  :font-size 54px
  :overflow hidden
  :letter-spacing -3px
  :margin 0
  a, a:hover
    :color white
    :background-color = !main_red
    :text-decoration none
  a span
    :color = !main_red
    :background #FFF
    :padding-right 0.1em
    :font-weight bold
    :border-top
      :width 2px
      :style dotted 
      :color = !main_red
    
#logininfo
  :position absolute
  :top 3px
  :right 10px
  :font-size 1em
  ul 
    :list-style none
    li 
      :margin 0 0 0 5px
      :float left
  a 
    :color #737272
    :font-weight bold
  a:hover 
    :color = !main_red
    
// *************************************  box structure
#main 
  :background #FFF
  :padding 0
  :margin 0 15px 0 15px

//  ************************************* infobar
#infobar 
  :width 10% 
  :min-width 5em
  :float right
  :padding 2.6em 1em
  :margin 3em 0 0 0
  :border-left 1px dotted #ED0606
  :font-size 1.2em 
  h3
    :color #ED0606
  ul 
    :list-style none
  li 
    :margin .3em 0 0 -3em

// ************************************ embedded menu
.menu, #start_nav
  :border 2px solid #e3e3e3
  :background #f5f5f5
  :padding 0 10px 0px 5px
  :float left

  ul 
    :list-style-type none
    :margin 0 0 0.2em 0
    :padding 0

    li 
      :border-bottom 1px solid #dedede
      :color #666
      :margin 0.8em 0 0 0
      :font-weight bold    
      a:link, a:visited 
        :display block
        :padding 0.25em 1em
        :text-decoration none
        :width 12em 
      a:hover, a:focus 
        :background-color #e3e3e3

      ul 
        :margin 0
        :padding 0
        li 
          :border-top 1px solid #dedede
          :border-bottom none
          :margin 0
          :font-weight normal
          a:link, a:visited 
            :width 11.5em
            :padding 0 1em 0.1em 1.5em
            :font-weight normal
            :text-decoration none
.menu
  :position absolute
  :top 100px
  :right 1px
  
// ************************************** content
#content 
  :padding .5em 0 2.5em 0
  :margin 0
  :background #FFF
  :font-size 1.3em
  :width 100%
  :float left


/************************************ tables
table 
  :border-collapse collapse
  // border2px solid #e3e3e3
  :text-align left
  :width 100%
  :margin 0
  
  thead th, tbody td, th, td 
    :padding 0.3em  

  thead tr  
    :background-color #efefef
  th
    :color black
  tr.odd, tr.even
    :border-top 1px solid #DDDDDD 
  tr.odd, tr.odd input
    :background-color #F6F6F6
  tr.even
    :background-color #FBFBFB
  tr.unavailable, tr.unavailable a
    :color grey 
  tr.unavailable a:hover
    :color #ED0606
  tr.just_updated
    :color #008000
  tr.selected, tr.active
    :background-color #ffffc2
  tr.click-me
    :cursor pointer
  tr.ignored
    color: grey
  tr.success
    color: green
  tr.failed
    color: red
      
table.list
  //:border 2px solid #78b74e
  tr
    :border 1px solid #e3e3e3
  tbody tr:hover
    :background-color #EEEEDD
    
table tfoot tr
  :background-color #fff
  td
    :padding-top 0.8em

tr.edit_inline
  :background-color = !hover_yellow
  td, span
    :padding 0.5em 0.2em

div.legend, div.legend table th  
  :color grey
  :font-size .8em
  :background none

form table 
  :border none

table.ordered_articles
  :background-color #fff
  tbody tr:hover
    :background-color #EEEEDD
  a
    :display block
  tr.results:hover
    :background-color none
  table
    tfoot
      :font-weight bold
      
td.currency, td.actions
  :text-align right
  :padding-right 0.5em
td.closed
  background: url(/images/arrow_right_red.png) no-repeat center left
  a
    display: block
    text-decoration: none
    padding-left: 20px
td.open
  background: url(/images/arrow_down_red.png) no-repeat center left

// ************************************* for edit formulars */
div.edit_form
  :border 2px solid #e3e3e3
  :background #f5f5f5
  :padding 0 0.8em 0.8em 0.8em
  :margin 5px 0
  :color black
  
#edit_article, #edit_box, #ajax_box
  :position fixed
  :top 5em
  :left 10em
  :width 55em
  :background #FBFBFB
  :padding 3em
  :padding-top 1em
  :border 
    :width 3px
    :style solid
    :color = !main_red
  
// ***************************************** other boxes */

// *********boxes in columns ****/
div.box 
  :border-left 2px solid #78b74e
  :padding-left 5px

div.single_column 
  :width 100%

div.left_column 
  :width 40%
  :float left

div.middle_column
  :width 40%
  :margin-left 10px
  :float left

div.right_column
  :margin-bottom 3em
  :width 55%
  :float right

// *********** content of boxes ******/

div.box_title 
  :background #78b74e
  :padding 5px 10px
  
  h2, h2 a 
    :color #FFF
    :margin 0
  h2
    :font-size 1.3em 

div.column_content 
  :background = !boxContent
  :color black
  :padding 10px
  margin-bottom: 2em
  h2 
    :color black
    :font-size 1.3em
    :margin 1em 0 0 0
  #links
    :float right

// for special pages
// index-page




// * article show
tr.current_price
  :background #cdee9e
    

// **** maybe later for the very little spinner
li.check div.spinner
  :display block 
  :height 5px 
  :width 21px 
  :background-image url(/images/dots-white.gif) 
  :line-height 16px 
  :float left 
  :margin-right 5px
  :background-position center center
  :background-repeat no-repeat


// ************************************* the order page */
span.used, span.unused
  :font-weight bold
span.used  
  :color #008000
span.unused
  :color #ed0606
span.total
  :font-size 80% 
table#order
  :text-align center
  input
    font-size: 0.9em
    font-weight: bolder
    background-color: #78B74E
    color: #fff
    -moz-border-radius: 3px
    -webkit-border-radius: 3px
    padding: 0
  th#col_required, th#col_tolerance
    :width 165px
  th#col_packages,  th#col_left_units
    :width 50px
  td.quantity, td.tolerance
    text-align: right
  td#col_left_units
    :color #ed0606
  td
    :padding 0.6em
  td.name
    :text-align left
    :padding-left 10px
  tfoot
    tr
      :background-color = !lightGreen
    td
      :padding-right 10px
#order-footer, .article-info
  text-align: left
  z-index: 1
  position: fixed
  bottom: 0
  background-color: #E4EED6
  border-top: 2px solid #78B74E
  //opacity: 0.95
  #total-sum
    width: 22em
    margin: .5em 2em 0 0
    float: right
    #order-button
      margin: .5em 0
      input
        background-color: #78B74E
        color: #fff
        -moz-border-radius: 3px
        -webkit-border-radius: 3px
      input:disabled
        background-color: red
#order-footer
  width: 100%
  right: 0
  left: 0
.article-info
  z-index: 2
  width: 45em
  height: 8em
  border: none
  left: 30px
  h3
    text-align: center
    margin: 0
    margin-bottom: 5px
    width: 100%
tr.order-article .article-info
  display: none
tr.order-article:hover .article-info
  display: block
// ********* Comments
#newComment
  :margin 1em
.comment
  :border-bottom 1px dotted black
  :padding .5em 0 1em .5em
  .timestamp
    :font-size 0.8em
    :color grey
    
// *************** Clearing Order Page ..
#editOrderNav
  a
    :color #fff
    :font-weight bold
  ul
    :margin 0
    :padding 0
    li
      :display inline
      :list-style none
      :margin-right 1em
      
// *************** Tasks ...
.accepted
  color: green
  font-weight: bold
.done, .done a, .done .accepted
  color: grey
  font-weight: normal
  
// **************  auto_complete
ul.autocomplete
  .nick, .informal
    margin: auto
  .nick
    font-weight: bold
  .informal
    color: grey
    margin-left: 1em
    
// ******* to navigate easy to the next element, e.g. next order
#element_navigation
  position: relative
  top: -1em
  left: 5%

// group stats
.stats-bar
  height: 20px
  min-width: 10px
  border: 1px solid #DDDDDD
  background-color: #fff
  text-align: center
  margin: 0 10px 10px 0
// *** wiki
#wiki_content
  border-style: none
  color: black
  line-height: 1.5em

.wiki_show, .wiki_version, .wiki_new, .wiki_edit, .wiki_all
  margin-top: 30px
  padding: 10px
  h1
    padding-left: 0
    padding-top: 10px
    border-bottom:
      :style solid
  .column_content
    margin-bottom: 0

#wiki_content
  min-height: 400px
  span.editsection
    display: none
  h2, h3, h4, h5, h6
    background: transparent none repeat scroll 0 0
    border-bottom: 1px solid #AAAAAA
    padding-bottom: 0,17em
    padding-top: 0,5em
    font-weight: normal
    font-size: 150%
    color: black
  h3, h4, h5, h6
    border-bottom: medium none
    font-weight: bold
  h3
    font-size: 132%
  h4
    font-size: 116%
  ul
    line-height: 1.5em
    margin: 0.3em 0 0 1.5em
    padding: 0
  ol
    line-height: 1.5em
    margin: 0.3em 0 0 3.2em
    padding: 0
    list-style-image: none
  li margin-bottom: 0.1em

a.new_wiki_link
  color: grey
#preview
  border: 1px dotted grey
  padding: 0 1em
#wikitoc
  padding: 5px
  margin-bottom: 2em
  width: 25em
  border: 1px solid grey
  :background-color= !lightGrey
  h2
    font-size: 1em
    color: black
    span a
      font-size: 0.5em
      color: grey

#breadcrump
  font-size: 0.5em
  margin-bottom: 5px
  height: 1em
  color: #ED0606
  a
    :color = !main_red
    :text-decoration = none
  a:hover
    :text-decoration = underline
#sidebar
  float: right
  width: 290px
  margin-top: -60px
  #sidebar-links
    margin-bottom: 18px
    text-align: right
  #subpages
    border: 1px solid #78b74e
    margin-top: 10px
    padding: 0 0 0 0
  #versions
    margin-top: 10px
    border: 1px solid #78b74e

#wiki-syntax-help
  float: right
  table
    border-color: #78b74e

.wiki_version
  #sidebar
    margin-top: -23px
    border: 1px solid #78b74e