/* Colors:

    lite gray:      #DDDDDD
    gray:           #CCCCCC
    dark gray:      #666666

    blue print:     #35527C

    lite green:     #D2F0A0     http://www.paletton.com/
                    #AED56A
    green:          #86B13E
                    #699421
    dark green:     #466C06

    lite purple:    #DA91B6
                    #BD5E8F
    purple:         #9D376B
                    #831D51
    dark purple:    #600634
*/

/* Fonts */
@font-face {
  font-family: 'Oregano';
  src: url('./fonts/Oregano-Regular.eot');
  src: url('./fonts/Oregano-Regular.eot?iefix') format('opentype'),
    url('./fonts/Oregano-Regular.woff') format('woff'),
    url('./fonts/Oregano-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


.references {
    display: none;
}

.grid {
    width: 97%;
    margin: 0 auto 1% auto;
}
    .grid TH,
    .grid TD {
        padding: 3px;
    }
    .grid TH,
    .grid TFOOT TD {
        font-weight: bold;
    }
    .grid TBODY TR:nth-child(even) {
        background-color: white;
    }
        .grid TBODY TR:nth-child(odd) {
            background-color: #dddddd;
        }
        .grid TBODY TR:hover {
            background-color: #831D51;
            color: white;
        }


.eco {
    color: #86B13E;
}
    .eco > IMG {
        height: 32px;
        height: 2vw;
    }

.clicky {
    cursor: pointer;
}


BODY {
    /*line-height: 1.4em;*/
    font-family: Tahoma, serif;
    font-weight: normal;
}

P {
	margin-left: 10px;
}
    P > SPAN {
	    background-image: url('../img/clear_white50.png');
    }

H1, H2, H3 {
    font-family: Oregano, Goudy Old Style, Tahoma, serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
	text-shadow: 0px 0px 6px white;
    width: 100%;
    word-spacing: 0.2em;
}
    H1 {
        font-size: 42px; /* Some tweener fallback that doesn't look awful */ 
        font-size: 2.8vw; /* http://css-tricks.com/viewport-sized-typography/ */
    }
    H2 {
        font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
        font-size: 2.4vw; /* http://css-tricks.com/viewport-sized-typography/ */
    }

A {
	color: #466C06;
	text-decoration: none;
	border-bottom: 1px dotted #666666;
}
	A:hover {
		color: #831D51;
		border-bottom: 1px solid #831D51;
	}
/*	
	A:visited {
		color: #67307F;
	}
*/

/* http://css-tricks.com/snippets/css/css-text-shadow/ */
.textShadow {
	text-shadow: 0px 0px 6px white;
}
/* http://css-tricks.com/snippets/css/css-box-shadow/ */
.shadow {
  -moz-box-shadow:    0px 0px 3px 6px white;
  -webkit-box-shadow: 0px 0px 3px 6px white;
  box-shadow:         0px 0px 3px 6px white;
}

.tooltip {
    padding: 10px;
    background-color: white;
    border: 1px solid #86B13E;
    max-width: 400px;
    
    /* shadow
    -moz-box-shadow:    3px 3px 5px 6px #cccccc;
    -webkit-box-shadow: 3px 3px 5px 6px #cccccc;
    box-shadow:         3px 3px 5px 6px #cccccc;
    */
    
    /* Rounded corners http://css-tricks.com/snippets/css/rounded-corners/ */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
}
    .tooltip UL {
        list-style: none;
        padding: 0;
        text-indent: 0;
        margin: 0;
    }
        .tooltip LI {
            margin-top: 10px;
        }
            .tooltip LI:first-of-type {
                margin-top: 0;
            }
    [tooltip]:hover {
        color: #600634;
        cursor: pointer;
    }


.scroller {
    position: relative;
    width: 80%;
}
    #viewport .scroller {
        padding: 10px 10px 30px 10px;
    }


/* List-related */
UL .more,
OL .more {
	display: none;
    margin: 3px 0 0 2%;
    font-style: italic;
}
    UL .more OL,
    OL .more OL {
        margin: 3px 0 0 -3%;
    }
    UL LI:hover,
    OL LI:hover {
    	background-color: #D2F0A0;
    }
        UL LI:hover .more,
        OL LI:hover .more {
            display: block;
        }
    UL .more SUP,
    OL .more SUP {
        font-size: 60%;
        vertical-align: super;
    }

UL.un {
	list-style: none;
	padding-left: 0;
	text-indent: 0;
	margin-left: 40px;
    list-style-image: url('../img/ul/eco.png');
}
	UL.un > LI {
	    clear: both;
		margin-bottom: 0.8em;
	}
        UL.un > LI.eco2 {
            list-style-image: url('../img/ul/eco2.png');
        }
        UL.un > LI.eco1 {
            list-style-image: url('../img/ul/eco1.png');
        }
        UL.un > LI.eco0 {
            list-style-image: url('../img/ul/eco0.png');
        }

OL.references {
	font-size: 70%;
    list-style-image: none;
}
	OL.references > LI {
		margin-bottom: 3px;
	}


/* Intro */
#Intro {
    position: relative;
    z-index: 10;
}
    #Intro > IMG {
        left: 33.3%;
        position: absolute;
        top: 15%;
        width: 33.3%;
    }
    #Intro > H1,
    #Intro > H2 {
        font-size: 2.8vw !important;
        position: absolute;
        text-align: center;
    }
        #Intro > H1 {
            top: 3%;
        }
        #Intro > H2 {
            font-size: 5vw !important;
            bottom: 3%;
        }
    #Intro .eco > IMG {
        height: 42px;
        height: 2.8vw;
        margin: 0 -3px -1px -8px;
    }


/* Materials */
#Materials {
    position: relative;
    z-index: 20;
}
    #Materials OL.references,
    #Materials UL.un,
    #Materials P {
		background-image: url('../img/clear_white50.png');
	}
        #Materials OL.references {
	        margin-left: 10px;
            position: absolute;
            bottom: 1%;
        }


/* Environment */
#Enviroment {
    position: relative;
    z-index: 30;
}
    #Enviroment H2 {
        display: inline;
        font-size: 110%;
        width: auto;
    }
    #Enviroment .cost {
        color: #cccccc;
        display: inline;
        font-size: 120%;
        font-weight: bold;
        margin-left: 0.4em;
        position: relative;
    }
        #Enviroment .cost SPAN {
            color: #699421;
            left: 0;
            overflow: hidden;
            position: absolute;
	        text-shadow: 0px 0px 3px #ffffff;
        }
    #Enviroment .bg {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 29;
        width: 15%;
    }


/* BigBadWolf */
#BigBadWolf P {
	background-image: url('../img/clear_white50.png');
}


#Design H1 {
	color: #35527C;
}


/* Images */
#Images {
	position: fixed;
	right: 1.5%;
	height: 100%;
	width: 15%;
	z-index: 999;
	background-image: url('../img/clear_white50.png');
}
    #Images .scroller > IMG {
        margin-bottom: 20px;
        width: 100%;
        cursor: pointer;
    }


#viewport > DIV > DIV P {
	line-height: 1.4em;
	padding-left: 10px;
}

/* Backgrounds */
/* http://css-tricks.com/perfect-full-page-background-image/ */
#Materials {
    background: url('../img/bg/materials.jpg') no-repeat center bottom fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg/materials.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg/materials.jpg', sizingMethod='scale')";
}

#Enviroment {
    background: url('../img/bg/environment.jpg') no-repeat center bottom fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg/environment.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg/environment.jpg', sizingMethod='scale')";
}

#Design {
	background-color: white;
    background: url('../img/bg/design.jpg') no-repeat top right;
    background-size: 35%;
}

#BigBadWolf {
    background: url('../img/bg/bigbad.jpg') no-repeat center bottom fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg/bigbad.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg/bigbad.jpg', sizingMethod='scale')";
}


#menuhotspot {
    width: 100%;
    height: 8%;
    position: fixed;
    top: 0; /* IE8 fix for displaying only "Navigation" on mouseout; height adjusted up +8% to offset for other browsers. */
    /*z-index: 990;*/
}
    #menuhotspot:hover {
        cursor: pointer;
        /*top: 0 !important;*/ /* Stoopid IE8 */
    }
    #menuhotspot > DIV {
        margin-top: 1%;
    }

#menu.shrink {
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    margin-top: -30px;
}
#menu {
    background-image: url('../img/clear_white50.png');
    border-radius: 20px;
    display: inline-block;
    top: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
    #menu UL {
        margin: 0;
        padding: 0;
    }
    #menu UL LI {
        background-color: white;
        border: 4px solid black;
        border-radius: 20px;
        cursor: pointer;
        float: left;
        height: 20px;
        list-style: none;
        margin: 0 0 0 40px;
        padding: 0;
        position: relative;
        width: 20px;
        z-index: 995;
        /* Hide text within the LIs */
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
        #menu LI:first-child { /* #menu LI:first-of-type not supported by IE8 */
            margin-left: 0;
        }
        #menu LI.Enviroment:hover,
        #menu LI.Materials:hover {
            background-color: #699421;
        }
        #menu LI.Blog:hover,
        #menu LI.Design:hover {
            background-color: #35527C;
        }
        #menu LI.Contact:hover,
        #menu LI.Budget:hover {
            background-color: #831D51;
        }
        #menu LI.BigBadWolf:hover {
            background-color: #DDDDDD;
        }
    #menu .bar {
        position: absolute;
        top: 12px;
        border-top: 4px solid black;
        height: 0;
        width: 100%;
        z-index: 991;
    }
    #menu .label {
        clear: both;
        display: block;
        margin: 0 auto;
        padding-top: 10px;
        width: 100%;
        text-align: center;
    }
        #menu .label.nav {
            color: #666666;
            font-style: italic;
        }