themes/oxygen/css/mint.css
author Dan Fuhry <dan@enanocms.org>
Thu, 28 Oct 2010 03:05:31 -0400
changeset 1308 f9bee9b125ee
parent 1227 bdac73ed481e
permissions -rw-r--r--
Parser updates. Added the "styled" keyword to wikitables to allow them to be styled using the current theme's standard table skinning, and changes to how the image tag parser decides how to display an image (framed, inline or raw).

/**
 * The original Oxygen theme for Enano
 * Designed by Dan Fuhry, (C) 2006
 * This theme is Free Software; see the file "GPL" included with this package for details.
 */

/* The basics */
html,body {
	height: 100%;
}

body {
	/* color added in 1.0.2 to fix light text in dark desktop themes */ 
	color: #202020;
	margin: 0;
	padding: 0;
	background: url(../images/mint/bg.png);
	font-family: trebuchet ms, verdana, arial, helvetica, sans-serif;
	font-size: 9pt;
}

body#tinymce {
	background-color: white;
	background-image: none;
}

.holder {
	border: 1px solid #CCCCCC;
	padding: 1px;
	background-color: #FFFFFF;
	color: #444444
}

div.pad {
	padding: 10px;
}

table#title {
	margin: 0;
	padding: 0;
	height: 100px;
	background-color: #90D0B0;
	text-align: center;
}

table.simple-layout td#mainhead {
	margin: 0;
	padding: 0;
	background-color: #90D0B0;
	text-align: center;
}

table.simple-layout td#mainhead h1 {
	margin: 15px 0;
	padding: 0;
	font-size: 14pt;
}

/* Sidebar */
td.mdgSidebarHolder {
	width: 140px;
}

div.sidebar, .dbx-group {
	width: 138px;
	background-color: #F8F8F8; border-left: 1px solid #CCC; border-right: 1px solid #CCC; padding: 1px 0px 0px 0px;
}

div.sidebar .head, .dbx-handle {
	background-color: #F0F0F0;
	display: block;
	margin: 0px 1px 1px 1px;
	font-family: Trebuchet MS, Arial, helvetica, sans-serif;
	font-size: 7pt;
	cursor: pointer;
	text-decoration: none;
	color: #111;
	padding: 5px;
	font-weight: bold;
}

div.sidebar .head:hover, .dbx-handle:hover {
	background-color: #F4F4F4;
	display: block;
	margin: 0px 1px 1px 1px;
	font-family: Trebuchet MS, Arial, helvetica, sans-serif;
	font-size: 7pt;
	cursor: pointer;
	text-decoration: none;
	color: #111;
	padding: 5px;
	font-weight: bold;
}

div.sidebar div.slideblock a, .dbx-content li {
	background-color: #DDD;
	display: block;
	margin: 0px 1px;
	border-bottom: 1px solid #FFF;
	font-family: Trebuchet MS, Arial, helvetica, sans-serif;
	font-size: 7pt;
	cursor: pointer;
	text-decoration: none;
	color: #666;
	padding: 5px 5px 5px 9px;
	list-style-type: none;
}

div.sidebar div.slideblock a:hover, .dbx-content li:hover {
	background-color: #EEE;
	display: block;
	margin: 0px 1px;
	border-bottom: 1px solid #FFF;
	font-family: Trebuchet MS, Arial, helvetica, sans-serif;
	font-size: 7pt;
	cursor: pointer;
	text-decoration: none;
	color: #666;
	padding: 5px 5px 5px 9px;
}

div.recttop {
	width: 140px;
	height: 12px;
	margin: 0;
	padding: 0;
}

td.recttoptop {
	width: 100%;
	height: 12px;
	background-image: url(../images/mint/sprite-horiz.gif);
	background-repeat: repeat-x;
	background-position: 0 -12px;
	margin: 0;
	padding: 0;
}

td.recttoptop:hover {
	width: 100%;
	height: 12px;
	background-image: url(../images/mint/sprite-horiz.gif);
	background-repeat: repeat-x;
	background-position: 0 -24px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

div.rectbot {
	width: 140px;
	height: 12px;
	margin: 0;
	padding: 0;
}

td.rectbottop {
	width: 100%;
	height: 12px;
	background-image: url(../images/mint/sprite-horiz.gif);
	background-repeat: repeat-x;
	background-position: 0 -48px;
	margin: 0;
	padding: 0;
}

div.slideblock, .dbx-content {
	overflow: hidden;
	background-color: #DDD;
}

div.slideblock2 {
	overflow: hidden;
	background-color: #DDD;
	margin: 0px 1px 0px 1px;
	border-bottom: 1px solid #FFF;
}

.dbx-handle {
	cursor: move !important;
}

/* The credits thingy at the bottom */
div#credits { margin: 0; padding: 10px; padding-bottom: 0px; padding-top: 12px; background-color: #E8E8E8; color: #AAA; font-size: 7pt; font-family: lucida grande, verdana, arial, sans-serif; }
div#credits a { color: #90D0B0; text-decoration: none; }
div#credits a:hover { color: #80C0A0; text-decoration: underline; }

/* The link hidden in plain "site" at the top of the page */
td#mainhead a { text-decoration: none; color: #000000; }
td#mainhead a:hover { text-decoration: none; color: #000000; border-bottom: 1px dotted #408060; }

/* Text, headings, and links inside the main div (usually #ajaxEditContainer but used some other places as well) */
div.contentDiv h1 {
	margin-top: 0.3em;
}

div.contentDiv h1, div.contentDiv h2 {
	border-bottom: 1px solid #90D0B0;
	margin-bottom: 0;
}

div.contentDiv h3 {
	font-size: 11pt;
	font-weight: bold;
}

div.contentDiv ul li, div#messageBox ul li {
	list-style: url(../images/mint/bullet.gif);
}

div.contentDiv p, div#messageBox p {
	margin-left: 1.0em;
}

table.simple-layout div.contentDiv p {
	margin-left: 0em;
}

div.contentDiv blockquote, div#messageBox blockquote {
	background-color: #F4F4F4;
	border: 1px dotted #408060;
	margin: 1em;
	padding: 10px;
	max-height: 250px;
	overflow: auto;
}

div.contentDiv, div#messageBox {
	font-size: 9pt;
}

a {
	color: #70B090;
}

a:hover {
	color: #90D0B0;
}

div.contentDiv a[href ^="http://"], div#messageBox a[href ^="http://"] {
	color: #80C0A0;
	background: url(../images/mint/external.gif) center right no-repeat;
	padding-right: 16px;
}

div.contentDiv a[href ^="https://"], div#messageBox a[href ^="https://"] {
	color: #80C0A0;
	background: url(../images/mint/https.gif)    center right no-repeat;
	padding-right: 16px;
}

div.contentDiv a[href ^="mailto:"], div#messageBox a[href ^="mailto:"] {
	color: #80C0A0;
	background: url(../images/mint/email.gif)    center right no-repeat;
	padding-right: 16px;
}

div.contentDiv a[href ^="irc://"], div#messageBox a[href ^="irc://"] {
	color: #80C0A0;
	background: url(../images/mint/irc.gif)      center right no-repeat;
	padding-right: 16px;
}

div.contentDiv a[href ^="http://"]:hover, div#messageBox a[href ^="http://"]:hover {
	color: #A0E0C0;
	background: url(../images/mint/external.gif) center right no-repeat;
	padding-right: 16px;
}

div.contentDiv a[href ^="https://"]:hover, div#messageBox a[href ^="https://"]:hover {
	color: #A0E0C0;
	background: url(../images/mint/https.gif)    center right no-repeat;
	padding-right: 16px;
}

div.contentDiv a[href ^="mailto:"]:hover, div#messageBox a[href ^="mailto:"]:hover {
	color: #A0E0C0;
	background: url(../images/mint/email.gif)    center right no-repeat;
	padding-right: 16px;
}

div.contentDiv a[href ^="irc://"]:hover, div#messageBox a[href ^="irc://"]:hover {
	color: #A0E0C0;
	background: url(../images/mint/irc.gif)      center right no-repeat;
	padding-right: 16px;
}

/* Wikilinks to pages that don't exist */
div.contentDiv a.wikilink-nonexistent {
	color: #B02050;
}

div.contentDiv a.wikilink-nonexistent:hover {
	color: #D03060;
}

/* Well, not Midget and not comments (usually), but that's what the class is called ;-). Basically an informational window or used as a wrapper for tables. */
.mdg-comment, .mdg-infobox {
	margin-left: 1em;
	padding: 7px;
	border: 1px solid #AAAAAA;
	background-color: #E8E8E8;
}

.tblholder {
	margin: 10px 0 0 0;
	padding: 0;
	border: 1px solid #AAAAAA;
	background-color: #E8E8E8;
}

/* The beautiful tables inside what may not obviously be mdg-comment divs */
div.tblholder td.row1 {
	padding: 4px;
	background-color: #E0E0E0;
}

div.tblholder td.row2 {
	padding: 4px;
	background-color: #F0F0F0;
}

div.tblholder td.row3 {
	padding: 4px;
	background-color: #E8E8E8;
}

div.tblholder th {
	padding: 4px;
	background-color: #70A080;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
}

div.tblholder th.subhead {
	padding: 4px;
	background-color: #90B0A0;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
}

div.tblholder table {
	background-color: #FFFFFF;
	width: 100%;
}

/* Colored table cells */
div.tblholder td.row1_red {
	padding: 4px;
	background-color: #F8E0E0;
}

div.tblholder td.row2_red {
	padding: 4px;
	background-color: #FFF0F0;
}

div.tblholder td.row3_red {
	padding: 4px;
	background-color: #FFE8E8;
}

div.tblholder td.row1_green {
	padding: 4px;
	background-color: #E0E0F8;
}

div.tblholder td.row2_green {
	padding: 4px;
	background-color: #F0F0FF;
}

div.tblholder td.row3_green {
	padding: 4px;
	background-color: #E8E8FF;
}

div.tblholder th a {
	color: #FFFFFF !important;
	text-decoration: underline !important;
}

div.tblholder th a:hover {
	color: #FFFF00 !important;
	text-decoration: underline !important;
}

/*
 * jBox menu system
 */

div.menu, div.menu_nojs {
	background-color: #B0F0D0;
	font-size: 7pt;
	border-width: 0;
}
.menu_bg {
	background-color: #B0F0D0;
}
div.menu a, div.menu div.label {
	padding: 2.5pt 5px;
	margin-right: 3px;
	text-decoration: none;
	display: block;
	float: left;
	color: #408060;
}
div.menu_nojs a, div.menu_nojs div.label {
	padding: 2.5pt 5px;
	margin-right: 3px;
	text-decoration: none;
	display: block;
	float: left;
	color: #408060;
}
div.menu div.label, div.menu_nojs div.label {
	color: #002010;
	cursor: default;
}
div.menu span.sep, div.menu_nojs span.sep {
	display: block;
	float: left;
	width: 5px;
}
div.menu div.multopts, div.menu_nojs div.multopts {
	line-height: 17pt;
}
div.menu div.multopts a, div.menu div.multopts div.label, div.menu_nojs div.multopts a, div.menu_nojs div.multopts div.label {
	float: none;
	display: inline;
}
div.menu a.liteselected, div.menu a.liteselected:hover, div.menu a:hover, div.menu_nojs a.liteselected, div.menu_nojs a.liteselected:hover, div.menu_nojs a:hover {
	color: #408060;
	background-color: #D0FFF0;
}
div.menu input[type ^="text"], div.menu input[type ^="password"], div.menu_nojs input[type ^="text"], div.menu_nojs input[type ^="password"] {
	border-width: 0;
	font-size: 9pt;
	padding: 2px 5px 3px 5px;
	max-width: 70px;
	background-color: #D0FFF0;
}
div.menu input[type ^="text"]:hover, div.menu input[type ^="password"]:hover, div.menu_nojs input[type ^="text"]:hover, div.menu_nojs input[type ^="password"]:hover {
	background-color: #E0FFF0;
}
div.menu input[type ^="text"]:focus, div.menu input[type ^="password"]:focus, div.menu_nojs input[type ^="text"]:focus, div.menu_nojs input[type ^="password"]:focus {
	background-color: #F0FFF0;
}
div.menu input[type ^="button"], div.menu input[type ^="submit"], div.menu_nojs input[type ^="button"], div.menu_nojs input[type ^="submit"] {
	border-width: 0;
	font-size: 9pt;
	padding: 3px 5px;
	max-width: 70px;
}
div.menu a.current, div.menu a.current:hover, div.menu a.selected, div.menu a.selected:hover, div.menu_nojs a.current, div.menu_nojs a.current:hover, div.menu_nojs a.selected, div.menu_nojs a.selected:hover {
	color: #004000;
	background-color: #FFFFFF;
}
div.menu ul, div.menu_nojs ul {
	display: none;
	position: absolute;
	padding: 0;
	margin: 0 !important;
	background-color: #B0F0D0;
	border-width: 0;
	min-width: 120px;
}
div.menu ul li, div.menu_nojs ul li {
	list-style: none;
}
div.menu ul a, div.menu_nojs ul a {
	float: none;
	margin: 0;
}
span.menuclear {
	font-size: 1px;
	height: 0px;
	width: 0px;
	clear: left;
	line-height: 0px;
	display: block;
}

/* Rounded corners on nearly everything */
td#mdg-tl                         { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: -48px 0;                                                                     }
td#mdg-tr                         { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: -60px 0;                                                                     }
td#mdg-top                        {                            background-image: url(../images/mint/sprite-horiz.gif); background-position: 0 -36px;                                                                     }
td#mdg-l                          { width: 12px; height: 12px; background-image: url(../images/mint/sprite-vert.gif);  background-position: -24px 0;                                                                     }
td#mdg-r                          { width: 12px; height: 12px; background-image: url(../images/mint/sprite-vert.gif);  background-position: -36px 0;                                                                     }
td#mdg-bl                         { width: 12px; height: 12px; background-image: url(../images/mint/sprite-vert.gif);  background-position: -72px 0;                                                                     }
td#mdg-br                         { width: 12px; height: 12px; background-image: url(../images/mint/sprite-vert.gif);  background-position: -84px 0;                                                                     }
td#mdg-ml                         { width: 12px; height: 12px; background-image: url(../images/mint/sprite-vert.gif);  background-position: -48px 0;                                                                     }
td#mdg-brl                        { width: 12px; height: 1px;  background-image: url(../images/mint/sprite-vert.gif);  background-position: -48px 0;                                                                     }
td#mdg-mr                         { width: 12px; height: 12px; background-image: url(../images/mint/sprite-vert.gif);  background-position: -60px 0;                                                                     }
td#mdg-brr                        { width: 12px; height: 1px;  background-image: url(../images/mint/sprite-vert.gif);  background-position: -60px 0;                                                                     }
td#mdg-btl                        { width: 12px; height: 1px;  background-image: url(../images/mint/sprite-vert.gif);  background-position: 0 0    ;                                                                     }
td#mdg-btr                        { width: 12px; height: 1px;  background-image: url(../images/mint/sprite-vert.gif);  background-position: -12px 0;                                                                     }
td#mdg-btcl                       { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: -24px 0;                                                                     }
td.mdg-menu-bl                    { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: -24px 0;                                                                     }
td#mdg-btcr                       { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: -36px 0;                                                                     }
td.mdg-menu-br                    { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: -36px 0;                                                                     }
td.mdg-menu-top                   { width: 84%;  height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: 0 0    ; margin: 0; padding: 0; background-repeat: repeat-x; font-size: 2px; }
td.mdg-menu-tl                    { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: 0 0    ; background-position: left  top; background-repeat: no-repeat;       }
td.mdg-menu-tr                    { width: 12px; height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: 0 0    ; background-position: right top; background-repeat: no-repeat;       }
td.mdg-menu-btm                   {              height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: 0 0    ;                                                                     }
td#mdg-btm                        {              height: 12px; background-image: url(../images/mint/sprite-horiz.gif); background-position: 0 -48px;                                                                     }

/* Buttons and textboxes - these settings are used almost everywhere */
input, textarea, select, button {
	border: 1px solid #408060;
	background-color: #F2F2F2;
	padding: 3px;
	font-family: arial, helvetica, sans-serif;
	font-size: 8pt;
}

input:hover, textarea:hover, select:hover {
	border: 1px solid #60A080;
	background-color: #F8F8F8;
	padding: 3px;
}

input:focus, textarea:focus, select:focus {
	border: 1px solid #90D0B0;
	background-color: #FFFFFF;
	padding: 3px;
}

input.ac_loading {
	background-image: url(../../../images/loading.gif);
	background-position: right center;
	background-repeat: no-repeat;
}

label {
	padding: 3px;
	cursor: pointer;
	font-family: arial, helvetica, sans-serif;
	font-size: 8pt;
}

label:hover {
	padding: 3px;
	cursor: pointer;
	background-color: #F0F0F0;
}

input#pageheading {
	font-family: trebuchet ms, verdana, arial, helvetica, sans-serif;
	font-size: 18pt;
	font-weight: bold;
	border-width: 0 0 1px 0;
	width: 100%;
	border-bottom: 1px solid #90D0B0;
	margin: 0;
	padding: 0;
}

input#pageheading:focus {
	background-color: #fafafa;
}

input[type ^="button"], input[type ^="submit"], button {
	background-image: url(../images/mint/sprite-horiz.gif);
	background-position: 0% -60px;
	background-repeat: repeat-x;
	color: #202020;
}

input[type ^="image"][disabled ^="disabled"] {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

input[type ^="button"][disabled ^="disabled"], input[type ^="submit"][disabled ^="disabled"], button[disabled ^="disabled"], .btn-disabled {
	color: #808080 !important;
	background-image: none !important;
	background-color: #e0e0e0 !important;
}

/* The Wordpress-like fills behind checkboxes and their labels */
.catCheck {
	padding: 3px;
}

.catCheck:hover {
	padding: 3px;
	background-color: #F0F0F0;
}

/* Information, warning, question, error, and wait boxes */
div.error-box {
	background-image: url(../../../images/error.png);
	background-position: 8px 8px;
	background-repeat: no-repeat;
	background-color: #FFF4F4;
	border: 1px dashed #408060;
	padding: 10px 10px 10px 50px;
	margin: 0.5em 0 0 0;
	min-height: 25px;
}

div.info-box {
	background-image: url(../../../images/info.png);
	background-position: 8px 8px;
	background-repeat: no-repeat;
	background-color: #F4FFF4;
	border: 1px dashed #408060;
	padding: 10px 10px 10px 50px;
	margin: 0.5em 0 0 0;
	min-height: 25px;
}

div.warning-box {
	background-image: url(../../../images/warning.png);
	background-position: 8px 8px;
	background-repeat: no-repeat;
	background-color: #FFF4FF;
	border: 1px dashed #408060;
	padding: 10px 10px 10px 50px;
	margin: 0.5em 0 0 0;
	min-height: 25px;
}

div.question-box {
	background-image: url(../../../images/question.png);
	background-position: 8px 8px;
	background-repeat: no-repeat;
	background-color: #F4F4FF;
	border: 1px dashed #408060;
	padding: 10px 10px 10px 50px;
	margin: 0.5em 0 0 0;
	min-height: 25px;
}

div.wait-box {
	background-image: url(../../../images/wait.png);
	background-position: 8px 8px;
	background-repeat: no-repeat;
	background-color: #FFFFF4;
	border: 1px dashed #408060;
	padding: 10px 10px 10px 50px;
	margin: 0.5em 0 0 0;
	min-height: 25px;
}

/* This stuff is mostly unused, left in for compatibility */
div#ajaxEditContainer table {
	border: 0px solid #FFFFFF;
}

div#ajaxEditContainer td {
	margin: 1px;
}

div#ajaxEditContainer pre {
	margin-left: 1em;
	background-color: #F8F8F8;
	border: 1px dashed #90D0B0;
	padding: 10px;
	overflow: auto;
	max-height: 150px;
}

/* toolbar */
div.toolbar {
	border: 1px solid #3b9c61;
	background-color: #D0D0D0;
	background-image: url(../images/mint/sprite-horiz.gif);
	background-position: 0 -90px;
	padding: 1px 0;
	height: 22px;
	font-family: arial, sans-serif;
	font-size: 8pt;
}
div.toolbar ul {
	margin: 0;
	padding: 0;
}
div.toolbar ul li {
	list-style: none;
	margin: 0;
	float: left;
}
div.toolbar a img {
	opacity: 0.6;
}
div.toolbar a:hover img, div.toolbar a:focus img {
	opacity: 1;
}
div.toolbar a {
	display: block;
	padding: 2px;
	border: 1px solid transparent;
	cursor: default;
	width: auto;
	color: #000000;
	margin: 0 2px;
	max-height: 16px;
	text-decoration: none;
}
div.toolbar a:hover, div.toolbar a:focus {
	border: 1px solid #008000;
	background-color: #ceedce;
	background-image: url(../images/mint/sprite-horiz.gif);
	background-position: 0 -118px;
	color: #000000;
	text-decoration: none;
}
div.toolbar a:active {
	background-color: #E0E0E0;
	background-position: 0 -138px;
}
div.toolbar img {
	margin: 0;
	padding: 0;
	display: inline;
	border-width: 0px;
}
div.toolbar a span {
	position: relative;
	top: -3px !important;
}
div.toolbar a span.noimage {
	position: relative;
	top: 0px !important;
	height: 16px !important;
	display: block;
	padding-left: 2px !important;
}
div.toolbar li span {
	padding-left: 4px;
	padding-right: 2px;
	position: relative;
	top: 4px;
}

/* vertical toolbar */
div.toolbar_vert {
	border: 1px solid #909090;
	background-color: #D0D0D0;
	padding: 2px 0;
}
div.toolbar_vert ul {
	margin: 0;
	padding: 0;
}
div.toolbar_vert ul li {
	list-style: none;
	margin: 0;
}
div.toolbar_vert a img {
	opacity: 0.6;
	/*filter: alpha(opacity=60);*/
}
div.toolbar_vert a:hover img {
	opacity: 1;
	/*filter: alpha(opacity=100);*/
}
div.toolbar_vert a {
	display: block;
	padding: 2px;
	border: 1px solid transparent;
	cursor: default;
	width: auto;
	color: #000000;
	margin: 0 2px;
	max-height: 16px;
	text-decoration: none;
}
div.toolbar_vert a:hover {
	border: 1px solid #209020;
	background-color: #ceedce;
	color: #000000;
	text-decoration: none;
}
div.toolbar_vert a:active {
	border: 1px solid #A0A0A0;
	background-color: #E0E0E0;
}
div.toolbar_vert img {
	margin: 0;
	padding: 0;
	display: inline;
	border-width: 0px;
}
div.toolbar_vert a span {
	position: relative;
	top: -4px;
}
div.toolbar_vert li span {
	padding-left: 2px;
	padding-right: 5px;
}

/*
 * Userpage styles
 */

ul.userpage_links li {
	background-image: url('../images/buttonbg.gif');
	background-repeat: repeat-x;
}

ul.userpage_links li a {
	color: #202020;
}

ul.userpage_links li.userpage_tab_active {
	background-image: url('../images/buttonbg-lite.gif');
}

ul.userpage_links li:hover {
	background-image: url('../images/buttonbg-lite.gif');
	border-color: #404040 #404040 #ffffff #404040;
	border-bottom-width: 0;
}

ul.userpage_links li.userpage_tab_active:hover {
	border-bottom-width: 1px;
}