/*
                                     [Base]

   Here are the rules that apply directly to HTML elements, before they get
   decorated with classes and ids. You should not find rules applying directly
   to elements anywhere but here. Similarly, you shouldn't see any class- or
   id-specific rules in here.
                                                                              */

body {
   /* bg colors
      #f15b29 = orangy
   */
   background: top right url(/static/img/..jpg) #fff no-repeat;
   font: 11px normal tahoma, arial, sans-serif;
   line-height: 18px;
   margin: 0;
   padding: 0;
}

a {
   border-bottom: 1px solid #eee;
   color: #000;
   text-decoration: none;
   font-weight: bold;
}

a:hover {
   border-color: red;
}

h1, h2, h3, h4, h5, h6 {
   margin: 0;
   padding: 0;
}

p {
   color: #666;
}



/*
                                    [Layout]

   Here's where you'll find the overall layout of the page. If the app looks
   like a three column layout with a fluid center, a top nav, and a fat footer,
   that should be more or less reflected here.

   What you WON'T find is stuff relating to any particular content. Just
   big-picture UI stuff.

   A good rule of thumb for what to put here is stuff that spans nearly the
   entire page either horizontally or vertically, but does not directly include
   any content.

   Columns should be named according to what they are, not according to
   where they are. This makes it sensible to reorder their position without
   renaming them.

                                                                              */

header {
   border-bottom: 1px solid #eee;
   padding: 4px;
   text-align: right;
}

.column {
   float: left;
   height: 500px;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 10px;
}

.thin {
   width: 250px;
}

.thick {
   width: 480px;
}

#main-content {
   background-color: black;
   height:360px;
}

#main-content-title {
   font-weight: bold;
}

body.home-page #frame {
   width: 600px;
   margin: 200px auto;
   text-align: center;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.home-page #frame #nav {
   padding-bottom: 16px;
   border-bottom: 1px solid #ccc;
}

body.home-page #

/*
                                [ Current Work ]

As UI elements are modularized, they should graduate from this section into
their own. For now though, consider these odds and ends. 
                                                                              */


#center h1 {
   color: #000;
   font: normal 14px arial;
   letter-spacing: 0;
   margin-top: 0;
}

#center h1 a {font-weight: bold}

#header h2 {
   font: bold 24px/24px Arial; 
   background-color: white;
   color: black;
   margin: 0 0 0 50px;
   line-height: 50px;
}
 
#right {
   width: 250px;
}

#superright {
   width: 250px;
   margin-right: 0;
}

#logo {
   position: fixed;
   right: 8px;
   bottom: 8px;
}

#logo a {
   border: 0;
}

#logo a:hover  {
   border: 0;
}

div#sideview {
   background-color: #999;
   height: 200px;
}


/*
                                  [Input Text]

   This handles basic text input. Like a twitter box or google search bar, it is
   intended to have a very simple interface. 
                                                                              */
div.input-text {
   background-color: #fff;
   border: 1px solid #aaa;
   height: 50px;
   padding: 5px;
}

div.input-text:hover {
   border: 1px solid blue;
}

div.input-text, div.input-text * {
   opacity: 0.5;
}
div.input-text:hover, div.input-text:hover * {
   opacity: 1;   
}

div.input-text.focus {
   border-color: green;
}

div.input-text textarea {
   border: none; 
   height: 48px;
   outline: none;
   overflow: hidden;
   resize: none;
   scroll: none;
   width: 100%;
}


/* 
                                 [Symbol List]

   The symbol list is a major building block of the UI. It handles, generally,
   objects in a list. 
                                                                              */

ul.symbol-list {
   list-style-type: none; 
   margin: none;
   padding-left: 20px;
}

ul.symbol-list h3 {
   padding: 0 6px;
}

ul.symbol-list li {
   position: relative; 
   line-height: 17px;
   padding: 0 3px 0 6px;
   margin-bottom: 8px;
   cursor: pointer;
   background-color: #fff;
   opacity: 0.8;

   -webkit-border-top-right-radius: 3px;
   -webkit-border-bottom-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -moz-border-radius-bottomright: 3px;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;

   border: 1px solid #fff;
}

ul.symbol-list li:hover {
   opacity: 1;
   border-color: #999;
}

ul.symbol-list li a {
   border-bottom: none;
   color: black;
   display: block;
   font-weight: bold;
}

ul.symbol-list li:hover a {
   color: black;
}

ul.symbol-list li:hover span {
   border-right: 0;
   border-color: #999;
}

ul.symbol-list li a.green {
   color: green;
}

ul.symbol-list li a span {
   background-color: white;
   color: black;
   display: inline-block;
   font-size: 11px;
   font-weight: bold;
   left: -18px;
   position: absolute;
   text-align: center;
   top: -1px;
   width: 18px;

   -moz-border-radius-bottomleft: 3px;
   -moz-border-radius-topleft: 3px;
   -webkit-border-bottom-left-radius: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;

   border: 1px solid #fff;
}

ul.symbol-list li.divider {
   border-top: 1px solid #ccc;
   margin-top: 5px;
}


/*
                                 [Project]


   A project line on the home page

                                                                              */

.project {
   padding: 10px 0;
   border-bottom: 1px solid #eee;
}

.project a {
   font-size:13px;
}

.project span {
   font-weight: bold;
   font-size:9px;
   color: #888;
}

.project span a {
   color: blue;
   font-weight: bold;
   font-size:11px;
}

.project span a:hover {
   border: 0;
   color: black;
}

.project em {
   color: red; 
   margin: 0 5px;
   font-weight:bold;
}



/*
                                 [Action Link]

A link that represents an "action".

                                                                              */

span.action {
   background-color: black;
   border-top: 1px solid black;
   color: #fff;
   cursor: pointer;
   display: inline-block;
   font-weight: bold;
   font-weight: normal;
   margin: -2px 8px;
   padding: 0 3px;
   opacity: 0.5;
   display: none;
}


/*
                                  [Utilities]

   This is the CSS toolbox - little odds and ends that often come in handy to
   fix small problems like "Oops, I don't want any margin here" or "I want to
   demphasize this". Generally, adding and removing these classes shouldn't
   break a layout too badly.
                                                                              */

.inactive {display: none}
.no-margin {text-align: left}
.right-align {text-align: right}
.left-align {text-align: left}
.bump-top {margin-top: 25px !important}
.hidden {display: none}


/*
                                    [Hacks & Fixes]

   It's usually pretty important that a hack be applied, so these should always
   be at the end of a page, to make sure they'll beat rules earlier on the page
   in the cascade.
                                                                              */