This causes undesirable extra space if
the margin_top is not 0 */
p {
margin-top: 0px;
}
/* mngmnt_icon is used for many of the various action images, the red Xs, the up and down arrows, etc
Example: 
Note the doodlelink is also used.
*/
img.mngmnt_icon {
}
/* ==============================
== Containers
== Most blocks are within a container of some kind
== Setting container layout can have a huge effect on look and feel
============================== */
/* container_box is the main wrapper for all containers. It is invoked by itself. e.g.
*/
div.container_box {
/* padding: 2px; */
margin-bottom: 2px; /* altered */ /* space between containers, shows the generic section color or background
do not set margin-left or margin-right or else the container will be indented*/
/* Do NOT set background color if you want background images to come through */
background-color: transparent; /* =CONTAINER_BG_COLOR= */
/* For blockish themes, set a border on the container box
also consider using a color other than =BORDER_COLOR= for the container boarders */
/* Setting background color in container boxes is like setting it on the generic div
-- it turns the color of almost everything (except where there is a background image)
*/
}
/* ========================================
=== Bring in standard block outlining, new 2/2007 standard
======================================== */
/* =======================================================================
=======================================================================
=========== Start _outlines.tpl 2/9/2007 ===========================
=======================================================================
=======================================================================
*/
/* Each Block's Border in Outline View*/
/* container_edit box is shown when the view is structure
It appears before and ends before the container. e.g.
When not in structure mode:
*/
.container_info {
font-size: small;
font-weight: bold;
color: #222222; /* =CONTAINER_CONTAINER_CONTROL_FONT_COLOR= */
}
/* Standards changed 11/14/06 to allow containermodule_container_editbox and containermodule_side_container_editbox
Delete any container_container stuff */
/* containermodule_container_editbox, containermodule_container_editheader, and containermodule_container_info
apply only to container blocks. The _side variants apply only when the block is not in the main area.
Example Usage when on a sidebar:
*/
div.side_container_editbox {border: 3px solid #ccccff;} /* =CONTAINER_SIDE_CONTROL_BG_COLOR= */
div.side_container_editheader {background-color: #ccccff;} /* =CONTAINER_SIDE_CONTROL_BG_COLOR= */
div.containermodule_container_editbox {border: 3px solid #9999cc;} /* =CONTAINER_CONTAINER_CONTROL_BG_COLOR= */
div.containermodule_container_editheader {padding: 0px;background-color: #9999cc;} /* =CONTAINER_CONTAINER_CONTROL_BG_COLOR= */
div.containermodule_side_container_editbox {border: 3px solid #9999cc;} /* =CONTAINER_SIDE_CONTAINER_CONTROL_BG_COLOR= */
div.containermodule_side_container_editheader {padding: 0px; background-color: #9999cc;} /* =CONTAINER_SIDE_CONTAINER_CONTROL_BG_COLOR= */
div.allpages_container_editbox {border: 3px solid #669999;} /* =CONTAINER_ALLPAGES_CONTROL_BG_COLOR= */
div.allpages_container_editheader {background-color: #669999;} /* =CONTAINER_ALLPAGES_CONTROL_BG_COLOR= */
div.allpages_containermodule_container_editbox {border: 3px solid #669999;} /* =CONTAINER_ALLPAGES_CONTROL_BG_COLOR= */
div.allpages_container_editheader {background-color: #669999;} /* =$CONTAINER_ALLPAGES_CONTROL_BG_COLOR= */
div.allpages_containermodule_container_editheader {background-color: #669999;} /* =$CONTAINER_ALLPAGES_CONTROL_BG_COLOR= */
/* container_selectbox is a style imposed temporarily when they hover over an edit button.
This class is used by itself
Example Usage:
content from the embedded blocks
When in structure mode, for top level containers:
info icon, up/down links, configure icon
When in structure mode, Embedded containers use
info icon, up/down links, configure icon
content from the embedded blocks
*/
div.container_editbox { /* Standards changed 7/13/06 */
border: 3px solid #ccccff; /* =CONTAINER_CONTROL_BG_COLOR= */
margin: 4px;
}
div.top_container_editbox {
margin: 0px 0px 4px 0px; }
/* Each Block's Header background color in Structure View*/
div.container_editheader {
padding: 3px;
background-color: #ccccff; /* =CONTAINER_CONTROL_BG_COLOR= */
}
/* container_info is used in a td within the container_editheader
with description about the container such as @left_before127
It should use a small and inobstrusive font and shuld show well against the
background color of container_editheader
The class is used alone. e.g.
| Not Categorized | orThe 1 board See all 3 Articles | */ .category_title { font-weight: bold; font-size: large; /* If you use a contrasting background-color, you should set the padding so that the text is not too close to the colored rectangle. */ /* Do not set the background color if in a totally non blockish theme */ padding-left: 0px; padding-top: 1px; padding-bottom: 1px; } /* After modules and cats, there are items Example Use:{$gallery->name}
{$post->title}
*/
.itemtitle { /* imagegallery, newsmodule, weblogmodule. See moduletitle */
/*
font-size: medium;
font-family: Helvetica, Verdana;
*/
font-weight: bold;
}
.paypal_itemtitle {
font-size: large;
}
/* Title links are for parts of titles that are links
They should generally have the same color as a navlink
It is pretty much a manditory class.
Example Usage:
Details...
*/
.title_link {
font-size: x-small;
font-weight: bold;
text-decoration: underline;
color: #628967; /* =NAVLINK_FONT_COLOR= */
}
/* If the category title is inversed, then the font must also be inversed
Example Usage:
id more=1 title=$moduletitle}">{$board->name}
id more=1 title=$moduletitle}">{if $board->article_cnt > 1}See all {$board->article_cnt} {$config->article_name_plural}{else}See {$config->article_name}{/if}
|
*/
.category_title_link {
color: #577A5B; /* =MODULE_TITLE_FONT_COLOR= */
}
/* Summaries are the opposite of titles
Example Usage:
|
*/
.summary {
font-size: small;
padding-left:1.5em;
color: #222222; /* =MAIN_FONT_COLOR= */
}
/* Some things need a deeper indentation and less emphisis. They use summary2
Example: |
*/
.summary2 {
padding-left:3em;
font-size: x-small;
color: #666666; /* =MINOR_FONT_COLOR= */
}
/* Much of the site is in table columns, so any setting of
general td will affect many things.
It is best to not have anything here and to let the general div take care of it all
*/
td {
}
/* H3s are still in use in a few places
configure_site, some calendar views, some workflow views
*/
h3 {
color: #577A5B; /* =MODULE_TITLE_FONT_COLOR= */
background-color: transparent ; /* =MODULE_TITLE_BG_COLOR= */
}
/* Some tables have alternating highlight rows.
example: class="row {cycle values='even_row,odd_row'}"
See the "manage page" page for an example
*/
tr.row {
}
tr.even_row {
background-color: #EEEEEE; /* =ALT_BG_COLOR= */
}
tr.odd_row {
}
tr.row:hover td, tr.row:hover td a {
background-color: transparent; /* =HOVER_BG_COLOR= */
}
/* Headers of tables
Example Use:
| Username |
*/
td.header {
background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */
color: #577A5B; /* =MODULE_TITLE_FONT_COLOR= */
font-weight: bold;
font-size: medium; /* Medium? */
/* No padding if not in a blockish theme */
padding: 0px;
/* altered */
background-color: #aaa;
color: #fff;
font-weight: bold;
font-size: 15px;
padding: 2px;
}
td.header a {
background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */
/* Don't override the link color */
font-weight: bold;
font-size: medium;
padding: 2px;
}
td.boxed { /* This was called administration_modmgrbody in older stylesheets */
border: 2px solid #628967; /* =BORDER_COLOR= */
padding-left: 10px;
}
/* ==============================
== Links
============================== */
/* 'a' is for the links the user embeds such as with the wywisig editor.
Links to other pages in the site are some form of the a.navlink class
and links to functionality (such as add article) are some form of the a.mngmtlink class */
a {
font-weight: bold;
text-decoration: underline; /* altered */
color: #628967; /* =LINK_FONT_COLOR= */
}
/* All of the used links can have a :visited form that changes their color a bit so
folks can see where they have recently been */
a:visited {
}
a:hover {
background-color: transparent; /* =HOVER_BG_COLOR= */
color: #577A5B; /* =LINK_HOVER_FONT_COLOR= */
}
a.title_empty, a.title_empty:hover {
color: #628967; /* =LINK_FONT_COLOR= */
background-color:inherit;
}
/* mngmntlinks (all variants) are for links that do something -- drop a posting,
join a group, etc. They change the state of the DB.
Some themes prefer to mark these somehow, perhaps by making them a bolder color
or in a different font or text decoration. This acts as a warning to users
that the link will do something.
This class is manditory, it is the lead and sometimes the only class listed
Many modules will have a variant of this for optional overrides e.g.
class="mngmntlink article_mngmntlink"
class="mngmntlink calendar_mngmntlink"
It is also often used with mngmntlink_small and doodlelink
*/
a.mngmntlink {
font-size: small;
text-decoration: none;
color: red; /* =MANAGEMENTLINK_FONT_COLOR= */
/* If links are not differentiated in color,
then make them standout by weight, font, decoration, or background color */
/* Highlighting the font in a slightly different background draws the eye to management links. See EarthYellow */
font-weight: normal; /* altered */
}
a.mngmntlink:hover {
}
/* The _small mngmntlink is used for secondary actions, actions that
need to be listed but which are not often used.
It is an optional class, always being used in a sequence of the following
class="mngmntlink mngmntlink_small"
*/
a.mngmntlink_small {
font-size: x-small;
}
/* The chooselink is used for modal actions such as insert image
When it is used most other link are disabled, so it should be
set to be extra visible.
*/
a.chooselink {
background-image: url("/hotdoodle_engine/iconset/doodle_splat.gif");
background-repeat: no-repeat;
background-position: top left;
height: 20px;
padding-left: 16px;
}
/* The doodlelink is used for things like the edit and permission icons.
It should be visually small, but visually distinctive (such as being red).
Should generally be set the same as a.mngmtlink, but perhaps smaller
It is an optional class, always being used in a sequence of the following
class="mngmntlink doodlelink"
*/
a.doodlelink {
font-size: x-small;
text-decoration: none;
color: red; /* =MANAGEMENTLINK_FONT_COLOR= */
/* If links are not differentiated in color,
then make them standout by weight, font, decoration, or background color */
/* Highlighting the font in a slightly different background draws the eye to management links. See EarthYellow */
font-weight: normal; /* altered */
}
/* navigation_mngmntlink is used for those mngmntlinks that affect navigation
e.g. add a page, what type of page, delete page
It is a very optional class, always being used in a sequence of the following
class="mngmntlink navigation_mngmntlink"
*/
a.navigation_mngmntlink {
/* text-decoration: none;
color: red; */ /* =MANAGEMENTLINK_FONT_COLOR= */
/* font-weight: bold;
font-size: small; */
}
/* navlinks (all variants) are for links that take you somewhere else in the site
but which do NOT do something -- they do not change the state of the DB.
This class is manditory, it is the lead and sometimes the only class listed.
Many modules will have a variant of this for optional overrides e.g.
class="navlink article_navlink"
class="navlink login_navlink"
*/
.navlink {
color: #628967; /* =NAVLINK_FONT_COLOR= */
font-size: medium;
}
/* Consider also setting a.navlink:hover */
/* Navlink current is used only on navlinks that refer to the current page
In it, you can change the color, font, background, etc to show the user where they are
The class is optional, all uses of it also use navlink.
class="navlink navlinkcurrent"
class="navlink navlinkbutton navlinkcurrent navlinkcurrentbutton"
*/
.navlinkcurrent {
font-weight: 900;
background-color: transparent; /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
}
/* For navlinks used in categories. If the category uses a background color,
then we must invert the font color. Example Usage:
id}">{$board->name}
|
or
{$catid->name}
|
*/
.category_navlink {
/* Reset the size to be the same as for the moduletitle */
font-size: x-large;
font-weight: normal;
color: #577A5B; /* =MODULE_TITLE_FONT_COLOR= */
text-decoration: none;
}
/* ==============================
== Navigation Menu Buttons
============================== */
/* Navlink button is used only in SOME navigation menus such as Expanding_hierarchy_Buttons.
This class is used for the wrapping table, for the individual table cells,
and for the links in the table.
class="navlink navlinkbutton"
class="navlink navlinkbutton navlinkcurrent navlinkcurrentbutton"
*/
table.navbutton {
border: solid thin WHITE; /* =MAIN_BG_COLOR= */
/* For some reason, full width tables cross outside of the container boundaries
in Mozilla but not in netscape.
Narrow this table
*/
width: 100%;
}
/* The normal navbuttons are either of class navbutton or,if the Rounded style
is in effect, of class navbutton_rounded. Unlike most things on this
stylesheet, both are not used, so navbutton_rounded is not just a fine-tune
of navbutton
*/
td.navbutton {
padding: 1px; /* inner space between link and menu box boundaries */
/* margin: 10px; *//* space between containers, shows the generic section color or background */
padding-bottom: 10px;
background-color: transparent; /* altered */ /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
/* border: solid thin #628967; altered */ /* =BORDER_COLOR= */
}
td.navbutton_rounded { /* Used when the rounded style is in effect. Ir is this or td.navbutton, but not both */
border: none;
padding: 4px 0px 4px 0px; /* inner space between menu items */
}
td.navbutton:hover { /* Not honored in IE */
background-color: transparent; /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
}
a.navbutton{
text-decoration: none;
font-size: small;
}
a.navbutton:hover {
color: #666666; /* =BASE2_DARK_COLOR= */
}
/* Chose between =MAIN_BG_COLOR= and =NAVLINK_FONT_COLOR= for the colors here */
td.navbuttoncurrent {
background-color: transparent; /* =TOPNAV_BG_COLOR_CURRENT= */
}
a.navlinkbutton {
font-size: medium;
padding: 2px; /* Needed to give it some offset from box */
text-decoration: none;
/*
font-family: tahoma, arial;
font-size: large;
font-weight: 100;
*/
}
a.navlinkbutton:hover {
color: #628967; /* =NAVLINK_FONT_COLOR= */
}
a.navlinkcurrentbutton {
font-weight: bold;
background-color: transparent;
color: #628967; /* =NAVLINK_FONT_COLOR= */
}
/* Mark non-show-in-menu pages */
.navbutton_hidden {
font-weight: lighter;
font-style: italic;
}
/* ========================================
=== Bring in standard shared elements such as help links and boxes
=== These generally do not need to be changed from look to look
======================================== */
/* =======================================================================
=======================================================================
=========== Start _standard_elements.tpl 6/2010 =======================
=======================================================================
=======================================================================
Changes here cause all looks to be recompiled. (see theme/compile_style_ifneeded) DEVBOX must be set.
Note: Control-refresh is sometimes needed for the browser to notice the changes in the CSS
Changed to cause new .premainarea to be picked up
*/
/* The userguide_navlink class is used only for links to the hotdoodle manual
and when used it is always used with navlink as well. e.g.
class='navlink userguide_navlink'
The class is optional, but if not set these userguide links might be too prominent
*/
.userguide_navlink {
font-size: x-small;
height: 16px;
text-decoration: underline;
}
/* The following are used for help on forms.
Help boxes are the expanding help. Tipboxes are always open
*/
.helpbox {
border: 1px solid #628967; /* =BORDER_COLOR= */
padding: 4px;
background-color: #FFFFCC; /* =HELP_BG_COLOR= */
color: #333333; /* =HELP_COLOR= */
text-align: left;
}
.tipbox {
width: 30%;
}
/* The doodlelink_help class is used for those very common help icons
and when used it is always used with doodlelink as well. e.g.
class='doodlelink doodlelink_help'
The class is optional, and it is present just so the userguide
icon can be properly highlighted if needed
*/
a.doodlelink_help:hover {
border: 1px solid black;
}
/* Unqualified spans are used for theme display, file upload
article status
It is probably best if it resets the color to the system default
*/
span.system {
color: #222222; /* =MAIN_FONT_COLOR= */
}
/* ==============================
== Doodlelink
============================== */
/* The doodlelink is used for things like the edit and permission icons.
It should be visually small, but visually distinctive (such as being red).
Should generally be set the same as a.mngmtlink, but perhaps smaller
It is an optional class, always being used in a sequence of the following
class="mngmntlink doodlelink"
*/
a.doodlelink {
font-size: x-small;
text-decoration: none;
color: red; /* =MANAGEMENTLINK_FONT_COLOR= */
/* If links are not differentiated in color,
then make them standout by weight, font, decoration, or background color */
/* Highlighting the font in a slightly different background draws the eye to management links. See EarthYellow */
}
.leftpad { padding-left:4px; } /* Padding Left */
.leftmargin { margin-left:4px;} /* Margin Left */
/* ==============================
== Errors
============================== */
/* .error is used in divs reporting a user error such as a bad tar format in an
uploaded file. It us used stand-alone. e.g.
Uploads have been disabled.
It should be noticable
*/
.error {
font-weight: bold;
color: red; /* Not the =MAIN_FONT_COLOR=, make it stand out */
padding-bottom: 1em;
}
/* =======================================
=======================================
=======================================
Forms
=======================================
=======================================
======================================= */
/* Forms have titles and headers. Typical usage:
Compose a Message
If you want to send this message to more than one user on the system, simply add their usernames to the list by highlighting them individually and clicking the '>>' button.
{$form_html}
*/
div.form_header {
border-top: 1px solid #628967; /* =BORDER_COLOR= */
border-bottom: 1px solid #628967; /* =BORDER_COLOR= */
margin-bottom: 1em;
}
/* Often the form header will be an expanding help box. It should be made to look like a helpbox.
Typical usage:
*/
div.form_help {
background-color: #FFFFCC; /* =HELP_BG_COLOR= */
color: #333333; /* =HELP_COLOR= */
padding: 4px;
}
div.form_title, .form_title a {
font-size: medium; /* Medium? */
font-weight: bold;
}
.form_title a.videolink {
font-size: smaller;
text-transform: none !important;
border: 0px !important;
}
/* ==============================
== Sometimes we just need things to be smaller such as in calendar summaries
==============================
Example:
--
|
|
Article 1, medium label
|
// For boards
Topic 2
See reply
|
Setting this is pretty much manditory
*/
.title {
font-size: medium;
/* If you want regular titles to be a different color than main divisions, then set it here */
/* color: #222222; */ /* Anything except for =MODULE_TITLE_FONT_COLOR=, because that color would be there by default */
/* If you use a contrasting background-color, you should set the padding so that the text
is not too close to the colored rectangle.
*/
}
/* The following are used only when articles have images
They are mainly to give a striking grid
*/
.article_title {
/* Place some whitespace between articles */
border-top: 3px solid WHITE;
}
.article_left_image {
border-right: 3px solid WHITE;
}
.article_right_image {
border-left: 3px solid WHITE;
}
/* =======================================
=======================================
=======================================
Fine Tune BreadCrumb and You are Here
=======================================
=======================================
======================================= */
/* The You are Here classes are used in navigation breadcrumb and youarehere views
These typically are used as page titles so the HTML generator
special cases an extra class on them. In here you can set the font to be huge, set
background or boundaries, and otherwise make the section stand out
*/
.youarehere_modulebody {
font-size: xx-large;
padding-left: 8px;
padding-right: 4px;
width: 100%;
/* Either set color or shading */
color: #577A5B; /* =MODULE_TITLE_FONT_COLOR= */
background-color: transparent; /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
}
/* You also need to override the navlink to be the same font size */
a.youarehere_navlink {
font-size: xx-large;
color: #577A5B; /* =MODULE_TITLE_FONT_COLOR= */
}
/* These affect the fields on the forms */
input, textarea, select {
background-color: #EEEEEE; /* =ALT_BG_COLOR= */
font-size: x-small;
color: #222222; /* =MAIN_FONT_COLOR= */
padding-top: 0px; padding-bottom: 0px; padding-right: 0px;
padding-left: 2px;
}
input.button {
border-style: outset;
/* border-color: #628967; */ /* =BORDER_COLOR= */
/* border-width: 2px; */
}
/* Bring in standard formatting for option buttons on forms */
/* =======================================================================
=======================================================================
=========== Start _opbuttons.tpl 9/2009 ===============================
=======================================================================
=======================================================================
*/
/* Opbuttons are used within forms to set less commonly used options
They should be smaller and more subtle than are full save buttons such as are used
for save and cancel
Example Usage:
Also for the tabs in container properties
Example Usage:
*/
input.opbutton {
font-size: small; /* Should not be based on base-size */
/* padding: 7px 12px 7px 12px; */
}
/* The buttons should give some feedback when they are hovered, but IE is defective in that
it does not support this. So we instead have a pseudo hover class
instead of input.opbutton:hover
we have input.opbutton_hover
and javascript adds and removes the class as they mouse over and out.
*/
input.opbutton_hover { /* Not honored by IE. */
background-color: #F2F2F2;
/* font-weight: bold; */ /* Can make buttons jump */
text-decoration: underline;
color: black;
}
/* When an opbutton has been clicked and is showing its content, javascript modifies
the class list so that the class opbutton_on is added
Example Usage:
*/
input.opbutton_on {
background-color: #F2F2F2;
border-bottom: 2px solid #F2F2F2; /* Make the button blend into the next element */
color: black;
}
/* View tabs have a thin row below them that makes it more clear that they are tabs.
| ... |
... |
structures. All but one also have style='display:hidden'
The block_control class is just used by the tabs. When they are clicked
they set or unset style='display:hidden' on anything which is a block_control
The middle class, view_control in this case, changes depending on the tab
and exists just for special overrides. There currently are no such overrides.
The third class is
perblock_op_row, or
peruse_op_row
*/
/* The next row is critical
I'd like to make it be
tr.perblock_op_row td.perblock_op
but the color choices get trumped elsewhere
Setting it to
tr.perblock_op_row td
causes the text editor to look funny
However, form tds are of the classes
hdform hdform_label
hdform hdform_field
Note: this used to be
tr.perblock_op_row td.hdform
*/
/*
Restrict to child selectors due to issue with TinyMCE toolbar table
See http://www.w3.org/TR/CSS2/selector.html#child-selectors
*/
tr.perblock_op_row, tr.perblock_op_row > td.perblock_op {
color: BLACK; /* ==BLOCKEDITING_FONT_COLOR== */
font-size: small; /* ==BASE_SIZE== */
font-family: arial, helvetica, sans-serif; /* ==MAIN_FONT_FAMILY== */
background-color: #CCCCCC; /* ==BLOCKEDITING_BG_COLOR== */
}
/* Solve the left padding problem when the colors are not the same */
tr.perblock_op_row td.hdform_label {
padding-left: 2px; /* we need some spacing so as to not start right against the frame */
}
/* The additional elements that are shown and hidden when op buttons are clicked
are in class peruse_op_row. This allows the optional elements to be
visually distinctive
Example Usage: |
*/
.block_editing_form, .block_editing_form td.block_title {
color: BLACK; /* ==BLOCKEDITING_FONT_COLOR== */ /* Some default font colors can be pale and hard to read */
}
/* most looks have a div that sets color. We need to unset it */
span.hdform {
color: BLACK; /* ==BLOCKEDITING_FONT_COLOR== */
}
/* Only the div has padding and offset */
div.block_editing_form { /* was called peruse_properties */
padding: 5px;
background-color: #CCCCCC; /* ==BLOCKEDITING_BG_COLOR== */
width: 98%; /* fits in Mozilla */
}
/* =======================================
=======================================
=======================================
Enable Rounded Op Buttons -- tabs, really
=======================================
=======================================
======================================= */
b.optop{
display:block;
background: transparent;
}
b.optop bb{
display:block;
height: 1px;
overflow: hidden;
background-color: #F2F2F2 /* PERUSEROW_BG_COLOR */
}
b.optop1{margin: 0 5px;}
b.optop2{margin: 0 3px;}
b.optop3{margin: 0 2px;}
b.optop b.optop4 {
margin: 0 1px;height: 2px
}
.roundbody {
background-color: #F2F2F2; /* PERUSEROW_BG_COLOR */
text-align: center;
margin-bottom: 0px;
}
/* ===================== for insert block ====================== */
/* ===================== for insert block ====================== */
/* ===================== for insert block ====================== */
/* ===================== for insert block ====================== */
/* ===================== for insert block ====================== */
/* viewList and staticviewList are used to show the views when a blocktype is clicked
viewlist is used in add block, static view list is used when editing an already added block
These used to differ in that viewlist has absolute positioning, but that
is no longer required. */
table.viewList { /* Used to show the views when a blocktype is clicked */
text-align: left;
width: 500px;
background-color: #F2F2F2; /* ==PERUSEROW_BG_COLOR== */
/* border: 1px solid black; */
/*
position:absolute;
left: 200px;
*/
}
table.staticviewList {
text-align: left;
width: 500px;
background-color: #F2F2F2; /* ==PERUSEROW_BG_COLOR== */
/* border: 1px solid black; */
}
/* viewList_Image is used when showing views in the insert block view selection
Note that views images have no frames, so this class is a bit extra wide and inserts the frame as a background
Example: 
*/
.mainsidebar {
width: 200px;
padding: 20px 25px 15px 25px;
}
.mainarea, .centerarea, .divmain {
height: 400px;
vertical-align: top;
text-align: left;
padding: 25px 35px 15px 35px;
/* set margin-bottom if you want the header bar separated */
/* margin-bottom: 8px; */
}
.header {
}
/* divtop is used in many themes, and stands alone. It used to be called .header, but this conflicted
|
*/
.divtop { /* debatetheme, emptytheme */
/* set margin-bottom if you want the header bar seperated */
min-height:40px;
height:40px;
background-color: #A8C5AC; /* =HEADER_BG_COLOR= */
padding-bottom: 0px;
margin-top: 0px;
padding-top: 30px;
border-bottom: 2px solid #A8C5AC; /* =BASE1_LIGHTEST_COLOR= */
}
/* Sometimes the header can be in a different color.
Setting .divtop .modulebody establishes the default for
elements in the top bar */
.divtop .modulebody {
font-size: xx-large;
font-weight: bold;
color: #577A5B; /* =MODULE_TITLE_FONT_COLOR= */
}
.divtop .text_modulebody {
padding-left: 30px;
padding-right: 30px
}
/* The side to side variant of divtop is used when the header spans the entire width.
Setting the width in here can make the header still look normal
Even if page content makes the page be wider than expected.
*/
.divtop_sidetoside {
width:800px;
}
.mainarea, .centerarea, .divmain {
margin: 20px 0px 10px 0px;
width: 800px;
}
.divfooter { /* Some use this, some use .footer */
}
/* Footer is used in many themes, and is typically a specialization of center area
(even if it is not centered tothe centyer area
Typical Usage:
*/
.divfooter {
height: auto;
background-color: #A8C5AC; /* =FOOTER_BG_COLOR= */
padding-top: 5px;
/* If you want the footer in a different color, say it here */
text-align: center;
padding: 10px 0px 10px 0px;
border-top: 2px solid #8BB191; /* =BASE1_LIGHTER_COLOR= */
}
/* =======================================
=======================================
=======================================
Look specific enhancements
=======================================
=======================================
======================================= */
div.Feature_container_box {
background-color: #A8C5AC; /* =BASE1_LIGHTEST_COLOR= */
}
.Feature_moduletitle {
color: #A8C5AC; /* =BASE1_LIGHTEST_COLOR= */
}
.Feature_modulebody {
font-weight: bold;
font-size: large;
}
div.Feature2_container_box {
}
.Feature2_moduletitle {
background-color: #222222; /* =MAIN_FONT_COLOR= */
color: WHITE;
text-align: center;
text-decoration: underline;
padding-top: 2px; padding-bottom: 2px;
}
.Feature2_modulebody {
font-weight: normal;
font-size: medium;
color: #666666; /* =MINOR_FONT_COLOR= */
text-align: center;
border: 1px dashed #222222; /* =MAIN_FONT_COLOR= */
}
div.Feature3_container_box {
}
.Feature3_moduletitle {
color: #884444; /* =ACCENT2_COLOR= */
text-align: center;
}
.Feature3_modulebody {
color: #884444; /* =ACCENT2_COLOR= */
text-align: center;
}
div.Feature4_container_box {
}
.Feature4_moduletitle {
}
.Feature4_modulebody {
border: 12px groove #EEEEEE; /* =BASE2_LIGHTEST_COLOR= */
padding: 10px;
width: auto;
}
div.Minor_container_box {
/* background-color: #3A513C; */ /* =BODY_BG_COLOR= */
background-color: #00FFFF;
}
.Minor_moduletitle {
font-size: medium;
/* background-color: #3A513C; */ /* =BODY_BG_COLOR= */
color: #628967; /* =BASE1_COLOR= */
}
.Minor_modulebody {
/* background-color: #3A513C; */ /* =BODY_BG_COLOR= */
font-size: x-small;
}
.Minor_modulebody p{
margin: 0;
color: #767676; /* =BASE2_COLOR= */
line-height: 1.7;
}
.Minor_modulebody a:link,.Minor_modulebody a:active,.Minor_modulebody a:visited{
text-decoration: underline;
color: #CC6666; /* =ACCENT3_COLOR= */
}
div.Minor2_container_box {
background-color: #FFFFCC; /* =ACCENT4_COLOR= */
}
.Minor2_moduletitle {
font-size: medium;
background-color: #FFFFCC; /* =ACCENT4_COLOR= */
}
.Minor2_modulebody {
font-size: 14px;
background-color: #FFFFCC; /* =ACCENT4_COLOR= */
}
div.Minor3_container_box {
}
.Minor3_moduletitle {
font-size: medium;
}
.Minor3_modulebody {
font-size: 14px;
}
div.Minor4_container_box {
}
.Minor4_moduletitle {
font-size: 10px;
font-weight: bold;
}
.Minor4_modulebody {
font-size: 10px;
}
/* Style for picture on splash type landing page */
.Splashpic_moduletitle {
}
.Splashpic_modulebody {
}
.Splashpic_container_box {
margin-left: 30px;
}
/* ========================================
=== Bring in standard non composite styles, new 2/2007 standard
======================================== */
/* =======================================================================
=======================================================================
=========== Start _standard_styles.tpl 1/16/2009 ======================
=======================================================================
=======================================================================
Changes here does NOT cause all looks to be recompiled
*/
/* =======================================
=======================================
=======================================
Some common, but still adjustable, properties
=======================================
=======================================
======================================= */
/* make form titles stand out */
div.form_title, .form_title a {
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
/* padding: 5px 0px 5px 0px; */
background-color: #A8C5AC; /* ==OPTITLE_BG_COLOR== */
color: #577A5B; /* ==OPTITLE_FONT_COLOR== */
}
/* Wizards */
div.wizardmenu { /* Used for pulldown wizards, for the box that opens */
background-color: #e0e0e0;
border: 2px outset #e0e0e0;
left: 0px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 1001;
color: black;
}
div.wizard { /* Wrapping class for wizard visible in main pages */
border: 0px !important;
background-color: #B1C4C9 !important;
padding: 25px !important;
/* width: 600px !important; */
width: 95%;
margin-left: auto;
margin-right: auto;
}
#wizard_details { /* for the details of the step such as shown by the show wizard details/hide wizard details line */
font-size: small;
color: black;
background-color: white;
padding: 25px;
}
div.wizard a.doodlelink {
font-size: small;
color: #0071BD;
}
div.wizard td.title { /* for the WHERE AM I line at the bottom */
font-size: small;
font-weight: bold;
color: #0071BD;
}
div.wizard strong {
font-size: medium;
font-weight: bold;
color: #0071BD;
}
div.wizard span.navlink {
font-size: medium;
font-weight: bold;
color: #0071BD;
}
/* Used when the title is a link, but there is nowhere for it to go. This way most of the link formatting is retained
(makeing the tpls easier) but we zap the underlining.
However, it the look did not use underlining you'd have to do something else in that look just after .title_link.
*/
.title_empty, .title_empty:hover {
text-decoration: none !important;
cursor: default;
}
/* For product galleries
Example Usage:
*/
.product_title_link {
font-size: medium;
text-decoration: none;
}
a.login_forgot, a.login_forgot:visited {
/* for "Forgot Password" */
white-space: nowrap;
font-size: smaller;
}
/* =======================================
== multi col container formatting
======================================= */
.container_col_inner {
padding-right: 3px; /* blank space between cols */
}
.container_col_bar {
border-right: 2px dotted #D3D3D3; /* lightgrey */
}
.container_row_bar {
border-bottom: 2px dotted #D3D3D3; /* lightgrey */
}
/* =======================================
=======================================
=======================================
Special block types
=======================================
=======================================
======================================= */
/* Style Invisible is mainly for containers. It is for a container that is not seen.
For example, in a block hilighted theme, a 2-col container would have its
2 cols of contents in the block background. Using the invis container
shows the blocks without a noticalbe change in background.
*/
div.Invis_container_box {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
transparent allows the background image to come through */
border: none;
}
.Invis_moduletitle {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
It should be the same as for Invis_container_box
so that the text does not seem to be highlighted */
/* Also unset any padding so there is no visible mark of the block's presence */
padding-left: 0px;
padding-right: 0px;
}
.Invis_modulebody {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
It should be the same as for Invis_container_box
so that the text does not seem to be highlighted */
/* Also unset any padding so there is no visible mark of the block's presence */
padding-left: 0px;
padding-right: 0px;
}
div.Center_container_box {text-align: center;}
div.Center_container_box td {text-align: center;} /* Takes care of embedded tables */
.Center_moduletitle {text-align: center;}
.Center_modulebody {text-align: center;}
div.Left_container_box {text-align: Left;}
div.Left_container_box td {text-align: Left;}
.Left_moduletitle {text-align: Left;}
.Left_modulebody {text-align: Left;}
div.Right_container_box {text-align: Right;}
div.Right_container_box td {text-align: Right;}
.Right_moduletitle {text-align: Right;}
.Right_modulebody {text-align: Right;}
/* div.Wide_container_box {width: 100%;}
.Wide_moduletitle {width: 100%;}
.Wide_modulebody {width: 100%;} */
div.Bottom_container_box {vertical-align: bottom;}
div.Bottom_container_box td {vertical-align: bottom;}
.Bottom_moduletitle {vertical-align: bottom;}
.Bottom_modulebody {vertical-align: bottom;}
div.Top_container_box {vertical-align: top;}
div.Top_container_box td {vertical-align: top;}
.Top_moduletitle {vertical-align: top;}
.Top_modulebody {vertical-align: top;}
/* Containers insert BRs between adjacient containers
The margin here defines the dividers in the site
*/
br.container {
}
br.Compact_container {
line-height: 0px;
padding: 0px;
margin: 0px;
}
div.Compact_container_box {
padding: 0px;
margin: 0px;
}
div.Header_container_box {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
transparent allows the background image to come through */
border: none;
vertical-align: bottom;
}
div.Footer_container_box {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
transparent allows the background image to come through */
border: none;
vertical-align: bottom;
}
div.Sidebar_container_box {
}
.AltSidebar_container_box {
}
/* =======================================
=======================================
=======================================
Premain Area
=======================================
=======================================
======================================= */
.premainarea {
background-color: WHITE; /* =MAIN_BG_COLOR= */
}
/* =======================================
=======================================
=======================================
Picture Block Formatting
=======================================
=======================================
======================================= */
/*
.picture_nodescription {}
td.picture_above {
padding-bottom: 5px;
}
td.picture_below {
padding-top: 5px;
}
*/
td.picture_left {
padding-right: 10px;
}
td.picture_right {
padding-left: 10px;
}
/* =======================================
=======================================
=======================================
Common Combos
=======================================
=======================================
======================================= */
/* =======================================
=======================================
=======================================
Common Singilar styles
=======================================
=======================================
======================================= */
div.Box100w_container_box {
width: 100px;
}
div.Box200w_container_box {
width: 200px;
}
div.Box250w_container_box {
width: 250px;
}
div.Box300w_container_box {
width: 300px;
}
div.Box100h_container_box {
height: 100px;
}
div.Box200h_container_box {
height: 200px;
}
div.Box250h_container_box {
height: 250px;
}
div.Box300h_container_box {
height: 300px;
}
div.FrameBold_container_box {
border: 12px groove #EEEEEE; ; /* =ALT_BG_COLOR= */
padding: 10px;
}
div.FrameModerate_container_box {
border: 6px groove #628967; /* =BORDER_COLOR= */
padding: 5px;
}
div.FrameSubtle_container_box {
border: 2px solid #628967; /* =BORDER_COLOR= */
padding: 2px;
}
div.LightGray_container_box {
background-color: #DDDDDD;
}
.LightGray_moduletitle {
background-color: #DDDDDD;}
.LightGray_modulebody {
background-color: #DDDDDD;
color: #222222; /* =LIGHT_BG_FONT_COLOR= */
}
div.Aqua_container_box {
background-color: #CCFFFF;
}
.Aqua_moduletitle {
background-color: #CCFFFF;
}
.Aqua_modulebody {
background-color: #CCFFFF;
color: #222222; /* =LIGHT_BG_FONT_COLOR= */
}
div.Pink_container_box {
background-color: #FFCCFF;
}
.Pink_moduletitle {
background-color: #FFCCFF;
}
.Pink_modulebody {
background-color: #FFCCFF;
color: #222222; /* =LIGHT_BG_FONT_COLOR= */
}
div.Yellow_container_box {
background-color: #FFFFCC;
}
.Yellow_moduletitle {
background-color: #FFFFCC;
}
.Yellow_modulebody {
background-color: #FFFFCC;
color: #222222; /* =LIGHT_BG_FONT_COLOR= */
}
div.SmallText_container_box { }
.SmallText_moduletitle {}
.SmallText_modulebody {
font-size: medium;
}
div.BigText_container_box { }
.SBigText_moduletitle {}
.BigText_modulebody {
font-size: medium;
}
div.Wide_container_box {width: 100%;}
.Wide_moduletitle {width: 100%;}
.Wide_modulebody {width: 100%;}
div.Tall_container_box {height: 100%;}
.Tall_moduletitle {height: 100%;}
.Tall_modulebody {height: 100%;}
div.Help_container_box { /* Help style is used for site instructions. Added 10/2006 */
border: 4px solid #628967; /* =BORDER_COLOR= */
padding: 4px;
padding-top: 22px;
background: #FFFFCC url("/hotdoodle_engine/iconset/doodle_instructions.gif") no-repeat top left;
}
.Help_moduletitle { background-color: #FFFFCC;} /* =HELP_BG_COLOR= */
.Help_modulebody { background-color: #FFFFCC;} /* =HELP_BG_COLOR= */
div.Wizard_container_box {
border: 4px solid #FFFFCC; /* =BORDER_COLOR= */
padding: 4px;
/*
padding-top: 22px;
background: url("/hotdoodle_engine/iconset/doodle_wizard.gif") no-repeat top left;
*/
background: transparent;
}
.Wizard_moduletitle { background-color: transparent; } /* =HELP_BG_COLOR= */
.Wizard_modulebody { background-color: transparent; } /* =HELP_BG_COLOR= */
.shide_moduletitle {
font-size: xx-small !important;
color: #E0E0E0 !important; /* ==HIDDEN_FONT_COLOR== */
background-color: transparent !important;
background-image: none !important;
}
.shide_modulebody, .shide_modulebody h1, .shide_modulebody h2, .shide_modulebody p, .shide_modulebody a {
font-size: xx-small !important;
color: #E0E0E0 !important; /* ==HIDDEN_FONT_COLOR== */
margin: 0px !important;
font-weight: 100 !important;
background-color: transparent !important;
background-image: none !important;
}
.shide_container_box {
font-size: xx-small !important;
color: #E0E0E0 !important; /* ==HIDDEN_FONT_COLOR== */
background-color: transparent;
background-image: none !important;
}
/* .shide2 is used for some generated content that is best seen only by search engines */
.shide2_modulebody, .shide2_modulebody h1, .shide2_modulebody h2, .shide2_modulebody p, .shide2_modulebody a {
line-height: 6px;
overflow: hidden;
height: 10px;
color: #E0E0E0 !important;
}
.side_modulebody a.doodlelink {
color: red !important;
}
/* =======================================
=======================================
=======================================
OpenTable
=======================================
=======================================
======================================= */
/*
OpenTable Style Definitions
OpenTable Style Definitions as at http://www.opentable.com/ism/feed.css
PDF Ref at http://otrestaurant.com/public/pdf/SingleRestaurantSearchModule.pdf?ltms=1245256656340<zo=420
1. .OT_feedTitle This section is enclosed in one tag:
a. | Search For Available Tables at Morton’s, The SteakhouseYou can set a display:none; in the style sheet to hide this entire area. 2. #OT_searchWrapperAll Controls the overall container of the code. Page 3 of 4, Rev. 2008801 3. #OT_searchWrapper Controls the underlying container of the code. 4. .OT_feedTitle Controls the form title tags with regard to font, color, spacing and positioning. 5. #OT_partySizeLbl Controls the word "Party Size". 6. #OT_timeLbl Controls the word “Time”. 7. #OT_dateLbl Controls the word “Date”. 8. #OT_restaurant, #OT_partySize, #OT_time, #OT_date, Control the drop down lists positioning. 9. .feedFormField Control the drop down lists with regard to font, color and spacing. 10. .OT_feedFormfieldCalendar Controls the text box that displays the date. 11. #OT_logo The “Powered By Logo” You can set a display:none; in the style sheet to hide this entire area. 12. #OT_logoLink Link and text above logo. */ /* Add overrides for Default */ #OT_searchWrapperAll { background: WHITE !important; /* Controls the overall container of the code */ } #OT_searchWrapper { background: WHITE !important; /* Controls the underlying container of the code */ } #OT_logo { background: WHITE !important; /* The “Powered By Logo” */ } #OT_logoLink { background: WHITE !important; /* Link and text above logo */ } .sidebar #OT_searchWrapperAll { background: transparent !important; /* Controls the overall container of the code */ } .sidebar #OT_searchWrapper { background: transparent !important; /* Controls the underlying container of the code */ } .sidebar #OT_logo { background: transparent !important; /* The “Powered By Logo” */ } .sidebar #OT_logoLink { background: transparent !important; /* Link and text above logo */ } .divtop #OT_searchWrapperAll { background: #A8C5AC !important; /* Controls the overall container of the code */ } .divtop #OT_searchWrapper { background: #A8C5AC !important; /* Controls the underlying container of the code */ } .divtop #OT_logo { background: #A8C5AC !important; /* The “Powered By Logo” */ } .divtop #OT_logoLink { background: #A8C5AC !important; /* Link and text above logo */ } /* ======================================================================= ======================================================================= =========== End _standard_styles.tpl ================================ ======================================================================= ======================================================================= */ /* ======================================= ======================================= ======================================= Context Specific Overrides ======================================= ======================================= ======================================= */ /* override pesky footer settings */ .textfooter_modulebody { color: #6E9E75 !important; /* =BASE1_LIGHT_COLOR= */ font-size: x-small; font-weight: bold; text-align: center; } /* Change the next 2 items if you want to change the image */ /* The second version of the footer icon */ /* Start Color Table List of variables assigned in this look
List of variables with inherited values End Color Table */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// ===========================
// Note that there are 3 picture_img clases -- one on the div, on the link, and on the image
// The div is the max image size, but not each image will be that big unless they all
// have the perfect aspect ratio.
// ===========================