/*
	 Organic Tabs
	 by Chris Coyier
	 http://css-tricks.com
*/

/** { margin: 0; padding: 0; }*/
/*body { font: 12px Georgia, serif; }*/
/*html { overflow-y: scroll; }*/
/*a { text-decoration: none; }*/
/*a:focus { outline: 0; }*/
/*p { font-size: 15px; margin: 0 0 20px 0; }*/
#page-wrap { width: 440px; margin: 80px auto; }
h1 { font: bold 40px Sans-Serif; margin: 0 0 20px 0; }


#tabWrapper {
    width: 640px;
    height: 450px;
    margin: 20px auto;
    border: 1px solid red;
}

#tabContainer {
    width: 600px;
    height: 450px;
    margin: 20px auto;
    border: 1px solid blue;
}

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }


/* Specific to example one */
#example-one {
    background: #eee;
    padding: 10px;
    margin: 0 0 20px 0;
    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
}

#example-one .nav {
    overflow: hidden;
    margin: 0 0 10px 0;
}

#example-one .nav li {
    width: 97px;
    float: left;
    margin: 0 10px 0 0;
}

#example-one .nav li.last {
    margin-right: 0
}

#example-one .nav li a {
    display: block;
    padding: 5px;
    background: #959290;
    color: white;
    font-size: 10px;
    text-align: center;
    border: 0;
}

#example-one .nav li a:hover {
    background-color: #111
}

#example-one ul {
    list-style: none
}

#example-one ul li a {
    display: block;
    border-bottom: 1px solid #666;
    padding: 4px;
    color: #666;
}

#example-one ul li a:hover {
    background: #fe4902;
    color: white;
}

#example-one ul li:last-child a {
    border: none
}

#example-one ul li.nav-one a.current,
#example-one ul.featured li a:hover {
    background-color: #0575f4;
    color: white;
}

#example-one ul li.nav-two a.current,
#example-one ul.core li a:hover {
    background-color: #d30000;
    color: white;
}

#example-one ul li.nav-three a.current,
#example-one ul.jquerytuts li a:hover {
    background-color: #8d01b0;
    color: white;
}

#example-one ul li.nav-four a.current,
#example-one ul.classics li a:hover {
    background-color: #FE4902;
    color: white;
}

/* Specific to example two */

#example-two .list-wrap {
    background: #eee;
    padding: 10px;
    margin: 0 0 15px 0;
}

#example-two ul {
    list-style: none
}

#example-two ul li a {
    display: block;
    border-bottom: 1px solid #666;
    padding: 4px;
    color: #666;
}

#example-two ul li a:hover {
    background: #333;
    color: white;
}

#example-two ul li:last-child a {
    border: none
}

#example-two .nav {
    overflow: hidden
}

#example-two .nav li {
    width: 97px;
    float: left;
    margin: 0 10px 0 0;
}

#example-two .nav li.last {
    margin-right: 0
}

#example-two .nav li a {
    display: block;
    padding: 5px;
    background: #666;
    color: white;
    font-size: 10px;
    text-align: center;
    border: 0;
}

#example-two li a.current,
#example-two li a.current:hover {
    background-color: #eee !important;
    color: black;
}

#example-two .nav li a:hover,
#example-two .nav li a:focus {
    background: #999
}