Note the doodlelink is also used.
*/
img.mngmnt_icon {
}
/* =========================== Containers ============================== */
/* container_box is the main wrapper for all containers. It is invoked by itself. e.g. */
/* container_box is also a wrapper to hold moduletitle and modulebody for all blocks */
div.container_box {
padding: 0px;
margin-bottom: 0px;
}
/* ========================================
=== Bring in standard block outlining, new 2/2007 standard
======================================== */
/* =======================================================================
=======================================================================
=========== Start include of _outlines.tpl ============================
=======================================================================
=======================================================================
Used from nearly all looks
========================================
=== Bring in standard block outlining
========================================
include file="common/_outlines.tpl"
*/
/* 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:
It is followed by another td with the move block ops
Post 7/2014 -- for BOTH HTML5 and for non-HTML5
There is no table holding the items within container_editheader
It is like the div.container_controls
*/
.container_info {
font-size: small;
/* white-space: nowrap; */
color: #58595b; /* =CONTAINER_CONTAINER_CONTROL_FONT_COLOR= */
}
div.container_editheader div.container_editheader_info {
/* float: left; Might not be needed, testing */
text-align: left;
font-weight: bold;
}
div.container_editheader div.container_editheader_block {
float: right;
text-align: left
}
/* If the block has a responsive class (Mobile, Tablet, etc) and is suppressed, and if config blocks is on
There is a "Hidden: " warning. It is intended as a prefix, but it seems to go 100% wide
forcing a new line.
*** Dino TODO ***
usage:
Hidden: Mobile General
*/
span.container_info_hidden {
background-color: yellow; /* TODO */
}
/* 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 #D3E5DC;} /* =CONTAINER_SIDE_CONTROL_BG_COLOR= */
div.side_container_editheader {background-color: #D3E5DC;} /* =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 {
/* Lynn: Not so sure about this. Might be too subtle. Was 3px solid non-grey color */
border: 2px dashed #D3E5DC; /* =CONTAINER_CONTROL_BG_COLOR= */
margin: 5px;
}
div.top_container_editbox {
margin: 0px 0px 4px 0px; }
/* Add a classs that toggles to be visible only when in config blocks */
.in_configblocks {
display: none;
}
div.container_editbox .in_configblocks {
display: block;
}
/* Each Block's Header background color in Structure View*/
div.container_editheader {
padding: 3px;
background-color: #D3E5DC; /* =CONTAINER_CONTROL_BG_COLOR= */
}
/* Pre 7/2014:
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 should show well against the
background color of container_editheader
The class is used alone. e.g.
buttons to manipulate the block go here. These are what used to be outside the block in the editheader
Configure block is also here
Only visible if configure blocks or higher
Note that this div is first, even though it floats to the right
This means that if the block size shrinks this div is on top, but still to the right
buttons describing contents of the block
only visible if in debug blocks mode, or in some add block ops
The best class name here is container_editheader_info, but we use container_info as it was ready in use for this
| Not Categorized | orThe 1 board See all 3 Articles | */ .category_title { } /* 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 { color: #9ECCFF; /* =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: #0071BD; /* =MODULE_TITLE_FONT_COLOR= */ } /* Summaries are the opposite of titles Example Usage:*/ .summary { padding-left: 15px; color: #58595b; /* =MAIN_FONT_COLOR= */ } /* Some things need a deeper indentation and less emphasis. They use summary2 Example: | */ .summary2 { padding-left:15px; color: #555555; /* =MINOR_FONT_COLOR= */ } /* Some tables have alternating highlight rows. example: class="row {cycle values='even_row,odd_row'}" See the "manage page" page for an example */ .hd_row { } .even_row { background-color: #F2F2F2; } .odd_row { } /* 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 { color: #0071bd; } a.mngmntlink:visited { color: #0071bd; } a.mngmntlink:hover { color: #588AC1 } a.mngmntlink_small { font-size: x-small; } a.sharedminicore_mngmntlink { color: red; text-decoration: none; font-weight: bold; } /* 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: #0071bd; /* =MANAGEMENTLINK_FONT_COLOR= */ font-weight: bold; } /* 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" */ .obsolete_navlink { color: #9ECCFF; /* =NAVLINK_FONT_COLOR= */ } .navlink { color: #9ECCFF; /* =NAVLINK_FONT_COLOR= */ text-decoration: none; } a.article_article_navlink { color: #9ECCFF; /* =NAVLINK_FONT_COLOR= */ line-height: 1.5em; } a.article_bulleted_navlink, span.article_bulleted_navlink { font-weight: normal; text-decoration: none; color: #9ECCFF; } .sharedsite_navlink { color: #9ECCFF; /* =NAVLINK_FONT_COLOR= */ } /* Consider also setting a.navlink:hover */ /* 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 { color: #0071BD; /* =MODULE_TITLE_FONT_COLOR= */ /* Reset the size to be the same as for the category bar */ /* font-size: x-large !important; */ font-weight: normal; } a.article_category_navlink { color: black; text-decoration: none; font-weight: bold; padding: 0px; font-size: 12px; } a.navbutton { text-decoration: none; } a.navbutton:hover { } /* ======================================== === 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_elements5.tpl 10/27/2016 ================== ======================================================================= ======================================================================= Changes here cause all CUSTOM looks to be recompiled. Built-in looks incorporate changes automatically only if DEVBOX must be set. Otherwise manage sites recompile styles command needed. (see theme/compile_style_ifneeded) Note: Control-refresh is sometimes needed for the browser to notice the changes in the CSS Components updated 11/05/2016 Used from nearly all responsive looks ======================================== === Bring in standard shared elements such as help links and boxes === These generally do not need to be changed from look to look ======================================== include file="common/_standard_elements5.tpl" Structure of a typical look: Header variable assignments _assign_defaults -- for the rest core stuff: body, div, module title, links nav buttons and navigation menu related classes _standard_elements.tpl title, article, cat fine tune topnav rounded tabs -- todo: explain them _tbox _slideshow _grid _ezpulldownmenus.tpl editor layout areas styles -- feature, etc _standard_styles.tpl style adjustments */ /* ======================================= ======================================= ======================================= Most tables ======================================= ======================================= ======================================= */ /* ======================================================================= ======================================================================= =========== Start _tables.tpl 6/2015 ==================================== ======================================================================= ======================================================================= Supplies formatting for hotdoodle tables Included by _standard_elements when using HTML5. If you change this file you need to change _standard_elements to force a regen of looks */ /* ======================================= Most tables ======================================= */ /* There are many hotdoodle generated tables. This is the basic formatting */ table.table_hd { /* When you want to see the borders, has spacing */ /* replaces
| Username | */ td.header, th.header { background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */ color: #0071BD; /* =MODULE_TITLE_FONT_COLOR= */ font-weight: bold; font-size: small; /* Medium? */ /* No padding if not in a blockish theme */ padding: 0px; } td.header a, th.header a { background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */ /* Don't override the link color */ font-weight: bold; font-size: small; /* Medium? */ padding: 2px; } td.boxed { /* This was called administration_modmgrbody in older stylesheets */ border: 2px solid #43423E; /* =BORDER_COLOR= */ padding-left: 10px; } /* ======================================================================= ======================================================================= =========== End include of _tables.tpl =============================== ======================================================================= ======================================================================= */ /* ======================================= ======================================= ======================================= Help ======================================= ======================================= ======================================= */ /* 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: 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 #43423E; /* =BORDER_COLOR= */ padding: 15px; background-color: #FFFFFF; /* =HELP_BG_COLOR= */ color: #333333; /* =HELP_COLOR= */ text-align: left; border-radius: 5px; box-shadow: 0px 0px 10px #999; } .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 { /* When hover, you will see a border around the help box. HTML4 only*/ border: 1px solid black; } a.doodlelink5_help i.hdfa-help { /* Edit here to affect any form help link */ vertical-align: middle; color: #999999; /* Grey. HotDoodle Orange FB6F03 */ font-size: 20px; /* Ignore the surrounding font size */ } /* make the mouseovered link be a different color, and make the opened link be formatted exactly the same */ a.doodlelink5_help i.hdfa-help:hover, a.doodlelink5_help i.hdfa-helpOpened { /* When hover, you will see a border around the help box. HTML5 only*/ color: #b3b3b3; /* Lighter grey b3b3b3. Brighter HotDoodle Orange FF8B32 */ } /* Make a opened link mouseover to the original closed link color */ a.doodlelink5_help i.hdfa-helpOpened:hover { color: #999999; /* Grey 999999. HotDoodle Orange FB6F03 */ } /* You can make specific adjustments for control type. However if you set the color you may need to redo the hover stuff */ tr.hdform_dropdowncontrol a.doodlelink5_help i.hdfa-help, tr.hdform_yesnocontrol a.doodlelink5_help i.hdfa-help { /* pull down selectors need more room */ /* So WHEN IT IS NEXT TO A DROP DOWN BOX ... */ margin-top: 7px; font-size: 20px; vertical-align: top; } div.hdform__row_dropdowncontrol a.doodlelink5_help i.hdfa-help, div.hdform__row_yesnocontrol a.doodlelink5_help i.hdfa-help { /* pull down selectors need more room */ /* So WHEN IT IS NEXT TO A DROP DOWN BOX ... */ margin-top: 7px; font-size: 20px; vertical-align: top; } .helpClosed, .helpHidden { /* This class is added or removed from what is being hidden by a help link */ /* Example closed helpbox:
| -- |
Articles Block
Articles Block| Picture 4 |
// ===========================
// 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.
// ===========================
2 Items
* When there are no items:
* Items
* ===================== */
div.prodcat_indicator {
width:80px;
height:32px;
cursor:pointer;
color: #0071bd; /* LINK_FONT_COLOR */
padding-left: 36px;
padding-top: 10px;
font-size: xx-small;
background:url(/hotdoodle_engine/looks/images/imagelib/ecommerce/cart1d.png) no-repeat;
}
div.prodcat_indicator:hover {
background-position:0 -40px;
text-decoration: underline;
}
div.prodcat_indicator_noitems, div.prodcat_indicator_noitems:hover {
cursor: auto;
background-position: 0 0px;
color: #58595b; /* MAIN_FONT_COLOR */
}
/* =======================================
=======================================
=======================================
Empty div to clear floating elements
=======================================
=======================================
======================================= */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.clearfix {
display: inline-block; /* IE7not8 */
}
.clearfix:after { /* FF, IE8, O, S, etc. */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* =======================================
=======================================
=======================================
Pass Values to the Code Generator
=======================================
=======================================
=======================================
Sometimes the generator needs to reference CSS colors or fonts
This is done for inline style= declarations
where it would be too tedious to have inherited CSS set everything
*/
/* =======================================
=======================================
=======================================
Spacing - Bootstrap padding between columns and rows
=======================================
=======================================
======================================= */
/* == Rows == */
/* "cb_r" stands for "Container Box Row" */
div.cb_r_last {
margin-bottom: 0px;
}
div.cb_r_notlast_lg {
margin-top: 30px;
margin-bottom: 30px;
}
div.cb_r_notlast_sm {
margin-top: 15px;
margin-bottom: 15px;
}
div.cb_r_notlast_none {
margin-top: 0px;
margin-bottom: 0px;
}
div.cb_r_notlast_bar {
border-bottom: 1px solid #43423E;
}
div.cb_r_first { /* Must be after cb_r_notlast so as to suppress top margin */
margin-top: 0px;
}
/* == Cols == */
.horPadding_sm { /* Never used */
}
.horPadding_lg {
padding-left: 30px;
padding-right: 30px;
}
.horPadding_none {
padding-left: 0px;
padding-right: 0px;
}
.verPadding_sm { /* Never used */
}
.verPadding_lg {
padding-top: 30px;
padding-bottom: 30px;
}
.verPadding_none {
padding-top: 0px;
padding-bottom: 0px;
}
/* =======================================
=======================================
=======================================
Readmore links and buttons
=======================================
=======================================
======================================= */
.readmore_button, .readmore_button:visited {
padding: 8px 30px;
color: #FFF; /* LINK_BUTTON_FONT_COLOR */
background-color: #999; /* LINK_BUTTON_BG_COLOR */
border-radius: 5px;
}
.readmore_button:hover {
color: #FFF; /* LINK_BUTTON_FONT_COLOR */
background-color: #999; /* LINK_BUTTON_BG_COLOR */
}
.readmore_link {
/* Has no overrides from the base navlink */
}
.readmore_link:hover {
}
/* =======================================================================
=======================================================================
=========== End include of _standard_elements.tpl Core -- includes done next =====
=======================================================================
=======================================================================
*/
/* ========================================
=== Bring in standard tbox overlay elements (the pop-over windows)
=== These generally do not need to be changed from look to look v2
======================================== */
/* =======================================================================
=======================================================================
=========== Start include of _standard_tbox.tpl 8/2012 ================
=======================================================================
=======================================================================
Is for the tnybox overlay windows.
*/
.tbox {
position:absolute;
display:none;
z-index:2001; padding:14px 17px;
/* background-color: red; */
}
.tboxinner {
padding:15px;
-moz-border-radius:5px;
border-radius:5px;
background:#ff0 url(/hotdoodle_engine/iconset/tbox_preload.gif) no-repeat 50% 50%;
border-right:1px solid #333; border-bottom:1px solid #333;
background-color: #43423E; /* $OVERLAY_FRAME_COLOR */ }
.tboxmask {
position:absolute;
display:none;
top:0px;
left:0px; height:100%;
width:100%;
background:#F7F7F7; /* OVERLAY_MASK_COLOR */ z-index:800; }
.tboxclose {
position:absolute;
top:0px;
right:0px;
width:30px;
height:30px;
cursor:pointer;
background:url(/hotdoodle_engine/iconset/tbox_close.png) no-repeat;
left:6px;
}
.tboxclose:hover {
background-position:0 -30px
}
/* =======================================================================
=======================================================================
=========== End include of _standard_tbox.tpl =========================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start include of _standard_slideshow.tpl 8/2012 ===========
=======================================================================
=======================================================================
Is for the thumbnail slideshow
*/
/* Static HTML
MMM This is the follow text MMM
{$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: none;
color: #9ECCFF; /* =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: #0071BD; /* =MODULE_TITLE_FONT_COLOR= */
}
/* Summaries are the opposite of titles
Example Usage:
*/
.summary {
padding-top: 8px;
padding-bottom: 5px;
font-size: small;
color: #58595b; /* =MAIN_FONT_COLOR= */
}
/* Some things need a deeper indentation and less emphisis. They use summary2
Example:
*/
.summary2 {
font-size: x-small;
text-align: right;
color: #555555; /* =MINOR_FONT_COLOR= */
}
/* =======================================================================
=======================================================================
=========== End include of _titles.tpl =====================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start include of _grid.tpl 10/2016 ========================
=======================================================================
=======================================================================
Supplies formatting for BS picture grids.
Included by _standard_elements. If you change this file you need to change _standard_elements to force a regen of looks
*/
/* =======================================
=======================================
=======================================
Wrapping divs -- encapuslates the entire grid
=======================================
=======================================
======================================= */
div.grid_albums { /* in html4 this was album_picgrid */
}
/* We support multiple picture aspect ratios. */
div.grid_albums_square {
/* Usage: In the outermost wrapper
*/
}
div.grid_albums_portrait {
}
div.grid_albums_landscape {
}
/* =======================================
=======================================
=======================================
Grid rows
=======================================
=======================================
======================================= */
div.grid_row {
/* this class is present in all grid rows. Allows common formatting
Usage
*/
}
/* =======================================
=======================================
=======================================
Grid cols
=======================================
=======================================
======================================= */
div.grid_col {
/* this class is present in all grid columns. Allows common formatting
Usage
*/
}
/* =======================================
=======================================
=======================================
Picture spacing
note that .mosiac became .grid_spacing_none
=======================================
=======================================
======================================= */
/* To remove all of the white space between images. Sharp corner will apply automatically. */
.grid_spacing_none { /* was "mosiac" */
padding-left: 15px;
padding-right: 15px;
}
.grid_spacing_none .gridImg {
margin: 0px;
border-radius: 0px !important; border: 0px;
}
.grid_spacing_none .col-sm-1, .grid_spacing_none .col-sm-2, .grid_spacing_none .col-sm-3, .grid_spacing_none .col-sm-4, .grid_spacing_none .col-sm-5, .grid_spacing_none .col-sm-6 {
padding: 0px;
}
/* The default / regular spacing */
.grid_spacing_default {
}
.grid_spacing_default .gridImg {
border-radius: 8px;
}
.grid_spacing_default .col-sm-1, .grid_spacing_default .col-sm-2, .grid_spacing_default .col-sm-3, .grid_spacing_default .col-sm-4, .grid_spacing_default .col-sm-5, .grid_spacing_default .col-sm-6 {
}
/* Now lets find a way to easily set the spacing */
/* Generated CSS for spacing=small with padding=8 */
/* 8 spacing, with padding= and margin= */
.grid_spacing_small { /* was "mosiac" */
padding-left: 15px;
padding-right: 15px;
}
.grid_spacing_small .gridImg {
margin: 8px;
border-radius: 0px;
border: 8px;
}
.grid_spacing_small .col-sm-1, .grid_spacing_small .col-sm-2, .grid_spacing_small .col-sm-3, .grid_spacing_small .col-sm-4, .grid_spacing_small .col-sm-5, .grid_spacing_small .col-sm-6 {
padding: 8px;
}
/* Generated CSS for spacing=large with padding=20 */
/* 20 spacing, with padding= and margin= */
.grid_spacing_large { /* was "mosiac" */
padding-left: 15px;
padding-right: 15px;
}
.grid_spacing_large .gridImg {
margin: 20px;
border-radius: 0px;
border: 20px;
}
.grid_spacing_large .col-sm-1, .grid_spacing_large .col-sm-2, .grid_spacing_large .col-sm-3, .grid_spacing_large .col-sm-4, .grid_spacing_large .col-sm-5, .grid_spacing_large .col-sm-6 {
padding: 20px;
}
/* The filler(s) if needed for odd cols */
div.grid_filler { /* for cols w/o pictures, and for the before and after */
}
div.grid_filler_col { /* for middle cols that do not have a picture */
}
div.grid_filler_before, div.grid_filler_after { /* the before and after fillers. needs media query to disappear them */
}
/* =======================================
=======================================
=======================================
Picture frame contents
=======================================
=======================================
======================================= */
.gridImg {
display: block;
width: 100%;
position: relative;
height: 0;
/* padding-top will be set via style= padding: 100% 0 0 0 !important; */
padding-top: 100%;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
}
@media (max-width: 767px) {
.gridImg {
padding: 0 !important;
height: auto;
}
}
.grid_albums_NoCrop .gridImg {
/* This is the color of the filler/added borders */
background-color: transparent; /* IMAGE_BG_COLOR */
}
/* When image title and description are shown, a frame is automatically added to the image. */
.gridImgFrame {
padding: 5px;
border: 1px solid #DDD;
border-radius: 8px;
margin-bottom: 20px;
background-color: #FFFFFF;
}
.gridImgFrame .gridImg {
border: 0px;
border-radius: 0px;
margin-bottom: 0px; /* to override the BootStrap thumbnail class */
}
/* When image title and description are not shown, a frame is automatically removed. */
.gridImgFrame_Pic {
padding: 0px;
}
.gridImgFrame_Pic .gridImg {
border-radius: 8px;
}
div.grid_spacing_none .gridImgFrame {
padding: 0;
border: 0;
margin: 0;
border-radius: 0;
}
.gridImg-title {
margin: 10px;
text-align: center;
font-weight: bold;
height: 25px;
overflow: hidden;
}
.gridImg-description {
margin-bottom: 5px;
height: 50px;
overflow: hidden;
}
.gridImg-descriptionEmpty {
/* Usage: when the description is empty. Note that is has a
*/
}
/* To make the image sharp corner. */
.gridImg-sharpCorner {
border-radius: 0px;
}
/* Overlay Descriptions, they have _Over in their class names */
/*.gridImg-description_Over {
display: block;
width: 100%;
position: absolute;
height: 0;
padding-top: 100%;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
margin: 0px 30px 0px 30px;
opacity: 0;
top: 0;
}*/
.gridImg-description_Over {
position: absolute;
top: 0px;
padding: 15px;
height: 80%;
overflow: hidden;
margin: 0px 15px 30px 0px;
opacity: 0;
text-align: center;
}
.grid_col_Over .gridImgFrame {
padding: 0;
border: none;
border-radius: 0px;
margin-bottom: 0px;
background-color: transparent;
}
.grid_col_Over:hover .gridImg-description_Over {
opacity: 1;
}
.grid_col_Over:hover .gridImg_Over img {
opacity: 0.05;
}
/* =================================================================
=== Aspect Ratio doesn't change anything in mobile screens
================================================================= */
@media (max-width: 767px) {
.gridImg-1, .gridImg-2, .gridImg-3, .gridImg-4, .gridImg-5, .gridImg-6 {
height: auto !important;
}
}
/* To center images horizontally and vertically */
@media (min-width: 768px) {
.gridImg-frameoverwide img { /* Frame is wider than the picture, bars added left and right */
height: auto;
width: 100%;
position:absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
}
.gridImg-frameovertall img { /* Frame is taller than the picture, bars added above and below */
width: auto;
height: 100%;
position:absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
}
.grid_albums_NoCrop .gridImg-frameoverwide img {
height: 100%;
width: auto;
}
.grid_albums_NoCrop .gridImg-frameovertall img {
height: auto;
width: 100%;
}
}
@media (max-width: 767px) {
.gridImg-frameoverwide img, .gridImg-frameovertall img, .grid_albums_NoCrop .gridImg-frameoverwide img, .grid_albums_NoCrop .gridImg-frameovertall img {
width: 100%;
height: auto;
}
}
/* These control the carousel formatting */
/* =======================================
=======================================
=======================================
Carousel (slider)
carousel classes are in bootstrapHD.css
slider_ classes are here in _grid.tpl
=======================================
=======================================
======================================= */
/* These control the carousel formatting
and are always within a
*/
.slider_wrapper {
overflow: hidden;
background-color: #333333;
}
.slider_slide {
}
.slider_slideCrop img {
width: 100%;
height: auto;
position:absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
}
.slider_slideNoCrop img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position:absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
}
.slider_pic_name {
/*color: red;*/
}
.slider_pic_desc {
/*color: green;*/
}
/* To overwrite the carousel arrow colors */
.carousel-control {
color: #FFFFFF !important;
}
/* =======================================================================
=======================================================================
=========== End include of _grid.tpl ==================================
=======================================================================
=======================================================================
*/
/* Mostly for picture album $SKIP_grid= */
/* =======================================================================
=======================================================================
=========== Start include of _picture.tpl 4/2015 ======================
=======================================================================
=======================================================================
Controls the picture size based on the screen size.
*/
div.picture_wrap_img {
text-align: center;
}
div.picture_wrap_desc {
text-align: center;
}
img.picture_25, img.picture_50, img.picture_75, img.picture_100 {
height: auto;
}
@media (min-width: 992px) {
img.picture_25 {
width: 25%;
}
img.picture_50 {
width: 50%;
}
img.picture_75 {
width: 75%;;
}
img.picture_100 {
width: 100%;
}
}
img.picture_mobile_25, img.picture_mobile_50, img.picture_mobile_75, img.picture_mobile_100 {
height: auto;
}
@media (max-width: 991px) {
img.picture_mobile_25 {
width: 25%;
}
img.picture_mobile_50 {
width: 50%;
}
img.picture_mobile_75 {
width: 75%;
}
img.picture_mobile_100 {
width: 100%;
}
}
/* =======================================================================
=======================================================================
=========== End include of _picture.tpl ===============================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start include of _articles.tpl 1/2016 =========================
=======================================================================
=======================================================================
Supplies formatting for BS HTML5 articles.
Included by _standard_elements. If you change this file you need to change _standard_elements to force a regen of looks
*/
/* =======================================
=======================================
=======================================
Article Block
=======================================
=======================================
======================================= */
.article_moduletitle {
color: #F7931E;
}
.article_summary td {
font-size: small;
}
.article_navlink {
font-size: small;
}
.article_title .article_navlink, a.title_empty {
color: #9ECCFF !important;
font-weight: bold;
font-size: small !important;
}
.article_summary img {
padding-left: 10px;
padding-right: 10px;
}
td.article_left_image {
padding-right: 10px;
}
td.article_right_image {
padding-left: 10px;
}
.article_modulebody_default {}
.article_modulebody_rotate {}
.article_modulebody_expandable {}
.article_block_header {
}
.article_category_header {
padding: 15px 0px;
border-bottom: 1px dashed #DDD;
}
.article_category_header .article_category_title {
font-size: 28px;
}
.article_category_header .article_category_count {
font-size: 28px;
}
.article_category_count {
text-align: right;
}
.article_control {
padding-top: 30px;
}
.article_control_edit {
float: left;
}
.article_control_manage {
float: right;
}
.row_article_content {
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #DDD;
}
.article_modulebody_expandable .row_article_content {
border-bottom: 0px;
}
.row_article_content_following_edit {
padding-top: 0px;
}
.row_article_content_cols{}
.row_article_content_floating{}
.article_image{}
.article_image_left{}
.article_image_right{}
.article_image_left_float{
float: left;
padding-right: 10px;
}
.article_image_right_float{
float: right;
padding-left: 10px;
}
.article_main{} /* Class within the col-sm-?? that encapsulates the entire article */
.article_title {
font-size: 18px;
padding-bottom: 15px;
}
.article_title_inactive .article_title_link {
text-decoration: line-through;
}
.article_title_extra {
font-size: 12px;
}
.article_body {
padding-bottom: 15px;
}
.article_readmore {
padding-top: 15px;
padding-bottom: 15px;
}
/* Button Read Full Article */
.article_readmore .article_readmore_button {
/* See readmore_button in standard_elements -- what is special about article that differs from the base and shared readmore_button?
padding: 8px 30px;
background-color: #999;
color: #FFF;
border-radius: 5px;
*/
}
.article_readmore .article_readmore_button:hover {
/* See readmore_button in standard_elements
background-color: #AAA;
*/
}
/* link Read Full Article */
.article_readmore .article_readmore_link {
}
.article_readmore_rowbottom {
margin-top: -10px;
padding-top: 0px;
padding-bottom: 45px;
text-align: right;
}
.article_readmore_rowbottom .article_readmore_link {
/* See readmore_button in standard_elements -- what is special about article that differs from the base and shared readmore_link?
-- what about being in a rowbottom changes for this?
padding: 8px 60px;
background-color: #333;
color: #FFF;
border-radius: 5px;
*/
}
.article_readmore_rowbottom .article_readmore_link:hover {
/* See readmore_button in standard_elements
background-color: #666;
*/
}
/* Table of contents for expandable articles */
.article_toc_cats {
text-align: center;
}
.article_toc_cat {
float: left;
margin-right: 10px;
}
/* =======================================================================
=======================================================================
=========== End include of _articles.tpl ==============================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start include of _discussion.tpl 8/2015 ===================
=======================================================================
=======================================================================
Supplies formatting for BS HTML5 bboards.
Included by _standard_elements. If you change this file you need to change _standard_elements to force a regen of looks
*/
.bb_modulebody_default {
}
.bb_category_header {
padding: 15px 0px;
border-bottom: 1px dashed #DDD;
}
.bb_category_title {
font-size: 28px;
}
.bb_category_header .bb_category_count {
font-size: 28px;
}
.bb_category_count {
text-align: right;
}
.bb_category_description {
padding-top: 15px;
}
.bb_category_control {
}
.bb_category_control_add, .bb_category_control_monitor {
float: left;
padding-right: 20px; }
.bb_category_control_managesubs { }
.row_bb_topic_content {
padding-top: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #DDD;
}
.bb_topic_main{} /* Class within the col-sm-?? that encapsulates the entire article */
.bb_topic_title {
font-size: 18px;
padding-bottom: 15px;
}
.bb_topic_title_inactive {
text-decoration: line-through;
}
.bb_topic_title_extra {
font-size: 12px;
}
.bb_topic_title_text {
float: left;
padding-right: 20px;
}
.bb_topic_title_replies, .bb_topic_title_manage {
float: right;
padding-right: 20px;
}
.bb_topic_title_link {
}
.bb_topic_body {
padding-bottom: 15px;
}
.bb_topic_readmore {
padding-top: 15px;
padding-bottom: 15px;
}
/* Button Read Full Article */
.bb_topic_readmore .bb_topic_readmore_button { /* See readmore_button in standard_elements -- what is special about article that differs from the base and shared readmore_button?
padding: 8px 30px;
background-color: #999;
color: #FFF;
border-radius: 5px;
*/
}
.bb_topic_readmore .bb_topic_readmore_button:hover {
/* See readmore_button in standard_elements
background-color: #AAA;
*/
}
/* Link Read Full Article */
.bb_topic_readmore .bb_topic_readmore_link {
}
.bb_topic_readmore_rowbottom {
margin-top: -10px;
padding-top: 0px;
padding-bottom: 45px;
text-align: right;
}
.bb_topic_readmore_rowbottom .bb_topic_readmore_link {
/* See readmore_button in standard_elements -- what is special about article that differs from the base and shared readmore_link?
-- what about being in a rowbottom changes for this?
padding: 8px 60px;
background-color: #333;
color: #FFF;
border-radius: 5px;
*/
}
.bb_topic_readmore_rowbottom .bb_topic_readmore_link:hover {
/* See readmore_button in standard_elements
background-color: #666;
*/
}
.bb_topic_posted {
padding-bottom: 30px;
font-size: smaller;
text-align: right;
}
.bb_topic_replies{ /* Wrapper around All of the replies */
}
.row_bb_topic_reply { /* used instead of .bb_topic_main{}, is a class that encapsulates the entire reply article */
padding: 15px 30px;
border: 1px solid #DDD;
border-radius: 10px;
margin-bottom: 15px;
}
.row_bb_topic_reply .bb_topic_posted {
padding-bottom: 0px;
}
/* =======================================================================
=======================================================================
=========== End include of _discussion.tpl ============================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start _prodcat.tpl 9/2016 =================================
=======================================================================
=======================================================================
Supplies formatting for BS product catalog. HTML5 only
Included by _standard_elements. If you change this file you need to change _standard_elements to force a regen of looks
*/
/* =======================================
=======================================
=======================================
Product Catalog Block
=======================================
=======================================
======================================= */
.productcatelog_modulebody table {
border-collapse: collapse !important;
}
.productcatelog_modulebody td {
font-size: small;
}
.productcatelog_modulebody td a {
font-weight: bold;
}
/* ===========================================================================
== Once per view stuff
===========================================================================
*/
div.productcatalog {
/* wrapper of ANY product catalog display -- gallery or linear */
}
div.productcatalog_gallery { /* Wraps the gallery -- cat titles and all */
}
div.productcatalog_list { /* Wraps the gallery -- cat titles and all */
}
div.productcatalog_debug { }
div.productcatalog_thin { /* "thin" trigger is 2 col-sm2 or less. Based on computed col% of full width screen */
}
div.prodcat_internal_name { /* for the internal prodcat name shown to admins */
font-weight: bold;
font-size: larger;
opacity:0.8;
filter:alpha(opacity=80);
}
@media (min-width: 992px) {
.productcatalog_showwhen1col {
/* when1col means: show this ONLY when screen size is such that col-sm-1s shown full width
Generater includes it when something is too big to be nicely displayed in a split col screen
but looks ok in a all cols are stacked screen */
display: none !important;
}
.productcatalog_showwhenNOT1col {
}
}
@media (max-width: 991px) {
.productcatalog_showwhen1col {
}
.productcatalog_showwhenNOT1col {
/* whenNOT1col means: show this ONLY when screen size is such that col-sm-1s show side by side
Generated for "filler" divs that are present only to make side by side products have the same height
but not needed when they become above and below. e.g. sound player, desc
*/
display: none !important; /* Do not show this filler div */
}
}
/*
There is a head that occurs once per the product cat, no matter how many cats.
This has search, sort, and the links for new product, view orders, etc
*/
.productcatalog_head {
}
.productcatalog_head_ops {
/* for new product, view orders */
}
.productcatalog_head_user {
/* search, sort */
background-color: #F7F7F7; /* =PRODHEAD_BG_COLOR= */
padding: 10px 0px;
margin: 5px 0px !important;
}
.productcatalog_head_edit {
}
.productcatalog_head_search {
/*background-color: #FAFAFA;
padding: 10px 0px;*/
border-radius: 5px;
/*margin: 5px 0;*/
}
.productcatalog_head_search form {
width: 100%;
}
.productcatalog_head_sort {
/*background: #39F; */
text-align: right;
}
.productcatalog_head_sort form {
float: right;
}
.productcatalog_cathelp { /* The Catagory List label shown when it is just a display of cats */
font-weight: bold;
padding-bottom: 30px;
}
.cartHidden { /* Added to global prodcat Update Cart buttons to hide them, unhidden by javascript when checkboxes or Qntys are altered */
opacity:0.3;
filter:alpha(opacity=30);
display: none;
}
/* ===========================================================================
== Once per cat stuff
== Not present if cats are not enabled,
== except if in edit mode, where the commands are needed
===========================================================================
*/
/*
*/
.productcatalog_category {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #DDD;
}
.productcatalog_category_img {
/* width: 25% */
display: inline-block;
width: 130px;
padding-right: 15px;
vertical-align: middle;
}
div.productcatalog_debug .productcatalog_category_img {
background-color: blue;
}
.productcatalog_category_edit {
/*background: #39F; */
padding-top: 15px;
position: absolute;
right: 30px;
}
.productcatalog_category_txt {
font-weight: bold;
font-size: 18px;
display: inline-block;
vertical-align: middle;
padding-right: 15px;
}
.productcatalog_category_txt_label {
float: left;
}
.productcatalog_category_txt_seeall {
float: right;
}
@media (min-width: 920px) {
.productcatalog_category_txt {
padding-top: 20px;
}
.productcatalog_category_edit {
padding-top: 20px;
}
}
@media (max-width: 919px) {
.productcatalog_category_txt {
padding-top: 5px;
}
.productcatalog_category_edit {
padding-top: 5px;
}
}
@media (max-width: 767px) {
.productcatalog_category_txt {
padding-top: 0;
}
}
/* ===========================================================================
== Once per chunk of cats/products
===========================================================================
*/
.productcatalog_content { /* Wraps the main display of products, cats, etc */
}
.productcatalog_content_prodgal {
}
.productcatalog_content_catgal {
}
/* ===========================================================================
== Once per row of cats/products
===========================================================================
*/
.productcatalog_prodgal_row {
/* Product Gallery row */
}
.productcatalog_catgal_row {
/* Category_Gallery row */
}
.productcatalog_contentrow {
margin-top: 15px;
}
/* ===========================================================================
== Once per product
===========================================================================
*/
.productcatalog_catgal_item {
/* Category_Gallery row */
}
.productcatalog_catgal_item_img {
}
.productcatalog_catgal_item_info {
text-align: center;
font-weight: bold;
font-size: larger;
}
.productcatalog_product {
padding-top: 20px;
padding-bottom: 20px;
}
.productcatalog_product_inactive {
/* for inactive product, or cat, seen only by admins */
opacity:0.4;
filter:alpha(opacity=40);
}
.productcatalog_product_draggable {
/* When this cell is in a dragdrop zone */
}
.productcatalog_product_draggable_debug {
border: 2px dashed green;
}
.productcatalog_productname, .productcatalog_categoryname {
/* not in all prodcats, but when it is is in all prods have it */
text-align: center;
height: 1.5em;
overflow: hidden;
}
font-size: 12px;
font-weight: normal;
height: 1.1em;
}
}
*}
.productcatalog_list .productcatalog_productname, .productcatalog_list .productcatalog_categoryname {
text-align: left;
font-weight: bold;
font-size: 18px;
}
.productcatalog_price {
text-align: center;
font-size: 18px;
font-weight: bold;
/*min-height: 20px;*/ /* Height is needed because sometimes the div is empty but present because another on the row has a price */
height: 1.5em;
overflow: hidden;
white-space: nowrap;
}
font-size: 12px;
font-weight: normal;
height: 1.1em;
}
}
*}
.productcatalog_list .productcatalog_price {
text-align: left;
min-height: 0px;
}
.productcatalog_oldprice {
/* to be used in a span */
font-weight: normal;
text-decoration: line-through;
margin-right: 10px;
color: #AAA;
}
.productcatalog_ordering { /* In here is where we display the ordering -- quantity, add to cart, etc */
margin-top: 10px;
text-align: center;
}
.productcatalog_list .productcatalog_addtocartbutton {
text-align: left;
margin-top: 15px;
}
.productcatalog_addtocartbutton input.button {
/*background-color: #0C3;
border: none;
border-radius: 5px;
padding: 7px 30px;
color: #fff;*/
font-size: small;
}
.productcatalog_productimg {
/* Holds the image. Image aspect ratio is provided by the standard calls */
}
.productcatalog_product_onsale .imagehandler_frame:before {
content: "SALE";
font-size: 16px;
font-weight: bold;
background-color: #ea7b2a;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
width: 54px;
height: 54px;
color: #FFF;
border-radius: 50%;
position: absolute;
top: 20%;
left: -2%;
z-index: 100;
text-align: center;
padding-top: 16px;
}
@media (min-width: 992px) {
.productcatalog_product_onsale_medium .imagehandler_frame:before {
font-size: 8px;
width: 27px;
height: 27px;
top: 10%;
padding-top: 8px;
}
}
.productcatalog_product_isnew .imagehandler_frame:before {
content: "NEW";
font-size: 16px;
font-weight: bold;
background-color: #ea7b2a;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
width: 54px;
height: 54px;
color: #FFF;
border-radius: 50%;
position: absolute;
top: 20%;
left: -2%;
z-index: 100;
text-align: center;
padding-top: 16px;
}
.productcatalog_productimg_select {
/* For the select the thumbnail... dialog */
position: relative;
overflow: hidden;
border: 1px solid #DDD;
height: 20px; /* Height is needed because sometimes the div is empty but present because another on the row has a price */
}
.productcatalog_productsound {
/* For the sound sample player */
position: relative;
overflow: hidden;
border: 1px solid #DDD;
height: 40px; /* Height is needed because sometimes the div is empty but present because another on the row has a price */
}
/* The summaries are the last item shown. Both because it has the most detail, and because it is the most variuable in height.
By being last it does not matter what goes under it */
.productcatalog_list .productcatalog_details {}
.productcatalog_summary {
height: 1.5em;
overflow: hidden;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
div.productcatalog_debug .productcatalog_summary {
background-color: lightblue;
}
.productcatalog_list .productcatalog_summary {
max-height: 100px;
overflow: hidden;
margin-bottom: 5px;
margin-top: 5px;
text-align: left;
}
.productcatalog_summary_long {
height: 200px;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
.productcatalog_list .productcatalog_summary_long {
max-height: 200px;
overflow: hidden;
margin-bottom: 5px;
margin-top: 5px;
text-align: left;
}
.productcatalog_controls {
/* For the edit, move, etc */
text-align: center;
height: 1.5em;
}
/* ===========================================================================
== Product Catalog Cart Indicator
===========================================================================
*/
.productcatalog_floatCart {
background-color: #4D4D4D;
color: #FFF;
padding: 8px 30px;
position: fixed;
bottom: 0;
left: 5%;
z-index: 200;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
font-size: 16px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.productcatalog_floatCart a {
color: #FFF;
}
.productcatalog_cart a {
font-size: 16px;
color: #333;
background-color: #FAFAFA;
padding: 8px 30px;
border-radius: 5px;
border: 1px solid #CCC;
line-height: 3em;
}
.productcatalog_cart a:hover {
background-color: #FDFDFD;
}
.productcatalog_cart_left {
text-align: left;
}
.productcatalog_cart_center {
text-align: center;
}
.productcatalog_cart_right {
text-align: right;
}
/* ===========================================================================
== Cart Summary
===========================================================================
*/
.productcatalog_cartSummary {
border-top: 1px dashed #DDD;
border-bottom: 1px dashed #DDD;
padding: 30px 0px;
margin: 15px 0px;
/* background-color: #FFEEEE; */
}
div.productcatalog_cartSummaryWinner {/* wrapper of the full display of the winning promo */
border: 10px solid #337ab7;
padding: 0px 0px;
}
.productcatalog_promoList .productcatalog_cartSummaryWinner, /* The winner in the promo table */
.productcatalog_cartSummaryWinner .productcatalog_cartSummary_head
{ /* present on winning promo, header only, if multiple are shown */
background-color: #337ab7;
color: #FFF;
}
.productcatalog_cartSummaryDisqualified {/* present on promo that does not qualify, if multiple are shown */
background-color: lightgrey;
}
.productcatalog_cartSummary_head {
font-size: 24px;
font-weight: bold;
}
.productcatalog_cartSummary_head_title {
font-size: 24px;
font-weight: bold;
}
.productcatalog_cartSummary_head_info {/* Non title info before the table */
font-size: 14px;
font-weight: bold;
}
.productcatalog_cartSummaryWinInfo {/* The line that states this is the winning promo */
color: red;
}
.productcatalog_cartTable {
}
.productcatalog_cartTable td {
vertical-align: top;
/*text-align: left; */
}
.productcatalog_cartTable_qty {
width: 10%;
}
.productcatalog_cartTable_itempic {
width: 7%;
}
@media (max-width: 767px) {
.productcatalog_cartTable_itempic, .productcatalog_cartTable_qty {
display: none;
}
}
.productcatalog_cartTable_itemname {
/* No width, this col gets all the rest */
text-align: left;
}
.productcatalog_cartTable_remove {
width: 10%;
}
.productcatalog_cartTable_remove a {
color: #aaaaaa;
}
.productcatalog_cartTable_remove a:hover {
color: #666666;
}
.productcatalog_cartTable_price {
width: 15%;
text-align: right;
}
.productcatalog_cartTable_price_free {
font-size: smaller;
}
.productcatalog_cartTable_total {
width: 15%;
text-align: right; /* So the .00s line up */
}
.productcatalog_cartTable_itemname{
}
.productcatalog_cartTable_itemname_details{
font-size: smaller;
}
/* Totals under the table */
.productcatalog_cartTotal {/* the entire total table */
/* background-color: yellow */
}
.productcatalog_cartTotal_line {/* a tr within the table.productcatalog_cartTotal */
color: #333;
}
/* the tds within the adjustment lines */
.productcatalog_cartTotal_adjName {
text-align: right;
}
.productcatalog_cartTotal_adjValue {
text-align: right;
width: 15%;
}
.productcatalog_cartTotal_total {/* a specific tr within the table.productcatalog_cartTotal */
font-weight: bold;
font-size: 24px;
}
.productcatalog_cartTotal_promo {/* a specific tr within the table.productcatalog_cartTotal */
}
.productcatalog_cartSummaryOp {
padding-top: 15px;
}
.productcatalog_cartSummaryOp input.button {
}
/* ===========================================================================
== Individual product detail page
===========================================================================
*/
.productcatalog_productDetails_img { /* part 1, typically held within a col-sm-5, wraps the entire image display */
}
.imgArea { /* the main image(s), only one displayed at a time */
}
.imagehandler_shframe { /* holder of a single image, mostly there to be toggled as hidden or not */
}
.thumbnailArea {
padding-top: 15px;
}
.productcatalog_productDetails { /* part 2, typically held within a col-sm-7, wraps the entire product info and ordering */
}
.productcatalog_productDetails_details { /* all about the product, what it is, Nothing about the order */
}
.productcatalog_productDetails_details_title {
font-size: 36px;
}
productcatalog_productDetails_details_subtitle {
}
.productcatalog_productDetails_details_category {
}
.productcatalog_productDetails_details_subdetails {
margin-top: 15px;
}
.productcatalog_productDetails_details_description { /* descriptive things about the product, including pdf or sounds, within a full page */
margin-top: 15px;
padding: 30px;
border: 1px solid #ddd;
}
.productcatalog_productDetails_details_description_sound {}
.productcatalog_productDetails_details_description_file {}
.productcatalog_productDetails_details_description_txt {}
.productcatalog_productDetails .productcatalog_productDetails_order { /* part that takes the order. Might display price */
/* the margin and such is ONLY when it is seen on a product details page */
margin-top: 15px;
height: 2.1em;
}
.productcatalog_productDetails_order_options { /* The entire Options/quantity dialog */
}
.productcatalog_productDetails_order_options_quantity {}
.productcatalog_productDetails_order_options_select {
margin-top: 15px;
}
.productcatalog_productDetails_order_options_text {
margin-top: 15px;
}
.productcatalog_productDetails_order_options_ordered {
margin-top: 15px;
}
.productcatalog_productDetails_order_entry { /* checkboxes, quantity entry lines, "remove from cart" */
}
div.productcatalog_debug .productcatalog_productDetails_order_entry { /* makes it easy to spot in a devbox */
border: 2px solid red;
background-color: yellow;
}
/* Give a height to the order entry box, all get the same within a row,
but which is chosen by finding the largest needed within the set.
Like the albums module, the gallery computes a picpercent, which is the width of the cell
-- ADJUSTED for pics per row, presence of filters, and side by side blocks
And like the albums module, some items get suppressed when the % is small
*/
@media (min-width: 992px) {
.productcatalog_productDetails_order_entry_1 { /* 1 line ordering*/
height: 40px;
}
.productcatalog_productDetails_order_entry_2 { /* 2 line ordering*/
height: 70px;
}
}
.productcatalog_productDetails_order_price { /* wrapper around all the pricing divs */
}
.productcatalog_productDetails_order_price_name {
color: green;
}
.productcatalog_productDetails_order_price_original {
text-decoration: line-through;
font-size: 18px;
color: #AAA;
margin-top: 15px;
margin-bottom: -15px;
}
.productcatalog_productDetails_order_price_final {
font-size: 28px;
margin-top: 15px;
}
/* just for within product details */
.productcatalog_productDetails .productcatalog_productDetails_details_addtocart input.button {
margin-top: 15px;
border-radius: 5px;
padding: 10px 50px;
font-size: 18px;
}
/* Just for not-within product details */
.productcatalog_ordering .productcatalog_productDetails_details_addtocart input.button,
.productcatalog_ordering .productcatalog_productDetails_order_options input.button {
margin-top: 5px;
font-size: 13px;
padding: 5px 15px;
}
/* Dynamically shown Update Cart buttons, note the 'Dynamic' in its name
Important: Also change this in _standard_elements.tpl -- for HTML4 sites
*/
.productcatalog_productDetails_order_entry .productcatalog_productDetails_details_addtocartDynamic {
/* to have the input and button stay in one line */
display: inline;
}
.productcatalog_productDetails_order_entry input {
padding: 1px 5px;
}
.productcatalog_productDetails_details_addtocartDynamic input.button {
margin-top: 5px;
font-size: 13px;
padding: 5px 15px;
}
/* ===========================================================================
== checkout prograss bar
===========================================================================
*/
.row_productcatalog_checkoutProgress {
margin-bottom: 30px;
}
.productcatalog_checkoutProgress_tab {
background-color: #999;
color: #fff;
padding: 15px;
position: relative;
}
.productcatalog_checkoutProgress_tab a {
color: #fff;
}
.productcatalog_checkoutProgress_tab_current, /* Second class present on the tab for the current step */
.productcatalog_checkoutProgress_tab_prior:hover /* For selectable prior steps */
{
background-color: #333;
color: #fff;
font-weight: bold;
}
.productcatalog_checkoutProgress_tab_current:after,
.productcatalog_checkoutProgress_tab_prior:hover:after
{
z-index: 100;
position: absolute;
top: 25%;
left: 0%;
content: '';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #FFF;
}
/* ===========================================================================
== Promo section
===========================================================================
*/
.productcatalog_promo {
}
.productcatalog_promo_entered {
padding-top: 20px;
}
.productcatalog_promo_winner {
padding-top: 20px;
padding-bottom: 20px;
}
.productcatalog_promo_entered span.promocode {
padding: 7px 30px;
background-color: #999;
color: #FFF;
border-radius: 5px;
}
.productcatalog_promo_winner span.promocode {
padding: 7px 30px;
background-color: #0c3;
color: #FFF;
border-radius: 5px;
}
/* ===========================================================================
== Producat Catalog Filters
===========================================================================
*/
.productcatalog_filter_expandable { /* One of the +/- property filters on the manage filters screen */
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #E6E6E6;
padding: 5px 30px;
margin-bottom: 5px;
}
.productcatalog_filter_expandable_title:hover .hd_fa {
color: red;
}
.productcatalog_filters {
background-color: #FAFAFA;
padding: 15px;
border-radius: 5px;
margin: 5px 0;
}
.productcatalog_filters_config .productcatalog_filters {
background-color: #FAFAFA;
border: 1px solid #999;
box-shadow: 0 0 10px #666;
}
.productcatalog_filters_config .productcatalog_filters .form_title {
background: linear-gradient(#444, #222);
padding-top: 5px;
padding-bottom: 5px;
}
.productcatalog_filters_title {
font-size: 18px;
font-weight: bold;
border-bottom: 1px dashed #DDD;
margin-bottom: 15px;
padding-bottom: 10px;
}
.productcatalog_filters_price, .productcatalog_filters_props, .productcatalog_filters_category {
border-bottom: 1px dashed #DDD;
margin-bottom: 15px;
padding-bottom: 30px;
}
/* productcatalog_filters_props is a group of productcatalog_filters_prop
productcatalog_filters_prop_vals holds all of the value stuff, including
productcatalog_filters_prop_vals_shown
productcatalog_filters_prop_vals_toggle // for the More... link
productcatalog_filters_prop_vals_more // for what the More... link shows
*/
.productcatalog_filters_price label {
}
.productcatalog_filters_price button {
}
.productcatalog_filters .checkbox {
display: inline-block;
margin-top: 0 !important;
padding-right: 15px;
vertical-align: middle;
}
.col-sm-3 .productcatalog_filters .checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
/* ===========================================================================
== discounted price control with 6-column layout with filter
===========================================================================
*/
.productcatelog_modulebody .col-sm-9 .col-sm-2 .productcatalog_oldprice {
display: none;
}
/* ===========================================================================
== Producat Catalog Export
===========================================================================
*/
.productcatalog_export_status {
border-radius: 5px;
box-shadow: 0 0 10px #999;
padding: 30px;
}
.productcatalog_export_status_details {
/* We use 'success' */
margin-bottom: 30px;
}
/* =======================================================================
=======================================================================
=========== End include of _prodcat.tpl ===============================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start include of _social.tpl 8/25/2016 =====================
=======================================================================
=======================================================================
Supplies formatting for BS social media
Included by _standard_elements5. If you change this file you need to change _standard_elements5 to force a regen of looks
*/
.social_modulebody {
}
header .social_modulebody, footer .social_modulebody, .mainarea .social_modulebody {
font-size: small;
}
.social_links i.fa-social { background-color: #333333;
color: #FFFFFF;
text-align: center;
}
/* =======================================================================
=======================================================================
================ Icon Sizes ===========================================
=======================================================================
=======================================================================
*/
.social_links i.fa {
width: 30px;
height: 30px;
padding-top: 6px;
}
.social_links i.fa-lg {
width: 40px;
height: 40px;
padding-top: 12px;
}
.social_links i.fa-2x {
width: 56px;
height: 56px;
padding-top: 12px;
}
.social_links i.fa-3x {
width: 70px;
height: 70px;
padding-top: 12px;
}
/* =======================================================================
=======================================================================
================ Shapes Styles ========================================
=======================================================================
=======================================================================
*/
i.fa-social-square {
}
i.fa-social-circle {
border-radius: 50%;
}
i.fa-social-roundedcorner {
border-radius: 5px;
}
/* =======================================================================
=======================================================================
================ Horizontal List Styles ===============================
=======================================================================
=======================================================================
*/
.social_links_list {
padding-left: 0px;
font-size: 0px; /* This is to fix a whitespace bug caused by inline-block from child */
}
.social_links_list li {
display: inline-block;
margin: 0px 2px;
font-size: 16px; /* To set the font-size back */
}
/* =======================================================================
=======================================================================
================ Left or Right Floating List Styles ===================
=======================================================================
=======================================================================
*/
/* Do the floating and positioning of the list */
.social_links { /* Always present */
}
.social_links i {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.social_links i:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.social_links_floatleft li, .social_links_floatright li {
list-style-type: none;
}
.social_links_floatleft i.fa-social, .social_links_floatright i.fa-social {
margin-bottom: 1px;
}
.social_links_floatleft {
position: fixed;
left: 0;
top: 10%;
padding-left: 0;
}
.social_links_floatleft .doodlelink5 {
}
div.body_withToolbar .social_links_floatleft {
top: 160px; }
.social_links_floatleft ul {
padding-left: 0;
}
.social_links_floatleft i {
display: block;
}
.social_links_floatright {
position: fixed;
right: 0;
top: 10%;
padding-right: 0;
}
.social_links_floatright .doodlelink5 {
text-align: right;
}
div.body_withToolbar .social_links_floatright {
top: 160px; }
.social_links_floatright ul {
padding-left: 0;
}
.social_links_floatright i {
display: block;
}
/* =======================================================================
=======================================================================
=========== End include of _social.tpl ==================================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start _themeselect.tpl 10/2015 ===========================
=======================================================================
=======================================================================
For configure look, and for adjust look
*/
/* =========================================================
=========================================================
== Select Theme styling
=========================================================
========================================================= */
.theme_premainarea {
margin-bottom: 30px;
}
.theme_intro {
}
.theme_custom_button {
text-align: right;
}
.theme_wrapper {
}
.theme_family {
/*padding-top: 15px;*/
}
.theme_family_title {
padding-bottom: 15px;
font-size: 24px;
font-weight: bold;
}
.theme_family_content {
padding-top: 30px;
border-top: 1px dashed #DDD;
border-bottom: 1px dashed #DDD;
margin-bottom: 30px;
}
.theme_family_theme {
margin-bottom: 30px;
}
.xxtheme_family_theme_selected {
border: 2px solid red;
}
.theme_family_theme_selected:before {
content: "ON";
font-size: 16px;
font-weight: bold;
background-color: #ea7b2a;
opacity: 0.8;
filter: alpha(opacity=80);
width: 54px;
height: 54px;
color: #FFF;
border-radius: 50%;
position: absolute;
top: 20%;
left: 0;
z-index: 100;
text-align: center;
padding-top: 16px;
}
.theme_pic img {
width: 100%;
margin-bottom: 15px;
}
.theme_pic img:hover {
opacity: 0.9;
filter: alpha(opacity=90);
}
.theme_name {
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
background-color: #FFFFFF; /* new {background_gradient color='linear-gradient(#FFFFFF, #F2F2F2)' } */
background: -webkit-linear-gradient(#FFFFFF, #F2F2F2);
background: -o-linear-gradient(#FFFFFF, #F2F2F2);
background: -moz-linear-gradient(#FFFFFF, #F2F2F2);
background: linear-gradient(#FFFFFF, #F2F2F2);
box-shadow: 0px 0px 5px #CCC;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.theme_select_button button {
width: 100% !important;
}
/*
.theme_family_themepic_sticker:before {
content: "SALE";
font-size: 16px;
font-weight: bold;
background-color: #ea7b2a;
opacity: 0.8;
filter: alpha(opacity=80);
width: 54px;
height: 54px;
color: #FFF;
border-radius: 50%;
position: absolute;
top: 20%;
left: 0;
z-index: 100;
text-align: center;
padding-top: 16px;
}*/
/* =========================================================
=========================================================
== Color the custom theme screen
=========================================================
========================================================= */
div.theme_reference {
border: 10px solid red;
background-color: #CCCCCC;
}
.theme_reference input, .theme_reference textarea {
background-color: #CCCCCC;
color: #666666;
}
/* =========================================================
=========================================================
== Adjust Theme styling
=========================================================
========================================================= */
.themeadj_premainarea {
margin-bottom: 30px;
}
.theme_intro {
}
.theme_custom_button {
text-align: right;
}
.themeadj_wrapper {
}
.themeadj_cat { /*padding-top: 15px;*/
}
.themeadj_cat_title {
padding-bottom: 15px;
font-size: 24px;
font-weight: bold;
}
.themeadj_cat_content {
padding-top: 30px;
border-top: 1px dashed #DDD;
border-bottom: 1px dashed #DDD;
margin-bottom: 30px;
}
.themeadj_var {
margin-bottom: 30px;
}
.themeadj_var_showAsReset { /* The entire row, when the reset button is clicked */
opacity: 0.50;
filter: alpha(opacity=50);
}
.themeadj_var_info{
}
.themeadj_var_info_name {
text-align: left;
}
.themeadj_var_info_doc {
font-size: smaller;
}
.themeadj_var_picker{
}
.themeadj_var_button{
}
.themeadj_var_reset{
}
.themeadj_var_currentColor {
height: 18px;
width: 18px;
}
.themeadj_var_label {
font-size: smaller;
width: 30px;
text-align: right;
}
/* =======================================================================
=======================================================================
=========== End include of _themeselect.tpl ===========================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start include of _forms_debug.tpl 11/22/2015 ==============
=======================================================================
=======================================================================
Outlines form fields
when &debug_form=1, or
when debug stored via ?module=administrationmodule&action=session_set&var=FE:debug&val=1
Included by _standard_elements5 (HTML5 only) when ASKED
must set Form_Debug to get it
{default var=Form_Debug value=1}
When present:
The div holding the controls
s
Sort by:
img with link
-- Note that if ANY cat has an image then all have the img div, but some will be empty
becomes
so you can use div.hdform_control for that which affects both, and div.hdform5_control or div.hdformBS_controls for specific ones
*/
/* ====================================
Vivid form fields, visible showhide
seen only when &debug_form=1
div.hdform5_debug wraps all the form fields IF &debug_form=1
*/
/* Mark the part the holds the controls */
div.hdform_debug {
background-color: #FEE; /* pinkish for the engire form */
border: 12px solid green;
}
/* Outline each row */
div.hdform5_debug div.hdform_row,
div.hdformBS_debug div.hdform-group {
border: 2px dashed black;
background-color: lightyellow;
}
/* Make the new form divs be color coded, catch only those coded properly */
div.hdform5_debug div.hdform_row div.hdform_col .hdform_label,
div.hdformBS_debug label.hdform_label {
background-color: #EEF;
border: 2px solid gold;
}
div.hdform5_debug div.hdform_row div.hdform_col .hdform_field,
div.hdformBS_debug div.hdform_field {
background-color: #EFE;
border: 2px solid blue;
}
div.hdformBS_debug div.hdform_filler { background-color: #99F;
border: 2px solid orange;
}
div.hdformBS_debug div.hdform_after { background-color: #99F;
border: 2px solid orange;
}
div.hdformBS_debug div.hdform_afterNL { background-color: #99F;
border: 2px solid orange;
}
/* Mark Show Hide */
div.hdform_debug div.showhide_all, div.hdformBS_debug div.showhide_all {
border: 4px solid green;
}
div.hdform_debug div.showhide_contents, div.hdformBS_debug div.showhide_contents {
border: 4px dashed grey;
}
div.hdform_debug .form-control {
border: 4px solid red;
background-color: gold;
color: blue;
}
div.hdform_debug div.carousel-caption {
/* Make the descriptions be obvious */
color: darkgreen;
}
/* Make the show/hide in the picture album just fade out instead of hiding */
tr.hdform_unused,
div.hdform_debug div.hdform_unused,
div.hdform_debug div.hdform_hidden,
div.hdform_debug fieldset.hdform_hidden
{ /* Used for form rows that are inapplicable. Toggled often by view changes. */
display: block;
opacity: 0.50;
filter: alpha(opacity=50);
margin-left: 200px;
}
/* =======================================================================
=======================================================================
=========== End include of _forms_debug.tpl =================================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start include of _back_to_top.tpl 12/2015 =================
=======================================================================
=======================================================================
Supplies formatting for BS HTML5 articles.
Included by _standard_elements. If you change this file you need to change _standard_elements to force a regen of looks
*/
/* =======================================
=======================================
=======================================
Back to top button
=======================================
=======================================
======================================= */
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(220,220,220, 0.8) url(/imagelib/files/imagegallerymodule/46d6f5f44a74c/gallery172/arrow.png) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
/* =======================================================================
=======================================================================
=========== End include of _back_to_top.tpl ===========================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start _calendar5.tpl 2/8/2016 ============================
=======================================================================
=======================================================================
Used only in HTML5 from standard_elements
*/
/* =======================================
=======================================
=======================================
Calendar Block 5b
=======================================
=======================================
======================================= */
.calendar_mini {
font-size: small;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sidebar .calendar_mini {
width: 100%;
}
.calendar_modulebody table {
background-color: #FFFFFF;
}
.calendar_modulebody td {
font-size: small;
border-color: #E6E6E6;
color: #333333;
}
table.calendar_mini {
border: 1px solid #E6E6E6;
background-color: #FFFFFF;
color: #333333;
}
.calendar_title {
font-size: small !important;
font-weight: bold;
}
.calendar-grid {
width:14.285714%;
height: 100px;
text-align: left;
vertical-align: top;
}
@media (max-width: 600px) {
.calendar-grid {
height: 60px;
/* background-color: yellow; */
}
}
@media (max-width: 370px) {
.calendar-grid {
height: 10px;
/* background-color: orange; */
}
}
.calendar-grid {
text-align: left;
vertical-align: top;
}
@media (max-width: 359px) {
.calendar-grid-debug, .calendar-eventList-info-debug {
background-color: red !important;
}
}
.calendar-grid-disable {
background-color: #F7F7F7;
}
.calendar-grid-100 {
height: 100px;
}
@media (max-width: 600px) {
.calendar-grid-100 {
height: 60px;
}
}
@media (max-width: 360px) {
.calendar-grid-100 {
height: 10px;
}
}
.calendar-grid-67 {
height: 80px;
}
.calendar-events-67 {
font-size: 13px;
}
@media (max-width: 992px) {
.calendar-grid-67 {
height: 80px;
}
.calendar-events-67 {
font-size: 13px;
}
}
@media (max-width: 768px) {
.calendar-grid-67 {
height: 70px;
}
}
@media (max-width: 600px) {
.calendar-grid-67 {
height: 60px;
}
}
@media (max-width: 360px) {
.calendar-grid-50 {
height: 10px;
}
}
.calendar-grid-50 {
height: 60px;
}
.calendar-events-50 {
display: none;
}
@media (max-width: 992px) {
.calendar-grid-50 {
height: 80px;
}
.calendar-events-50 {
display: block;
font-size: 13px;
}
}
@media (max-width: 768px) {
.calendar-grid-50 {
height: 70px;
}
.calendar-events-50 {
display: none;
}
}
@media (max-width: 600px) {
.calendar-grid-50 {
height: 60px;
}
}
@media (max-width: 360px) {
.calendar-grid-50 {
height: 10px;
}
}
.calendar-grid-34 {
height: 10px;
}
.calendar-events-34 {
display: none;
}
@media (max-width: 992px) {
.calendar-grid-34 {
height: 80px;
}
.calendar-events-34 {
display: block;
font-size: 13px;
}
}
@media (max-width: 768px) {
.calendar-grid-34 {
height: 70px;
}
}
@media (max-width: 600px) {
.calendar-grid-34 {
height: 60px;
}
.calendar-events-34 {
display: none;
}
}
@media (max-width: 360px) {
.calendar-grid-34 {
height: 10px;
}
}
tr.calendar_day_names th {
text-align: center;
font-weight:bold;
}
@media (min-width: 768px) {
.calendar_day_names_long-100 { display: table-row; }
.calendar_day_names_medium-100 { display: none; }
.calendar_day_names_short-100 { display: none; }
.calendar_day_names_long-67 {display: none;}
.calendar_day_names_medium-67 { display: table-row; }
.calendar_day_names_short-67 { display: none; }
.calendar_day_names_long-50 {display: none;}
.calendar_day_names_medium-50 { display: table-row; }
.calendar_day_names_short-50 { display: none; }
.calendar_day_names_long-34 {display: none;}
.calendar_day_names_medium-34 { display: none; }
.calendar_day_names_short-34 { display: table-row; }
}
@media (max-width: 767px) {
.calendar_day_names_long-100 {display: none;}
.calendar_day_names_medium-100 { display: table-row; }
.calendar_day_names_short-100 { display: none; }
.calendar_day_names_long-67 {display: none;}
.calendar_day_names_medium-67 { display: table-row; }
.calendar_day_names_short-67 { display: none; }
.calendar_day_names_long-50 {display: none;}
.calendar_day_names_medium-50 { display: table-row; }
.calendar_day_names_short-50 { display: none; }
.calendar_day_names_long-34 {display: none;}
.calendar_day_names_medium-34 { display: table-row; }
.calendar_day_names_short-34 { display: none; }
}
@media (max-width: 369px) {
.calendar_day_names_long-100 {display: none;}
.calendar_day_names_medium-100 {display: none;}
.calendar_day_names_short-100 {display: table-row;}
.calendar_day_names_long-67 {display: none;}
.calendar_day_names_medium-67 { display: none; }
.calendar_day_names_short-67 { display: table-row; }
.calendar_day_names_long-50 {display: none;}
.calendar_day_names_medium-50 {display: none;}
.calendar_day_names_short-50 {display: table-row;}
.calendar_day_names_long-34 {display: none;}
.calendar_day_names_medium-34 {display: none;}
.calendar_day_names_short-34 {display: table-row;}
}
.calendar-date {
border-bottom: 1px dashed #DDD;
margin-bottom: 5px;
background-color: #DDDDDD !important;
color: #333333 !important;
}
@media (max-width: 767px) {
.calendar-date {
border: none;
}
}
@media (max-width: 370px) {
.calendar-date {
margin-bottom: 0px;
}
}
div.calendar-event-link {
margin-bottom: 4px;
max-height: 60px;
overflow: hidden;
}
@media (max-width: 767px) {
.calendar-events {
display: none;
}
td.calendar_long_day_names{ display: none };
}
.calendar-month-link {
color: #333;
}
@media (min-width: 768px) {
.calendar-month-link {
background: linear-gradient(#FCFCFC,#F2F2F2); /* No! use the gradient tpl function */
padding: 7px 9px;
border-radius: 3px;
text-align: center;
box-shadow: 0 1px 3px #CCC;
}
}
.calendar-title {
text-align: center;
}
.calendar-title-month {
font-size: 24px;
font-weight: bold;
text-align: center;
padding-left: 30px;
margin-left: auto;
margin-right: auto;
}
.calendar-title-month-small, .calendar-title-month-alwayssmall {
font-size: 18px;
font-weight: bold;
}
@media (min-width: 640px) {
.calendar-title-month-small { display: none; }
}
@media (max-width: 639px) {
.calendar-title-month-large { display: none; }
}
/* Move the nave and create event from title to the bottom
the create event occurs at the bottom when space is tight, 370 is too small, so trigger on 400 */
.calendar-post-manage .btn-group-cal-nav {display: none;}
@media (max-width: 639px) {
.calendar-title-manage .btn-group-cal-manage { display: none; }
}
@media (min-width: 640px) {
.calendar-post-manage .btn-group-cal-manage {
display: none;
}
}
.calendar-title-manage, .calendar-post-manage {
text-align: right;
}
.calendar-list-Mmode .calendar-title-manage .btn-group-cal-manage, .calendar-list-Tmode .calendar-title-manage .btn-group-cal-manage, .calendar-list-Tmode .calendar-title-manage .btn-group-cal-nav {
display: none;
}
.calendar-list-Mmode .calendar-post-manage .btn-group-cal-manage, .calendar-list-Tmode .calendar-post-manage .btn-group-cal-manage, .calendar-list-Tmode .calendar-post-manage .btn-group-cal-nav {
display: block;
}
.calendar-list-Tmode .btn-sm {
padding: 5px 8px !important;
}
@media (max-width: 992px) {
.calendar-list-Tmode .calendar-title-month {
text-align: left;
}
}
.calendar_monthly thead td {
vertical-align: middle !important;
/* border: none !important; */
}
.calendar_monthly thead td .doodlelink5 {
color: #333;
}
@media (min-width: 768px) {
.calendar_monthly thead td .doodlelink5 {
background: linear-gradient(#FCFCFC,#F2F2F2); /* No! use the gradient tpl function */
padding: 7px 9px;
border-radius: 3px;
text-align: center;
box-shadow: 0 1px 3px #CCC;
}
}
.calendar-eventList-header {
border-bottom: 1px dashed #DDD;
margin-bottom: 5px;
padding-bottom: 5px;
}
.calendar-eventList-title { font-size: 24px;
font-weight: bold;
vertical-align: middle;
}
.calendar-eventList-info {
border-bottom: 1px dashed #DDD;
padding-bottom: 5px;
padding-top: 7px;
margin-top: 5px;
}
.calendar-eventList-info-main {
}
.calendar-eventList-date, .calendar-eventList-info .calendar-eventList-time, .calendar-eventList-info .calendar_paragraph {
padding-top: 7px;
}
.calendar-eventList-details {
}
.calendar-eventList-details-header {
}
.calendar-eventList-details-header .calendar-eventList-time {
float: left;
}
.calendar-eventList-details-header .calendar-eventList-edit {
float: right;
}
.calendar-eventList-detailButton {
text-align: right;
}
@media (max-width: 767px) { /* Auto hide the Event Details button, painted full screen, but shown on a thin screen */
.calendar-eventList-detailButton { display: none; }
}
.showthiscol {
border: 2px solid blue; }
/* =======================================================================
=======================================================================
=========== End include of _calendar5.tpl =====================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start _blog5.tpl 1/21/2016 ================================
=======================================================================
=======================================================================
Used only in HTML5 from standard_elements5
*/
/* =======================================
=======================================
=======================================
Blog Block
=======================================
=======================================
======================================= */
.weblog_modulebody p {
font-size: small !important;
}
.weblog_modulebody {
padding-top: 0px !important;
font-size: small !important;
}
.weblog_category_title {
font-weight: bold;
color: #58595B
}
/* =======================================================================
=======================================================================
=========== End include of _blog5.tpl =================================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start _album5.tpl 1/21/2016 ================================
=======================================================================
=======================================================================
Used only in HTML5 from standard_elements5
*/
/* =======================================
=======================================
=======================================
New Picture Album Block
=======================================
=======================================
======================================= */
td.album_pictures, .album_pictures_Thumbnails, table.album, .album_Thumbnails, div.slideshow_fullsize, .slideshow_wrapper, .slideshow_thumbnails {
padding: 0px !important;
margin: 0px !important;
border-spacing: 0px !important;
border-collapse: collapse !important;
}
.premainarea .slideshow_thumbnails {
display: none;
}
.premainarea .slideshow_wrapper {
box-shadow: 0px 5px 5px #CCCCCC;
margin-bottom: 20px !important;
}
.slideshow_imgprev {
}
.slideshow_imgnext {
}
.slideshow_imglink {
/*opacity: 1 !important;
filter:alpha(opacity=100) !important;*/
}
.slideshow_image img {
left: 0;
}
.body_popup .mainarea, .body_popup .mainarea_table {
padding: 0px;
width: 100%;
height: 100%;
}
div.tbox, .tboxinner {
padding: 0px !important;
margin: 0px !important;
}
div.article_popupbody {
background-color: #F7F7F7 !important;
}
/* =======================================================================
=======================================================================
=========== End include of _album5.tpl =================================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start _picture_block5.tpl 1/21/2016 =======================
=======================================================================
=======================================================================
Used only in HTML5 from standard_elements5
*/
/* =======================================
=======================================
=======================================
Picture Block
=======================================
=======================================
======================================= */
.premainarea .picture_modulebody img {
box-shadow: 0px 5px 10px #CCCCCC;
}
/* Old text editor bug */
.text_modulebody td table td {
font-size: small;
}
.picture_modulebody td {
font-size: small;
}
.picture_modulebody {
}
/* This is for picture caption */
.picture_modulebody .col-md-12 {
float: none;
padding: 30px;
background-color: #FFFFFF;
text-align: left;
}
/* =======================================================================
=======================================================================
=========== End include of _picture_block5.tpl ========================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== Start _hd_tooltip.tpl 2/2016 ==============================
=======================================================================
=======================================================================
Supplies formatting for help tooltipsg. HTML5 only
Included by _standard_elements5. If you change this file you need to change _standard_elements to force a regen of looks
*/
/* =======================================
=======================================
=======================================
hd_tooltip -- see a028_bootstrap_require_extra.js
=======================================
=======================================
======================================= */
/* Make a link a button */
div.hd_tooltip {
}
div.hd_tooltip .tooltip-arrow {
border-bottom-color: #FFF !important;
}
div.hd_tooltip .tooltip-inner {
background-color: #FFF;
color: #333;
font-size: small;
line-height: 1.5em;
text-align: left;
padding: 15px;
box-shadow: 0px 0px 10px #999;
}
div.hd_tooltip_simple .tooltip-inner {
max-width: 500px;
}
div.hd_tooltip_formatted .tooltip-inner {
max-width: 800px;
}
div.hd_tooltip.in {
filter: alpha(opacity=95);
opacity: .95;
}
@media (max-width: 768px) {
div.hd_tooltip_simple .tooltip-inner {
max-width: 500px;
}
div.hd_tooltip_formatted .tooltip-inner {
max-width: 500px;
}
}
@media (max-width: 360px) {
div.hd_tooltip_simple .tooltip-inner {
max-width: 360px;
}
div.hd_tooltip_formatted .tooltip-inner {
max-width: 360px;
}
}
/* =======================================================================
=======================================================================
=========== End include of _hd_tooltip.tpl ============================
=======================================================================
=======================================================================
*/
/* =======================================================================
=======================================================================
=========== End include of _standard_elements5.tpl =====================
=======================================================================
=======================================================================
*/
/* ==============================
== Title
============================== */
/* .title is used by just about every module and is one level less than moduletitle
However, it is used in some links so it must appear after links
in the stylesheet.
It is important that category_navlink looks different than a .title, either by font, size, or highlighting
Otherwise, categories and articles visually intertwine
Examples:
// for articles
Article 1, medium label
// For boards
Topic 2
See reply
Setting this is pretty much manditory
*/
.title {
font-size: 16px;
font-weight: bold;
color: #333333;
}
/* Particular to HDMain */
.article_title {
}
.article_title_bulleted {
}
a.article_title_link {
}
div.article_summary {
font-size: 12px;
padding-left: 30px;
}
/* =======================================
=======================================
=======================================
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: 14pt;
font-weight: bold;
color: #df7004;
width: 400px;
height: 26px;
background-repeat: repeat-x;
background-position: left bottom;
} */
/* a.youarehere_navlink {
font-size: 11px;
color: #666;
} */
/* =========================== hdform ============================== */
.hdform {
/* font-family: helvetica, arial, sans-serif; */ /* setting font family blows up html editor, so leave off for now */
padding: 5px 0px 7px 0px;
}
.hdform_label {
font-size: small;
text-align: left;
}
.hdform_field {
font-size: small;
padding-left: 0;
text-align: left;
}
/* Sometimes we want a link to look like a button, partcularly when (doodlelink dlink=form)
Such links generate as instead of the more common
So you need to define a.button to look like a form button */
p.button {
line-height: 2.3em;
padding: 4px 0px 4px 0px;
text-align: right;
}
a.button, p.button a {
background-color: #555555; /* new {background_gradient color='linear-gradient(#555555, #333333)' } */
background: -webkit-linear-gradient(#555555, #333333);
background: -o-linear-gradient(#555555, #333333);
background: -moz-linear-gradient(#555555, #333333);
background: linear-gradient(#555555, #333333);
padding: 8px 20px 10px;
border-radius: 7px;
text-decoration: none;
color: #FFFFFF !important;
text-shadow: 0px 1px 1px #333;
}
a.button:active, a.button:hover {
color: #FFFFFF;
background-color: #666666; /* new {background_gradient color='linear-gradient(#666666, #444444)' } */
background: -webkit-linear-gradient(#666666, #444444);
background: -o-linear-gradient(#666666, #444444);
background: -moz-linear-gradient(#666666, #444444);
background: linear-gradient(#666666, #444444);
}
a.button_minor, p.button_minor a, a.doodlelink_button_minor {
color: BLACK;
background-color: #E6E6E6;
border: 1px solid #B2B2B2;
font-size: 10px;
font-weight: bold;
line-height: 18px;
padding: 5px 8px 5px 8px;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
a.button_minor:active {
color: BLACK;
background-color: #F2F2F2;
}
a.button_minor:hover {
color: BLACK;
background-color: #F2F2F2;
/*background-image: url("/hotdoodle_engine/looks/images/imagelib/liscenced_images/gallery38/button_stripe_orange_on.gif"); */
}
/* Bring in standard formatting for option buttons on forms */
/* =======================================================================
=======================================================================
=========== Start include of _opbuttons.tpl 11/2/2015 ================
=======================================================================
=======================================================================
Directly included from most looks
== Bring in standard formatting for option buttons on forms
include file="common/_opbuttons.tpl"
*/
/* 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:
They are also the tabs on configure block (Basic / View / Style ...)
These are ...
...
structures. All but one also have style='display:hidden'
The first class, such as editb_control or view_control is just used by the tabs.
we will use "editb" as an example.
When the block control tab "basic" with id='toggle_editb_control'
is clicked it finds all with class editb_control and removes any display:none in its style
while adding ot to the items for the other tabs.
(The tab itself will have opbutton_on added or removed from tis class list)
The next class is
perblock_op_row, or
peruse_op_row
Note that there can be multiple per class. access_control, for example, has more than 7
The first to appear will have
first_op_row
as an additional class.
*/
/*
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: Open Sans, arial, verdana, sans-serif; /* ==MAIN_FONT_FAMILY== */
background-color: #F2F2F2; /* ==BLOCKEDITING_BG_COLOR== */
}
/* 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:
*/
.first_op_row {
padding: 15px 0px !important;
}
tr.peruse_op_row, tr.peruse_op_row td {
background-color: #F2F2F2;
color: BLACK; /* ==PERUSEROW_FONT_COLOR== */
line-height: 2em;
}
tr.peruse_even_op_row, tr.peruse_even_op_row td {
background-color: #DAEAF5;
color: BLACK; /* ==PERUSEROW_FONT_COLOR== */
}
tr.peruse_odd_op_row, tr.peruse_odd_op_row td {
background-color: #F2F2F2;
color: BLACK; /* ==PERUSEROW_FONT_COLOR== */
}
tr.peruse_op_row td a, tr.peruse_op_row td a:hover, tr.peruse_op_row td a:visited
tr.peruse_op_row td a.doodlelink,tr.peruse_op_row td a.doodlelink:hover, tr.peruse_op_row td a.doodlelink:visited {
color: #0071BD !important; /* ==PERUSEROW_LINK_FONT_COLOR== */ /* Some default font colors can be pale and hard to read */
text-decoration: none;
}
tr.peruse_op_row td a.doodlelink:hover {
text-decoration: underline;
}
.op_helpbox { /* The bar that shows mouseover status of options */
border: 1px solid #43423E; /* =BORDER_COLOR= */
background-color: #F6F6F6; /* =HELP_BG_COLOR= */
padding: 4px;
color: #58595b; /* =LIGHT_BG_FONT_COLOR= */
text-align: left;
}
/* =========================================================================
* =========================================================================
* =========================================================================
* Container control Title
* =========================================================================
* =========================================================================
* ========================================================================= */
/* The Title: text is unique
Title:
