/*
Document        :   fridge.css
Created on      :   15/10/2009, 1:56:35 PM
Author          :   Robert Tooker & Prashant Raju
Description     :
Main stylesheet for A-grade browsers to be used
in conjuction with YUI reset-grid-fonts css
Tested with     :
IE6+, FF2+, Safari 3+, Chrome, Opera 9+
-------------------------------------------------
Table of contents:
// Common Styles //
1.          :   Globals
2.          :   Link styles
3.          :   Font aligns
4.          :   Font styles
5.          :   Font colors
6.          :   Container
7.          :   Main (Used for sticky footer)
8.          :   Logo
9.          :   Content
10.         :   Footer
// index.php Styles //
11.         :   Location textbox
12.         :   Location button
// search.php Styles //
14.         :   Map
15.         :   Available list
16.         :   Available list items
17.         :   Used list
18.         :   Used list items
19.         :   Placeholders
20.         :   Dropzone
------------------------------------------------
Colors:
#333        :   Dark grey
#f90        :   Orange
green       :   Green
red         :   Red
#777        :   Light Grey
-----------------------------------------------
*/

/* 1. Globals */
html, body {
    background:#FFF url('../images/fridge_gradient.png') repeat-x top;
    color:#333;
    height:100%;
    outline:none;
}

/* 2. Links */
a, a:active, a:visited  {   color:#f90; }
a:hover                 {	text-decoration:none;   }

/* 3. Font aligns */
.left   {   text-align:left;    }
.right  {   text-align:right;   }
.center {   text-align:center;  }

/* 4. Font styles */
.bold   {   font-style:normal;  font-weight:700;    }
.italic {   font-style:italic;  }

/* 5. Font colors */
.grey   {   color:#777; font-style:normal;    }
.green  {   color:green; font-style:normal;   }
.red    {   color:red; font-style:normal;     }

/* 6. Container */
#container          {   height:100%; text-align:left;   }
body > #container   {   height:auto; min-height:100%;   } /* Used for sticky footer */

/* 7. Main */
#main { padding-bottom:30px;    } /* Used for sticky footer */

/* 8. Logo */
#hd h1.logo a {
    background:url('../images/fridge_logo.gif') bottom no-repeat;
    display:block;
    height:112px;
    text-indent:-9999px;
    width:280px;
}

#hd h1.logo span {
    visibility:hidden;
}

/* X. Paragraph as header */


/* 9. Paragraph */
#container .content, #container h2 {
    color:#333;
    font-size:138.5%;
    line-height:32px;
    margin:4px 0;
}

/* 10. Footer */
#ft {
    clear:both;
    height:30px;
    position:relative;
    text-align:left;
    width:950px;
    margin:0 auto;
    margin-top:-32px;
}

/* 11. Location textbox */
#container .location-input {
    border:1px solid #999;
    font-size:138.5%;
    margin-top:5px;
    width:400px;
    padding:5px;
}

/* 12. Location button */
#container .location-submit {
    cursor:pointer;
    font-size:138.5%;
    margin-left:5px;
    padding:2px;
}

/* 13. Map wrapper */
#map-wrapper {
    background:#FFF;
    border:1px solid #E5E5E5;
    margin-bottom:5px;
    padding:5px;
}

/* 14. Map */
#map {  height:250px;   }

/* 15. Available list */
#container .available-items {
    background:#FFF;
    border:1px solid #E5E5E5;
    padding:0 5px;
}

/* 16. Available list items */
#container .available-items li {
    background:#FFF;
    border:1px solid #E5E5E5;
    cursor:move;
    margin:5px 0;
    padding:5px;
}

/* 17. Used list */
#container .used-items {
    background:#FFF;
    border:1px solid #E5E5E5;
    padding:0 5px;
}

/* 18. Used list items */
#container .used-items li {
    background:#FFF;
    border:1px solid #E5E5E5;
    cursor:move;
    margin:5px 0;
    padding:5px;
}

/* 19. Placeholders */
#container .used-items .placeholder,
#container .available-items .placeholder {
    background:#F5F5F5;
    border:3px dashed #E5E5E5;
    padding:5px;
}

/* 20. Dropzone */
#container .dropzone {
    background:#F5F5F5 !important;
    border:3px dashed #E5E5E5 !important;
    color:#777777;
    font-size:138.5%;
    padding:5px;
}

/* 00. Sticky footer */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { display: inline-block;  }
* html .clearfix { height: 1%;  }
.clearfix { display: block; }