pepper.css

/* info: alternative stylesheet */

/* Core Classes */
body {
	background-color: #fdfdfd;
}

body, td {
	margin: 0px;
	padding: 0px;
	text-align: left;
	color: #000;
}

body, td, .indent, .defaulttext, .caption, .captiontext, .bodytable, .mediumtext,
.forumheader, .forumheader2, .forumheader3, .forumheader4, .forumheader5, .fcaption, .finfobar {
	font: normal 11px arial, verdana, tahoma, sans-serif;
	color: #000;
}

.smalltext, .smallblacktext, .tbox, .button, .button:hover, .nextprev, .helpbox {
	font: normal 10px arial, verdana, tahoma, sans-serif;
	color: #000;
}

a {
	color: #cc3300;
}

a:hover {
	color: #003300;
}

img {	
	border: 0px;
}

.linkspage_button {
	border: 0px;
}

form {
	margin: 0px;
}

.tbox {
	border: #A5ACB2 1px solid;
	background-color: #fff;
}

.indent {
	border: #999 1px dashed;
	padding: 5px;
	margin: 5px;
	background-color: #fcf9f9;
}

.button, .button:hover {
	border: 1px solid #000;
}

.button {
	background-image : url(images/classic/button.png);
}

.button:hover {
	background-image : url(images/classic/buttonover.png);
}

.nextprev {
	border: 0px;
	text-align: center;
	padding: 2px;
	background-color: #f9f7f7;
}

.spacer{
	padding: 5px 0px;
}

.fborder, .border{
	border-collapse: collapse;
	border-spacing: 0px;
}

.forumheader, .forumheader2, .forumheader3, .forumheader4, .fcaption, .finfobar {
	padding: 4px;
	background-color: #fff;
	border: 1px solid #000;
}

.forumheader, .forumheader4, .finfobar {
	background-color: #fdfbfb;
}

.forumheader5 {
	cursor: pointer;
}

.fcaption, .forumheader5 {
	background-color: #f9f7f7;
}

table {
	margin-left: auto;
	margin-right: auto;
}

.searchhighlight {
	text-decoration: underline;
	color: #ff0000;
	font-weight: bold;
}

ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

.helpbox {
	border: 0px;
}

/* Theme Specific Classes */

.page_container {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0px;
}

.top_section, .main_section {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #000;
	border-collapse: collapse;
	border-spacing: 0px;
}

.top_section_left {
	vertical-align: middle;
	width: 190px;
	padding-left: 5px;
	padding-right: 5px;
}

.top_section_mid {
	vertical-align: bottom;
	text-align: right;
	padding: 3px 5px 3px 0px;
	border-left: 1px solid #000;
	background-image: url(images/classic/top_mid_back_pepper.jpg);
	background-repeat: no-repeat;
	background-color: #F3EDED;
}

.top_section_right {
	vertical-align: middle;
	text-align: center;
	border-left: 1px solid #000;
	background-image: url(images/classic/top_right_back_pepper.png);
	background-repeat: no-repeat;
	background-position: center;
	background-color: #F3EDED;
	padding: 0px;
	white-space: nowrap;
	width: 170px;
}

.menus_container {
	width: 170px;
	border-collapse: collapse;
	border-spacing: 0px;
}

.default_menu {
	vertical-align: top;
}

.left_menu, .right_menu {
	width: 170px;
	vertical-align: top;
	background-color: #F9f7f7;
}

.left_menu {
	border-right: 1px solid #000;
}

.right_menu {
	border-left: 1px solid #000;
}

.cap_border {
	border-top: 1px solid #000;
	border-bottom: 1px solid #fff;
}

.cap_border.button_menu {
	border-bottom: 0px;
	text-align: left;
}

.main_caption, .left_caption, .right_caption {
	white-space: nowrap;
	padding: 3px 5px;
	border-top: #e9efff 1px solid;
	border-bottom: 1px solid #000;
	background-repeat: no-repeat;
	background-position: left;
	color: #fff;
}

.main_caption {
	background-color: #587D82;
}

.left_caption, .right_caption {
	background-color: #173E4F;
}

.cont {
	border-collapse: collapse;
	border-spacing: 0px;
	width: 100%;
}

.menu_content {
	padding: 5px;
	background-color: #fff;
}

.menu_content.non_default {
	background-color: transparent;
}

.menu_content.buttons {
	padding: 0px;
}

.news_info {
	width: *;
	background-color: #F3F0F0;
	border-collapse: collapse;
	border-spacing: 0px;
}

td.link_button {
	border-bottom: 1px solid #000;
}

/* Nav Menu Classes */

div.menuBar, div.menuBar a.menuButton, div.menuButton, div.menuButton_over, div.menu, div.menu a.menuItem {
	font: normal 11px arial, verdana, tahoma, sans-serif;
	color: #000;
}

div.menuBar {
	background-color: #FFF8D9;
	border-top: 1px solid #fff;
	padding: 4px 0px;
	text-align: left;
}

div.emenuBar {
	background-color: #FFF8D9;
	border-top: 1px solid #fff;
	text-align: left;
}

div.menuBar a.menuButton, div.menuButton, div.menuButton_over {
	background-color: transparent;
	border: 1px solid #FFF8D9;
	cursor: default;
	left: 0px;
	margin: 0px;
	padding: 2px 4px 2px 22px;
	position: relative;
	text-decoration: none;
	top: 0px;
	z-index: 100;
}

div.menuBar a.menuButton:hover, div.menuButton:hover, div.menuButton_over {
	background-color: transparent;
	border-color: #fff #a5a5a5 #a5a5a5 #fff;
}

div.menuBar a.menuButtonActive, div.menuButtonActive, div.menuButtonActive:hover, div.menuBar a.menuButtonActive:hover {
	background-color: #ffffef;
	border-color: #a5a5a5 #fff #fff #a5a5a5;
	left: 1px;
	top: 1px;
}

div.menu {
	background-color: #FFF8D9;
	border: 1px solid;
	border-color: #fff #a5a5a5 #a5a5a5 #fff;
	left: 0px;
	padding: 1px;
	position: absolute;
	top: 0px;
	visibility: hidden;
	z-index: 101;
}

div.menu a.menuItem {
	cursor: default;
	display: block;
	padding: 2px 11px 2px 0px;
	text-decoration: none;
	white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
	background-color: #ffffef;
}

div.menu a.menuItem span.menuItemBuffer, div.menu a.menuItem:hover span.menuItemBuffer {
	padding: 0px 2px;
}

div.menu a.menuItem span.menuItemText {
	padding: 0px 0px 0px 3px;
}

div.menu a.menuItem span.menuItemArrow {
	margin-right: -.75em;
}

div.menu div.menuItemSep {
	border-top: 1px solid #a5a5a5;
	border-bottom: 1px solid #fff;
	margin: 4px 2px;
}

a.menuItem.header {
	border-bottom: 1px solid #b3b3b3;
}

/*
	QUICK TEMPORARY 0.8 FIX
*/

/* Forms */
form        { display:inline; }
fieldset    { border: 0; margin-bottom: 10px; }
input, select{ vertical-align:middle; }
textarea	{ overflow:auto; }

/* Table */
table       { border:0; border-spacing:0; empty-cells:show; font-size:100%; width: 100%; }
th          { vertical-align:top; text-align:left; font-weight:normal; }
td          { vertical-align:top; }

/* Lists */
ul,ol       { list-style:none; }

/*
 * e107 v0.800 - new class definitions
 */
 
/* Core Formatting */
.left		{ text-align: left }
.right		{ text-align: right }
.center		{ text-align: center }
.f-left		{ float: left }
.f-right	{ float: right }
.top		{ vertical-align: top }
.middle		{ vertical-align: middle }
.bottom		{ vertical-align: bottom }
.clear		{ clear: both }
.clear-l	{ clear: right }
.clear-r	{ clear: left }
.smalltext	{ font-size: 11px; }
.nowrap 	{ white-space:nowrap; }

/* Core Icons */
img.icon		{ border: 0px }
img.icon.list, 
input.action	{ margin: 0px 3px }
img.icon.action, 
input.action 	{ vertical-align: middle }
img.S16			{ width: 16px; height: 16px }
img.S32			{ width: 32px; height: 32px }
img.S64			{ width: 64px; height: 64px }
img.S128		{ width: 128px; height: 128px }
img.edit, 
img.delete, 
input.delete 	{ }
/*******************************************************************************************************************/

/******** Decorate JS */
/* Admin List Table */
.adminlist { width:100%;  border:1px solid #ddd;}
.adminlist th { padding: 5px; border-bottom:1px solid #ddd; border-right: 1px solid #ddd; font-weight: bold; }
.adminlist td { padding: 5px; border-bottom:1px solid #ddd; border-right: 1px solid #ddd; }
.adminlist th.last,
.adminlist td.last { border-right: 0px solid;}
.adminlist tr.last td{ border-bottom: 0px solid;}
.adminlist thead { background-color:#f2f2f2; }

.adminlist tbody {}
.adminlist tfoot {}
.adminlist tr.first {}
.adminlist tr.last {}
.adminlist tr.odd {}
.adminlist tr.even { background-color:#f6f6f6; }

.adminlist .col-selection-cont { position: relative; float:right; }
.col-selection-cont .col-selection { text-align:left; background-color: #FCFDFF; border: 1px outset black; width:200px; margin-right:0px; overflow:visible; position: absolute; z-index:101; right:0px;}
.col-selection .col-selection-body { padding: 5px; clear: both; }

/* Form elements */ 
input.input-text,
textarea,
select, .tbox {
    border-width:1px;
    border-style:solid;
    border-color:#aaa #c8c8c8 #c8c8c8 #aaa;
    background:#fff;
    font:12px arial, helvetica, sans-serif;
}

input[disabled='disabled'],
textarea[disabled='disabled'],
select[disabled='disabled'],
.tbox.disabled,
.disabled {
  background-color:#EFEFEF;
  color:#000;
  cursor:default;
}

option { padding-right: 10px;}
input.input-text, textarea, .tbox, .helpbox { padding:2px; }

input.e-spinner {
	border:0px;
}

select.tbox  { min-height:17px; padding: 0px; /* setting the height of empty selects */ }
.select.order { width: 40px !important; }
.select.time-offset { width: 60px !important; }
input.radio { margin-right: 3px; }
label { cursor: pointer; }
.checkbox { margin-right: 5px; }

/* BBcode textareas */
div.bbarea.large, .tbox.large, .helpbox.large { width: 95% !important; }
div.bbarea.medium, .tbox.medium, .helpbox.medium { width: 60% !important; }
div.bbarea.small, .tbox.small, .helpbox.small { width: 250px !important; }
.remainingCharacters { margin: 0px; padding: 0px; }


.check-block { /* see administration newspost.php */
	padding: 2px 0px;
    border-width:1px;
    border-style:solid;
    border-color:#aaa #c8c8c8 #c8c8c8 #aaa;
    background:#fff;
    font:12px arial, helvetica, sans-serif;
	overflow:auto
}
.check-block .checkbox { margin-left: 2px }
.check-block .separator { clear: both; border-bottom: 1px solid #aaa; margin-bottom: 4px; height: 4px }


.field-help { width: 280px; line-height: 1.4em; padding-top: 3px; color:#333333; font-size: 11px; }
.label-note { font-style: italic; }
.form-note { font-style: italic; }
.field-spacer.strong { font-weight: bold }
.required-label { font-weight: bold }

/* Related JS functionality - .autocheck together with .auto-toggle-area (see admin/image.php) */
.auto-toggle-area { width: 280px; cursor: pointer; }
	
/* form used for settings */
.col-label { width: 250px; }
.col-control {}



.adminform  { width:100%;  border:1px solid #ddd;}

.adminform th { padding: 5px; font-weight: bold; white-space:nowrap; }
.adminform td { padding: 5px; }


.adminform td { padding: 5px; text-align: left}
.adminform td div.field-spacer { margin-bottom: 3px; } /* multi-fields per row separator */
.adminform td div.field-section { clear: both; margin-bottom: 10px; } /* multi-field sections per row - wrapper */

.adminform td .check-block { width:95%; height:60px; }

.adminform .select { width: 280px;}
.adminform .input-text { width: 274px;}
.adminform td.control textarea { width: 274px;}

.adminform td.label { }
.adminform td.control { }


/* form used for content edit */
.adminedit  { width:100%;  border:1px solid #ddd;}
.adminedit.options { } /* form used for content item options */
.adminedit td { padding: 5px; text-align: left}
.adminedit td div.field-spacer { clear: both; margin-bottom: 3px; } /* multi-fields per row - wrapper */
.adminedit td div.field-section { clear: both; margin-bottom: 10px; } /* multi-field sections per row - wrapper */
.adminedit .select { width: 280px; }
.adminedit .input-text { width: 274px;}
.adminedit td.control textarea { width: 274px;}
.adminedit td.control textarea.large { width: 400px; }

.adminedit td .check-block { width:95%; height:60px; }

.adminedit td.label {}
.adminedit td.control {}




/* Admin Info Table */ 
.admininfo  { width:100%;  border:1px solid #ddd;}
.admininfo td { padding: 1px 5px; text-align: left}


.info-bar { padding: 5px 0px; }

/* Images and avatars */
.image-box {border:1px solid #ddd; margin-right: 10px;  position: relative; margin-bottom: 10px; }
.image-box .spacer { }
.image-box .image-name { padding: 5px; }
.image-box .image-delete { position: absolute ; bottom: 10px; text-align: center; width: 100%}
.image-box .image-users {padding: 5px;}
.image-box .image-preview {padding: 5px;}

/******** Prepare for Image Preview JS */
.image-preview {}


/******** SyS Messages / Message text formatting */
/* message boxes */
.s-message { }

.s-message div.info,
.s-message div.error,
.s-message div.success,
.s-message div.debug,
.s-message div.warning { padding: 5px; margin-bottom: 10px; }


.s-message div.info 	{ background-color:#C1E0FF; border: 1px solid #3399FF; }
.s-message div.error 	{ background-color:#FFCECE; border: 1px solid #CC0000; }
.s-message div.success  { background-color:#DFFFDF; border: 1px solid #009900; }
.s-message div.warning 	{ background-color:#FFFFD5; border: 1px solid #FFCC00; }
.s-message div.debug 	{ background-color:#FFFFFF; border: 1px solid #EAEAEA; }

.s-message .s-message-title { height: 32px; background: 0 50% no-repeat; padding-left: 42px; font-size: 14px; font-weight: bold; line-height: 32px; }

.s-message div.info 		.s-message-title 	{ background-image: url(images/classic/messagebox_info.png); }
.s-message div.error 	.s-message-title 	{ background-image: url(images/classic/messagebox_critical.png); } 
.s-message div.success 	.s-message-title 	{ background-image: url(images/classic/ok.png); }
.s-message div.warning 	.s-message-title	{ background-image: url(images/classic/messagebox_warning.png); }
.s-message div.debug 	.s-message-title	{ background-image: url(images/classic/messagebox_info.png); }

.s-message-body { padding-left: 42px; }
.s-message-item {}

/* validate result inline message */
.validate-result {}

/* message text (overall) */
.warning { color: #FF6600 }
.success { color: green; }
.error { color: #FF0000 }
.info {}
.required { color:red }
/******** Tooltip info */
.e-info {}

/******** Admin Buttons */
button { 
  border:0; 
  cursor:pointer; 
  font:bold 12px arial, helvetica, sans-serif;  
  padding:0 10px 0 0; 
  text-align:center;
  color:#0b333c; 
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 13px; 
  height:22px; line-height:22px;  color:#0b333c;
}

/*blue buttons*/
button 					{ background:url(images/classic/btn_right.gif) right no-repeat;  }
button span 			{ background:url(images/classic/btn_left.gif) left no-repeat;  }

button:hover,
button:focus 			{ background:url(images/classic/btn_over_right.gif) right no-repeat; }
button:hover span, 
button:focus span 		{ background:url(images/classic/btn_over_left.gif) left no-repeat; } 


button:active			{ background:url(images/classic/btn_active_right.gif) right no-repeat; }
button:active	span	{ background:url(images/classic/btn_active_left.gif) left no-repeat; }

button::-moz-focus-inner { border: none; } /*To all who have a problem with 1px spans offset in firefox, the following sentence will solve this problem: */

button.delete span			{ padding-left: 30px; }
button.delete span			{ background-image:url(images/classic/btn_remove_left.gif); }
button.delete:hover span,
button.delete:focus span 	{ background-image:url(images/classic/btn_remove_over_left.gif) } 
button.delete:active span	{ background-image:url(images/classic/btn_remove_active_left.gif)}

/*default submit*/
button.submit span			{}
button.submit span			{}
button.submit:hover span,
button.submit:focus span 	{} 
button.submit:active span	{}


button.update span			{ padding-left: 30px; }
button.update span			{ background-image:url(images/classic/btn_update_left.gif); }
button.update:hover span,
button.update:focus span 	{ background-image:url(images/classic/btn_update_over_left.gif)}
button.update:active span	{ background-image:url(images/classic/btn_update_active_left.gif)}

button.create span			{ padding-left: 30px; }
button.create span			{}
button.create:hover span,
button.create:focus span 	{} 
button.create:active span	{}

button.edit span			{ padding-left: 30px; }
button.edit span			{}
button.edit:hover span,
button.edit:focus span 		{} 
button.edit:active span		{}

button.cancel span			{}
button.cancel span			{}
button.cancel:hover span,
button.cancel:focus span 		{} 
button.cancel:active span		{}



.buttons-bar { padding: 10px 0px; }
.buttons-bar button { margin-right: 10px; }
.buttons-bar button.f-right { margin-right: 0px; }
.buttons-bar .options { margin-bottom: 10px; }

/* Actions (adminlist) - input type image */
input.action { vertical-align: middle; } /* default */
input.action.delete {}
input.action.edit {}

/********** Page Loading Status default style */
#loading-mask { color: #556B2F; font-size: 1.2em; font-weight:bold; position:absolute; text-align: center; padding: 0; margin: 0; background-color: transparent; }
#loading-mask .loader { position: fixed; top: 40%; left: 50%; width: 200px;  text-align: center; background: #F0F9E3 none repeat scroll 0 0; border: 2px solid #556B2F; font-weight: bold; padding: 10px 5px; margin-left: -100px; margin-top: 0; }
#loading-mask img { margin: 10px auto; }

/********** Element Loading Status default style */
.element-loading-mask { background-repeat: no-repeat; background-position: 50% 50%; background-color: #f5f5f5; }

/********** Auto complete default style */
div.e-autocomplete {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #c0c0c0;
  margin:0;
  padding:0;
}
div.e-autocomplete ul {
  list-style-type:none;
  margin:0;
  padding:0;
  font-weight: bold; font-size: 11px
}
div.e-autocomplete ul li.selected { background-color: #f5f5f5;}
div.e-autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding: 5px;
  cursor:pointer;

}
div.e-autocomplete ul li span.informal { font-weight: normal; font-size: 9px}

/********** Docs */
#docs-list 			{ padding: 10px; margin-bottom: 15px; border: 1px solid #f5f5f5; }
#docs-list .qitem	{ margin: 3px 0; padding-left: 10px; }
.docs-item 			{ padding: 10px; margin: 15px 0; border: 1px solid #f5f5f5; }

.docs-item .qitem,
.docs-item .aitem,
.docs-item .gotop   { margin: 3px 0; padding-left: 10px; }

.docs-item .qitem	{ font-weight: bold; }
.docs-item .aitem	{ margin-bottom: 10px; }

.docs-item h4,
#docs-list h4		{ margin-bottom: 8px; }

#docs-bottom-nav 	{ height: 800px; }

/********** Misc */
.e-pointer { cursor: pointer; } /* Pointer Hand */
.expand-container { padding: 10px; } /* Block with expandable items */
.nextprev-bar { clear: both; padding: 5px; margin: 5px; border:1px solid #ddd; } /* Page NextPrev nabigation block */
.imgselector-container { clear: both; } /* ImageSelector.sc */

/******** Side Navigation 
	- Admin Navigation
	- Plugin Navigation
*/
ul.plugin-navigation { margin: 0; padding: 0; }
ul.plugin-navigation a { text-decoration: none; }

ul.plugin-navigation li { 
	background-color: #F7F9FA;
	border-bottom: 1px solid #000;
	text-align: left;
	background: url(images/classic/arrow_16.png) 2px 2px no-repeat;
	line-height: 20px;
	padding: 0px 0px 0px 20px; border-right: 0px; margin: 0 0;
}
ul.plugin-navigation li.active,
ul.plugin-navigation li:hover  {
	background: url(images/classic/arrow_over_16.png) 2px 2px no-repeat;
}

ul.plugin-navigation a {
	display: block;
	width: 98%;
	line-height: 20px;
	color: #000;
}

ul.plugin-navigation a.link-active { 
	font-weight: bold;
}

ul.plugin-navigation a.link:hover { 
	padding-left: 2px;
}

ul.plugin-navigation ul.plugin-navigation-sub {}
ul.plugin-navigation ul.plugin-navigation-sub li { padding: 0px 10px 0px; }
ul.plugin-navigation ul.plugin-navigation-sub a.link {}
ul.plugin-navigation ul.plugin-navigation-sub a.link-active {font-weight: bold;}


/******** Block Elements */
.block { border: 1px solid #DDDDDD; margin-bottom: 10px;}
.block-text { padding: 10px 10px 10px; }
.block h2.caption, .block h4.caption { padding: 5px 10px 5px; border-bottom: 1px solid #DDDDDD;  }
.page-info { border: 1px solid #DDDDDD; margin-bottom: 10px; }
.page-info p { padding: 10px; }

/***** Admin Info Panel Buttons **/

h2.caption {  font-size: 200%; font-weight:bold; }

.core-mainpanel-block { text-align:center; width:100px; float:left; height:48px; display:block;margin:15px; }
.core-mainpanel-link-text { font-weight:bold; text-decoration: none; padding:3px }



#core-banlist-times .textarea { width: 98%; }

#core-emoticon-configure input.input-text { width: 300px; }
#core-links-edit textarea { width: 390px !important; }
#core-links-edit .helpbox { width: 390px !important; margin: 5px 0px; }
#core-links-edit .field-help { width: 390px; }

#core-admin-log-config legend { font-weight: bold; }

#core-admin-log-maintenance .select { width: 60px; }
#core-admin-log-maintenance button { margin-left: 10px; }

#core-frontpage-edit-home			{ width: 50%; float: left; } 
#core-frontpage-edit-post-login		{ width: 50%; float: left; }
#core-frontpage-edit-home .adminlist { width: 99%; }
#core-frontpage-edit-post-login .adminlist { width: 99%; float: right; }
#core-frontpage-edit .tbox { width: 80%;} 
#core-frontpage-edit select.tbox { width: 50%;} 
#core-frontpage-edit .buttons-bar select.tbox { width: 140px; }
#core-frontpage-edit .buttons-bar 	{ clear: both; }

/** Custom Pages Front-end **/
.cpage-nav { padding: 5px; margin: 0px 5px 10px 10px; }
a.cpage-np { font-size: 14px; }
a.cpage-np.current { text-decoration: none; }

/******** bbcodes && typgoraphy */
p {  }
p.bbcode { margin: 10px 0px; text-indent: 15px; } /* override if requried */
p.bbcode:first-letter  { font-weight: bold; text-transform: uppercase }

h1, h2, h3, h4, h5, h6 { margin: 10px 0px; text-indent: 15px; }
h1 {  margin: 15px 0px; font-size: 16px; }
h2 {  font-size: 14px; }
h3 {  font-size: 12px; }

h1.bbcode, h2.bbcode, h3.bbcode, h4.bbcode, h5.bbcode, h6.bbcode {  }/* override if requried */

div.bbcode { margin: 15px 0px; clear: both; } /* layout control via bbcodes */

/* Consistency with Jayya v2.0 */
.jayya_clock, .top_section_right #Clock {
	display: none;
}