/*  GrowlyBear 'Under Construction' styles
--------------------------------------- 

author:     Michael Allan
company:    GrowlyBear
version:    0.4
date:       14 November 2006
comments:   placeholder styles to hold down the fort while
            I rewrite everything (again) after a rather
            unfortunate incident at our previous host
                        
--------------------------------------- */


/*  Imported components
--------------------------------------- */
@import url(components/defaults.css);
@import url(components/fonts.css);


/*	Preloaded images
--------------------------------------- */
#preloader {
	width: 0;
	height: 0;
	display: inline;
	background-image: url(../images/temporary/balloon/top2.png);
	background-image: url(../images/temporary/balloon/top2_c.png);
	background-image: url(../images/temporary/balloon/mid2.png);
	background-image: url(../images/temporary/balloon/mid2_s.png);
    background-image: url(../images/temporary/balloon/bot2.png);
    background-image: url(../images/temporary/balloon/bot2_c.png);
}

/*  General and miscellaneous rules
--------------------------------------- */
h1 {

}
h2 {
    
}
h3 {
    
}
h4 {
    
}
a {
    text-decoration: none
}
a:link,
a:visited {
    color: #fff;
}
a:hover,
a:focus,
a:active {
    color: #f7d354;
}


/*  Page defaults
--------------------------------------- */
html, body {
    color: #fff;
    height: 100%;                       /* sets the height context for #subliminal below */
    min-height: 460px;                  /* prevent collisions at very small screen sizes */
    min-width: 760px;
    background: #86008f url(../images/temporary/bg_light.gif);
}

/*  Technologies (top)
--------------------------------------- */
#subliminal {
    position: relative;
    height: 50%;                        /* sets the height context for #banner below */
    margin-top: -105px;                 /* tad more than half the height of #overt below, for nice vertical centering */
    font-size: 107%;
    background: #870090 url(../images/temporary/bg_dark.gif);
}
#subliminal ul {
    position: absolute;
    left: 10%;
    bottom: 14%;
    width: 85%;                         /* unexpected line break in safari without this explicit width */
	padding-left: 10px;
	color: #af00bb;
    border-left: 1px dashed #af00bb;
}
#subliminal li.last {
    margin-top: 8px;
}
#subliminal a {
    padding: 5px;
}
.last a {
    letter-spacing: 1px;
}
.last a:hover,
.last a:focus,
.lastl a:active {
    color: #fff;
}
#subliminal a:hover {
    cursor: help;
}


/*  Main banner (centre)
--------------------------------------- */
#overt {
    height: 134px;
    min-width: 780px;
    text-align: center;
    background: url(../images/temporary/gradient.gif) repeat-x;
}
#overt #soon {
    margin-left: 10%;
}


/*  Point of entry (bottom)
--------------------------------------- */
#entry {
    float: right;
    width: 9em;
    margin: 20px 10% 0 0;
    border-right: 1px dashed #870090;
}
#entry p {
    margin: 10px 0 5px 0;
    padding: 0 15px 5px 0;
    border-bottom: 1px dashed #870090;
}                                       /* "offleft" accessible hiding technique from:                      */
label,                                  /* http://www.access-matters.com/testcases/tc5-2-9.html             */
legend span {                           /* NB: additional span element needed for legend-ary intransigence  */
    position: absolute;
    left: -9000px;
    width: 0;
    overflow: hidden;
}
input {
    border: medium double #666;
    background-color: #eee;
    padding-left: 2px;
    margin-bottom: 4px;
}
#login,
#email {
    color: #f7d354;
    background-color: #222;
}


/*  The Growlybear
--------------------------------------- */
#growlybear {
    position: absolute;
    bottom: 0;
    left: 0;
}
/*  ... and his well-rounded, flexible voice
--------------------------------------- */
#balloon {
    position: absolute;
    bottom: 30px;
    left: 210px;
    width: 40%;
    color: #000;
    font-style: italic;
    text-align: justify;
    background: transparent url(../images/temporary/balloon.png) no-repeat 0 100%;
    display: none;
}
#balloon strong {
    font-style: italic;
    font-weight: bold;
}
#balloon a,
#balloon a:link,
#balloon a:visited {
    color: #870090;
    border-bottom: 1px dotted #870090;
}
#balloon a:hover,
#balloon a:focus,
#balloon a:active {
    border-bottom: none;
}                                       /* flexible rounded-corner code from:                                       */
#balloon .top .corner,                  /* http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/ */
#balloon .bot .corner {
    font-size: 1px;                     /* ensure minimum height - check if necessary */
    height: 20px;
}
#balloon .top,                          /* space for corner and side pieces */
#balloon .mid,
#balloon .bot {
    margin-right: 20px;
}
#balloon .top .corner,                  /* pull images into empty margin areas above */
#balloon .mid .side,
#balloon .bot .corner {
    margin-right: -20px;
}
#balloon .mid {                         /* nice whitespace for the balloon text */
    padding-left: 45px;
}
#balloon .mid .side {                   /* more whitespace goodness */
    padding-right: 25px;
}
#balloon .mid p {
    font-family: georgia, serif;
    line-height: 1.2;
}
#balloon .mid p+p {                     /* needs to be fixed for less capable browsers */
    margin-top: 10px;
}
#balloon .top         {  background: url(../images/temporary/balloon/top2.png)   no-repeat   0    0  }   /* BUG HERE IN SAFARI - background repeats _incorrectly_ if pixel dimension set to position image any distance from left (code/images subsequently revised to adapt) */
#balloon .top .corner {  background: url(../images/temporary/balloon/top2_c.png) no-repeat 100%   0  }
#balloon .mid         {  background: url(../images/temporary/balloon/mid2.png)   no-repeat   0  100% }
#balloon .mid .side   {  background: url(../images/temporary/balloon/mid2_s.png) repeat-y  100%   0  }
#balloon .bot         {  background: url(../images/temporary/balloon/bot2.png)   no-repeat   0    0  }   /* SAME BUG HERE - the background image repeats into the (empty) left margin, even though it's got no business being there doing that */
#balloon .bot .corner {  background: url(../images/temporary/balloon/bot2_c.png) no-repeat 100%   0  }



/*  Test for the IE css filter system
    (it's all good)
--------------------------------------- */
#debugging {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30px;
    width: 200px;
}