// 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: .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 select max-width: 15em option border-top: 1px solid #D7D7D7 margin: .2em 0 span.click-me cursor: pointer // ********************************* 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 3px :float left a :padding 0.2em :color #737272 :font-weight bold a:hover :color = !main_red // ************************************* box structure #main :background #FFF :padding 0 :margin 0 // ************************************* 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 0 0 1em :background #FFF :font-size 1.3em :width 95% :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 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 :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, div.left_column, div.right_column :margin .5em .5em 1.5em .5em div.single_column :width 100% div.left_column :width 40% :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 80% th#col_required, th#col_tolerance :width 145px th#col_packages, th#col_left_units :width 50px td#col_left_units :color #ed0606 td :padding 0.6em td.name, tr.note td :text-align left :padding-left 10px tfoot tr :background-color = !lightGreen td :padding-right 10px tr.note :background-color #FBFBFB :font-size 0.9em :border-bottom 1px solid #DDDDDD td :padding-left 20px // ********* 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%