MediaWiki:Monobook.css

/*------------------------------ modern.css ------------------------------
 	
	Modern CSS thweet browsers 
 	These rules take over simple.css to create the hawtness that is this site.
 	komodomedia.com 

/*----------------------- GLOBAL STYLES ---------------------------------*/
html, body{
	width: 100%;
	height:100%;
	margin:0px;
	padding:0px;
}

html{
	background: #3F3534;
}

body{
	text-align: center;
	color:#3F3534;
	font:70%/145% Verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
	background:url(images/header_deco.jpg);
	background-position:center 10px;
	background-repeat:no-repeat;
	margin:0px auto 0px auto;
}

hr{
	height:6px;
	background:#cccccc;
	border:none;
	border-bottom:2px solid #efefef;
	width:100%;
}
html>body hr{
	height:4px;
}

a{
	color:#0099cc;
	text-decoration: none;
}
img{
	margin:5px;
}
img.wp-smiley{
	margin:0px;
} 
a img{
	padding: 3px;
	border: 1px solid white;
}
a:hover{
	text-decoration:none;
	border-bottom:1px dotted;
}
a:hover img{
	background-color:#efefef;
	border: 1px solid #cccccc;
}

ul{
	list-style:url(images/list_icon.gif);
}

hr{
	height:5px;
	background: #cccccc;
	border:none;
	border-bottom:2px solid #efefef;
}
html>body hr{
	height:4px;
}
h1, h2, h3, h4, h5{
	font-family:'Trebuchet MS';
}
h1 a, h2 a, h3 a, h4 a, h5 a{
	color:#333333;
}

h1{
	font-size:1.65em;
}
h2{
	font-size:1.4em;
}
h3{
	font-size:1.3em;
}
h4{
	font-size:1.2em;
}
h5{
	font-size:1.0em;
}
blockquote{
	background:#efefef url(images/blockquote.gif) left -10px no-repeat;
	margin:15px 0px 15px 0px;
	padding:0px;
	width:460px;
}
blockquote p{
	background:url(images/rounded_box_bottom.gif) left bottom no-repeat;
	padding:45px 15px 15px 55px;
}

/*----------------------- BLOG & COMMENT STYLES --------------------------*/
.blog-comment-list{
	list-style:none;
	margin:0px;
	padding:0px;
	width:460px;
}
.blog-comment-list li{
	margin:0px 0px 10px 0px;
	padding:0px;
	width:470px;
	position:relative;
	left:-5px;
	background:url(images/blog_comment_corners.gif) left -10px no-repeat;
}
.blog-comment-list li.alt{
	background-color:#efefef;
}
.blog-comment-list li.even-list-row{
	background-image:none;
}
.blog-comment-list li.administrator{
	color:#b4b4b4;
	background:#484848 url(images/blog_comment_corners.gif) left -10px no-repeat;
}	

.blog-comment-meta{
	font-size:x-small;
	background:url(images/blog_comment.gif) 432px 10px no-repeat;
	padding:15px 15px 0px 15px;
	color:#888888;
	line-height:130%;
}
.blog-comment-list li.administrator .blog-comment-meta{
	background:url(images/blog_comment_dark.gif) 432px 10px no-repeat;
}
.blog-comment-meta a, .blog-comment-meta a:hover{
	border:none;
}
.blog-comment-list li.administrator .blog-comment-meta a{
	color:#ff9e00;
}		
.blog-comment{
	background:url(images/rounded_box_bottom.gif) left bottom no-repeat;
	padding:0px 15px 15px 15px;
}
.gravatar{
	float:left;
	margin:0px 5px 0px 0px;
}
.blog-article-meta{
	width:460px;
	padding-top:10px;
}
.blog-article-meta h1{
	float:left;
	display:block;
	width:400px; 
	margin:0px;
}
.blog-article-meta p{
	text-transform:lowercase;
	font-size:x-small;	
	float:left;
	display:block;
	width:400px; 
	padding:0px;
	margin-top:0px;
}
.blog-article-meta hr{
	clear:both;
}
.blog-article-meta a, .blog-article-meta a:hover{
	color:#ff9900;
	border:none;
}	
.blog-article-meta h1 a{
	color:#666666;
}
.blog-article-meta .date-written{
	width:35px;
	height:35px;
	margin:10px 0px 0px 5px;
	display:block;
	float:right;
	text-transform:uppercase;
	text-align:center;
	background:url(images/blog_date.gif) top left no-repeat;
	line-height:1.3em;
	padding-top:12px;
	font-size:9px;
}
.blog-article-meta .date-written em{
	font-style:normal;
	font-size:14px;
}
.blog-article-meta p{
	padding-top:0.5em;
	
}	
.blog .filed-under{
	background:url(images/folder.gif) left center no-repeat;
	padding:4px 0px 4px 25px;
}	
.written-by{
	background:url(images/pencil.gif) left center no-repeat;
	padding:4px 0px 4px 25px;
}
#comment-number, .comment{
	padding:4px 0px 4px 25px;
	background:url(images/comment_ticket.gif) left 5px no-repeat;
	
}
.blog-comment-list li.administrator .written-by{
	background:url(images/pencil_dark.gif) left center no-repeat;
}	

.code li{
	padding-top: 5px;
	padding-bottom: 5px;
}
.code{
	border: 1px solid #DDD;
	color: #333333;
	font: 10px 'Lucida Sans Typewriter', 'Lucida Typewriter', 'Lucida Console', Monaco; 
	color: #222; 
	text-align: left;
	line-height: 1.3em;
	padding: 10px 10px 10px 45px;
	margin: 1.5em 0px;
	background:#ffffff;
	display:block;
}
code.inline{
	white-space:normal;
	display:inline;
	border:none;
	padding:0px;
	margin:0px;
}
code{
	border: 1px solid #DDD;
	color: #333333;
	font : 90% monaco, courier, monospace; 
	font-weight : normal;
	color: #222; 
	text-align: left;
	line-height: 100%;
	padding:5px 10px 5px 10px;
	margin: 1.5em 0px;
	background:#ffffff;
	display:block;
	white-space:pre;
	overflow:auto;
	overflow:scroll;
	width:440px;
}	
html>body code{
	overflow:auto;
}	
	
/*----------------------- SITE IMAGE REPLACEMENT ICONS -------------------*/
a.rss-link{
	background:url(images/rss_btn.gif) left top no-repeat;
	width:24px;
	height:24px;
	line-height:10px;
	text-indent:-9000px;
	display:block;
	overflow:hidden;
	border: none;
	padding:0px;
	float:right;
	margin:2px 0px 0px 2px;
}
a.rss-link:hover{
	border:none;
}
#version{
	background:url(images/version_tag.gif) center -15px no-repeat;
	width:100%;
	height:15px;
	overflow:hidden;
	display:block;
	text-indent:-9000px;
}

/*----------------------- SITE CONTENT STYLES ----------------------------*/
#content-wrapper{
	width: 500px;
	background: url(images/site_column_footer.gif) left bottom no-repeat;
	float:left;
	clear:left;
	padding:0px;
	margin:0px 0px 20px 0px;
	position:relative;
}
.wide #content-wrapper{
	width:700px;
	background: url(images/site_column_footer_wide.gif) left bottom no-repeat;
}
html>body #content-wrapper{
	background: url(images/site_column_footer.png) left bottom no-repeat;
}
html>body.wide #content-wrapper{
	background: url(images/site_column_footer_wide.png) left bottom no-repeat;
}
#content{
	padding:0px 20px 0px 20px;
	margin: 0px 0px 15px 0px;
	width:460px;
	text-align: left;
	float:left;
	background: url(images/site_column_bg.gif) left top repeat-y;
	overflow:hidden;
}
.wide #content{
	width:660px;
	background: url(images/site_column_bg_wide.gif) left top repeat-y;
}
#content img{
	max-width:450px;
}
.wide #content img{
	max-width:650px;
}
html>body #content{
	background: url(images/site_column_bg.png) left top repeat-y;
}
html>body.wide #content{
	background: url(images/site_column_bg_wide.png) left top repeat-y;
}

#site-wrapper{
	width:100%;
	background: url(images/footer_deco.gif) center bottom no-repeat;
	z-index:1000;

}	
#site{
	margin: 0px auto 0px auto;
	padding:0px;
	width:710px;
	position:relative;
	height:100%;
}
#nav{
	right:0px;
	width: 200px;
	position: absolute;
	top: 150px;
	text-align: left;
}
#sub-content{
	float:left;
	clear: left;
	text-align: left;
}
#masthead{
	width: 100%;
	height: 150px;
	margin: 0px;
}
html>body #masthead{
}
#logo-container{
	width: 100%;
	height: 140px;	
}
html>body #logo-container{
	
}

#home-logo{
	width:250px;
	height:140px;
	display:block;
	margin:0px auto 0px auto;
	padding:0px;
	border:none;
	text-indent:-9000px;
	overflow:hidden;
	cursor:pointer;cursor:hand;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/style/images/logo.png',sizingMethod='crop');	
}
html>body #home-logo{
	background:url(images/logo.png) left bottom no-repeat;
	filter:none;
}
.alt{
	background-color: #e8e8e8;
}
#footer-deco{
	height:180px;
	position:absolute;
	background:url(images/footer_deco.gif) left bottom no-repeat;	
	width:650px;
	bottom:10px;
	left:-65px;
}
#header-deco{
	width:100%;
	height:250px;
	position:absolute;
	top:0px;
	left:0px;
	overflow:hidden;
}
.new-section{
	height:40px;
	width:500px;
	background:#333333 url(images/section_seperator.gif) left top no-repeat;
	position:relative;
	left:-20px;
}
/*----------------------- PRIMARY NAV STYLES ----------------------------*/

/* ---------------------- TAB AND BACKGROUND IMAGE SETUP --------------------------*/
.tabbed-nav{
	list-style:none;
	background: url(images/nav_bg.gif) left top no-repeat;
	width:500px;	
	position:relative;
}
.wide .tabbed-nav{
	width:700px;
	background: url(images/nav_bg_wide.gif) left top no-repeat;
}
html>body .tabbed-nav{
	background: url(images/nav_bg.png) left top no-repeat;
}
html>body.wide .tabbed-nav{
	background: url(images/nav_bg_wide.png) left top no-repeat;
}
.tabbed-nav, .tabbed-nav li, .tabbed-nav li a, .tabbed-nav li a span{
	float: left;
	padding:0px;
	margin:0px;	
	display:block;
}
.tabbed-nav li{
	width:70px;
	height:40px;
	overflow:hidden;
	background: url(images/nav_tab_default.gif) left top no-repeat;	
}
html>body .tabbed-nav li{
	overflow:visible;
}
.tabbed-nav li a, .tabbed-nav li a span{
	text-decoration:none;
	width:90px;
	height:40px;
	text-indent:-9000px;
	overflow:hidden;
	cursor:pointer;cursor:hand;
	border:none;
}

	
.tabbed-nav li.home{
	width:75px;
	height:40px;
	background: url(images/nav_tab_first_default.gif) left top no-repeat;	
}
.tabbed-nav li.contact{
	width:95px;
	height:40px;
	background: url(images/nav_tab_last_default.gif) left top no-repeat;	
}
.tabbed-nav li.focused a{
	background: url(images/nav_tab_over.gif) left top no-repeat; 
}
.tabbed-nav li.focused.home a{
	background: url(images/nav_tab_first_over.gif) left top no-repeat;	
}
.tabbed-nav li.focused.contact a{
	background: url(images/nav_tab_last_over.gif) left top no-repeat;	
}				


/* ------------------- tab text replacement -------------------------*/
.tabbed-nav li.home a span{
	background: url(images/tab_home.gif) left bottom no-repeat;	
}
.tabbed-nav li.blog a span{
	background: url(images/tab_blog.gif) left bottom no-repeat;	
}
.tabbed-nav li.folio a span{
	background: url(images/tab_folio.gif) left bottom no-repeat;	
}
.tabbed-nav li.art a span{
	background: url(images/tab_art.gif) left bottom no-repeat;	
}
.tabbed-nav li.about a span{
	background: url(images/tab_about.gif) left bottom no-repeat;	
}
.tabbed-nav li.contact a span{
	background: url(images/tab_contact.gif) left bottom no-repeat;	
}	


/* ------------------------- tab & tab text hover events --------------------*/
.tabbed-nav li.focused a{
	background-position:left top;
	position:relative;
	text-decoration:none;
	border:none;
}		
.tabbed-nav li a:hover span, .tabbed-nav li.focused a span{
	font-weight:normal;
	background-position: left top;
}		

/* ------------------------- radio player ------------------------*/
.tabbed-nav li.radio{
	position:absolute;
	right:8px;
	top:8px;
	background:none;
	pading:0;
	margin:0;
	width:28px;
	height:23px;
}

.tabbed-nav li.radio a#km-radio{
	padding:0;
	margin:0;
	background:url(/style/images/music_dual.gif) 3px 1px no-repeat;
	position:relative;
	width:28px;
	height:23px;
}
.tabbed-nav li.radio a#km-radio:hover{
	background-position: 3px -19px;
}
.tabbed-nav li.radio a#km-radio:focus,
.tabbed-nav li.radio a#km-radio:active{
	background:url(/style/images/ajax_load_small.gif) center 1px no-repeat;
}
			
/*---------------------- SECONDARY NAV BOXES STYLES ---------------------*/

#search fieldset, #search-form{
	border: none;
	padding:0px;
	margin:0px;
	background:transparent;
}

#search #search-submit{
	float:left;
}
#search #search-input{
	margin: 2px;
	padding:4px 10px 0px 10px;
	height:16px;
	width:115px;
	border: none;
	background:transparent url(images/search_box_bg.gif) fixed left top no-repeat ;
	display:block;
	overflow:hidden;
	float:left;
	font:inherit;
	font-size:11px;
}
html>body #search #search-input{
	background:transparent url(images/search_box_bg.gif) left top no-repeat;
	margin-left:5px;
}
#search p{
	margin:0px;
	padding:2px;
	line-height:1.2em;
	text-transform:lowercase;
	clear:both;
}

.navbox{
	margin:0px 0px 10px 0px;
	padding:15px 0px 0px 0px;
	width:200px;
	position:relative;
	background:transparent url(images/nav_box_top.gif) left top no-repeat;
}
html>body .navbox{
	background:transparent url(images/nav_box_top.png) left top no-repeat;
}

.navbox .navbox-content{
	padding:0px 15px 0px 15px;
	background:transparent url(images/nav_box_bg.gif) left top repeat-y;
}
html>body .navbox .navbox-content{
	background:transparent url(images/nav_box_bg.png) left top repeat-y;
}
.navbox h1{
	display:none;
}
.navbox h2{
	margin:0;
	line-height:2.0em;
}
#nav ul, #nav ul li{
	list-style:none;
	list-style-image:none;
	margin:0px;
	padding:0px;
}
.navbox img{
	vertical-align:middle;
	border:none;
	margin:5px;
	padding:0px;
	width:40px;
	height:40px;
}
.navbox .navbox-footer{
	height:15px;
	width:200px;
	background:url(images/nav_box_footer.gif) left top no-repeat;
}
html>body .navbox .navbox-footer{
	background:url(images/nav_box_footer.png) left top no-repeat;
}
.navbox .alt{
	background:#e8e8e8 url(images/nav_list_alt_bottom.gif) left bottom no-repeat;
}
.navbox .alt a{
	background:url(images/nav_list_alt_top.gif) left top no-repeat;
}
.navbox a{
	display: block;
	padding:2px 5px 2px 5px;
	border:none;
	margin:0px;
	width:auto;
	outline: none;
	text-decoration:none;
}

.navbox .navbox-content a:hover{
	border:none;
	outline: none;
	background:url(images/nav_list_alt_top_over.gif) left top no-repeat;
	padding-left:25px;
	overflow:hidden;
}
#spinning a:hover{
	padding:2px 5px 2px 5px;	
	background:url(images/nav_list_alt_top.gif) left top no-repeat;
}
.navbox a:hover img{
	border:none;
}
.navbox li{
	padding:0px;
	margin:0px;
	/* 	some sort of a hack to get IE to 
		correctly apply the height to the li elements */
	height:1em;	
}
html>body .navbox li{
	width:auto;
	height:auto;
}
.navbox ul.tabbed{
	height:200px;
	width:170px;
	overflow:auto;
	display:none;
}
.navbox ul.tabbed li{
	width:auto;
}

.navbox ul.focused{
	display:block;
}

/*.wide .nav-group{
	margin:0px 10px 0px 0px;
	float:left;
}*/

#entertainment{
	clear: right;
}

.navbox .footer-tabs{
	height:45px;
	width:200px;
	background:url(images/nav_box.gif) left bottom no-repeat;	
}
html>body .navbox .footer-tabs{
	background:url(images/nav_box.png) left bottom no-repeat;
}
.navbox-tabs{
	background:url(images/nav_box_footer_tabs.gif) left bottom no-repeat;
	position:relative;
	top:3px;
	width:200px;
	height:45px;
}
html>body .navbox-tabs{
	background:url(images/nav_box_footer_tabs.png) left bottom no-repeat;
}
.navbox-tabs li,.navbox-tabs li a,.navbox-tabs li a span{
	float:left;
	width:100px;
	height:45px;
	display:block;
	padding:0px;
	margin:0px;
	overflow:hidden;
}
.navbox-tabs li a{
	/*
	position:absolute;
	left:0px;
	width:105px;
	*/
	cursor:pointer;cursor:hand;
}
html>body .navbox-tabs  li a{
}
.navbox-tabs li a span{
	text-indent:-9000px;
	background-position:left bottom;
	background-repeat: no-repeat;
}
.navbox-tabs li a:hover span, .navbox-tabs li a.focused span{
	background-position:left top;
}

/*---------------- LEFT SIDE NAV BOX TABS ------------------------------*/
.navbox-tabs li#navbox-tab-about a span{
	background-image:url(images/nav_box_tab_about.gif);
}

.navbox-tabs li#navbox-tab-design a span{
	background-image:url(images/nav_box_tab_design.gif);
}

.navbox-tabs li#navbox-tab-categories a span{
	background-image:url(images/nav_box_tab_categories.gif);
}

.navbox-tabs li#navbox-tab-spinning a span{
	background-image:url(images/nav_box_tab_music.gif);
}

.navbox-tabs li.even a.focused{
	background:url(images/nav_box_footer_tabs.gif) left top no-repeat;
}
html>body .navbox-tabs li.even a.focused{
	background:url(images/nav_box_footer_tabs.png) left top no-repeat;
}

/*------------------------ RIGHT SIDE NAV BOX TABS ------------------------------*/
.navbox-tabs li#navbox-tab-portfolio a span{
	background-image:url(images/nav_box_tab_portfolio.gif);
}
.navbox-tabs li#navbox-tab-other-links a span{
	background-image:url(images/nav_box_tab_other.gif);
}
.navbox-tabs li#navbox-tab-archive a span{
	background-image:url(images/nav_box_tab_archive.gif);
}
.navbox-tabs li#navbox-tab-gaming a span{
	background-image:url(images/nav_box_tab_play.gif);
}
.navbox-tabs li.odd a{
	left:95px;	
}
.navbox-tabs li.odd a.focused{
	background:url(images/nav_box_footer_tabs.gif) right center no-repeat;
}
html>body .navbox-tabs li.odd a.focused{
	background:url(images/nav_box_footer_tabs.png) right center no-repeat;
}
/*--------------------- ROTATING CSS ( STYLES THAT AREN'T PERMANENT - CONTENT STYLES) -----------------------------*/

ul.of-interest{
	margin: 10px 0px 10px 0px;
	padding: 0px;
	position: relative;
	height: 155px;
	width: 460px;
	list-style-type:none;
}
ul.of-interest li{
	padding: 0px;
	margin: 0px;
	background: none;
	list-style: none;
	list-style-image: none;
	float:left;
}
ul.of-interest li a{
	display: block;
	float: left;
	text-indent:-9000px;
	text-decoration:none;
	height: 155px;
	background:none;
	background-image: url(/images/topic_bar.gif);
	background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;
	border:none;
	overflow:none;
}
ul.of-interest li a:hover{
	text-decoration:none;
}
ul.of-interest li a:active{
}

a#bragging-rights{
	background-position: left top;
	width: 150px;
}
a#tutorial-star-rater{
	background-position: center top;
	width: 160px;
}
a#interesting{
	background-position: right top;
	width: 150px;	
}
a#bragging-rights:hover{
	background-position: left bottom;
}
a#tutorial-star-rater:hover{
	background-position: center bottom;
}
a#interesting:hover{
	background-position: right bottom;
}
a#feedburner-link{
	float: right;
	padding: 0px;
	margin: 0px;
	background: none;
	position: relative;
	border:none;
}
/*------------------------------------ MUSIC PAGE STYLES ------------------------------------------*/

.album-image{
	text-align:center;
}

/*------------------------------------ SITE FORM STYLES ------------------------------------------*/

#content textarea{
	width:440px;
}

fieldset{
	border:none;
	margin:0px;
	padding:0px;
}
input, textarea{
	background: url(images/input_bg.gif) left top no-repeat;
	font-family: inherit;
	font-size: inherit;
	line-height:inherit;
	color: inherit;
	border-top: none;
	border-left: none;
	border-bottom: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;	
	padding: 5px;
	margin: 5px;
}
textarea{
	background-attachment:fixed;
}
html>body textarea{
	background-attachment:scroll;
}
input:focus, textarea:focus{
	color:#333333;
}

label{
	margin:0px 5px 0px 5px;
}
input.button{
	padding:0px;
	border:none;
	margin:5px;
	background:none;
	cursor:pointer;cursor:hand;
}
input#search-submit{
	margin:0px;
}
.loading{
	width:20px;
	height:25px;
	background:url(/style/images/ajax_load_small.gif) left top no-repeat;
}
/*-------------------------------------------- Link Love -------------------------------------------------*/

.link-love{
	
}
.link-love ul{
	list-style:none;
	margin:5px auto 5px auto;
	padding:0px 0px 0px 0px;
	clear:both;
	text-align:left;
}
.link-love h1, .link-love h2, .link-love h3{
	clear:both;
}
.link-love ul li{
	float:left;
	margin:0px;
	padding:0px;
}
.link-love ul li a img{
	width:75px;
	height:57px;
	margin:5px;	
	padding:0px;
	float:left;
	background:url(/style/images/ajax_load_small.gif) center center no-repeat;
}
.link-love a{
	float:left;
	width:85px;
	padding:0px;
	height:100px;
	display:block;
	margin-right:2px;
	text-align:center;
	border:1px solid #ffffff;
}
.link-love a:hover{
	background:#eeeeee;
	border:1px solid #ddd;
}
.link-love a:hover img{
	border:none;
}
.link-love a img{
	float:left;
	border:none;
}
.link-love-deco{
	background:url(images/link_love.gif) left center no-repeat;
	height:40px;
	padding:0px 0px 0px 45px;
}

/*-------------------------------- PSPS Safari hack ------------------------------------------------------*/
.psps{font:normal;#}
.tabbed-nav li.home a{
	background: url(images/nav_tab_first_over.gif) -9000px top no-repeat ;	
}
.tabbed-nav li.contact a{
	background: url(images/nav_tab_last_over.gif) -9000px top no-repeat ;	
}
.tabbed-nav li.focused a{
	background-position:left top;	
}
.section-links{
	float:right;
}