/*  Hotdoodle8.tpl:    
	Updated August 2009 with less header padding
	Updated July 2009 with new look and new styles
 	Updated Feb 2009 with marketing callout styles
 	Updated January 2009 with extra footer style
 	Updated: March/April 2008 revisioning of HotDoodle site per marketing consultant
 	Updated Again: August 2008
 	Version: 1/7/2015 {look_dates}
 
*/
/*
This is a look for use with HotDoodle.

============================================================
== Theme Control Variables – see “Theme Variable Documentation” in the Custom Theme screen
============================================================
								
{assign var=BASE_SIZE value='small'}	

{assign var=BODY_WIDTH value=100%}

{assign var=HEADER_HEIGHT value=120px}
{assign var=MAINAREA_HEIGHT value=auto}
{assign var=FOOTER_HEIGHT value=auto}

These affect if blocks are drawn with borders and it titles are shaded
  Only one of BLOCKISH/NONBLOCKISH/MODERATE should be set
	  NONBLOCKISH == Let there be one color, and let images shine through
	  BLOCKISH == Blocks have borders and are inset from them. Links are shaded
	  MODERATE == Some borders
  Sometimes it is useful for sidebars to be marked
  	  SIDEBAR_BORDERS == sidebars will have seperator lines
  	  TITLEBARS == block headers will be shaded or bordered{assign var=NONBLOCKISH value=1}
	  
{assign var=SIDEBAR_BORDERS value=0}
{assign var=LINKDIFFERENTIATION value='SIZE'}

{declare_font gname='Open+Sans:400,300,600,700' edname="Open Sans" family="'Open Sans', sans-serif"} 
{declare_font gname='Open+Sans+Condensed:300' edname="Open Sans Condensed" family="'Open Sans Condensed', sans-serif"}
{declare_font gname='Lora' edname="Lora" family="'Lora', sans-serif"} // Serif font type
{declare_font gname='Rokkitt' edname="Rokkitt" family="'Rokkitt', sans-serif"} // Serif font type similar to Rockwell
{declare_font gname='Pacifico' edname="Pacifico" family="'Pacifico', sans-serif"} // Bold handwriting
{declare_font gname='Satisfy' edname="Satisfy" family="'Satisfy', sans-serif"} // Script

{assign var=MAIN_FONT_FAMILY value='arial, verdana, "ms sans serif", sans-serif'}
{assign var=ALT_FONT_FAMILY value='verdana, georgia, palatino, "palatino linotype", serif'}
{assign var=HEADER_FONT_FAMILY value='Open Sans, helvetica, sans-serif'}
{assign var=TITLE_FONT_FAMILY value='Open Sans Condensed, helvetica, sans-serif'}
{assign var=MENU_FONT_FAMILY value='Open Sans, helvetica, sans-serif'}
{assign var=FORMTITLE_FONT_FAMILY value="Rokkitt, Arial, sans-serif"}

============================================================
== Theme Color and Image Variables – see “Theme Variable Documentation”
============================================================

== BACKGROUND COLORS
{assign var=BODY_BG_COLOR value=#E6E6E6}	
{assign var=CONTENT_BG_COLOR value=transparent}	
{assign var=PREMAIN_BG_COLOR value=transparent}	
{assign var=MAIN_BG_COLOR value=transparent}	
{assign var=FIELD_BG_COLOR value=#FFFFFF}	
{assign var=HEADER_BG_COLOR value=linear-gradient(#000000,#777777)}	 	
{assign var=FOOTER_BG_COLOR value=linear-gradient(#444444,#333333)}				
{assign var=SIDEBAR_BG_COLOR value=transparent}	

{assign var=ODD_ROW_BG_COLOR value=#FFFFFF}
{assign var=EVEN_ROW_BG_COLOR value=#F7F7F7}
{assign var=MODULE_BODY_BG_COLOR value=transparent} 	
{assign var=CONTAINER_BG_COLOR value=transparent} 			
{assign var=MODULE_TITLE_BG_COLOR value=transparent}		
{assign var=NAVLINK_BG_COLOR value=transparent}	 			
{assign var=MANAGEMENTLINK_BG_COLOR value=transparent}		
{assign var=DOODLELINK_BG_COLOR value=transparent}
{assign var=SIDEBAR_MODULE_BG_COLOR value=#FFFFFF}
{assign var=YOUAREHERE_BG_COLOR value=linear-gradient(#FAFAFA,#F2F2F2)}	
{assign var=BUTTONLINK_BG_COLOR value=linear-gradient(#9BC462,#61892C)}		
{assign var=BUTTONLINK_HOVER_BG_COLOR value=linear-gradient(#A8D46E,#8BB551)}			
{assign var=EDITOR_BG_COLOR value=#FFFFFF}	

== FONT COLORS
{assign var=MAIN_FONT_COLOR value=#333333}					
{assign var=MINOR_FONT_COLOR value=#555555}  	
{assign var=HEADER_FONT_COLOR value=#4D4D4D}	
{assign var=FOOTER_FONT_COLOR value=#FFFFFF}			
{assign var=MODULE_TITLE_FONT_COLOR value=#0071BD} 			
{assign var=REVERSE_FONT_COLOR value=#FFFFFF}  	
{assign var=INPUTTEXT_COLOR value=#000000}	
{assign var=HELP_FONT_COLOR value=#FF0000}
{assign var=OPTITLE_FONT_COLOR value=#FFFFFF}					// NOTE: not used

== LINK COLORS
{assign var=LINK_FONT_COLOR value=#0071bd}	
{assign var=HOVER_LINK_FONT_COLOR value=#F7931E}			
{assign var=VISITED_LINK_FONT_COLOR value=#F7931E}
{assign var=NAVLINK_FONT_COLOR value=#9ECCFF}				
{assign var=MANAGEMENTLINK_FONT_COLOR value=#F7931E}				
{assign var=DOODLELINK_FONT_COLOR value=#F7931E}		
{assign var=SIDEBAR_LINK_COLOR value=#D36900}	
{assign var=HOVER_BG_COLOR value=#CCCCCC}
{assign var=CAT_TITLE_FONT_COLOR value=#F7931E}
{assign var=CAT_TITLE_HOVER_FONT_COLOR value=#F7931E}

== MENU
{assign var=VERTICAL_MENU_BG_COLOR value=#FFFFFF}
{assign var=VERTICAL_MENU_HOVER_BG_COLOR value=#F2F2F2}	
{assign var=VERTICAL_MENU_CURRENT_BG_COLOR value=#CCCCCC}
{assign var=VERTICAL_MENU_CURRENT_FONT_COLOR value=#FFFFFF}
{assign var=VERTICAL_MENU_FONT_COLOR value=#2B8FA5}	
{assign var=MENU_BG_COLOR value=linear-gradient(#323232,#080808)}
{assign var=MENU_CURRENT_BG_COLOR value=#151515}
{* assign var=MENU_BG_IMAGE value='http://' *}
{assign var=MENU_FONT_COLOR value=#F2F2F2}
{assign var=MENU_CURRENT_FONT_COLOR value=#0071BD}
{assign var=MENU_HOVER_FONT_COLOR value=#FFFFFF}
{assign var=DROPDOWN_BG_COLOR value=#FFFFFF}	
{assign var=DROPDOWN_HOVER_BG_COLOR value=#F5F5F5}	
{assign var=DROPDOWN_FONT_COLOR value=#333333}	

== PROMINENT STYLE(S)
{assign var=FEATURE1_BG_COLOR value=#cccccc}					

== ALERT BOXES
{assign var=AQUA_BG_COLOR value=#DFF2FF}					
{assign var=AQUA_BORDER_COLOR value=#00A8FF}				
{assign var=PINK_BG_COLOR value=#FFEBEA}					
{assign var=PINK_BORDER_COLOR value=#DD3C10}				
{assign var=YELLOW_BG_COLOR value=#FFFFCC}					
{assign var=YELLOW_BORDER_COLOR value=#FCEE21}				
{assign var=LIGHTGRAY_BG_COLOR value=#EEEEEE}				
{assign var=LIGHTGRAY_BORDER_COLOR value=#CCCCCC}			

== OTHERS
{assign var=BORDER_COLOR value=#43423E}				
{assign var=SHADOW_COLOR value=#CCCCCC}		
{assign var=BUTTON_BG_COLOR value=#69952F}								
{assign var=BASE1_DARK_COLOR value=#4D4D4D}	
{assign var=ARTICLE_TITLE_FONT_COLOR value=#F7931E}
{assign var=CALENDAR_BG_COLOR value=#FFFFFF}
{assign var=CALENDAR_BORDER_COLOR value=#E6E6E6}
{assign var=CALENDAR_FONT_COLOR value=#333333}
{assign var=CALENDAR_DATE_FONT_COLOR value=#333333}
{assign var=CALENDAR_DATE_BG_COLOR value=#DDDDDD}
{assign var=MARKETING_BG_COLOR value=#333333}

==HotDoodle Main
{assign var=PERUSEROW_BG_COLOR2 value=#DAEAF5}
{assign var=CONTAINER_CONTROL_BG_COLOR value=#D3E5DC}
{assign var=PROJECT_TITLE_COLOR value=#0071BD}
{assign var=FEATURE_COLOR value=#B5D5EC}
{assign var=NAV._HIGHLIGHT_BG_COLOR value=WHITE}


== IMAGES
{assign var=BULLET_IMAGE value=''}
{* assign var=LEFT_SIDEBAR_IMAGE value='' *}
{* assign var=RIGHT_SIDEBAR_IMAGE value='' *}
{* assign var=SIDEBAR_MODULETITLE_BG_IMAGE value='' *}
{* assign var=SIDEBAR_MODULEBODY_BG_IMAGE value='' *}
{* assign var=HEADER_BG_IMAGE value='' *}
{assign var=CONTENT_BG_IMAGE value=''}
{assign var=BODY_BG_IMAGE value=''}
{assign var=MODULETITLE_BG_IMAGE value=''}
{* assign var=FOOTER_BG_IMAGE value='' *}





============================================================
== Do some assignments for some things that might not have been set above
============================================================
*/
{include file="common/_assign_defaults.tpl" allow_assignments=true}





/* =================================================================
   =================================================================
   =================================================================
   == CSS Declarations
   =================================================================
   =================================================================
   =================================================================
*/

/* Some themes use a table to place the cols (others use divs)
These will typically have an outer table that uses the .body class
 here effectively sizes the web page.
Typical Usage: <table class="body" cellpadding="0" cellspacing="0" border="0" align="center">




	       appear around the sides. If the content is wide, the page will




	width: 90%; --  the page will expand to almost fill the browser window
		side to side but will have some margins into which the body

   */
.body [
	{if $CONTENT_BG_IMAGE}
		background-image: url('{$CONTENT_BG_IMAGE}'); /* =CONTENT_BG_IMAGE= */
		background-repeat: repeat;
		background-position: top center;
	{/if}
    background: {$CONTENT_BG_COLOR};
	width:{$BODY_WIDTH};
	margin: 0 auto;
    padding: 0px;
	text-align: center;
]

/* "Operations" are the pages that open for actions such as editing and viewing articles
   They declare both the body and the body_operation class
     Typical Usage:  <table border=0 class="body body_operation" align='center' cellspacing="0" cellpadding="0"></table>
   It is up to the look, but generally it is good to be sure to have a clear border around the
   operation area, even if there is not a border around the main site
*/
body .body_operation [
	margin-top: 10px;
	padding: 0px;
]
body .body_operation .mainarea [
	padding: 0 20px !important;
]
.body_operation [
	padding: 0;
        width: 960px !important;
]
.body_operation table.hdform [
	padding-left: 0;
]
.body_operation td.hdform, .body_operation td.hdform .hdform_label, .body_operation td.hdform .hdform_field [
	padding-left: 0;
]


body [
	border: 0px;
	margin: 0px; /* Generally best set to 0 */
	background: {$BODY_BG_COLOR};
	font-family: {$MAIN_FONT_FAMILY};
	color: {$MAIN_FONT_COLOR}; /* =MAIN_FONT_COLOR= */
	font-size: {$BASE_SIZE};
	text-align: center;
	{if $editor}
		text-align: left;
		background-color: {$EDITOR_BG_COLOR}; /* =EDITOR_BG_COLOR= */
	{/if}
]


div [
	font-size: {$BASE_SIZE};
	font-weight: normal;
	background-color: transparent;
	/* Adjusting the font families can affect the site greatly */
	/* font-family: {$MAIN_FONT_FAMILY}; */
	color: {$MAIN_FONT_COLOR}; /* =MAIN_FONT_COLOR= */
	margin: 0px;
	padding : 0px;
    text-align: left;
	/* Altered: New to this look */
	border-spacing: 0;
]

/* It is common for the HotDoodle text editor 
   to leave a block of text that starts with <p>
   This causes undesirable extra space if
   the margin_top is not 0 */
p [
       margin-top: 0px;
]
       /* mngmnt_icon is used for many of the various action images, the red Xs, the up and down arrows, etc
       Example: <img class="mngmnt_icon" src="Doodle_19.gif" border="0"/>
       Note the doodlelink is also used.
       */

img.mngmnt_icon [
]


/* ==============================
   == Containers
   ==   Most blocks are within a container of some kind
   ==   Setting container layout can have a huge effect on look and feel
   ============================== */
/* container_box is the main wrapper for all containers. It is invoked by itself. e.g.
   <div class="container_box">
   */
div.container_box [
	padding: 0px;
	margin-bottom: 0px;
	{if $CONTAINER_BG_COLOR != $MAIN_BG_COLOR} 
		background-color: {$CONTAINER_BG_COLOR};	/* =CONTAINER_BG_COLOR= */ 
	{/if}    
]

div.form_title [
	text-align: left !important;
	padding-bottom: 10px;
]
div.form_header [
	border: 0 !important;
]

/* ========================================
   ===  Bring in standard block outlining, new 2/2007 standard
   ======================================== */
{include file="common/_outlines.tpl"}




/* .moduletitle is used by just about every module
   Example:
   		<div class="moduletitle administration_moduletitle">[$moduletitle]</div>
   		<div class="moduletitle rotator_moduletitle">[$moduletitle]</div>
   		<div class="moduletitle article_moduletitle">[$moduletitle]</div>
   		<div class="moduletitle bb_moduletitle">[$moduletitle]</div>

	Setting this is pretty much mandatory
    */

.moduletitle [
	/* Some get a cool effect by playing with titles
	*/
	font-weight: bold;
	font-size: 18px; /* proposed {$BASE_SIZE|font_size:1} */;
	color: {$MODULE_TITLE_FONT_COLOR}; /* =MODULE_TITLE_FONT_COLOR= */
	/* Don't set the background color if in a totally non blockish theme */
	background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */
	/* If you use a contrasting background-color, you should set the padding so that the text is not too close to the colored rectangle.   */
	padding-left: 0px; padding-top: 0px;
	margin-left: 0px; /* Negative values are honored by Mosilla, but IE treats them as positive, making things worse */
	/* width: 100%;  */ /* Not needed for what is generated in here, and it confuses some browsers */
	/* Centering the text can make a big visual difference */
	/* margin-bottom: 20px; */ /* leave some space between moduletitle and module */
	/* font-family: {$MAIN_FONT_FAMILY}; */
    font-family: {$TITLE_FONT_FAMILY};
]


/* If the container has a visible outline, we will generally we want the title 
   to streatch from end to end of container, but will
   need the contents to have some offset.  For these, set 
   modulebody and modulecontrol to have padding-left and container to have no padding
   
   The modulebody control is actually applied to a table and not a div.
   This is because if the inner content contains a table and the div has padding
   the table might push outside the div (in mozilla), or expand the div (in IE)
   */
.modulebody [
    width: 100%;
    border: none;
	font-family: {$MAIN_FONT_FAMILY};      
]
.text_modulebody, .textsimple_modulebody [
	padding: 7px 0px 15px 0px;
	font-size: {$BASE_SIZE};
	line-height: 1.5em;
	color: {$MAIN_FONT_COLOR};
	font-family: arial, verdana, sans-serif;
]
.text_modulebody td [
        font-size: {$BASE_SIZE};
]

.login_modulebody [
	border-bottom: none;
	margin: 0px;
	padding: 10px; /* 0px in HD main */
	font-family: {$MAIN_FONT_FAMILY};	
]
.mainarea .login_modulebody td [
	text-align: left;
	font-family: {$MAIN_FONT_FAMILY};	
	font-size: 12px;
	padding-right: 5px;
]

.divtop .login_modulebody [
	padding: 0px !important;
	margin: 0px !important;		
]
.divtop .login_register [
	{if $is_ie}
		line-height: 20px;
		margin-left: 275px;
	{else}
		line-height: 25px;
		margin-left: 310px;
	{/if}
	/*font-weight: bold;*/
]
.divtop .login_modulebody td, .divtop .login_modulebody td a [
	font-size: 11px;
	color: #336699;
]
.divtop .login_modulebody input.button [
	border: 1px solid #333333 !important;
	{if $is_ie}
	{else}
		padding-left: 10px;
		padding-right: 10px;
	{/if}
]

/* Elements above and below the header

  The below causes a new row to be above the "<td class="divmain centerarea mainarea" >" in the _operation layout

  We tell the layout we need it via the declare_layout
  and then we declare what we need.

  You can use divtop_above and divtop_below

  Example Usage:
    (if $layout.body_operation_above==1)
   <tr>
     <td valign="top" class="body_operation_above">&nbsp;</td>
   </tr>
  (/if $layout.body_operation_above==1)

It is the same for body_operation_above except that it goes below the row
  */

{declare_layout var=body_operation_above val=1 info='none'}
.body_operation_above [
	height: 10px;
	background-color: {$BODY_BG_COLOR};	/* =BODY_BG_COLOR= */
	background: url("/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/divtopBg.gif") top center;
	background-repeat: no-repeat;
]
{declare_layout var=body_operation_below val=1 info='none'}
.body_operation_below [
	height: 10px;
	background-image: url("/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/footerBg.gif") !important;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-color: {$BODY_BG_COLOR}; /* =BODY_BG_COLOR= */
] 

/* ======= Enable CJ Pay Per Click */
{* declare_layout var=CJ_Pay_per_Call val=6383 *}

.HDlogin_modulebody [
	background: #FFCD8F url("/hotdoodle_engine/layouts/images/HotDoodleTheme3/bg_login.jpg") repeat-x bottom;
	width: 175px;
	height: 110px;
	border: 1px solid #C5C5C5;
	border-bottom: none;
	margin: 0px;
	padding-left: 10px;
]

.login_mngmntlink [
	margin: 0px;	
	color: #336699;
]
a.login_mngmntlink [
	color: #2664BF;
] 


{*
#login_username  [
    color: #666;
    font-size: 10pt;
    height: 14pt;
    background-color: #FFF;
	margin: 4px 0px 0px 6px;
	border-color: #333 #CCC #CCC #333;
]

#login_password  [
    color: #666;
    font-size: 10pt;
    height: 14pt;
    background-color: #FFF;
	margin: 4px 0px 0px 6px;
	border-color: #333 #CCC #CCC #333;
]
*}

.uiswitcher_modulebody  [
	background: url("/hotdoodle_engine/layouts/images/HotDoodleTheme3/bg_login.jpg") repeat-x bottom;
        border: 1px solid #C5C5C5;
        border-bottom: none;
        color: #666;
        font-size: 10pt;
        font-style: oblique;
        padding: 16px;   /* MC: why has padding/value no effect? */

]

.Compact_modulebody [
	padding: 0px;
	margin: 0px;
	border-spacing: 0;
        border-collapse: collapse;
]
.login_moduletitle [
	height: 15px;
	/* Removed lslater 10/2007 padding: 15px; */
	width: 200px;  /* We don't want these extending across big screens */
]

.header [
	vertical-align: bottom;
]

div.article_body [
	padding: 6px;
]


div.article_popupbody [
  background-color: {$HELP_BG_COLOR} !important;
  border: 2px outset #e0e0e0;
  left: 0px;
  padding: 4px;
  position: absolute;
  width: 400px; 
  top: 0px;
  visibility: hidden;
  z-index: 1001;
]


/* Category title is used for article categories and for bb names,
   if not overridden by bb_category_title.
   It is shared to make it easier to keep these things in the same style.
   Note that the biggest item of text in it is of class
      navlink bb_navlink bb_navlink_category, so if you want the categories to
      stand out you need to either do something with borders and backgrounds
      in td.category_title, or else set the optional
      bb_navlink or bb_navlink_category classes
      Mabe hav the cat title shaded, but have the titles of articles be unshaded.
   Examples:
   	<td colspan="2" class="title category_title">Not Categorized</td>
	   or
	<td colspan=2 class="title category_title bb_category_title">
		<a class="navlink bb_navlink bb_navlink_category" href="?module=bbmodule&action=view_category&id=45&more=1&title=Alternative+settings%2C+default+view&src=43e2a5ecbe0a6%40random">The 1 board</a>
		<a class="title_link article_title_link bb_title_link" href="?module=bbmodule&action=view_category&id=45&more=1&title=Alternative+settings%2C+default+view&src=43e2a5ecbe0a6%40random">See all 3 Articles</a>
	</td>

	*/
.category_title [
	font-weight: bold;
	font-size: medium;
		/* If you use a contrasting background-color, you should set the padding so that the text
	   is not too close to the colored rectangle.
	   */


	/* Do not set the background color if in a totally non blockish theme */
	background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */
	/* background-color: WHITE; */ /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
	padding-left: 4px; padding-top: 1px; padding-bottom: 1px;
]
.weblog_modulebody [
	padding-right: 30px;
]

/* After modules and cats, there are items
	Example Use:
		 <td class="itemtitle gallery_itemtitle">[$gallery->name]
		 <div class="itemtitle weblog_itemtitle">[$post->title]
	*/
.itemtitle [ /* imagegallery, newsmodule, weblogmodule. See moduletitle */
	font-weight: bold;
]

.paypal_itemtitle [ 
	
]


/* 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:
     <a href="[link action=view_article id=$article->id]" class="title_link article_title_link">Details...</a>
   */
.title_link [
	font-size: xx-small;
	font-weight: bold;
	text-decoration: underline;
	color: {$NAVLINK_FONT_COLOR}; /* =NAVLINK_FONT_COLOR= */
]

/* If the category title is inversed, then the font must also be inversed
   Example Usage:
		<td colspan=2 class="title category_title bb_category_title">
		<a class="navlink category_navlink bb_navlink" href="[link module="bbmodule" action="view_category" id=$board->id more=1 title=$moduletitle]">[$board->name]</a>
		<a class="title_link category_title_link bb_category_title_link" href="[link module="bbmodule" action="view_category" id=$board->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]</a>
		</td>
   */
.category_title_link [
	color: {$MODULE_TITLE_FONT_COLOR}; /* =MODULE_TITLE_FONT_COLOR= */
]



/* Summaries are the opposite of titles
	Example Usage:
		<td colspan=2 class="summary bb_category_summary">
		<td class="summary article_summary article_faq_summary" colspan="2">

	*/
.summary [
	font-size: x-small;
	padding-left:2em;
	color: {$MAIN_FONT_COLOR}; /* =MAIN_FONT_COLOR= */
]

/* Some things need a deeper indentation and less emphasis. They use summary2
   Example: <td class="summary summary2 bb_thread_posted" >
   */
.summary2 [
	padding-left:4em;
	font-size: xx-small;
	color: {$MINOR_FONT_COLOR}; /* =MINOR_FONT_COLOR= */
]


/* Much of the site is in table columns, so any setting of
   general td will affect many things.
   It is best to not have anything here and to let the general div take care of it all
   */
table [
	vertical-align: top;
    border-spacing: 0;
]

/* Unqualified spans are used for theme display, file upload
   article status

   It is probably best if it resets the color to the system default
  */
span [
	color: {$MAIN_FONT_COLOR}; /* =MAIN_FONT_COLOR= */
]

/* table [
	padding: 0px;
	 width: 100%;   -- Blows the mini calendar
] */

/* Some tables have alternating highlight rows.
   example: class="row [cycle values='even_row,odd_row']"
   See the "manage page" page for an example
   */
tr.hd_row [
]
tr.even_row [
	/*background-color: #DAEAF5;*/ /* =ALT_BG_COLOR= */ /* No longer variable value */
	background-color: #F2F2F2;
]
tr.odd_row [
]
tr.row:hover td, tr.row:hover td a [
	/* background-color: {$FEATURE_COLOR}; */ /* =HOVER_BG_COLOR= */ /* Doesn't work with double consultant rows, disable for right now */
	/* color: #fff; */
]
/* Headers of tables
	Example Use:
		<td class="header administration_header">Username</td>
  */
td.header [
	background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */
	color: {$MODULE_TITLE_FONT_COLOR}; /* =MODULE_TITLE_FONT_COLOR= */
	/*background-color: #B8B8B8;
	color: black;*/
	font-weight: bold;
	font-size: {$BASE_SIZE};  /* Medium? */
	border-bottom: 1px solid #CCC;
	/* No padding if not in a blockish theme */
	padding: 2px 0;
]
td.header a [
	background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */
	/* Don't override the link color */
	font-weight: bold;
	font-size: {$BASE_SIZE};  /* Medium? */
	padding: 2px 0;
]
td.boxed [ /* This was called administration_modmgrbody in older stylesheets */
	border: 2px solid #2763A5;  /* =BORDER_COLOR= */
	padding-left: 10px;
]

.densetable  [ /* Class for view payment transaction and other places where there the data is dense */
	font-size: xx-small;
]

/* ==============================
   == Links
   ============================== */
/* 'a' is for the links the user embeds such as with the wywisig editor.
   Links to other pages in the site are some form of the anavlink class
   and links to functionality (such as add article) are some form of the a.mngmtlink class */
a [
	/*font-weight: bold;*/
	font-weight: normal;
 	/*text-decoration: underline;*/
	text-decoration: none;
	color: {$LINK_FONT_COLOR}; /* =LINK_FONT_COLOR= */
	{if $LINK_FONT_FAMILY != $MAIN_FONT_FAMILY}
	font-family: {$LINK_FONT_FAMILY};
	{/if}
]

/* All of the used links can have a :visited form that changes their color a bit so

   folks can see where they have recently been */
   
a:visited [ /* leaving off for now */
	
]

a:hover [
	color: #588AC1;  /* lighter shade of LINK_FONT_COLOR */
	text-decoration: underline;
 ]
a.title_empty, a.title_empty:hover [
	color: {$LINK_FONT_COLOR}; /* =LINK_FONT_COLOR= */
]
 


/* mngmntlinks (all variants) are for links that do something -- drop a posting,
   join a group, etc. They change the state of the DB.
   Some themes prefer to mark these somehow, perhaps by making them a bolder color
   or in a different font or text decoration. This acts as a warning to users
   that the link will do something.

   This class is manditory, it is the lead and sometimes the only class listed
   Many modules will have a variant of this for optional overrides  e.g.
   		class="mngmntlink article_mngmntlink"
   		class="mngmntlink calendar_mngmntlink"
   It is also often used with mngmntlink_small and doodlelink*/

a.mngmntlink [
	font-size: 12px;
	color: #336699;
 	]
        /* =MANAGEMENTLINK_FONT_COLOR= */
	/* If links are not differentiated in color, then make them standout by weight, font, decoration, or background color */
	/* Highlighting the font in a slightly different background draws the eye to management links. See EarthYellow */
   
a.mngmntlink:hover [
  /*text-decoration: underline;*/
  
   ]

/* The _small mngmntlink is used where vertical space is at a premium

   It is an optional class, always being used in a sequence of the following
   class="mngmntlink mngmntlink_small"
   */
a.mngmntlink_small [
	font-size: xx-small;
	/* text-decoration: none;
	font-weight: bold;
	color: red; */
]

a.sharedminicore_mngmntlink [
	color: red;
	text-decoration: none;
	
	font-size: 11px;
    font-weight: bold;  
]

/* The chooselink is used for modal actions such as insert image
   When it is used most other link are disabled, so it should be
   set to be extra visible.
   */
a.chooselink [
	background-image:  url("/hotdoodle_engine/iconset/doodle_splat.gif");
	background-repeat: no-repeat;
	background-position: top left;
	height: 20px;
	padding-left: 16px;
]

/* the doodlelink is used for things like the edit and permission icons.
   It should be visually small, but visually distinctive (such as being red).

   It is an optional class, always being used in a sequence of the following
   class="mngmntlink mngmntlink_small doodlelink"
   */
a.doodlelink [
	font-size: xx-small;
]



/* navigation_mngmntlink is used for those mngmntlinks that affect navigation
   e.g. add a page, what type of page, delete page


   It is a very optional class, always being used in a sequence of the following
   class="mngmntlink navigation_mngmntlink"
   */
a.navigation_mngmntlink [
	text-decoration: none;
	color: RED; /* =MANAGEMENTLINK_FONT_COLOR= */
	font-weight: bold;
	font-size: small;
]

/* navlinks (all variants) are for links that take you somewhere else in the site
   but which do NOT do something -- they do not change the state of the DB.

   This class is manditory, it is the lead and sometimes the only class listed.
   Many modules will have a variant of this for optional overrides  e.g.
   		class="navlink article_navlink"
   		class="navlink login_navlink"
   */
.obsolete_navlink [
         color: #78B7E3; /* =NAVLINK_FONT_COLOR= */
         font-size: 11px;
]

.navlink [
         color: #6092B7; /* =NAVLINK_FONT_COLOR= */
         font-size: 11px;
         font-weight: bold;
         text-decoration: none;
]


a.article_article_navlink  [
		 color: {$MAIN_FONT_COLOR}; /* =MAIN_FONT_COLOR= */
         font-size: x-small;
         font-weight: bolder;
         line-height: 24px;
]

a.article_bulleted_navlink, span.article_bulleted_navlink [
         font-size: 12px;
         font-weight: normal;
         text-decoration: none;
         color:  {$LINK_FONT_COLOR};
]
.sharedsite_navlink [
         color: #6092B7; /* =NAVLINK_FONT_COLOR= */
         font-size: 11px;
         font-weight: bold;
]

.login_navlink [
         color: #3366CC; /* =NAVLINK_FONT_COLOR= */
         font-size: 10pt;
]
/* 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:
		<td colspan=2 class="title category_title bb_category_title">
		<a class="navlink bb_navlink category_navlink bb_category_navlink"" href="[link module="bbmodule" action="view_category" id=$board->id]">[$board->name]</a>
		</td>
	or
		<td class="title category_title article_category_title">
		<a class="navlink article_navlink category_navlink article_category_navlink" href="[link action=show_unlimited_articles title=$moduletitle view=$view catid=$catid]">[$catid->name]</a>
		</td>
	*/
.category_navlink [
	color: {$MODULE_TITLE_FONT_COLOR}; /* =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.navbutton [
	font-size: 11px !important;
	font-weight: 600;
	color: #050034 !important;;
	text-decoration: none;
        margin-left: 4px;
        line-height: 24px !important;
	]
a.navbutton:hover  [
	text-decoration: underline;
	]	
	
a.article_category_navlink [
	color: black;
	text-decoration: none;
	font-weight: bold;
	padding: 0px;
	font-size: 12px;
]

/* ========================================
   ===  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_elements.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
		<td class="title article_title" colspan=1>
			<a class="navlink title article_navlink article_article_navlink"  href="..."> Article 1, medium label</a>
		</td>
		
		// For boards
		<td class="title bb_title" >
			<a class="navlink title bb_navlink bb_article_navlink" href="...">Topic 2</a>
			<a class="title_link bb_title_link" href="...">See reply</a>
		</td>
   		
	Setting this is pretty much manditory
    */
.title [
	font-size: 12px;
	font-weight: bold;
	color: #000;
	/* If you want regular titles to be a different color than main divisions, then set it here */
	/* color: #676767; */ /* Anything except for =MODULE_TITLE_FONT_COLOR=, because that color would be there by default */
	/* If you use a contrasting background-color, you should set the padding so that the text
	   is not too close to the colored rectangle.
	background-color: #222222;
	padding-left: 4px; padding-top: 1px; padding-bottom: 1px;
	*/
]

/* Particular to HDMain */
.article_title [
        color: #000;
        font-size: 12px;

]

.article_title_bulleted [
    color: #000;
    font-size: 12px;
	font-weight: normal;
	line-height: 2.0em;
	padding: 0px 0px 0px 10px;
]

a.article_title_link [
  color: #5986A8;
  font-size: 11px;
]

div.article_summary   [
        font-size: 12px;
        padding-left: 32px;

]

/* child selector below is so a <p> added by using the wysiwyg editor will not cause para return after the summary and before the Continued link to full article ;~)
   looks okay in IE ONLY, FF leaves no space... blah. */
.article_summary p [
        margin-bottom: 0px;
        padding-bottom: 0px;
]
/* what about the lack of space between li's for article listings in Bulleted view in FF? answer here - looks okay in FF and doesn't effect IE6 */
li.article_title [
        margin-bottom: 12px;
]

/* =======================================
   =======================================
   =======================================
	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;
	font-family: Trebuchet MS, verdana, sans-serif;

	width: 400px;
	height: 26px;

	/*background-image: url("/hotdoodle_engine/layouts/images/HotDoodleTheme3/youheremodbodybg.gif"); */
	background-repeat: repeat-x;
	background-position: left bottom;
        /* Either set color or shading */
        /* =MODULE_TITLE_FONT_COLOR= */
	/* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
        /* You also need to override the navlink to be the same font size */
]

a.youarehere_navlink [
        font-size: 11px;
        color: #666; /* =MODULE_TITLE_FONT_COLOR= */
    ]




/* These affect the fields on the forms */
.hdform [
	/* font-family: helvetica, arial, sans-serif; */ /* setting font family blows up html editor, so leave off for now */
	padding: 5px 0px 7px 0px;
	
]
td.hdform_me [
	/* font-family: helvetica, arial, sans-serif; */ /* setting font family blows up html editor, so leave off for now */
	font-size: {$BASE_SIZE};
	padding-left: 0;
	vertical-align: top !important;
]
td.hdform_me_spacer [
	padding-right: 5px;
]

table.hdform [
	background-color: WHITE;
	border: 0px;
	
]
.hdform_label [
	font-size: {$BASE_SIZE};
        text-align: left;
]
table.hdform input.button [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/greenButton_bg.gif');
	background-repeat: repeat-x;
	background-color: white;
	height: 25px;
	font-weight: bold;
	border: 1px solid #4E772A;
	margin: 0px;
	padding: 0 15px;
	font-size: {$BASE_SIZE|font_size:1};
]
td.hdform_field, .hdform_field td [
	font-size: {$BASE_SIZE};
	padding-left: 0;
	/*vertical-align: middle;*/
        text-align: left;
]
td.hdform_field td.hdform_field [
	padding: 0;
]
/* Special form field formatting


  Example usage:
  <tr class='hdform hdform_note'>
  <td class='hdform hdform_label' colspan='2'><b>Note:</b> blah blah</td></tr>

*/

tr.hdform_note td.hdform [
	font-size: 11px;
	line-height: 18px;
	color: {$MAIN_FONT_COLOR};
] 
tr.hdform_divider td.hdform [
	font-size: {$BASE_SIZE|font_size:1};
	font-weight: bold;
	color: #0071bd;
]

input, textarea, select [								
 font-size: 13px !important;
 font-family: {$MAIN_FONT_FAMILY};
 color: {$MAIN_FONT_COLOR}; /* =MAIN_FONT_COLOR= 676767*/
 padding-top: 0px; padding-bottom: 0px; padding-right: 0px;
 padding-left: 0px; 
]
.divtop input, .mainarea input [								
 font-size: 13px !important;
 font-family: {$MAIN_FONT_FAMILY};
 color: {$MAIN_FONT_COLOR}; /* =MAIN_FONT_COLOR= 676767*/
 padding-top: 0px; padding-bottom: 0px; padding-right: 0px;
 padding-left: 0px; 
]

.divtop input.button [
    	color: white;
    	font-size: 10px !important;
	{if $is_ie}
 		height: 20px !important;
 	{else}									
 		height: 18px !important;
 	{/if}
 	margin: 0px;
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/greenButton_bg.gif');
	background-repeat: repeat-x;
	background-color: white;
	border: 1px solid #4E772A;
	vertical-align: top;
	text-align: center;
]
.mainarea input.button [
    color: white;
    font-size: 10px !important;
	height: 20px !important;
	margin: 4px 0px 0px 6px;
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/greenButton_bg.gif');
	background-repeat: repeat-x;
	background-color: white;
	border: 1px solid #4E772A;
	vertical-align: middle;
	text-align: center;
]
form td [
	font-size: {$BASE_SIZE};	  
]
form td input.button [
	margin-left: 0 !important;	  
]

/* Sometimes we want a link to look like a button, partcularly when (doodlelink dlink=form)
   Such links generate as <a class='button'> instead of the more common <a class='doodlelink'>
   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: #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: #555555;
	background: -webkit-linear-gradient(#666666, #444444);
	background: -o-linear-gradient(#666666, #444444);
	background: -moz-linear-gradient(#666666, #444444);
	background: linear-gradient(#666666, #444444);
	/*background-image: url("/hotdoodle_engine/looks/images/imagelib/liscenced_images/gallery38/button_stripe_orange_on.gif");	*/

]

a.button_minor, p.button_minor a [
 color: BLACK;
 background-color: #E6E6E6;
 /*border-top: 3px solid #FEC786;
 border-right: 3px solid #FC830E;
 border-bottom: 3px solid #E67405;
 border-left: 3px solid #FCBC70; */
 border: 1px solid #B2B2B2;
 font-size: 10px;
 font-weight: bold;
 /*line-height: 2.3em;*/
 line-height: 18px;
 padding: 5px 8px 5px 8px;
 text-decoration: none;
 text-align: center; 
 vertical-align: middle;
]
/*
td.penpal_data_actions a.button_minor, td.penpal_data_actions p.button_minor a[
	width: 135px;
]*/
 
a.button_minor:active [
 color: BLACK;
 background-color: #F2F2F2;
 /*background-image: url("/hotdoodle_engine/looks/images/imagelib/liscenced_images/gallery38/button_stripe_orange_on.gif"); */
 
]
 
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"); */
] 

/* Bigger, bolder, prettier buttons! */
p.shinybutton [
	/*line-height: 10px;*/
	/*padding: 4px 0px 4px 0px;*/
	text-align: center;
    width: 175px !important;
	height: 48px;
	padding-top: 14px;
    background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery52/blankButton.gif');
	background-repeat: no-repeat;
	]
a.shinybutton, p.shinybutton a [
	color: white;
    font-size: 14px;
	font-weight: bold;
	line-height: 14px;
	/*padding-bottom: 17px;*/
	text-decoration: none; 
	text-align: center !important;	
	vertical-align: middle;
]

a.shinybutton:active [
	color: #FFE2C0;
	background-color: #FFAC4C;
	background-image: url("/hotdoodle_engine/looks/images/imagelib/liscenced_images/gallery38/button_stripe_orange_on.gif");	
	
]
 
p.shinybutton a.shinybutton:hover [
	color: #FFE2C0 !important;   /*   */
    background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery52/blankButton.gif') !important;
	padding-top: 12px !important;
	background-color: #FFAC4C;
	/* 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 */
{include file="common/_opbuttons.tpl"}

.helpbox_popup, .helpbox_popup p, .helpbox_popup li [
	background-color: white !important;
	color: #333333 !important;
	font-size: 10px !important;
]

.helpbox_popup span [
	color: #F7931E !important;
]

div.helpbox [
	background-color: #FFFFCC;
]

/* =======================================
   =======================================
   =======================================
	HotDoodle Main Site Specific Classes (Used only in the main site)
   =======================================
   =======================================
   ======================================= */
.customer_example [
	font-size: x-small !important;
]

/* ==============================
   == Navigation Vertical Menu
   ============================== */

.navigation_modulebody .panel-default [
	background-color: {$VERTICAL_MENU_BG_COLOR} !important; /* =VERTICAL_MENU_BG_COLOR= */
]
.navigation_modulebody .panel-default:hover [
	background-color: {$VERTICAL_MENU_HOVER_BG_COLOR} !important; /* =VERTICAL_MENU_HOVER_BG_COLOR= */
]
.navigation_modulebody .panel-default > .panel-heading > a [
	color: {$VERTICAL_MENU_FONT_COLOR} !important; /* =VERTICAL_MENU_FONT_COLOR= */
]
.navigation_modulebody .panel-primary > .panel-heading [
	background-color: {$VERTICAL_MENU_CURRENT_BG_COLOR} !important; /* =VERTICAL_MENU_CURRENT_BG_COLOR= */
]
.navigation_modulebody .panel-primary [
	border-color: {$VERTICAL_MENU_CURRENT_BG_COLOR} !important; /* =VERTICAL_MENU_CURRENT_BG_COLOR= */
]
.navigation_modulebody .panel-primary > .panel-heading > a [
	color: {$VERTICAL_MENU_CURRENT_FONT_COLOR} !important; /* =VERTICAL_MENU_CURRENT_FONT_COLOR= */
]

/* ======================================= 
   == Navigation Horizontal Menu
   ======================================= */
/* Regular horizontal menu overall bar*/
nav.navbar-default [
	background: {$MENU_BG_COLOR} !important;
	{if $MENU_BG_IMAGE}
		background: URL('{$MENU_BG_IMAGE}') repeat-x top center !important;
	{/if}
	border: 1px solid #323232 !important;
]   
/* This transparent background will overwrite the Bootstrap classes so MENU_HOVER_BG_COLOR can be used in the theme */
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus [
	background: transparent !important; 
]
/* Regular horizontal menu general tab */
.navbar-default .navbar-nav > li > a [
	font-family: {$MENU_FONT_FAMILY}; /* =MENU_FONT_FAMILY= */
	color: {$MENU_FONT_COLOR} !important; /* =MENU_FONT_COLOR= */
	font-weight: normal;
	text-shadow: 0px 1px 0px {$SHADOW_COLOR};
]
.navbar-default .navbar-nav > li > a:hover [
	color: {$MENU_HOVER_FONT_COLOR} !important; /* =MENU_FONT_COLOR= */
]
/* Regular horizontal menu current tab */
nav.navbar-default li.active [
	background: {$MENU_CURRENT_BG_COLOR} !important;
	box-shadow: 0px 10px 10px #000000 inset;
]
nav.navbar-default li.active a [
	color: {$MENU_CURRENT_FONT_COLOR} !important;
]
.dropdown-menu > .active > a [
	background: {$MENU_CURRENT_BG_COLOR} !important;
	box-shadow: none;
]
/* Horizontal menu in link view in footer (to center the tabs) */
footer .nav-pills > li [
    float :none;
    display: inline-block;
]
footer .nav-tabs [
    text-align:center;
]
/* Dropdown tabs */
header .dropdown-menu li [
	text-align: left;
	font-family: {$MAIN_FONT_FAMILY};
]
.dropdown-menu [
	background-color: {$DROPDOWN_BG_COLOR} !important;
]
.dropdown-menu > li > a:hover [
	background-color: {$DROPDOWN_HOVER_BG_COLOR} !important;
]
.dropdown-menu > li > a [
	color: {$DROPDOWN_FONT_COLOR} !important;
]

{* ============== not in HDMain ================
/*td.topnavfancy [*/ /* Used in Only Top Nav Buttons */
	/*text-align: left;
	background-color: transparent;*/ /* =TOPNAV_BG_COLOR= */
       /* padding:0 0 0 3px;
        margin: 0px;
        text-decoration:none;
        vertical-align: bottom;*/

/*]*/
td.topnavfancy:hover [ /* Used in Only Top Nav Buttons */
	margin-left:2px;
	vertical-align: bottom;

]

table.topnav_global [
	width: 100%;
        margin-top: 4px;
        margin-right: 8px;  /* right padding overridden by...  */
        padding-right: 8px;
]

================ *}

td.topnav_global [
	width: 100%;
        font-size: 11px;
        margin: 0px;
        padding-top: 4px;


]

a.topnav_global [
	color: #3E9C53;
        margin: 0px 4px 0px 4px;
]

/* ========================================
   ===  Pull Down Menus, new 2/2007 standard
   ======================================== */
{include file="common/_pulldownmenus.tpl"}



/* =======================================
   =======================================
   =======================================
	Specific to some themes
   =======================================
   =======================================
   ======================================= */

.secondarysidebar, .rightsidebar  [

]     
.mainsidebar [

]
.mainsidebar [

]

.sidebar [ /* used in many themes. 1024x768 should be the typical presumed window size */

]



.leftsidebar [
	padding: 0px;
]


/* The stylesheet does not know if the left or the right sidebar is the main
   one, the one with logins, menus, etc.
   The layout file sets mainsidebar as an extra class.
   Example Usage:
   	<td class="sidebar rightsidebar mainsidebar" valign="top"  echo pathos_theme_background_sidebar()  >
*/

/* ======================================= 
   ======================================= 
   ======================================= 
	Header
   ======================================= 
   ======================================= 
   ======================================= */
/* header is used in many themes, and stands alone. It used to be called .header, but this conflicted.
   			<header class="divtop" <?php echo pathos_theme_background_header() ?> >
   */
header [
	margin: 0;
	padding: 15px 0px 0px 0px;
	min-height:{$HEADER_HEIGHT};
	background: {$HEADER_BG_COLOR}; /* =HEADER_BG_COLOR= */
	{if $HEADER_BG_IMAGE}
		background-image: url('{$HEADER_BG_IMAGE}');  
		background-repeat: repeat-x;
		background-position: top center;
	{/if}
    box-shadow: 0px 5px 5px {$SHADOW_COLOR};
]

/* Sometimes the header can be in a different color.
   Setting header .modulebody establishes the default for
   elements in the top bar */

header .moduletitle [
	font-family: {$HEADER_FONT_FAMILY};
	color: {$HEADER_FONT_COLOR};
	font-size: {$BASE_SIZE|font_size:4};	
	text-align: left;	
]
header .modulebody [
	font-family: {$HEADER_FONT_FAMILY};
	color: {$HEADER_FONT_COLOR};
	font-size: {$BASE_SIZE|font_size:2};	
	text-align: left;		
]

.mainarea_table [  
	margin-left: auto;
	margin-right: auto;
    padding: 0px;
]
.mainarea, .centerarea,.divmain [
	/*width: 960px !important;*/
        {if $is_mobile}
	        padding: 0px 0px 0px 0px;
	{else}
		padding: 20px 0px 20px 0px;
	{/if}   
	background-color: {$MAIN_BG_COLOR};	 /* =MAIN_BG_COLOR= */
	margin: 26px 0px 0px 0px;
        text-align: left;

       /* Footer is used in many themes, and is typically a specialization of center area
       (even if it is not centered tothe centyer area    )
       Typical Usage:
       <td colspan="2" class="centerarea footer">
       */
	vertical-align: top;
]
.premainarea [
        padding: 0px !important;
]
   
#MC_foot [ /* Huh??? */
	text-align: center;
	color: #c45f07;
	font-size: 10px;
]
    
.divfooter [
	font-weight: bold;
	text-align: center;
	color: white;
	background-image: url("http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery127/footerBg.jpg");
	background-repeat: repeat-x;
	background-position: bottom center;
	background-color: #282a2a;
	border-collapse: separate;	
	vertical-align: middle;	
        margin: 0 !important;
        padding: 20px 0px 0px 0px;
	/*height: 25px;*/
]
.divfooter a, .divfooter a:hover [
	color: #FFFFFF;
]

.divfooter .text_modulebody [
	border-collapse: separate;
]
.divfooter .container_col_first, .divfooter .container_col_last [
	background-color: #E6E6E6;
	padding-top: 100px;
]

div.Center_container_box [

	text-align: center;
]
.Center_moduletitle [
	text-align: center;
]
.Center_modulebody [
	text-align: center;
]

.HDfooter_modulebody [
        font-family: {$MAIN_FONT_FAMILY};
        font-size: 11px;
        text-align: center;
        width: 625px;
        margin: 16px 0px 18px 0px;
        color: #CD6A08;
	background: transparent;	/* =MAIN_BG_COLOR= */
]

img.logo [ /* What is imb.logo? */
  margin-top: 10px;
  margin-bottom: 14px;
]


/* ======================================= 
   ======================================= 
   ======================================= 
	Look specific enhancements
   ======================================= 
   ======================================= 
   ======================================= */
div.Feature_container_box [	
	background-color: {$FEATURE_COLOR} !important;
	border: 2px dotted #DAEAF5 !important;
	text-align: center !important;
]
.Feature_moduletitle [
	color: #2664BF !important;
	font-weight: bold !important;
	font-size: {$BASE_SIZE|font_size:1} !important;
	padding-top: 10px !important;
]
.Feature_modulebody [
	color: #363636 !important;
	font-weight: bold !important;
	font-size: {$BASE_SIZE|font_size:0} !important;
	text-align: center !important;
]

.Feature_modulebody input.button [
	margin-left: 0px !important;
]


div.Feature2_container_box [	
	background-color: #C8DED3;
	border: 2px dotted #E4EEE9;
]
.Feature2_moduletitle [
	color: #48906B;
	font-weight: bold;
	font-size: {$BASE_SIZE|font_size:1};
	text-align: center;
	padding-top: 2px; padding-bottom: 2px;
]
.Feature2_modulebody [
	color: #363636;
	font-size: {$BASE_SIZE|font_size:0};
	text-align: center;
]

div.Feature3_container_box [
]
.Feature3_moduletitle [
	color: #CC3300;
	text-align: center;
]
.Feature3_modulebody [
	color: #CC3300;
	text-align: center;
]


div.Feature4_container_box [
]
.Feature4_moduletitle [
]
.Feature4_modulebody [
	border: 12px groove {$ALT_BG_COLOR}; 
	padding: 10px;
	width: auto;
]



div.Minor_container_box [	
	background-color: silver;
]
.Minor_moduletitle [
	font-size: {$BASE_SIZE|font_size:1};
	color: black;
	background-color: silver;
]
.Minor_modulebody [	
	background-color: silver;
	font-size: {$BASE_SIZE|font_size:-1};
]


div.Minor2_container_box [	
	background-color: #FFFFCC;
]
.Minor2_moduletitle [
	font-size: {$BASE_SIZE|font_size:1};
	background-color: #FFFFCC;
]
.Minor2_modulebody [	
	font-size: 14px;
	background-color: #FFFFCC;
]

div.Minor3_container_box [	
	background-color: transparent;
	border: none;
]
.Minor3_moduletitle [

]
.Minor3_modulebody [

]

div.Minor4_container_box [	
	
]
.Minor4_moduletitle [
	font-size: small;
	font-weight: bold;
]
.Minor4_modulebody [
	font-size: 10px;
]





/* ========================================
   ===  Bring in standard non composite styles, new 2/2007 standard
   ======================================== */
{include file="common/_standard_styles.tpl"}

div.Aqua_container_box [
	background-color: {$AQUA_BG_COLOR};
	border: 1px solid {$AQUA_BORDER_COLOR};
	padding: 5px 20px 0 20px;
]
.sidebar div.Aqua_container_box [
	padding: 10px !important;
]
.Aqua_moduletitle [
	background-color: {$AQUA_BG_COLOR};
]
.Aqua_modulebody, .Aqua_modulebody td [	
	background-color: {$AQUA_BG_COLOR};
]

div.Pink_container_box [	
	background-color: {$PINK_BG_COLOR};
	border: 1px solid {$PINK_BORDER_COLOR};
	padding: 5px 20px 0 20px;
]
.sidebar div.Pink_container_box [
	padding: 10px !important;
]
.Pink_moduletitle [
	background-color: {$PINK_BG_COLOR};
]
.Pink_modulebody, .Pink_modulebody td [	
	background-color: {$PINK_BG_COLOR};
]

div.Yellow_container_box [	
	background-color: {$YELLOW_BG_COLOR};
	border: 1px solid {$YELLOW_BORDER_COLOR};
	padding: 5px 20px 0 20px;
]
.sidebar div.Yellow_container_box [
	padding: 10px !important;
]
.Yellow_moduletitle [	
	background-color: {$YELLOW_BG_COLOR};
]
.Yellow_modulebody, .Yellow_modulebody td [	
	background-color: {$YELLOW_BG_COLOR};
]

div.LightGray_container_box [
	background-color: {$LIGHTGRAY_BG_COLOR};
	border: 1px solid {$LIGHTGRAY_BORDER_COLOR};
	padding: 5px 20px 0 20px;
]
.sidebar div.LightGray_container_box [
	padding: 10px !important;
]
.LightGray_moduletitle [
	background-color: {$LIGHTGRAY_BG_COLOR};
]
.LightGray_modulebody, .LightGray_modulebody td [	
	background-color: {$LIGHTGRAY_BG_COLOR};
]

/* ======================================= 
   ======================================= 
   ======================================= 
	Context Specific Overrides
   ======================================= 
   ======================================= 
   ======================================= */	


/* The funny curved dark bar */
.leftnavtop_modulebody   [
	background-image: url("/hotdoodle_engine/layouts/images/HotDoodleTheme3/leftnavtopbg.gif");
	background-position: bottom right;
	background-repeat: no-repeat;
	width: 175px;
	height: 42px;
	padding: 0px;
	margin-bottom: 0px;
]



	/* Ref. /hotdoodle_engine/modules/rotatormodule/views/HDTest.tpl */
.HDTest_modulebody [
	background-color: #D0D0D0;
	color: #666;
	font-size: 11px !important;
	font-family: Georgia, Times New Roman, Times, serif;
	padding: 2px 4px 16px 4px;
 	width: 200px !important;
 	margin-left:10px;
	/* width: 100%;  */
]

{declare_style style=Greys cat='Combination' rev=1 order=975 desc='??????????????'}
div.Greys_container_box [
	background-color: silver;
]
.Greys_moduletitle [
	font-size: small;
	color: black;
	background-color: #999;
]
.Greys_modulebody [
	background-color: #ccc;
	font-size: xx-small;
	/* width: 100%;  */
	border-bottom:8px solid #999;
]

/* keep items in the sidebar constrained to the sidebar */
{declare_style style=xxxxxSidebar cat='Combination' rev=1 order=930 desc='??????????????'}
div.xxxxxSidebar_container_box [
	width: 170px !important;
]

div.xxxxxSidebar_container_editheader [
	width: 175px !important;
]
.xxxxxSidebar_modulecontrol [
	width: 175px !important;
]
.xxxxxSidebar_container_moduletitle [
	width: 175px !important;
]
.xxxxxSidebar_container_modulebody [
	width: 175px !important;
]

/* set body copy left padding */
{declare_style style=HD cat='Combination' rev=1 desc='??????????????'}
.HD_container_box [
       margin-left: 0px;
       background-color: transparent;
]
.HD_modulebody [
        vertical-align: top;
	padding-left: 245px;
        /* border: 1px solid blue; */
]

/* W3C CSS validator doesn't like selectors without declarations */
{declare_style style=Rotatorside cat='Combination' rev=1 desc='???????'}
div.Rotatorside_container_box [

]


.Rotatorside_moduletitle [
	background-color: #96CAEA;
	background-position: top center;
	background-repeat: no-repeat;
	color: #FFF;
	font-weight: normal; /* was medium -- not allowed in CSS standard */
	letter-spacing: 1px;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 11px !important;
	vertical-align: bottom;
    padding: 3px 0px 3px 0px;
	width: 175px !important;
	height: 12px;
	margin-top: 1px;
	margin-bottom: 0px;
	text-align: center;
	/* width: 100%;  */
]

.Rotatorside_modulebody [
	background-color: #F0F7FB;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 11px !important;
	line-height: 18px;
	width: 175px !important;
	border-top: none;
	border-left: 1px solid #96CAEA;
	border-right: 1px solid #96CAEA;
	border-bottom: 1px solid #96CAEA;
	padding: 12px 7px 12px 7px;
]

Rotatorside_container_editheader [
	width: 175px !important;
]

.Rotatorside_moduletitlebtm [
	background-color: #E5E5E5;
	background-image: url("/hotdoodle_engine/layouts/images/HotDoodleTheme3/cspotbtm160.gif");
	background-position: bottom center;
	background-repeat: no-repeat;
	color: #666;
	font-size: 11px;
	font-family: Arial, Helvetical, sans-serif;
	padding: 0px 4px 2px 4px;
	width: 175px !important;
	margin-top: 1px;
	margin-bottom: 1px;
 	margin-left: 10px;
	/* width: 100%;  */
]

/* style for new full-width Article Rotator at the bottom of the page */

{declare_style style=Rotatorbott name='Rotatorbott' cat='Combination' rev=1 desc='Rotator style for bottom of page'}

div.Rotatorbott_container_box [

]

.Rotatorbott_moduletitle [
	/* background-color: #DAEAF5; */ /* medium blue */
	background-color: #CFE4F2;  /* light blue */
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/customer_spotlight_title.gif");		
	background-position: top center;
	background-repeat: no-repeat;
	color: #FFF;
	font-weight: bold; 
	letter-spacing: 1px;
	font-size: 11px !important;
	vertical-align: bottom;
	height: 33px;
	text-align: center;
	border-top: 3px solid #DAEAF5;     /* lightest blue */
	border-right: 3px solid #DAEAF5;     /* lightest blue */
	border-left: 3px solid #DAEAF5;     /* lightest blue */
	border-bottom: none;
	margin: 1px 0px 0px 0px;
	width: 744px !important;	
]

.Rotatorbott_modulebody [
	color: #494949; 	/* medium gray */
	background-color: white;
	background-image: url("/hotdoodle_engine/looks/images/imagelib/repeating/gallery3/fade_to_paleblue_darker.gif");
	background-repeat: repeat-x;
 	background-position: bottom left;	
	font-size: 10px !important;
	font-weight: bold;
	line-height: 18px;
	border: 3px solid #DAEAF5;     /* lightest blue */	
	border-collapse: separate;
	margin: 0px 0px 0px 0px;
	padding: 20px;		
]


/* style for new smaller Article Rotator at the bottom of the page */

{declare_style style=Rotatorsmall name='Rotatorsmall' cat='Combination' rev=1 desc='Rotator style for bottom of page'}

div.Rotatorsmall_container_box [

]

.Rotatorsmall_moduletitle [
	/* background-color: #DAEAF5; */ /* medium blue */
	background-color: #CFE4F2;  /* light blue */
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/customer_spotlight_title.gif");		
	background-position: top center;
	background-repeat: no-repeat;
	color: #FFF;
	font-weight: bold; 
	letter-spacing: 1px;
	font-size: 11px !important;
	vertical-align: bottom;
	height: 33px;
	text-align: center;
	border-top: 3px solid #DAEAF5;     /* lightest blue */
	border-right: 3px solid #DAEAF5;     /* lightest blue */
	border-left: 3px solid #DAEAF5;     /* lightest blue */
	border-bottom: none;
	margin: 20px 0px 0px 0px;
	width: 350px !important;	
]

.Rotatorsmall_modulebody [
	color: #494949; 	/* medium gray */
	background-color: white;
	background-image: url("/hotdoodle_engine/looks/images/imagelib/repeating/gallery3/fade_to_paleblue_darker.gif");
	background-repeat: repeat-x;
 	background-position: bottom left;	
	font-size: 10px !important;
	font-weight: bold;
	line-height: 18px;
	border: 3px solid #DAEAF5;     /* lightest blue */	
	border-collapse: separate;
	margin: 0px 0px 0px 0px;
	padding: 20px;		
	width: 350px !important;
]



/* Marketing callouts */

{declare_style style=MrktgCallout name='Mrkt Callout' cat='Combination' rev=1 desc='For lists on main pages'}

div.MrktgCallout_container_box [
	width: 267px;
]

.MrktgCallout_moduletitle [
	background-color: white;  /* white */
	background-image: url("/hotdoodle_engine/looks/images/imagelib/main_site/gallery52/bubble_top.gif");  
	background-position: top left;
	background-repeat: no-repeat;
	color: white;
	letter-spacing: 1px;
	font-size: 14px !important;
	vertical-align: bottom;

	text-align: left;
	width: 267px !important; 
	margin-bottom: 2px;
	padding-left: 20px;
	{if $is_ie}
		height: 31px;
	{else}
		height: 24px;
	{/if}
 	padding-top: 6px;
]

.MrktgCallout_modulebody [
	color: black; 


	background-color: #FFDB7F;
	background-image: url("/hotdoodle_engine/looks/images/imagelib/main_site/gallery52/bubble_pureBottom.gif");
	background-repeat: no-repeat;
	background-position: bottom left;	
	font-size: 12px !important;
	margin-bottom: 5px;
	width: 267px !important;
]





/* styles for landing page buckets */ 

{declare_style style=Bucket1 name='Bucket 1' cat='Combination' break=1 order=300 rev=1 desc='Provides style for first of 1-2-3 little graphic buckets'}
{declare_style style=Bucket2 name='Bucket 2' cat='Combination' order=400 rev=1 desc='Provides style for second of 1-2-3 little graphic buckets'}
{declare_style style=Bucket3 name='Bucket 3' cat='Combination' order=500 rev=1 desc='Provides style for third of 1-2-3 little graphic buckets'}

div.Bucket1_container_box [
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/bucket_landing_orange.gif");
	background-repeat: no-repeat;
	background-position: top center;
	height: 230px;
	width: 250px;
]

div.Bucket2_container_box [
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/bucket_landing_blue.gif");
	background-repeat: no-repeat;
	background-position: top center;
	height: 230px;
	width: 250px;
]

div.Bucket3_container_box [
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/bucket_landing_green.gif");
	background-repeat: no-repeat;
	background-position: top center;
	height: 230px;
	width: 250px;
]

/* styles for landing page call to actions */ 

{declare_style style=Action1 name='Action 1' cat='Combination' break=1 order=600 rev=1 desc='Provides style for first of 1-2-3 little graphic calls to action'}
{declare_style style=Action2 name='Action 2' cat='Combination' order=625 rev=1 desc='Provides style for second of 1-2-3 little graphic calls to action'}
{declare_style style=Action3 name='Action 3' cat='Combination' order=650 rev=1 desc='Provides style for third of 1-2-3 little graphic calls to action'}
{declare_style style=Actionlarge name='Action Large' cat='Combination' order=655 rev=1 desc='Provides style for third of 1-2-3 little graphic calls to action'}


div.Action1_container_box [
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/action_orange.gif");
	background-repeat: no-repeat;
	background-position: top center;
	height: 40px;
	width: 250px;
	margin-top: 0px;
]

div.Action2_container_box [
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/action_blue.gif");
	background-repeat: no-repeat;
	background-position: top center;
	height: 40px;
	width: 250px;
]

div.Action3_container_box [
	background-image: url("/hotdoodle_engine/looks/images/imagelib/buckets/gallery18/action_green.gif");
	background-repeat: no-repeat;
	background-position: top center;
	height: 40px;
	width: 250px;
]

div.Actionlarge_container_box [
	background-image: url("/hotdoodle_engine/looks/images/imagelib/hd_site/gallery33/action_orange_large.gif");
	background-repeat: no-repeat;
	background-position: top center;
	height: 80px;
	width: 250px;
	line-height: 1.75;
	margin-top: 30px;
	
]

.action1_modulebody a, .action2_modulebody a, .action3_modulebody a, .actionlarge_modulebody a [
	color: #333; 	/* dark gray */
]

.action1_modulebody a:hover, .action2_modulebody a:hover, .action3_modulebody a:hover, .actionlarge_modulebody a:hover [
	color: #FFF;
]


/* Style for a bulleted and bold titled article block for lists, that doesn't interfere with existing article blocks */

{declare_style style=Bulletlist name='Bullet List' cat='Combination' order=800 rev=1 desc='Provides bulleted and bold titled article block for lists'}

.Bulletlist_moduletitle [
	padding-bottom: 2px;
]

.Bulletlist_modulebody [

]

.Bulletlist_container_box [

]
	
.Bulletlist_modulebody .article_title_bulleted [
	color: #333;
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.25em;
	padding-bottom: 15px;
	padding-left: 0px;
]

.Bulletlist_modulebody .article_summary [
	line-height: 1.25em;
	padding-bottom: 15px;
]

/* Style for alternativeblock labels */

{declare_style style=bigtitlesCenter name='Big Titles Center' cat='Combination' order=800 rev=1 desc='Provides centered and bigger module title'}

.bigtitlesCenter_moduletitle [
	font-size: 24px;
    font-weight: normal;
    text-align: center !important;
	padding-left: 15px;
	color: #333333;
]

.bigtitlesCenter_container_box [
]

{declare_style style=bigtitlesLeft name='Big Titles Left' cat='Combination' order=800 rev=1 desc='Provides left and bigger module title'}

.bigtitlesLeft_moduletitle [
	font-size: 24px;
    font-weight: normal;
    text-align: left !important;
	padding-left: 15px;
	color: #333333;
]

.bigtitlesLeft_container_box [
]


/* Provides a special alignment adjustment for the landing page */

{declare_style style=Landing name='Landing' cat='Combination' break=1 order=700 rev=1 desc='Provides a special alignment adjustment for the landing page'}

.Landing_moduletitle [

]

.Landing_modulebody [
	width: 232px !important;
]

.Landing_container_box [
		
]
	
/* Provides a special alignment adjustment for the logo */

{declare_style style=Padlogo name='Padlogo' cat='Combination' order=700 rev=1 desc='Provides a special alignment adjustment for the logo'}

.Padlogo_moduletitle [
	font-size: x-small;
	text-align: center;
]

.Padlogo_modulebody [
	margin: 0px !important;		/* reset all to 0px to make IE and Mozilla equal */
	padding: 0px !important;
]

.Padlogo_container_box [
	margin: 0px;
	padding: 0px 0px 0px 10px;
]
.divtop .Padlogo_container_box [
        margin: 0 auto !important;
        width: 1000px !important;
        padding-top: 5px !important;
]
.divtop .Padlogo_container_box div [
	width: auto;
	text-align: left;
	{if $is_ie}
                        margin: 0 auto !important;
	{else}
	{/if}
]

/* We want the login block in the header to use non-standard fonts, input buttons, etc.
   As the style padlogo is used in HotDoodle's header, we will tie it to that style
*/
table.Padlogo_modulebody input [
   font-size: xx-small;
   color: #000;
]

table.Padlogo_modulebody input.button [
        color: white !important;
        font-weight: 700;
        font-size: 8px;
        height: 16px;
]




/* Provides special styles for simulated bullets with large icons */

{declare_style style=Iconbullet name='Iconbullet' cat='Combination' order=950 rev=1 desc='Provides special styles for simulated bullets with large icons'}

.Iconbullet_moduletitle [

]

.Iconbullet_modulebody [
	vertical-align: middle !important;
	margin-left: 10px;
]

.Iconbullet_container_box [

]


/* Provides max width */

{declare_style style=Maxwide name='Maxwide' cat='Combination' order=995 rev=1 desc='Provides max width'}

.Maxwide_moduletitle [

]

.Maxwide_modulebody [

]

.Maxwide_container_box [
	width: 100% !important;
]

/* Provides half width */

{declare_style style=Halfwide name='Halfwide' cat='Combination' order=996 rev=1 desc='Provides half width'}

.Halfwide_moduletitle [

]

.Halfwide_modulebody [

]

.Halfwide_container_box [
	width: 365px !important;
]

/* Provides vertical alignment */

{declare_style style=Vertmid name='Vertmid' cat='Combination' order=996 rev=1 desc='Provides vertical alignment'}

.Vertmid_moduletitle [

]

.Vertmid_modulebody [
	vertical-align: middle !important;
]

.Vertmid_container_box [

]

/* Provides special styling for plan choices */

{declare_style style=Planmain name='Planmain' cat='Combination' break=1 order=900 rev=1 desc='Provides special styling for plan choices'}

.Planmain_moduletitle [
	color: white;
	border-bottom: 2px solid #C8DED3;
	background-color: #48906B;	
	padding: 7px;
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: {$BASE_SIZE|font_size:2};	
	font-weight: normal;
]

.Planmain_modulebody [

]

.Planmain_container_box [
	width: 90%;
	border: 2px solid #C8DED3;	
	background-color: #DEEBE4 !important;
	/* height: 450px;		 */
]

/* Provides special styling for plan sub choices */

{declare_style style=Plansub name='Plansub' cat='Combination' order=900 rev=1 desc='Provides special styling for plan sub choices'}

.Plansub_moduletitle [
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: {$BASE_SIZE|font_size:0};
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 5px;
]

.Plansub_modulebody [
	font-family: arial, helvetica, "ms sans serif", sans-serif;
]

.Plansub_container_box [
	margin: 7px;
]

.Plansub_modulebody .article_title_bulleted [
    font-size: 14px;
	font-weight: normal;
	/* line-height: 2.0em; */
	padding: 0px;
]


{declare_style style=Tall300 cat='Height' rev=1 desc='Makes the content be 300 tall'}
div.Tall300_container_box [height: 300px;]

{declare_style style=Tall350 cat='Height' rev=1 desc='Makes the content be 350 tall'}
div.Tall350_container_box [height: 350px;]



/* Provides special styling for dual side by side text boxes */

{declare_style style=Dualmain name='Dualmain' cat='Combination' order=910 rev=1 desc='Provides special styling for dual side by side text boxes'}

.Dualmain_moduletitle [
	color: white;
	border-bottom: 3px solid #E3EFF8;
	background-color: #95CAEA;	
	background-image: url("/hotdoodle_engine/looks/images/imagelib/hd_site/gallery33/titlebar_blue.gif");
	background-repeat: repeat-x;
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: {$BASE_SIZE|font_size:2};	
	font-weight: normal;
	text-align: center;	
	margin: 0px!important;	
	padding: 10px 0px 10px 0px !important;			
]

.Dualmain_modulebody [

]

.Dualmain_container_box [
	border: 3px solid #E3EFF8;	
	background-color: white;
	padding: 0px !important;
	margin: 10px !important;				
]

/* Provides special styling for plan sub choices */


{declare_style style=Dualsub name='Dualsub' cat='Combination' order=910 rev=1 desc='Provides special styling for plan sub choices'}

.Dualsub_moduletitle [

]

.Dualsub_modulebody [
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: 16px !important;	
	line-height: 1.75;
]


.Dualsub_modulebody .article_title_bulleted [
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: 16px !important;		
	line-height: 1.75;
	padding: 0px;
]

.Dualsub_container_box [
	border: 0px !important;
]


/* Provides special styling for orange side by side text boxes */

{declare_style style=Orngmain name='Orngmain' cat='Combination' order=920 rev=1 desc='Provides special styling for dual side by side text boxes'}

.Orngmain_moduletitle [
	color: white;
	border-bottom: 3px solid #FFDFBB;
	background-color: #F89738;	
	background-image: url("/hotdoodle_engine/looks/images/imagelib/hd_site/gallery33/titlebar_orange.gif");
	background-repeat: repeat-x;	
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: {$BASE_SIZE|font_size:2};	
	font-weight: normal;
	text-align: center;	
	margin: 0px!important;	
	padding: 10px 0px 10px 0px !important;			
]

.Orngmain_modulebody [

]

.Orngmain_container_box [
	border: 3px solid #FFDFBB;	
	padding: 0px !important;
	margin: 10px !important;
	background-color: white !important;
	background-image: url("/hotdoodle_engine/looks/images/imagelib/hd_site/gallery33/background_spotlight_04.gif");
	background-repeat: no-repeat;		
	background-position: top center;	
]

/* Provides special styling for orange sub choices */

{declare_style style=Orngsub name='Orngsub' cat='Combination' order=920 rev=1 desc='Provides special styling for plan sub choices'}

.Orngsub_moduletitle [

]

.Orngsub_modulebody [
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: 16px !important;	
	line-height: 1.75;
]


.Orngsub_modulebody .article_title_bulleted [
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: 16px !important;		
	line-height: 1.75;
	padding: 0px;
]

.Orngsub_container_box [
	border: 0px !important;
]


/* Provides compact but right padded styling for right justified links */


{declare_style style=Compactlink name='Compactlink' cat='Combination' order=965 rev=1 desc='Provides special styling for plan sub choices'}

.Compactlink_moduletitle [

]

.Compactlink_modulebody [
	margin: 0px 25px 5px 0px !important;
	padding: 0px 0px 0px 0px !important;
]

.Compactlink_container_box [

]

/* Style for a smaller font bulleted list, that fits better with landing page text */

{declare_style style=Bulletbig name='Bullet Big' cat='Combination' order=820 rev=1 desc='Provides style for a bigger font bulleted list'}

.Bulletbig_moduletitle [

]

.Bulletbig_modulebody [

]

.Bulletbig_container_box [

]
	
.Bulletbig_modulebody .article_title_bulleted [
	line-height: 2.0em !important;
	padding: 0px;
]

.Bulletbig_modulebody .article_summary [

]

/* Style for special font 1*/

{declare_style style=Specfont1 name='Specfont1' cat='Combination' order=980 rev=1 desc='Provides style for a special bigger font 1'}

.Specfont1_moduletitle [

]

.Specfont1_modulebody [
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: 16px !important;		
	line-height: 1.75 !important;
]

.Specfont1_container_box [

]

/* Style for special font 2*/

{declare_style style=Specfont2 name='Specfont2' cat='Combination' order=980 rev=1 desc='Provides style for a special bigger font 2'}

.Specfont2_moduletitle [

]

.Specfont2_modulebody [
	font-size: 13px !important;		
	line-height: 1.5 !important;
]

.Specfont2_container_box [

]


/* Style for compact bottom only*/

{declare_style style=Compbott name='Compbott' cat='Combination' order=995 rev=1 desc='Provides style for a compact bottom only'}

.Compbott_moduletitle [

]

.Compbott_modulebody [
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;	
]

.Compbott_container_box [

]



/* Provides special styling for the extra per-page footer present onthe home page */

{declare_style style=ExtraFooter name='Extra Footer' cat='Combination' order=995 rev=1 desc='Provides special styling for the extra per-page footer present on the home page'}

.ExtraFooter_container_box [
	margin-top: 20px;
	/*BACKGROUND: white !important; */
	background-color: #E6E6E6;
	background-image: none;			
]

.ExtraFooter_modulebody [
	/*BACKGROUND: white; */
	background-color: #E6E6E6;
	FONT-FAMILY: verdana,geneva,arial,helvetica,sans-serif; 
	font-size: xx-small;
	background-image: none;	
	padding-left: 30px;
	padding-right: 30px;
	/* TEXT-ALIGN: center; */
]
{declare_style style=hpContainer2 name='HP Container Blue' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a light gray box with 375px width on the home page'}

.hpContainer2_container_box [
	width: 329px;
]
.hpContainer2_moduletitle [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/hp_rightContainerTitleBg.gif');
	background-position: top left;
	background-repeat: no-repeat;
	font-size: 21px;
	color: White;
	padding: 10px 0px 0px 30px;
	margin: 0px !important;
	{if $is_ie}
		width: 329px !important;
		height: 55px;
	{else}
		width: 299px !important;
		height: 45px;
	{/if}
]
.hpContainer2_modulebody [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/hp_rightContainerBodyBg_ededed.gif');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-color: #ededed;
	padding: 10px 30px 20px 30px;
	margin: 0px !important;
	{if $is_ie}
		line-height: 16px;
		width: 329px !important;
	{else}
		line-height: 18px;
		width: 329px !important;
	{/if}
]
{declare_style style=hpContainer name='HP Container' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a light gray box with 375px width on the home page'}

.hpContainer_container_box [
	width: 330px;
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/hdBlueStyle02.gif');
	background-repeat: no-repeat;
	background-position: top left;
	padding-top: 5px !important;
	{if $is_ie}
		height: 363px;
	{else}
		height: 358px;
	{/if}
]
.hpContainer_moduletitle [
	font-size: 21px;
	font-weight: bold;
	padding: 20px 30px 5px 30px;
	color: white;
]
.hpContainer_modulebody [
	padding: 0px 30px 10px 30px;
	color: white !important;
]
{declare_style style=hpSmallContainer name='HP 4-Column Box' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a small box with 220px width on the home page'}

.hpSmallContainer_container_box [
	background-color: WHITE !important;
	color: #333333;
	border: 1px solid #999999;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;	
	font-weight: normal;
	{if $is_ie}
		width: 220px;	
		height: 192px;
	{else}	
		width: 190px;	
		height: 172px;
	{/if}
	padding: 10px 10px 10px 20px!important;
]
{declare_style style=hpSmallContainerGradient name='HP Gradient Box' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a small box with 220px width on the home page'}

.hpSmallContainerGradient_container_box [
	background-color: WHITE !important;
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/4_colGradientBg.gif');
	background-repeat: repeat-x;
	background-position: bottom left;
	color: #333333;
	border: 1px solid #999999;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;	
	font-weight: normal;
	{if $is_ie}
		width: 220px;	
		height: 200px;
	{else}	
		width: 205px;	
		height: 180px;
	{/if}
	padding: 10px 5px 5px 10px!important;
]
{declare_style style=hpContainerBg name='HP Container Bg' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a 900x300px container background'}

.hpContainerBg_container_box [
	background-color: WHITE !important;
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/blank_containerBg4.gif');
	background-repeat: no-repeat;
	background-position: top left;
	{if $is_ie}
		width: 900px;	
		height: 300px;
	{else}	
		width: 885px;	
		height: 290px;
	{/if}
	padding: 10px 0px 0px 15px!important;
]
{declare_style style=successStoriesContainer name='Success Stories Container' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a 900x300px container background'}

.successStoriesContainer_container_box [
	background-color: WHITE !important;
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/successStoriesBannerBg02.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	{if $is_ie}
		width: 900px;	
		height: 291px;
	{else}	
		width: 860px;	
		height: 251px;
	{/if}
	padding: 20px !important;
]
{declare_style style=hpSmallContainerMerge name='HP 4-Col Merge' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a small box with 445px width on the home page'}

.hpSmallContainerMerge_container_box [
	background-color: WHITE !important;
	color: #333333;
	border: 1px solid #999999;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;	
	font-weight: normal;
	{if $is_ie}
		width: 445px;	
		height: 192px;
	{else}	
		width: 415px;	
		height: 172px;
	{/if}
	padding: 10px 10px 10px 20px!important;
]
{declare_style style=hpMediumContainerGradient name='HP 2-col gradient box' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a small box with 445px width on the home page'}

.hpMediumContainerGradient_container_box [
	background-color: WHITE !important;
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/4_colGradientBg.gif');
	background-repeat: repeat-x;
	background-position: bottom left;
	color: #333333;
	border: 1px solid #999999;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;	
	font-weight: normal;
	{if $is_ie}
		width: 445px;	
		height: 200px;
	{else}	
		width: 430px;	
		height: 180px;
	{/if}
	padding: 10px 5px 5px 10px!important;
]
{declare_style style=hpMdeiumContainer name='HP 2-Column Box' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a small box with 445px width on the home page'}

.hpMdeiumContainer_container_box [
	background-color: WHITE !important;
	color: #333333;
	border: 1px solid #999999;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;	
	font-weight: normal;
	line-height: 18px;
	{if $is_ie}
		width: 445px;	
		height: 265px !important;
	{else}	
		width: 425px;	
		height: 245px !important;
	{/if}
	padding: 25px 10px 0px 10px!important;
]
.hpMdeiumContainer_moduletitle [
	font-size: 21px;
	padding-bottom: 15px;
]
.hpMdeiumContainer_modulebody [
	line-height: 18px;
]
{declare_style style=hp3ColContainer name='HP 3-Column Box' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a small box with 296px width on the home page'}

.hp3ColContainer_container_box [
	background-color: WHITE !important;
	color: #333333;
	border: 1px solid #999999;
	font-family: verdana, geneva, sans-serif;
	font-weight: normal;
	{if $is_ie}
		width: 295px;	
		height: 240px;
	{else}	
		width: 275px;	
		height: 220px;
	{/if}
	padding: 10px 10px 10px 10px!important;
]
.hp3ColContainer_modulebody [
	font-size: 10px !important;
]

{declare_style style=supportTitleUnderline name='Underlined Title' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a black line under module title'}

.supportTitleUnderline_container_box [
]
.supportTitleUnderline_moduletitle [
	border-bottom: 1px solid {$BORDER_COLOR};
]
.supportTitleUnderline_modulebody [
	padding-top: 20px;
]

{declare_style style=blueBox name='Blue Box' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a blue title box'}

.blueBox_container_box [
]
.blueBox_moduletitle [
	/*background-color: #92BDCC;
	color: BLACK; */
	background-color: #0071bd;
	color: white;
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	padding-left: 15px;
	padding-top: 8px;
	margin-bottom: 5px;
]
.blueBox_modulebody [
	/*margin-top: 5px;*/
	margin-bottom: 20px;
	padding: 15px !important;
	border: 1px solid {$BORDER_COLOR};
]

{declare_style style=cleanForm name='hd clean form' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='HotDoodle clean form'}

.cleanForm_container_box [
]
.cleanForm_moduletitle [
	color: #0071bd !important;
	font-size: 24px !important;
	background-color: transparent !important;
	margin-right: 100px !important;
	border-bottom: 1px solid #0071bd !important;
	margin-bottom: 25px !important;
	padding-left: 0 !important;
]
.cleanForm_modulebody [

]
.cleanForm_modulebody table.hdform [
	border: 0px !important;
	background-color: transparent !important;
]
.cleanForm_modulebody table.hdform .hdform_label [
	color: #0071bd !important;
	padding-bottom: 10px !important;
]
.cleanForm_modulebody input.button [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/submitButton_blank.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	height: 38px !important;
	width: 140px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: {$BASE_SIZE|font_size:1} !IMPORTANT;
]
.cleanForm_modulebody textarea [
	/*font-size: {$BASE_SIZE} !important;
	font-family: {$MAIN_FONT_FAMILY} !IMPORTANT;*/
]
{declare_style style=PaxForm name='Pax Form' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='Pax Form font color, button, and field styles'}

.PaxForm_container_box [
]
.PaxForm_moduletitle [
	color: #FFFFFF !important;
	font-size: 24px !important;
	background-color: transparent !important;
	margin-right: 100px !important;
	border-bottom: 1px solid #0071bd !important;
	margin-bottom: 25px !important;
	padding-left: 0 !important;
]
.PaxForm_modulebody [

]
.PaxForm_modulebody table.hdform [
	border: 0px !important;
	background-color: transparent !important;
]
.PaxForm_modulebody table.hdform .hdform_label [
	color: #FFFFFF !important;
	padding-bottom: 10px !important;
]
.PaxForm_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery140/button_pinkBlank_280x47.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	height: 47px !important;
	width: 280px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: 16px !IMPORTANT;
              color: #FFFFFF !important;
]
.PaxForm_modulebody textarea [
	/*font-size: {$BASE_SIZE} !important;
	font-family: {$MAIN_FONT_FAMILY} !IMPORTANT;*/
]
{declare_style style=PaxOrderForm name='Pax Order Form' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='Pax Form font color, button, and field styles'}

.PaxOrderForm_container_box [
]
.PaxOrderForm_moduletitle [
	color: #FFFFFF !important;
	font-size: 24px !important;
	background-color: transparent !important;
	margin-right: 100px !important;
	border-bottom: 1px solid #0071bd !important;
	margin-bottom: 25px !important;
	padding-left: 0 !important;
]
.PaxOrderForm_modulebody [

]
.PaxOrderForm_modulebody table.hdform [
	border: 0px !important;
	background-color: transparent !important;
]
.PaxOrderForm_modulebody table.hdform .hdform_label [
	color: #FFFFFF !important;
	padding-bottom: 15px !important;
        font-size: 16px;
        font-weight: bold;
]
.PaxOrderForm_modulebody .hdform_me [
	padding: 0px;
        margin: 0px;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 16px;
]
.PaxOrderForm_modulebody .hdform_field [
	color: #FFFFFF;
]
.PaxOrderForm_modulebody .hdform_field input [
	color: #333333;
        font-size: 16px !important;
]
.PaxOrderForm_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery126/button_paxCallMeBox.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	height: 45px !important;
	width: 236px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: {$BASE_SIZE|font_size:2} !IMPORTANT;
]
.PaxOrderForm_modulebody textarea [
	/*font-size: {$BASE_SIZE} !important;
	font-family: {$MAIN_FONT_FAMILY} !IMPORTANT;*/
]
{declare_style style=simpleForm name='hd simple form' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='HotDoodle simple get it made form'}

.simpleForm_container_box [
]
.simpleForm_moduletitle [
	color: #0071bd !important;
	font-size: 24px !important;
	background-color: white !important;
	margin-right: 100px !important;
	border-bottom: 1px solid #0071bd !important;
	margin-bottom: 25px !important;
	padding-left: 0 !important;
]
.simpleForm_modulebody [

]
.simpleForm_modulebody table.hdform [
	border: 0px !important;
	background-color: white !important;
]
.simpleForm_modulebody table.hdform .hdform_label [
	color: #0071bd !important;
	padding-bottom: 10px !important;
]
.simpleForm_modulebody input.button [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/button_requestFreeCall.gif') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	height: 40px !important;
	width: 240px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: {$BASE_SIZE|font_size:1} !IMPORTANT;
	color: white !important;
	padding-bottom: 7px !important;
]
.simpleForm_modulebody textarea [
	/*font-size: {$BASE_SIZE} !important;
	font-family: {$MAIN_FONT_FAMILY} !IMPORTANT;*/
]
{declare_style style=simpleFormV2 name='hd simple form v2' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='HotDoodle simple get it made form'}

.simpleFormV2_container_box [
]
.simpleFormV2_moduletitle [
	color: #0071bd !important;
	font-size: 24px !important;
	background-color: white !important;
	margin-right: 100px !important;
	border-bottom: 1px solid #0071bd !important;
	margin-bottom: 25px !important;
	padding-left: 0 !important;
]
.simpleFormV2_modulebody [

]
.simpleFormV2_modulebody table.hdform [
	border: 0px !important;
	background-color: white !important;
]
.simpleFormV2_modulebody table.hdform .hdform_label [
	color: #0071bd !important;
	padding-bottom: 10px !important;
]
.simpleFormV2_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery83/buttonv2_blank_set.gif') !important;
	background-repeat: no-repeat !important;
	background-color: white !important;
        background-position: top center;
	height: 52px !important;
	width: 240px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: 20px !IMPORTANT;
	color: white !important;
	padding-bottom: 7px !important;
        display: block;
        cursor: pointer;
]
.simpleFormV2_modulebody input.button:hover [
        background-position: 0 -52px;
]
.simpleFormV2_modulebody textarea [
	/*font-size: {$BASE_SIZE} !important;
	font-family: {$MAIN_FONT_FAMILY} !IMPORTANT;*/
]
{declare_style style=framebox name='Box W/ Frame' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a box with frame'}

.framebox_container_box [
]
.framebox_modulebody [
	padding: 20px !important;
	border: 1px solid {$BORDER_COLOR};

	background-color: #F2F2F2 !important;
]

{declare_style style=bigLogin name='Big Login Box' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a box with frame'}

.bigLogin_container_box [
        padding-top: 50px !important;
        background: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery127/title_memberLogin.png') no-repeat top left;
]
.bigLogin_moduletitle [

]
.bigLogin_modulebody [

]
.bigLogin_modulebody input [
        height: 40px;
        width: 300px;
        font-size: 20px !important;
        margin-bottom: 5px !important;
]
.bigLogin_modulebody .login_checkbox [
        height: 40px;
        width: auto;
        vertical-align: middle;
        font-size: {$BASE_SIZE};
]
.bigLogin_modulebody input.button [
        height: 40px !important;
        width: 200px !important;
        border: 0px;
        font-size: 20px !important;
        background: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery127/ButtonBlueBg_login.png') no-repeat top left;
]
{declare_style style=tryEditingBgLP cat='Combination' rev=1 order=975 desc='Try editing container bg in the landing page - March 2013'}
div.tryEditingBgLP_container_box [
        background: #FFFFFF url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery140/tryEditingBg.png') repeat-x top left;
        width: 920px;
        padding: 40px;
]
.tryEditingBgLP_moduletitle [

]
.tryEditingBgLP_modulebody [

]
{declare_style style=fontsize18 cat='Combination' rev=1 order=975 desc='font size 18px with larger line height. More space between bullets as well'}
div.fontsize18_container_box [

]
.fontsize18_moduletitle [

]
.fontsize18_modulebody, .fontsize18_modulebody p, .fontsize18_modulebody span, .fontsize18_modulebody li [
         font-size: 18px !important;
         line-height: 1.5em;
]
.fontsize18_modulebody li [
         padding-bottom: 5px;
]
{declare_style style=topPush90 cat='Combination' rev=1 order=975 desc='90px tall spacer'}
div.topPush90_container_box [

]
.topPush90_moduletitle [

]
.topPush90_modulebody [
	padding-top: 90px !important;
]
{declare_style style=boxShadow cat='Combination' rev=1 order=975 desc='??????????????'}
div.boxShadow_container_box [
        box-shadow: 0px 0px 10px #333333;
]
.boxShadow_moduletitle [

]
.boxShadow_modulebody [

]

/* For single line login block in header */

.divtop .login_welcome [
	padding-top: 20px !important;
	padding-right: 20px !important;
] 

.login_welcome_oneline [
	color: #494949; 	/* medium gray */
	font-size: 12px;
	font-weight: bold;
] 

a.login_welcome_oneline [
	font-size: 12px;
	color: #336699;
	/*text-decoration: underline;*/
] 

{declare_style style=loginStyle name='Login' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a style for a login block'}
/* for post project registration page */
.loginStyle_container_box [
	background-color: #F2F2F2 !important;
	color: #333333;
	/*border: 1px solid #999999;*/
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding: 20px !important;
	text-align: center;
	{if $is_ie}
		height: 380px !important;
	{else}
		height: 300px !important;
	{/if}
]
.loginStyle_moduletitle [
	width: auto;
	text-align: left;
	padding-bottom: 15px;	
	padding-left: 10px;
]
.loginStyle_modulebody input [
	{if $is_ie}
		margin-bottom: 5px !important; /* to separate each line, td won't work since there are 2 td for checkbox (double padding) */
	{else}
		margin-bottom: 10px !important; /* to separate each line, td won't work since there are 2 td for checkbox (double padding) */
	{/if}
]
.loginStyle_modulebody input.button [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/greenButton_bg.gif');
	background-repeat: repeat-x;
	background-color: white;
	height: 25px;
	font-weight: bold;
	border: 1px solid #4E772A;
	margin: 0px;
	padding: 0 15px;
	font-size: {$BASE_SIZE|font_size:1};
]
.loginStyle_modulebody .login_checkbox [
	vertical-align: middle !important;
]

{declare_style style=registrationStyle name='Registration' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a style for a registration block'}

.registrationStyle_container_box [
	background-color: #F2F2F2 !important;
	color: #333333;
	border: 1px solid #999999;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;	
	font-weight: normal;	
	padding: 20px !important;
	text-align: center;
	{if $is_ie}
		height: 420px !important;
	{else}
		height: 350px !important;
	{/if}
]
.registrationStyle_modulebody [
	margin-left: auto !important;
	margin-right: auto !important;
]

{declare_style style=getSiteBuilt name='getSiteBuilt' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a gray box with 280px width and 300px height (for 3 columns split evenly)'}

.getSiteBuilt_container_box [
]
.getSiteBuilt_modulebody [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/getSiteBuiltBg2.gif');
	background-repeat: no-repeat;
	background-position: top center;
	padding: 20px !important;
	width: 280px;
	height: 300px !important;
]
{declare_style style=monthlyFee name='monthlyFee' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a gray box with 280px width and 400px height (for 3 columns split evenly)'}

.monthlyFee_container_box [
]
.monthlyFee_modulebody [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/monthlyFeeBg.gif');
	background-repeat: no-repeat;
	background-position: top center;
	padding: 20px !important;
	width: 280px;
	height: 400px !important;
]
{declare_style style=grayFormBlock name='Gray Form Block' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a gray box with 280px width and 400px height (for 3 columns split evenly)'}

.grayFormBlock_container_box [
]
.grayFormBlock_modulebody [
	background-color: #E6E6E6;
	padding: 20px !important;
]
.grayFormBlock_modulebody .form_modulebody [
	width: 380px !important;
]
.grayFormBlock_modulebody form.hdform [
	background-color: #E6E6E6;
	width: 320px !important;
]
.grayFormBlock_modulebody table.hdform [
	background-color: #E6E6E6;
]
.grayFormBlock_modulebody .hdform_label p [
	font-weight: bold;
	font-size: 16px;
]
{declare_style style=introVideo name='Intro Video' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a gray box with 280px width and 400px height (for 3 columns split evenly)'}

.introVideo_container_box [
	background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/homepage_businessBg04_video.jpg') !important;
	background-repeat: no-repeat !important;
	width: 960px !important;
	height: 366px !important;
]
.introVideo_modulebody .swf_modulebody [
]

{declare_style style=introVideoPadding name='Intro Video Padding' cat='HotDoodle 6' catorder=444 break=1 order=901 rev=1 desc='provide a gray box with 280px width and 400px height (for 3 columns split evenly)'}

.introVideoPadding_container_box [
]
.introVideoPadding_modulebody [
	padding-top: 50px !important;
	padding-left: 50px !important;
]
{declare_style style=LandingPageBigContainer cat='Combination' rev=1 order=975 desc='??????????????'}
div.LandingPageBigContainer_container_box [
	/*background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery120/bg04c_forContainer.jpg');*/
        /*background-color: #051925;*/
        background-position: top center;
        /*background-attachment: fixed;*/
        width: 1024px !important;
        /*height: 700px;*/
        padding: 0 !important;
]
.LandingPageBigContainer_moduletitle [

]
.LandingPageBigContainer_modulebody [

]
{declare_style style=LandingWhiteBg cat='Combination' rev=1 order=975 desc='??????????????'}
div.LandingWhiteBg_container_box [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery120/containerWhiteBg.png');
        background-position: top center;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
        padding: 0 52px;
        /*height: 700px;*/
]
.LandingWhiteBg_moduletitle [

]
.LandingWhiteBg_modulebody [

]
{declare_style style=CallMeBox cat='Combination' rev=1 order=975 desc='??????????????'}
div.CallMeBox_container_box [
	{if $is_ie}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery120/callMeBoxBg02.png');
        background-repeat: no-repeat;
        width: 300px;
        height: 232px;
        background-color: transparent !important; 
        padding: 60px 20px 20px 20px !important;
	{else}
	{/if}
]
.CallMeBox_moduletitle [

]
.CallMeBox_modulebody [

]
.CallMeBox_modulebody .project_modulebody [

]
.CallMeBox_modulebody table.hdform [
	{if $is_ie}
	{else}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery120/callMeBoxBg02.png');
        background-repeat: no-repeat;
        width: 300px;
        height: 232px;
        background-color: transparent !important; 
        padding: 60px 20px 20px 20px !important;
	{/if}
]
.CallMeBox_modulebody hdform_label [
        padding-bottom: 0px !important;
]
.CallMeBox_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery120/button_callme_orange.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 52px !important;
	width: 240px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: 20px !IMPORTANT;
	color: white !important;
	padding-bottom: 7px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=PaxContact cat='Combination' rev=1 order=975 desc='??????????????'}
div.PaxContact_container_box [
	{if $is_ie}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery126/form02.png');
        background-repeat: no-repeat;
        width: 296px;
        height: 228px;
        background-color: transparent !important; 
        padding: 140px 20px 20px 40px !important;
	{else}
	{/if}
]
.PaxContact_moduletitle [

]
.PaxContact_modulebody [

]
.PaxContact_modulebody .project_modulebody [

]
.PaxContact_modulebody form.hdform [
	{if $is_ie}
        background-color: transparent !important; 
	{else}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery126/form02.png');
        background-repeat: no-repeat;
        width: 356px;
        height: 388px;
        background-color: transparent !important; 
        padding: 140px 20px 20px 40px !important;
	{/if}
]
.PaxContact_modulebody table.hdform [
        background-color: transparent !important; 
]
.PaxContact_modulebody .hdform_label [
        padding-bottom: 0px !important;
        color: white !important;
]
.PaxContact_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery126/button_paxCallMeBox.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 45px !important;
	width: 236px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: 20px !IMPORTANT;
	color: white !important;
	padding-bottom: 2px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=BlackConsultationForm cat='Combination' rev=1 order=975 desc='Black consultation form that is used in the landing page in dp4v2'}
div.BlackConsultationForm_container_box [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery140/blackFormBg02.png');
        background-repeat: no-repeat;
        width: 300px;
        background-color: transparent !important; 
	{if $is_ie}
                height: 335px;
                padding: 35px 20px 0px 40px !important;
	{else}
                height: 345px;
                padding: 25px 20px 0px 40px !important;
	{/if}
]
.BlackConsultationForm_moduletitle [
        background-color: transparent !important;
        padding-left: 0px !important;
        font-size: 40px !important;
        font-weight: normal !important;
        padding-bottom: 40px;
        font-family: {$FORMTITLE_FONT_FAMILY};
]
.BlackConsultationForm_modulebody [

]
.BlackConsultationForm_modulebody .hdform_field input [
        padding: 3px 0px;
        width: 210px;
]
.BlackConsultationForm_modulebody .hdform_field select [
        padding: 3px 0px;
        margin-left: 0px;
]
.BlackConsultationForm_modulebody .project_modulebody [

]
.BlackConsultationForm_modulebody table.hdform [
        background-color: transparent !important; 
]
.BlackConsultationForm_modulebody .hdform_label, .BlackConsultationForm_modulebody .datefield [
        padding-bottom: 0px !important;
        color: white !important;
]
.BlackConsultationForm_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery140/button_pinkBlank_280x47.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 47px !important;
	width: 280px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px 0px 0px 0px !important;
	font-size: 16px !IMPORTANT;
	color: white !important;
	padding-bottom: 2px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=BlackConsultationDetailFormNoPestor cat='Combination' rev=1 order=975 desc='Black consultation detail form that is used in the landing page in dp4v2'}
div.BlackConsultationDetailFormNoPestor_container_box [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/detailForm_noPester_2steps.png');
        background-repeat: no-repeat;
        width: 800px;
        background-color: transparent !important; 
	{if $is_ie}
                height: 405px;
                padding: 35px 100px 0px 100px !important;
	{else}
                height: 415px;
                padding: 25px 100px 0px 100px !important;
	{/if}
]
.BlackConsultationDetailFormNoPestor_moduletitle [
        background-color: transparent !important;
        padding-left: 0px !important;
        font-size: 46px !important;
        font-weight: normal !important;
        text-align: center;
        padding-bottom: 30px;
        font-family: {$FORMTITLE_FONT_FAMILY};
]
.BlackConsultationDetailFormNoPestor_modulebody [

]
.BlackConsultationDetailFormNoPestor_modulebody .hdform_field input [
        padding: 3px 0px;
        /*width: 210px;*/
]
.BlackConsultationDetailFormNoPestor_modulebody .hdform_field select [
        padding: 3px 0px;
        margin-left: 0px;
]
.BlackConsultationDetailFormNoPestor_modulebody textarea [
        margin-bottom: 10px !important;
        height: 160px;
        width: 530px;
]
.BlackConsultationDetailFormNoPestor_modulebody table.hdform [
        background-color: transparent !important; 
]
.BlackConsultationDetailFormNoPestor_modulebody .hdform_label, .BlackConsultationDetailFormNoPestor_modulebody .datefield [
        padding-bottom: 0px !important;
        color: white !important;
        font-size: 18px;
        line-height: 2em;
]
.BlackConsultationDetailFormNoPestor_modulebody .hdform_field input [
        height: 30px !important;
        width: 300px !important;
        font-size: 20px !important;
        margin-bottom: 5px !important;
]
.BlackConsultationDetailFormNoPestor_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/button_pinkBlank_lock.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 47px !important;
	width: 292px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px 0px 0px 0px !important;

	font-size: 16px !IMPORTANT;
	color: white !important;
	padding-bottom: 2px !important;
        padding-left: 35px !important;
        display: block;
        cursor: pointer;
]

{declare_style style=BlackConsultationDetailOrangeButton cat='Combination' rev=1 order=975 desc='Black consultation detail form that is used in the landing page in dp4v2'}
div.BlackConsultationDetailOrangeButton_container_box [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/detailForm_noPester_2steps.png');
        background-repeat: no-repeat;
        width: 800px;
        background-color: transparent !important; 
	{if $is_ie}
                height: 405px;
                padding: 35px 140px 0px 140px !important;
	{else}
                height: 415px;
                padding: 25px 140px 0px 140px !important;
	{/if}
]
.BlackConsultationDetailOrangeButton_moduletitle [
        background-color: transparent !important;
        padding-left: 0px !important;
        font-size: 46px !important;
        font-weight: normal !important;
        text-align: center;
        padding-bottom: 30px;
        font-family: {$FORMTITLE_FONT_FAMILY};
]
.BlackConsultationDetailOrangeButton_modulebody [

]
.BlackConsultationDetailOrangeButton_modulebody .hdform_field input [
        padding: 3px 0px;
        /*width: 210px;*/
]
.BlackConsultationDetailOrangeButton_modulebody .hdform_field select [
        padding: 3px 0px;
        margin-left: 0px;
]
.BlackConsultationDetailOrangeButton_modulebody textarea [
        margin-bottom: 10px !important;
        height: 160px;
        width: 530px;
]
.BlackConsultationDetailOrangeButton_modulebody table.hdform [
        background-color: transparent !important; 
]
.BlackConsultationDetailOrangeButton_modulebody .hdform_label, .BlackConsultationDetailOrangeButton_modulebody .datefield [
        padding-bottom: 0px !important;
        color: white !important;
        font-size: 18px;
        line-height: 2em;
]
.BlackConsultationDetailOrangeButton_modulebody .hdform_field input [
        height: 30px !important;
        width: 300px !important;
        font-size: 20px !important;
        margin-bottom: 5px !important;
]
.BlackConsultationDetailOrangeButton_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery166/button_orangeBg.png') !important;
	background-repeat: repeat-x !important;
	background-color: transparent !important;
        background-position: top center;
	height: 47px !important;
	font-weight: bold !important;
	border: 0px !important;
        border-radius: 5px;
	margin: 0px 0px 0px 90px !important;
	font-size: 16px !IMPORTANT;
	color: white !important;
	padding-bottom: 2px !important;
        padding-left: 35px !important;
        padding-right: 35px !important;
        display: block;
        cursor: pointer;
]
.BlackConsultationDetailOrangeButton_modulebody input.button:hover [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery166/button_orangeBg_hover.png') !important;
]

{declare_style style=BlackConsultationFormNoPestor cat='Combination' rev=1 order=975 desc='Black consultation form that is used in the landing page in March, 2013'}
div.BlackConsultationFormNoPestor_container_box [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/blackFormBg03_height440.png');
        background-repeat: no-repeat;
        width: 300px;
        background-color: transparent !important; 
	{if $is_ie}
                height: 405px;
                padding: 35px 30px 0px 30px !important;
	{else}
                height: 415px;
                padding: 25px 30px 0px 30px !important;
	{/if}
]
.BlackConsultationFormNoPestor_moduletitle [
        background-color: transparent !important;
        padding-left: 0px !important;
        font-size: 40px !important;
        font-weight: normal !important;
        text-align: center;
        padding-bottom: 10px;
        font-family: {$FORMTITLE_FONT_FAMILY};
]
.BlackConsultationFormNoPestor_modulebody [
        width: 300px !important;
]
.BlackConsultationFormNoPestor_modulebody .hdform_field input [
        padding: 3px 0px;
        width: 210px;
]
.BlackConsultationFormNoPestor_modulebody .hdform_field select [
        padding: 3px 0px;
        margin-left: 0px;
]
.BlackConsultationFormNoPestor_modulebody textarea [
        margin-bottom: 10px !important;
        width: 280px;
]
.BlackConsultationFormNoPestor_modulebody ul [
        list-style-type:none;
        padding:0px;
        margin:0px;
]
.BlackConsultationFormNoPestor_modulebody li [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/bullet_regular.png');
        background-repeat: no-repeat;
        background-position: 0px 5px;
        padding-left: 14px;
]
.BlackConsultationFormNoPestor_modulebody table.hdform [
        background-color: transparent !important; 
]
.BlackConsultationFormNoPestor_modulebody .hdform_label, .BlackConsultationFormNoPestor_modulebody .datefield [
        padding-bottom: 0px !important;
        color: white !important;
]
.BlackConsultationFormNoPestor_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/button_pinkBlank_lock.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 47px !important;
	width: 292px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px 0px 0px 0px !important;
	font-size: 16px !IMPORTANT;
	color: white !important;
	padding-bottom: 2px !important;
        padding-left: 35px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=DP4V3BCFNoPestor cat='Combination' rev=1 order=975 desc='Black consultation form that is used in the landing page in March, 2013'}
div.DP4V3BCFNoPestor_container_box [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery163/blackFormBg04_height470.png');
        background-repeat: no-repeat;
        width: 300px;
        background-color: transparent !important; 
	{if $is_ie}
                height: 435px;
                padding: 35px 30px 0px 30px !important;
	{else}
                height: 445px;
                padding: 25px 30px 0px 30px !important;
	{/if}
]
.DP4V3BCFNoPestor_moduletitle [
        background-color: transparent !important;
        padding-left: 0px !important;
        font-size: 36px !important;
        font-weight: normal !important;
        text-align: center;
        padding-bottom: 30px;
        font-family: {$FORMTITLE_FONT_FAMILY};
]
.DP4V3BCFNoPestor_modulebody [
        width: 300px !important;
]
.DP4V3BCFNoPestor_modulebody .hdform_field input [
        padding: 3px 0px;
        width: 210px;
]
.DP4V3BCFNoPestor_modulebody .hdform_field select [
        padding: 3px 0px;
        margin-left: 0px;
]
.DP4V3BCFNoPestor_modulebody textarea [
        margin-bottom: 10px !important;
        width: 280px;
]
.DP4V3BCFNoPestor_modulebody ul [
        list-style-type:none;
        padding:0px;
        margin:0px;
]
.DP4V3BCFNoPestor_modulebody li [
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/bullet_regular.png');
        background-repeat: no-repeat;
        background-position: 0px 5px;
        padding-left: 14px;
]
.DP4V3BCFNoPestor_modulebody table.hdform [
        background-color: transparent !important; 
]
.DP4V3BCFNoPestor_modulebody .hdform_label, .DP4V3BCFNoPestor_modulebody .datefield [
        padding-bottom: 0px !important;
        color: white !important;
]
.DP4V3BCFNoPestor_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/button_pinkBlank_lock.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 47px !important;

	width: 292px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px 0px 0px 0px !important;
	font-size: 16px !IMPORTANT;
	color: white !important;
	padding-bottom: 2px !important;
        padding-left: 35px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=PaxMobileContact cat='Combination' rev=1 order=975 desc='??????????????'}
div.PaxMobileContact_container_box [
	{if $is_ie}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery128/detailFormBg_mobile.png');
        background-repeat: no-repeat;
        width: 640px;
        height: 610px;
        background-color: transparent !important; 
        padding: 180px 20px 20px 100px !important;
	{else}
	{/if}
]
.PaxMobileContact_moduletitle [

]
.PaxMobileContact_modulebody [

]
.PaxMobileContact_modulebody .project_modulebody [

]
.PaxMobileContact_modulebody table.hdform [
	{if $is_ie}
        background-color: transparent !important; 
	{else}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery128/detailFormBg_mobile.png');
        background-repeat: no-repeat;
        width: 640px;
        height: 610px;
        background-color: transparent !important; 
        padding: 180px 20px 20px 100px !important;
	{/if}
]
.PaxMobileContact_modulebody .hdform_label [
        padding-bottom: 0px !important;
        color: white !important;
        font-size: 24px;
]
.PaxMobileContact_modulebody input [
        height: 40px;
        width: 300px;
        font-size: 20px !important;
        margin-bottom: 5px !important;
]
.PaxMobileContact_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery128/button_submit_mobile.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 70px !important;
	width: 360px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: 32px !IMPORTANT;
	color: white !important;
	padding-bottom: 2px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=BlueAndPinkCallMeBox cat='Combination' rev=1 order=975 desc='A pink consultation form box in a landing page'}
div.BlueAndPinkCallMeBox_container_box [
	{if $is_ie}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery124/freeConsultation_bg.png');
        background-repeat: no-repeat;
        width: 330px;
        height: 220px;
        background-color: transparent !important; 
        padding: 50px 25px 0px 25px !important;
	{else}
	{/if}
]
.BlueAndPinkCallMeBox_moduletitle [

]
.BlueAndPinkCallMeBox_modulebody [

]
.BlueAndPinkCallMeBox_modulebody .project_modulebody [

]
.BlueAndPinkCallMeBox_modulebody table.hdform [
	{if $is_ie}
	{else}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery124/freeConsultation_bg.png');
        background-repeat: no-repeat;
        width: 330px;
        height: 220px;
        background-color: transparent !important; 
        padding: 55px 25px 0px 25px !important;
	{/if}
]
.BlueAndPinkCallMeBox_modulebody hdform_label [
        padding-bottom: 0px !important;
]
.BlueAndPinkCallMeBox_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery124/freeConsultation_buttonBg.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 30px !important;
	width: 176px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: 14px !IMPORTANT;
	color: white !important;
	padding-bottom: 3px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=BlueAndPinkCallMeBox2 cat='Combination' rev=1 order=975 desc='A pink consultation form box in a landing page with different title'}
div.BlueAndPinkCallMeBox2_container_box [
	{if $is_ie}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery124/ScheduleYourDesignConsultation_bg.png');
        background-repeat: no-repeat;
        width: 330px;
        height: 220px;
        background-color: transparent !important; 
        padding: 50px 25px 0px 25px !important;
	{else}
	{/if}
]
.BlueAndPinkCallMeBox2_moduletitle [

]
.BlueAndPinkCallMeBox2_modulebody [

]
.BlueAndPinkCallMeBox2_modulebody .project_modulebody [

]
.BlueAndPinkCallMeBox2_modulebody table.hdform [
	{if $is_ie}
	{else}
        background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery124/ScheduleYourDesignConsultation_bg.png');
        background-repeat: no-repeat;
        width: 330px;
        height: 220px;
        background-color: transparent !important; 
        padding: 55px 25px 0px 25px !important;
	{/if}
]
.BlueAndPinkCallMeBox2_modulebody hdform_label [
        padding-bottom: 0px !important;
]
.BlueAndPinkCallMeBox2_modulebody input.button [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery124/freeConsultation_buttonBg.png') !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
        background-position: top center;
	height: 30px !important;
	width: 176px !important;
	font-weight: bold !important;
	border: 0px !important;
	margin: 0px !important;
	font-size: 14px !IMPORTANT;
	color: white !important;
	padding-bottom: 3px !important;
        display: block;
        cursor: pointer;
]
{declare_style style=detailedConsultationForm cat='Combination' rev=1 order=975 desc='A 1000px width blue bg behind the detailed consultation form in a landing page.'}
div.detailedConsultationForm_container_box [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery124/detailedConsultationForm_bg.jpg');
        background-position: top left;
        background-repeat: no-repeat;
        background-color: transparent;
        height: 612px !important;
        margin-left: 70px !important;
	{if $is_ie}
        padding: 60px 150px 30px 180px;
        width: 1000px !important;
	{else}
        padding: 40px 150px 30px 180px;
        width: 670px !important;
	{/if}
]
.detailedConsultationForm_moduletitle [

]
.detailedConsultationForm_modulebody [

]
{declare_style style=fixedTab cat='Combination' rev=1 order=975 desc='A pink floating tab sitting in the TrustPilot landing page'}
div.fixedTab_container_box [
        position: fixed;
        top: 25%;
        right: 0%;
]
.fixedTab_moduletitle [

]
.fixedTab_modulebody [

]
{declare_style style=paxDetailForm cat='Combination' rev=1 order=975 desc='A 1000px width blue bg behind the detailed consultation form in a landing page.'}
div.paxDetailForm_container_box [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery126/detailFormBg.png');
        background-position: top left;
        background-repeat: no-repeat;
        background-color: transparent;
        height: 610px !important;
        margin-left: 70px !important;
	{if $is_ie}
        padding: 125px 150px 30px 180px;
        width: 1000px !important;
	{else}
        padding: 105px 150px 30px 180px;
        width: 670px !important;
	{/if}
]
.paxDetailForm_moduletitle [

]
.paxDetailForm_modulebody [

]
{declare_style style=lightGrayDetailForm cat='Combination' rev=1 order=975 desc='A 1000px width blue bg behind the detailed consultation form in a landing page.'}
div.lightGrayDetailForm_container_box [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery127/detailFormBg_describeWhatYouNeed.png');
        background-position: top left;
        background-repeat: no-repeat;
        background-color: transparent;
        /*margin-left: 30px !important;*/
	{if $is_ie}
        padding: 125px 150px 30px 180px;
        width: 670px !important;
        height: 455px !important;
	{else}
        padding: 105px 150px 30px 180px;
        width: 670px !important;
        height: 475px !important;
	{/if}
]
.lightGrayDetailForm_moduletitle [

]
.lightGrayDetailForm_modulebody [

]
{declare_style style=BlueOrderFormBg cat='Combination' rev=1 order=975 desc='A 1000px width blue bg behind the detailed consultation form in a landing page.'}
div.BlueOrderFormBg_container_box [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery127/detailFormBg_professionalWebDesign.png');
        background-position: top left;
        background-repeat: no-repeat;
        background-color: transparent;
        margin-left: 30px !important;
	{if $is_ie}
        padding: 125px 150px 30px 180px;
        width: 670px !important;
        height: 415px !important;
	{else}
        padding: 105px 150px 30px 180px;
        width: 670px !important;
        height: 435px !important;
	{/if}
]
.BlueOrderFormBg_moduletitle [

]
.BlueOrderFormBg_modulebody [

]
{declare_style style=NoPadding cat='Combination' rev=1 order=975 desc='turns padding to 0 in modulebody and container'}
div.NoPadding_container_box [
	padding: 0px !important;
        margin: 0px !important;
]
.NoPadding_moduletitle [

]
.NoPadding_modulebody [
	padding: 0px !important;
        margin: 0px !important;
]
{declare_style style=FloatTopHeader cat='Combination' rev=1 order=975 desc='Floats the modulebody to the top'}
div.FloatTopHeader_container_box [

]
.FloatTopHeader_moduletitle [

]
.FloatTopHeader_modulebody [
	position: fixed; 
        top: 0%; 
        margin: 0 auto; 
        height: 70px; 
        width: 1000px; 
        background: transparent url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery140/headerBg.png') no-repeat top;
]


{declare_style style=SeoPush cat='Combination' rev=1 order=975 desc='Positions the element way down in the site.'}
div.SeoPush_container_box [
	position: absolute;
        top: 6500px;
        width: 900px;
        margin-left: auto;
        margin-right: auto;
]
.SeoPush_moduletitle [

]
.SeoPush_modulebody [

]
{declare_style style=tryEditing01 cat='Combination' rev=1 order=975 desc='Positions the element way down in the site.'}
div.tryEditing01_container_box [
        background: url(http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery127/img_tryEditing_section1c.jpg) no-repeat scroll right top transparent; width: 1000px; height: 426px;
]
.tryEditing01_moduletitle [

]
.tryEditing01_modulebody [

]
{declare_style style=tryEditing02 cat='Combination' rev=1 order=975 desc='Positions the element way down in the site.'}
div.tryEditing02_container_box [
        background: url(http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery127/img_tryEditing_section2c2.jpg) no-repeat scroll left top transparent; width: 1000px; height: 374px;
]
.tryEditing02_moduletitle [

]
.tryEditing02_modulebody [

]
{declare_style style=RelativePosition cat='Combination' rev=1 order=975 desc='Make a container position relative'}
div.RelativePosition_container_box [

]
.RelativePosition_moduletitle [

]
.RelativePosition_modulebody [
        position: relative !important;
]
{declare_style style=EditingBox cat='Combination' rev=1 order=975 desc='Positions the element way down in the site.'}
div.EditingBox_container_box [
        
]
.EditingBox_moduletitle [

]
.EditingBox_modulebody, .EditingBox_modulebody td [
	font-size: {$BASE_SIZE|font_size:1};
        line-height: 2em;
        vertical-align: top;
]
.EditingBox_modulebody ul [
        padding-left: 20px;
	{if $is_ie}
		margin-left: 10px;
	{/if}
]

{declare_style style=headerRightCol name='Header Right Col' cat='Custom' rev=1 order=975 desc='change the alignment from right to center when the header right column switches from laptop to mobile. (HTML5)'}
div.headerRightCol_container_box [

]
.headerRightCol_moduletitle [
	text-align: right !important;
]
.headerRightCol_modulebody, .headerRightCol_modulebody div [
	text-align: right !important;
]
@media (max-width: 991px) [
	.headerRightCol_moduletitle [
		text-align: center !important;
	]
	.headerRightCol_modulebody, .headerRightCol_modulebody div [
		text-align: center !important;
	]
]

/* Make the edits of SeoPush elements stand out */
div.SeoPush_container_editheader [	
	padding: 3px;
	background-color: red; 
]
{* Undo the SEO hiding for now, but only when pushed
	This lets the SEO be seen
	But it keeps us from having hidden text
	This way if it does not work we will not think it is due to hidden text
 *}
	div.SeoPush_container_box .shide_moduletitle [
		font-size: x-small !important;
		color: IndianRed   !important; /* ==HIDDEN_FONT_COLOR== */
		background-color: transparent !important;
		background-image: none !important;
	]
	div.SeoPush_container_box .shide_modulebody, div.SeoPush_container_box .shide_modulebody h1, div.SeoPush_container_box .shide_modulebody h2, div.SeoPush_container_box .shide_modulebody p, div.SeoPush_container_box .shide_modulebody a [
		font-size: x-small !important;
		color: IndianRed   !important; /* ==HIDDEN_FONT_COLOR== */
		font-weight: normal !important; 
	]
	div.SeoPush_container_box .shide_modulebody h1 [ font-size: large !important; font-weight: bold; text-align: center ]
	div.SeoPush_container_box .shide_modulebody h2 [ font-size: medium !important; font-weight: bold; text-align: center ]
	div.SeoPush_container_box .shide_modulebody h3 [ font-size: small !important; font-weight: bold; text-align: center ]
	div.SeoPush_container_box .shide_modulebody a [ color: SlateBlue !important ]
	
	div.SeoPush_container_box .shide_container_box [
		font-size: x-small !important;
		color: IndianRed   !important; /* ==HIDDEN_FONT_COLOR== */
		background-color: transparent;
		background-image: none !important;
	]
	
	/* .shide2 is used for some generated content that is best seen only by search engines */
	div.SeoPush_container_box .shide2_modulebody, div.SeoPush_container_box .shide2_modulebody h1, div.SeoPush_container_box .shide2_modulebody h2, div.SeoPush_container_box .shide2_modulebody p, div.SeoPush_container_box .shide2_modulebody a [
		line-height: normal;
		overflow: visible;
		height: auto;
		color: goldenrod !important;
	]
	div.SeoPush_container_box .shide2_modulebody a [ color: SlateBlue !important ]
	
	div.SeoPush_container_box .side_modulebody a.doodlelink [
		color: {$MANAGEMENTLINK_FONT_COLOR} !important;
	]






/* For master lists of consultants, packages, etc. */   
.projectconsultant_moduletitle, .projectfunds_moduletitle, .sharedminicore_moduletitle [
	background-color: #0071bd;
	color: white;
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	padding-left: 20px;
	padding-top: 10px;
	margin-bottom: 5px;
]
/* For "Register so you can ask a question" in view PenPal full profile page */
.projectconsultant_modulebody a, .projectconsultant_modulebody [
	font-size: {$BASE_SIZE};							   
]
.project_moduletitle, .calendar_moduletitle [
	background-color: #0071bd;
	color: white;
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	padding-left: 20px;
	padding-top: 10px;
	margin-bottom: 5px;
]
.project_modulebody td [
	font-size: {$BASE_SIZE};
	padding-top: 5px;
	padding-bottom: 5px;
]
.project_modulebody a [
	font-size: {$BASE_SIZE} !important;
	color: #0071bd;
]
.project_modulebody td.masterlist_text [
	border-right: 1px solid {$BORDER_COLOR};
]
.projectfunds_modulebody td [
	font-size: {$BASE_SIZE} !important;	
	padding-top: 5px;
	padding-bottom: 5px;
]
.projectfunds_modulebody a [
	font-size: {$BASE_SIZE} !important;		
	color: {$LINK_FONT_COLOR} !important;
]
.site [
	margin-bottom: 20px;
	/*padding: 20px !important;*/
	/*border: 1px solid {$BORDER_COLOR};*/
]
.site .doodlelink [
	{if $is_ie}
	{else}
		line-height: 1.5em;
	{/if}
	color: #0071bd;
]
.site tr [
	/*background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/divider_900px.gif');
	background-position: bottom center;
	background-repeat: no-repeat;
	padding-bottom: 10px; */

]
.site td [
	/*font-size: 12px;*/
]
td.site_bottom [ /* The divider line between each site list in my stuff page */
	/*background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/dividerline_cccccc.gif');
	background-repeat: no-repeat;
	background-position: top left;*/
        border-bottom: 1px solid #CCCCCC;
	height: 16px;
	padding-bottom: 15px;
]
.site_navlink [
	font-size: 14px;
	color: #0071bd;
]

div.site_payment [
   /* used when the site has a payment issue. Comtains links to pay, turn off, on, etc */
	margin: 10px;
	background-color: #FFEBEA;
	border: 1px solid #DD3C10;
	padding: 10px;
	width: 50%;
]

div.project_based_on [
	/* Used to format the description of the pre-defined project for which a project is based.
	   Not when the project is first defined, but when it has already been saved
	 */
	/*border: 2px solid black; */
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 20px;
	padding: 10px;
	background-color: #E6E6E6; 
	{if $is_ie}
		width: 820px;
	{else}
		width: 800px;
	{/if}
]
div.project_based_on .masterdetail_titlebar [
	border-top: 0;
	border-bottom: 5px solid #E6E6E6;
]

/* This one is for a top level master list */

.table_masterlist [
    border-spacing: 0;
    border-collapse: collapse;
    background-color: white;
]
.masterlist_modulebody [
	width: 100%;	
]   
   
td.masterlist [
	/*border-top: 2px solid {$FEATURE_COLOR};
	border-bottom: 2px solid {$FEATURE_COLOR};	
	background-image: url("/hotdoodle_engine/looks/images/imagelib/repeating/gallery3/fade_to_paleblue.gif");	
	background-repeat: repeat-x;
 	background-position: bottom left;
 	padding: 5px;	*/
	margin-bottom: 20px;
	padding: 20px !important;
	border-top: 1px solid {$BORDER_COLOR};
	border-bottom: 1px solid {$BORDER_COLOR};
]

td.masterlist_thin [
	/*border-top: 1px solid {$FEATURE_COLOR};
	border-bottom: 1px solid {$FEATURE_COLOR};	*/
	border-top: 1px solid {$BORDER_COLOR};
	border-bottom: 1px solid {$BORDER_COLOR};
]

td.masterlist_name [
	/*border-left: 2px solid {$FEATURE_COLOR};	*/
	border-left: 1px solid {$BORDER_COLOR};
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;
	padding: 10px;		
]

td.masterlist_name_nopic [
	text-align: left;		
]


td.masterlist_text [
	font-size: 11px;
	line-height: 15px;
	padding: 10px;		
]


td.masterlist_price [
	font-size: 11px;
	line-height: 15px;
	text-align: center;		
]

td.masterlist_wrapper [	
	/*border-right: 2px solid {$FEATURE_COLOR}; */
	border-right: 1px solid {$BORDER_COLOR};
]


td.masterlist_quickstats [	
	font-size: 10px;	
	font-weight: bold;
	padding-left: 3px;	
]

td.masterlist_action [		
	padding: 10px 10px 10px 10px;
	/*border-right: 2px solid {$FEATURE_COLOR};*/
	border-right: 1px solid {$BORDER_COLOR};
	text-align: right;	
]


/* This one is for a top level master list with a two-column bottom-right field */

   
.masterlist_modulebody_plus [
	width: 100%;	
] 
   
td.masterlist_plus [
	border: 0px;	
	background-color: transparent;			
]

td.masterlist_name_plus [
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;
	padding: 10px;	
		
]

td.masterlist_name_nopic_plus [
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;
	padding: 10px;	
	text-align: left;			
]

td.masterlist_text_plus [
	font-size: 11px;
	line-height: 15px;
	padding: 10px;			
]

td.masterlist_price_plus [
	font-size: 11px;
	line-height: 15px;
	text-align: center;			
]

td.masterlist_quickstats_plus [	
	font-size: 10px;	
	font-weight: bold;
	padding-left: 3px;	

]

td.masterlist_action_plus [		
	padding: 10px 0px 10px 10px;		
]

td.masterlist_wrapper_plus [	
	border-top: 1px solid {$FEATURE_COLOR};
	border-right: 2px solid {$FEATURE_COLOR};
	border-bottom: 1px solid {$FEATURE_COLOR};
	border-left: 2px solid {$FEATURE_COLOR};	
	background-image: url("/hotdoodle_engine/looks/images/imagelib/repeating/gallery3/fade_to_paleblue.gif");	
	background-repeat: repeat-x;
 	background-position: bottom left;
 	padding: 5px;
]

/* This one is for a top level master list with more complex nested tables */


.masterlist_modulebody_complex [
	width: 100%;	
] 
   
td.masterlist_complex [
	border: 0px;	
	background-color: transparent !important;			
]

td.masterlist_name_complex [
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;
	padding: 10px;	
		
]

td.masterlist_name_nopic_complex [
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;
	padding: 10px;	
	text-align: left;			
]

td.masterlist_text_complex [
	font-size: 11px;
	line-height: 15px;
	padding: 10px;		
	background-color: transparent !important;	 		
]

td.masterlist_price_complex [
	font-size: 11px;
	line-height: 15px;
	text-align: center;			
]

td.masterlist_quickstats_complex [	
	font-size: 10px;	
	font-weight: bold;
	padding-left: 3px;	
]

td.masterlist_action_complex [		
	padding: 10px 0px 10px 10px;		
]

.masterlist_wrapper_complex [	
	border-top: 1px solid {$FEATURE_COLOR};
	border-right: 2px solid {$FEATURE_COLOR};
	border-bottom: 1px solid {$FEATURE_COLOR};
	border-left: 2px solid {$FEATURE_COLOR};	
	background-image: url("/hotdoodle_engine/looks/images/imagelib/repeating/gallery3/fade_to_paleblue.gif");	
	background-repeat: repeat-x;
 	background-position: bottom left;
]

.masterlist_inner_complex [			
	padding-left: 0px;			
]



/* This one is for individual details on consultants, packages, etc. */

td.masterdetail [	
	padding: 20px 0px 0px 0px;
	font-size: 13px;
	line-height: 15px;
]

td.masterdetail_titlebar [	
	color: white;
	font-size: {$BASE_SIZE|font_size:2};
	font-weight: bold;
	letter-spacing: 1px;
	padding: 10px 0px 10px 20px;
	border-top: 5px solid white;
	border-bottom: 5px solid white;
	background-color: {$PROJECT_TITLE_COLOR};
]

td.masterdetail_subtitle [	
	padding: 0px 0px 0px 0px;	
	font-size: {$BASE_SIZE};
	font-style: italic;
	font-weight: bold;
]

div.project_title [
	color: white;
	font-size: {$BASE_SIZE|font_size:2};
	font-weight: bold;
	letter-spacing: 1px;
	padding: 10px 0px 10px 20px;
	border-top: 5px solid white;
	border-bottom: 5px solid white;
	background-color: {$PROJECT_TITLE_COLOR};
]
span.project_title [
	/*margin-bottom: 5px;*/
	font-size: {$BASE_SIZE};
]
td.masterdetail_name [		
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;
]

td.masterdetail_action [		
	/*padding-left: 20px;*/
]
td.masterdetail_action a.button [
              line-height: 2em;
]

td.masterdetail_wrapper [	

]

td.masterdetail_quickstats [
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: normal;
	padding-bottom: 7px;	
]

td.masterdetail_itemlist [		
	font-size: {$BASE_SIZE|font_size:0};
	font-weight: bold;	
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
]

td.masterdetail_itemtext [		
	font-size: {$BASE_SIZE|font_size:0};
	padding: 0px 0px 15px 0px;
]

table.masterdetail_notify [	
	/*font-size: {$BASE_SIZE|font_size:-1};
	line-height: 15px;	
	background-color: #FFCD94;
	border: 3px solid #FFDEB7;
	padding: 2px;*/
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	padding: 30px;
	background: -webkit-linear-gradient(#FFFFFF, #F2F2F2);
	background: -o-linear-gradient(#FFFFFF, #F2F2F2);
	background: -moz-linear-gradient(#FFFFFF, #F2F2F2);
	background: linear-gradient(#FFFFFF, #F2F2F2);
	border-radius: 10px;
	box-shadow: 0 0 10px #CCCCCC;
]

td.masterdetail_notify [
	padding: 2px 0px 20px 0px;	
]

td.masterdetail_description [
	padding-right: 20px;
	padding-left: 20px;
]

td.masterdetail_skills [	
	padding: 0px 0px 0px 5px;
	line-height: 20px;	
]

div.masterdetail_projectstatus [
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	padding: 30px;
	background: -webkit-linear-gradient(#FFFFFF, #F2F2F2);
	background: -o-linear-gradient(#FFFFFF, #F2F2F2);
	background: -moz-linear-gradient(#FFFFFF, #F2F2F2);
	background: linear-gradient(#FFFFFF, #F2F2F2);
	border-radius: 10px;
	box-shadow: 0 0 10px #CCCCCC;
]

/* ======================= 2009_06 project description classes (moving away from the masterdetail stuff) ==== */

.project_title [
	/* Used for titles and emphisis in the project areas */
	color: {$PROJECT_TITLE_COLOR}; /* == PROJECT_TITLE_COLOR == */
	font-weight: bold;
]

div.project_stats [
	/* Used for timeline, cost at top of area */
	line-height: 20px;
	padding: 10px 0px;
	font-size: 12px;
]

div.project_details [
	/* Used when an item is multi-line */
	padding: 5px 0px 10px 0px;  /* top right bottom left */
	margin: 0px;
]

div.project_details pre [
	margin: 0px;
]

div.project_box [
	/* Used to seperate areas */
	/*border-bottom: 1px solid gray;*/
	padding: 0;
	/*margin: 20px 20px 0px 20px;*/
	font-size: 12px;
	line-height: 18px;
	/*background-color: orange;*/
]

div.project_box tr, div.project_box td, div.project_box tr td [
	font-size: 12px !important;
	font-weight: normal;
	line-height: 14px;
]

div.penpal_box [
	/* Used on PenPal summaries. class='project_box penpal_box' */
	padding: 0px;
	/*background-color: #FFDDDD;*/
	/*{if $is_ie}
	width: 100%;
	{else}
	width: 95%;
	{/if}*/
]

div.penpal_desc [
	/* Used to show penpal descriptions in the view full profile screens*/
	padding-bottom: 10px;
	font-size: {$BASE_SIZE};
]
/* about me in the "browse penpals" page */
td.penpal_desc [
	font-size: {$BASE_SIZE};			
]
td.penpal_bid_desc [
	 /* Used to show penpal descriptions in the summary listings */
]
	

td.penpal_label [
	vertical-align: top;
	font-weight: bold !important;
	white-space: nowrap;
	font-size: {$BASE_SIZE};
	{if $is_ie}
		line-height: 1.2em !important;
	{else}
		line-height: 1.5em !important;
	{/if}
	width: 120px;
]
tr.penpal_label_admin [
	/*background-color: pink;*/
]
td.penpal_value [
	vertical-align: top;
	font-size: {$BASE_SIZE};
	{if $is_ie}
		line-height: 1.2em !important;
	{else}
		line-height: 1.5em !important;
	{/if}
]
	
td.penpal_box [
	/* 2 col table, one with the pic, one with an embedded table
	    penpal_pic_col and penpal_data_col 
			<div class='project_box penpal_box'>
				<table class='penpal_box' cellspacing="0" cellpadding="0">
		            {* 2 col table, one with the pic, one with an embedded table *}
		
					{* Show administration links if we are a view that shows many consultants *}
					<tr class="row_master {cycle values='odd,even' advance=0}_row_master" >		</tr>
		
					<tr>
						<td class="penpal_pic_col" valign='top'></td>
						
						<td class="penpal_data_col" valign='top' >
							<table cellspacing="0" cellpadding="0" border="2" width='100%'> {* col 2's table *}
							  	<tr><td colspan=3 class='penpal_tagline'></td></tr>
								<tr>
									<td class="penpal_data_penpal_basics" valign='top' align='left'></td>
									<td class="penpal_data_bid_basics" valign='top' align='left' ></td>
							    </tr>
							    <tr >
									<td class="penpal_desc" align="left" valign='top' colspan='2'>
										$consultant->textinfo.intro
									</td>
					  			</tr>
					  		</table>
						</td>
					</tr>    
			    </table>
	    */
	width: 100%;
]
 
td.penpal_pic_col [
	 /* holds the penpal profile pic, screen name, tagline */
	 width: 150px;
	 /*padding-right: 6px;*/
	 padding: 20px 20px 20px 0;
	 /*background-color: #DDFFDD;*/
	 border-bottom: 1px solid #999;
]
	 
 
 
td.penpal_data_col [
	/* holds the bid, penpal basics, action links, descriptions 
	2 cols, penpal_data_penpal_basics and penpal_data_bid_basics
	*/
	/* background-color: yellow; */
	padding: 20px 0px;
	width: 100%;
	border-bottom: 1px solid #999;
]
	td.penpal_data_col td.penpal_tagline [
		  font-weight: bold !important;
		  font-size: {$BASE_SIZE} !important;
		  /* background-color: blue;  */
		  text-align: left;
		  color: #0071bd;
		  font-style: italic;
		  padding-bottom: 10px;
	 ]
	
	td.penpal_data_col td.penpal_data_penpal_basics [
		/* for feedback, profile, other penpal profile summary items */
		/* background-color: pink; */
		padding: 0px;
		margin: 0px;
	]
	td.penpal_data_col td.penpal_data_penpal_basics td.penpal_label [
	]
	tr.penpal_label_admin [
	]
	td.penpal_data_col td.penpal_data_penpal_basics td.penpal_value [
	]
	
	td.penpal_data_col td.penpal_data_bid_basics [
	]
	td.penpal_data_col td.penpal_data_penpal_status [
		/* This is used instead of penpal_data_bid_basics when a penpal is 
		looking at themselves in the MyStuff page 
		See div.penpal_status for the equivilent in fiew full profile
		*/
		font-weight: normal;
		font-size: {$BASE_SIZE};
		text-align: left;
		background-color: #FFEBEA;
		border: 1px solid #DD3C10;
		padding: 10px;
	]

	
	
/* PenPal View Full Profile */
div.penpal_tagline [
	font-weight: normal;
	font-size: {$BASE_SIZE|font_size:-1};
	background-color: #EEEEEE; 
	text-align: left;
	border: 1px solid #CCCCCC;
	padding: 10px;
	color: #333333;
	{if $is_ie}
		width: 150px !important;
	{else}
		width: 128px !important;
	{/if}
	margin-top: 20px;
]	


div.penpal_name [
	font-weight: bold;
	font-size: 24px;
	text-align: left;
	color: #0071bd;
]	



div.penpal_status [
	/* This is the mangement info shown to a penpal at the top of view full profile */
	font-weight: normal;
	font-size: {$BASE_SIZE};
	text-align: left;
	background-color: #FFEBEA;
	border: 1px solid #DD3C10;
	padding: 10px;
]
	 
div.penpal_contact [
	padding-bottom: 10px;
]	 


a.doodlelink_in_penpal_view [
	/*font-size: xx-small;*/
	font-size: {$BASE_SIZE|font_size:-1};
	color: {$MODULE_TITLE_FONT_COLOR}; /* =MODULE_TITLE_FONT_COLOR= */
	padding-bottom: 5px !important;
	line-height: 2em;
	border-bottom: 1px solid #333333;
	width: 120px;
]

div.project_description [
	color: #0071bd; 
	font-size: {$BASE_SIZE}; 
	font-weight: bold;
	padding-bottom: 5px;
]

	 
input.controlstatus_button [
	background-color: #F7931E;
	color: white;
]
/* just for testing, not using yet

div.tripleframe_inner_notify [
	border: 3px solid red;	
]

div.tripleframe_middle_notify [
	border: 3px solid white;	
]

div.tripleframe_outer_notify [
	border: 3px solid blue;	
] 
*/


/* Special row classes separate from earlier row_even and row_odd */

tr.row_master [
	background-color: transparent;
]

tr.even_row_master [

]

tr.odd_row_master [
]

tr.row:hover td, tr.row:hover td a [

]

pre [
	font-size: 100%;
]

/* fake the pre font settings for fields that don't truly need them but need to mimic the look and feel */


ul.faux_pre [
	list-style-type: disc;
	margin: 20px;
	padding: 0px;

]

li.faux_pre [
	font-family: monospace;
	font-size: 100%;
]

/* make the links within Find A PenPal and Be A PenPal flow look just like links inserted into blocks for
navigation around main site */

a.navigationlink [
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 13px;
	margin-bottom: 20px;
]

div.navigationlink [
	text-align: right;
	line-height: 30px;
]

/* make the standard styles form_header a bit fancier */

div.form_header_fancy [
	border-top: 1px solid gray; 	/* {$BORDER_COLOR};  =BORDER_COLOR= */
	border-bottom: 1px solid gray;	/* {$BORDER_COLOR};  =BORDER_COLOR= */
	color: gray;
	font-style: italic;
	text-align: center;
	padding: 7px 0px 7px 0px;
	margin-bottom: 1em;	
	line-height: 1.5;
	
]

/* make a more basic italicized form footer */

div.form_footer [
	color: gray;
	font-style: italic;
	text-align: center;
	padding: 7px 0px 7px 0px;
	margin-bottom: 1em;		
]



/* To add additional styling to densetable for transaction table*/

table.densetable_fancy [
	border: 2px solid #C8DED3;
]

.densetable_fancy [
	text-align: right;
	padding: 5px;
	border-spacing: 0;
	border-collapse: collapse;
	border-top: 2px solid #C8DED3;
	border-bottom: 2px solid #C8DED3;
]

.densetable_fancy_header [
	font-weight: bold;
	color: #48906B;	
]

.densetable_fancy_footer [
	font-weight: bold;
]

.even_row .densetable_fancy [
	background-color: #D6E7DE;
]

.odd_row .densetable_fancy [
	background-color: #E4EFEA;
]



/* To add table styling that HTML Editor in General Block does not provide, class must 
be handcoded within raw HTML edit mode, example use is Pricing table */


.text_modulebody table.tablestyle [
     padding-top: 0px;
     margin-top: 0px;
]

table.tablestyle [
	width: 96%;
     border-spacing: 0;
     border-collapse: collapse;
]

th.tablestyle, td.tablestyle [
	border: 2px solid #C8DED3;
	background-color: #DEEBE4;	
	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: {$BASE_SIZE|font_size:0};
	text-align: left;
	padding: 7px 7px 7px 7px;
	width: 20%;
]

th.tablestyle [
	color: white;
	background-color: #48906B;
]

td.tablestyle_odd [
	background-color: #E4EFEA;
]

td.tablestyle_subject [
	font-weight: bold;
	width: 40%;
]

/* Add styling option for smaller navigationlink, so can sit next to doodlelink and look okay */
.navigationlink_small [
	font-size: xx-small !important;	
]

/* Add overrides for Styles and Advanced Fields areas so they work better with this look's form styling */
div.block_editing_form [
	background-color: #DBDBDB;
]

.opbutton_undertab [
	background-color: white;
	height: 15px;
	margin: 0px;
]

.adv_opbutton [
	padding-bottom: 0px;	
]


/* Add additional styling for home page slideshow */
.picture_desc hr [
	/* color: transparent; */
	background-color: transparent;
] 


.picture_desc, picture_name [
 	font-family: arial, helvetica, "ms sans serif", sans-serif;
	font-size: 12px !important;	
	line-height: 1.5;
] 

.picture_desc [
	margin: 15px !important;	
]

.picture_name [
	font-size: 16px !important;	
	font-weight: bold;	
]  


/* This is on the picture itself */
img.picture_img [
	border-top: 1px solid #A8A8A8;
	border-right: 2px solid #C0C0C0;
	border-bottom: 2px solid #C0C0C0;
	border-left: 1px solid #A8A8A8;			
]
	
/* This is on the link */	
a.picture_img [

]

/* Draw a box around clickable images */
/*{if $is_ie}
a.example:hover [
	border: 2px solid blue;
        cursor:pointer;
        filter:alpha(opacity=90); /* For IE8 and earlier */
]
{else}*/
img.example:hover [
	/*border: 2px solid blue;*/
        cursor:pointer;
        opacity: 0.7;
        filter:alpha(opacity=70); /* For IE8 and earlier */
]
/*{/if}*/

/* This is on the div containing the picture, will always be the max div size (picture width set in config) even if pic is smaller */	
div.picture_img [
	margin-top: 30px;
	margin-bottom: 20px;	
]



/* The front page needs a fixed width picture album, but the height is variable */
{declare_style style=Width250 name='250 wide' cat='Width' order=655 rev=1 desc='Provides style for third of 1-2-3 little graphic calls to action'}
div.Width250_container_box [
	width: 250px;
]
{declare_style style=Width300 name='300 wide' cat='Width' order=655 rev=1 desc='Provides style for third of 1-2-3 little graphic calls to action'}
div.Width300_container_box [
	width: 300px;
]

/* holds the listing of packages */
table.packagelist [
]
tr.packagelist [
]
tr.packagelist_spacer [
]
td.packagelist [
]
 
/* Package teasers are the package summaries. They are not modules, but they use the same class structure */
.packageteaser_container_box [
	padding: 10px !important;
	background-repeat: no-repeat;
	background-position: top center;
	{if $is_ie}
		background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/grayBox_selectProject_ie.gif');
		width: 212px;
		height: 240px;
	{else}
		background-image: url('/hotdoodle_engine/looks/images/imagelib/main_site/gallery83/grayBox_selectProject.gif');
		width: 196px;
		height: 215px;
		margin-left: 4px;
		margin-right: 4px;
	{/if}

]
.packageteaser_moduletitle [
	font-size: {$BASE_SIZE|font_size:1};
	font-weight: bold;
	color: #0071bd;
	text-align: center;
	padding-bottom: 10px;
]
.packageteaser_moduletitle a [
 font-size: 14px;

 font-weight: bold;
]
.packageteaser_moduletitle a:hover [
 text-decoration: underline;
]
.packageteaser_modulebody [
	font-size: {$BASE_SIZE};
]

.form_help [
	background-color: #FFFFCC !important;
]


/* Used on the please wait screen */
#clonnable_pleasewait [
	text-align: center;
	padding-top: 100px;
	]
#clonnable_pleasewait p [
	text-align: center;
	padding: 0px !important;
	margin: 0 0 20px 0 !important;
	font-size: 12px;
]
#clonnable_pleasewait_title [
	text-align: center;
	padding: 0px !important;
	font-size: 30px !important;
	letter-spacing: .3em;
	color: #0071bd;
]
/* For get domain page */
.domainform_modulebody [
]
.domainform_modulebody .hdform_me [
	font-size: {$BASE_SIZE};
	vertical-align: top;
	text-align: left !important;
	height: auto;
	padding: 0;
]
.domainform_modulebody .hdform_field [
	font-size: {$BASE_SIZE};
	padding: 5px 0 5px 0; /* give each line more space. */
	margin: 0;
	height: auto;
	text-align: left !important;
]
.domainform_modulebody .hdform_label [
	width: 0;
	height: auto;
	padding: 0;
	margin: 0;
]
.domainform_modulebody .hdform_label strong[
	line-height: 40px; /* to add more space to option 1,2,3 title since the titles and section labels are using the same class. */
]
.domainform_modulebody table.hdform [
	padding: 0px !important;
	margin: 0;
]
.domainform_modulebody div [
	font-size: {$BASE_SIZE|font_size:-1};
	padding-left: 0 !important;
	padding-top: 10px;
	text-align: left;
]

.imagegallery_modulebody, .imagegallery_modulebody a [
	font-size: {$BASE_SIZE};													  
]

div.error [
	background-color: #FFEBEA;
	border: 1px solid #DD3C10;
	padding: 10px;	
	margin: 0 !important;
	color: black;
	font-weight: normal !important;
]

.major_title [
	font-size: 24px !important;
	color: #0071bd !important;
	font-weight: bold !important;
	padding-left: 0 !important;
	padding-bottom: 10px !important;
]
.subtitle [
	color: white;
	font-size: {$BASE_SIZE|font_size:2} !important;
	font-weight: bold !important;
	letter-spacing: 1px !important;
	padding: 10px 0px 10px 20px !important;
	border-top: 5px solid white !important;
	border-bottom: 5px solid white !important;
	background-color: #0071bd !important;
]
.subsubtitle [
	font-size: {$BASE_SIZE} !important;
	font-style: italic !important;
	font-weight: bold !important;
	padding-left: 0 !important;
	padding-bottom: 5px !important;
]
.tab_content [
        border: 1px solid #999999;
]
.tabs [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery83/landing_tabBg.gif');
	background-position: right;
	background-repeat: no-repeat;
padding-bottom: 5px;
	font-weight: bold;
	margin-left: 0px;
	color: #0071bd;
	float: left;
	width: 167px;
	height: 40px;
	text-align: center;
        border: 0;
        cursor: pointer;
]
.tab_last [
	background-image: url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery83/landing_tabBg_last.gif');
	background-position: right;
	background-repeat: no-repeat;
padding-bottom: 5px;
	font-weight: bold;
	margin-left: 0px;
	color: #0071bd;
	float: left;
	width: 167px;
	height: 40px;
	text-align: center;
        border: 0;
        cursor: pointer;
]
.tabs_hover, .tab_last_hover [ 
        text-decoration: none;
        color: #999999;
        cursor: pointer;
]
.Marketing_box_visible [
	background-color: #282a2a !important;
        margin: 0 !important;
        padding: 20px 0px;
]
.divtop br [
        display: none !important;
]

.overlayplay [
        margin-top: -405px;
        {if $is_ie}
	        margin-left: 0px;
        {else}									
                margin-left: 20px;
        {/if}
]

.tboxinner [
	padding:0px; 
	-moz-border-radius:0px; 
	border-radius:0px; 
	background:none; 
	border: none;
	background-color: {$OVERLAY_FRAME_COLOR}; /* $OVERLAY_FRAME_COLOR */ {* The visible contents will be in a 15px frame of this color *}
]
.tbox [	
	padding:0px; 
]
.tboxclose [
        /*display: none;*/
]
.body_popup .mainarea, .body_popup .mainarea_table [
        padding: 0px;
        width: 100%;
]
.body_popup, .body_popup div.slideshow_fullsize, .body_popup td.album_pictures, .body_popup .album_pictures_ThumbnailsOverlay [
        margin: 0px !important;
        padding: 0px !important;
        border: 0px;
        background-color: #E6E6E6 !important;
        background-image: none !important;
        overflow: hidden;
]
.album_picgridcell_Grid [
        padding: 0px 18px 18px 0px !important;
]

/* dp4 classes only */
.laptop_dp4 [
        width: 582px;
        height: 369px;    
]
.laptop_div_dp4 [
        margin-right: -100px;
        margin-top: -20px;   
]
.three_seals_dp4 [
        margin: 30px 0px 0px 0px;
]
.video_thumbnail_dp4 [
        padding-top: 0px; padding-bottom: 60px;
]
.no_pester_popup h3 [
   /*position: absolute; 
        {if $is_chrome}
            top: 350px; 
        {else}
            top: 340px; 
        {/if}
        {if $is_ie}
            top: 320px; 
        {/if} 
   left: 20px; */
   width: 100%; 
]
.no_pester_popup ul [
   /*position: absolute; 
        {if $is_chrome}
            top: 370px; 
        {else}
            top: 360px; 
        {/if}
        {if $is_ie}
            top: 340px; 
        {/if} 
   left: 0px; */
   width: 100%; 
]
.no_pester_popup [
        border-radius: 10px !important;
        box-shadow: 0px 0px 5px #333333 !important;
        background-color: #FFFFFF !important;
        padding: 20px 20px 20px 20px !important;
        margin-top: 10px !important;
        height: 150px !important;
        width: 300px !important;
   /*position: relative !important; */
        /*{if $is_chrome}
            top: 370px; 
        {else}
            top: 360px; 
        {/if}
        {if $is_ie}
            top: 340px; 
        {/if} */
   left: 0px; 
]
a.no_pester_link [
        color: #FFFFFF !important;
]
.no_pester_table_info [
        background: transparent url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/noPesterBg_detailForm.png') no-repeat top left;
        width: 204px;
        height: 273px;
        padding: 20px 30px 20px 40px !Important;
        margin-left: 20px !important;
        vertical-align: top;
]
.no_pester_table_info h3 [
        font-family: {$FORMTITLE_FONT_FAMILY};
        font-size: 20px;
        color: #333333;
        background: transparent url('http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/lock_noPesterTitle.png') no-repeat left;
        padding-top: 2px;
        padding-left: 21px;
        margin-left: 5px;
]
.no_pester_table_info ul [
        list-style-type: none;
        padding: 0px;
        margin: 0px;
]
.no_pester_table_info ul li [
        background-image: url(http://imagelib.hotdoodle.com/files/imagegallerymodule/4976030088c5d/gallery162/bullet_noPesterPolicy.png);
        background-repeat: no-repeat;
        background-position: 5px 0px;
        padding-left: 28px; 
        padding-bottom: 10px;
]
.oneLinePopUp span [
        position: absolute !important; 
	opacity:0;
	filter:Alpha(opacity=0);
        z-index: 999;
]
.oneLinePopUp:hover span [
        opacity:1;
	filter:Alpha(opacity=100);
        border-radius: 10px !important;
        box-shadow: 0px 0px 5px #333333 !important;
        background-color: #FFFFFF !important;
        padding: 30px !important;
        margin-left: -250px;
        margin-top: 25px;
]

div#buttonBg:hover [
        opacity: 0.8;
        filter: alpha(opacity=80); /* For IE8 and earlier */
]

/* Media Queries */
@media screen and (max-width: 1024px) [
  .laptop_dp4 [
        width: 490px;
        height: 311px;    
  ]
  .laptop_div_dp4 [
        margin-right: 0px;
        margin-top: 0px;   
  ]
  .three_seals_dp4 [
        margin: 50px 0px 0px 0px;
  ]
  .video_thumbnail_dp4 [
        padding-top: 30px; padding-bottom: 60px;
  ]
]