/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}
#tabbed-ui { width:900px; height:400px; margin:20px 10px; padding:0; background: #fff url(../portfolio/images/panel-bg.png) top left no-repeat; }

/* Skin */
.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
	width:193px;
	height:400px;
	float:left;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.tabs-nav li {
    margin:0;
	height:75px;
	width:193px;
}
.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0px;
	margin-top:20px;
	height:75px;
	width:193px;
}
#website-button span, #logo-button span, #graphic-button span { display: none; }

#website-button {background: url(../images/panel-buttons.png) no-repeat 0 0; }
#website-button:hover { background-position: 0 -76px;}
#logo-button { background: url(../images/panel-buttons.png) no-repeat 0 -152px; }
#logo-button:hover { background-position: 0 -228px;}
#graphic-button { background: url(../images/panel-buttons.png) no-repeat 0 -304px; }
#graphic-button:hover { background-position: 0 -380px;}

.tabs-nav a {
	display:block;
    padding:0;
    color: #000;
    font-size: 8px;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
}
.tabs-nav .tabs-selected a {
    color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { back}

#fragment-10, #fragment-11, #fragment-12 { width:665px; height:370px; padding:10px 20px; overflow-x: hidden; overflow-y: scroll; -ms-overflow-y: scroll; position:relative; top:4px; }