@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);
@charset "utf-8";

/* ================== CSS RESET ====================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, input, textarea, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Architects Daughter', arial;
}

/********************************
  HTML Element Settings
********************************/

*
{
	padding: 0;
	margin: 0;
}

body
{
	color: #38853B;
	background-image: url(https://cache.e-cards.com/images/backgrounds/bg1.gif);
	background-repeat: repeat;
	padding: 1em;
}

noscript p
{
	color: #991010;
	border: 2px #991010 double;
	margin: 20px auto 20px auto;
	width: 80%;
	padding: 5px;
	background-color: #FFF;
}

#topNav
{
	margin: 20px auto 12px auto;
	clear: both;
	display: block;
}

select, input
{
	color: #7891EC;
	background-color: #F6FBFF;
}

.eButton
{
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	padding: 4px 7px 4px 7px;
	border: 2px solid #009900;
	background-color: #CDE8EC;
	margin: .4em .3em .4em .3em;
	color: #31751D;
	cursor: pointer; cursor: hand;
}

.eButton:hover {opacity: 0.6; }

.plus_minus_button
{
	font-family: Arial;
	font-weight: 800;
	line-height: .8;
}


ul,ol
{
	list-style-position: outside;
	margin: 0em 0em 0em 1.2em;
	padding: .3em 0em 0em 1.2em;
}

ul
{
	list-style-type: circle;
}


li
{
	padding: .3em 0em 0em 0em;
}

a:link
{
	color: #006633;
	text-decoration: none;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

a:active
{
	color: #009933;
	text-decoration: none;
}

a:visited
{
	color: #003333;
	text-decoration: none;
}

a:hover
{
	color: #333399;
	text-decoration: underline;
}

h1, h2, h3
{
	margin: 0em 0em 0em 0em;
	padding: 0em 0em .2em 0em;
}

p
{
	margin: 0em 0em .6em 0em;
	padding: 0em 0em 0em 0em;
	
}

h1 { font-size: 1.2em; }

h2 { 
	font-size: 1em; 
	padding: 1em 0em .2em 0em;
}

h3
{
	font-size: 1em;
	margin: 0em;
	padding: .5em 0em 0em 0em;
	font-weight: normal;
	text-decoration: underline;
}

.center
{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: block;
}

hr
{
	margin: 1em auto 1em auto;
	padding: 0em;
	width: 96%;
	border: 1px #ECF1E6 solid;
	display: block;
	clear: both;
}

/********************************
  Page Layout Settings
********************************/

#page
{
	border: .2em #38853B solid;
	border-radius: .5em;
	max-width: 1200px;
	min-width: 1000px;
	margin: .8em auto .8em auto;
	background-color: #f5fff0;
	padding: 0%;
	text-align: center;
}

#page_top
{
	margin: .0px;
	padding: .8em 0px 0px 0px;
}

#page_main
{
	margin: 0px;
	padding: 0em;
	width: 100%;
	display: table;
	border: 0px solid #a022ac;
	margin: 0px auto 0px auto;
}

#page_bottom
{
	margin: 0px;
	padding: 0em;
	color: #5F5F5F;
	font-size: 1em;
}

.page_row
{
	/* overflow: auto; To clear floats in IE 6, 7 */
	/* width: 100%; To clear floats in IE 6, 7 */
	display: block;
	clear: both;
	margin: 0px;
	padding: 0px;
}

.page_row:after
{
	content: ".";
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

.page_block
{
	margin-left: .5%;
	display: block;
	clear: both;
	padding-top: .6em;
}


#page_block
{
		background-color: #ebffe6;

}

.page_block:after
{
	content: ".";
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

/*******************************************************************
  Page Layout Settings - Columns
  - Make all columns add 98% including the margins below.
  - 1.5% left for right side "margin".
  - Column and margin widths should sum to: 94.5%
  - Would like to use nth child .col:nth-child(n), but IE problems

*******************************************************************/

.col_01, .col_02, .col_03
{
	display: table-cell;
	margin: 0%;
	padding: 0px 5px 5px 5px;
	border: 0px #A4289C dashed;
	vertical-align: top;
}

.col_01 { margin-left: 1%; }
.col_02 { margin-left: 1.5%; }
.col_03 { margin-left: 1.5%; }

#page_top .col_01
{
	text-align: left;
}

#page_top .col_02
{
	text-align: center;
}

#page_top .col_03
{
	text-align: right;
}

#page_top .col_03 form
{
	float: right;
}

#page_top .col_01 { width: 200px; max-width: 200px; }
#page_top .col_02 { width: 45%; }
#page_top .col_03 { width: 220px; }

#page_main .col_01 { width: 280px; max-width: 295px; background: none; }
#page_main .col_02 { background: none; }
#page_main .col_03 { width: 320px;  background: none; }

#page_bottom .col_01 { width: 19%; }
#page_bottom .col_02 { width: 46%; }
#page_bottom .col_03 { width: 26%; }

#page_bottom  .col_01
{
	text-align: left;
}

#page_bottom  .col_02
{
	text-align: center;
}

#page_bottom  .col_03
{
	text-align: right;
}

/********************************
  Left Menu
********************************/

#leftMenu
{
	list-style-position: outside;
	list-style-type: circle;
	margin: 1em 0em 3em .5em;
	padding: 0em 0em 0em 0em;
	position: relative;
	font-size: 1.3em;
	color: #339966;
	font-style: normal;
	text-align: left;
	font-weight: bold;
	border: 0px #A4091A dotted;
}

#leftMenu li { 
	padding: 0em 0em .3em 0em; 
	margin: 0em 0em 0em 1.5em;
}

#leftMenu li a { color: #396; }
#leftMenu li:hover { text-decoration: none; }
#leftMenu li:hover:after { content: " \00BB"; }
#leftMenu li a:hover { text-decoration: none; }

/********************************
  Content Box Settings
********************************/

.contentBox
{
	border: .2em #6FA478 solid;
	padding: 0em 0em .3em 0em;
	word-wrap: normal;
	background-color: #FFFAF4;
	border-radius: .5em;
	margin: 0px 0px 1em 0px;
	display: block;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.contentBox p
{
	text-align: left;
}	


.contentBox:after
{
	content: ".";
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

.boxContent {
	
}

.contentBox .boxTitle
{
	text-align: left;
	word-wrap: break-word;
	background-color: #C6E7D2;
	border-width: 0em 0em .2em 0em;
	border-color: #6FA478;
	border-style: solid;
	display: block;
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
	padding: .3em 0px .3em .5em;
	margin-bottom: .4em;
}

.contentBox h2
{
	font-size: 1.2em;
	font-variant: small-caps;
	margin: 0px;
	padding: 0px;
}


.contentBox *
{
	/* border: 1px #A4091A dotted; */
	padding-left: .5em;
	padding-right: .5em;
}

.content_cols
{
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3;
   
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;

	vertical-align: top;
	text-align: center;	
	
	list-style-type: none !important;
	
	border: 0px solid #cc2323;

}

/********************************************************
  Featured Thumbs Box
  - Generally used in conjunction with a content box.
********************************************************/

#thumbs_box .content_cols
{
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3;
	
	text-align: center;
	border: 0px dotted black;
	
}

#thumbs_box .content_cols
{
	list-style-type: none;
}

.card_thumb
{
	/* Always use in conjunction with contentCell */
	display: inline-block;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
	width: 130px;
	text-align: center;
	height: 190px;
	border: 0px solid black;
}

.card_thumb p
{
	font-size: .9em;
	line-height: 1.2em;
	color: #0A3708;
	padding: 0px 0px .2em 0px;
	margin: 0px;
	text-align: center;
}

.card_thumb img
{
	width: 110px;
	height: 110px;
	border: 3px #585858 solid;
	margin: 3px auto 0em auto;
	padding: 0em;
}

.hidden_thumb { height: 0px; }

.more_cards
{
	text-align: right;
	width: 98%;
	font-weight: bold;
	font-size: 1.1em;
	margin: 0px;
	padding: .8em 0px 0px 0px;
}

.more_cards a:after { content: " \00BB"; }

/********************************************************
  The Featured Card Box
  - Generally used in conjunction with a content box.
********************************************************/

#featuredCardBox
{ 
	text-align: center;
}


#featuredCardBox img {
	max-width: 80%;
	height:auto;
	margin: 5px auto 5px auto;
}

.clickScreen
{
	width: 100%;
	padding: 1em 0em 1em 0em;
}

.send_now
{
	text-align: right;
	clear: left;
	display: block;
	padding: 0px 5% .5em 0px;
	margin: 0em;
}

/********************************
  Common Page Elements
********************************/

.mobile_only
{
	display: none;
}

#mobile_nav
{
	display: none;
}

#page_logo
{
	float: left;
	width: 120px;
	height: 120px;
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
	background-image: url('https://cache.e-cards.com/images/logos/ec-froggy-N04.png');
	border: 0px;
	background-repeat: no-repeat; 
 }

#mobile_menu_button {
	float: right;
	width: 50px;
	height: 49px;
	background-image: url('https://cache.e-cards.com/images/nav-icons/mobile/nav-menu-drop.png');
	background-repeat: no-repeat;
	background-position: center; 
	margin-top: 16px;
}

#mobile_menu_button:hover {
	cursor: pointer;
}

.page_title
{
	/* Usually used in conjunction with: page_block */
	font-size: 1.8em;
	padding: .5em 0em .9em .3em;
}

.page_nav_icon { display: inline; }
.link_list { list-style-type: circle; }
.link_list li:hover:after { content: " \00BB"; }

.tidbitBox
{
	text-align: left;
	background-color: #FFFBE5;
	border: .15em #CD191E solid;
	padding: .8em;
	margin: 1em;
	border-radius: .5em;
	float: right;
	font-size: .9em;
}

.tidbitBox h2
{
	font-size: 1em;
	padding: .2em 0em .6em 0em;
}

.tidbitBox p
{
	margin-bottom: 0em;
	margin-top: 0em;
	padding-top: 0em;
	padding-bottom: .7em;
}

.sponsorship
{
	padding-top: 1em;
	margin-bottom: 1em;
	clear: left;
	display: block;
}

/*-------------------------------
  Vertical Banners
--------------------------------*/

.banner
{
	text-align: center;
	background-color: #FFEFEF;
	border: .15em #CD191E solid;
	padding: 0;
	margin: 1em auto 1em auto;
	display: block;
	width: 140px;
	border-radius: .5em;
}

.banner h2
{
	padding: 1.3em .5em 1em .5em;
}

.banner p
{
	text-align: center;
	font-size: .8em;
}

.banner img
{
	text-align: center;
	border: .15em #498645 solid;
}


.thumbCredit
{
	color: #686868;
	font-size: .7em;
}

.thumbCredit a
{
	text-decoration: none;
	color: #7E7E7E;
}

.thumbCredit a:hover
{
	text-decoration: underline;
	color: #980000;
}


.smallText { font-size: .6em; }

#top_banner
{
	padding: 10px 0px 10px 0px;
	margin: 0px 0px 20px 0px;
	border-width: 0px 0px 0px 0px;
	border-color: #686868;
	border-style: solid;
	width: 100%;
	background-color: #C6E0CF;
}

.error_text { color: #D10002; }

.left_menu {
	list-style-type: circle;
	color: #339966;
	font-style: normal;
	font-weight: bold;
	line-height: 1em;
}

.left_menu li a { color: #396; }
.left_menu li:hover { text-decoration: none; }
.left_menu li:hover:after { content: " \00BB"; }
.left_menu li a:hover { text-decoration: none; }


#snow_canvas {
	display: block;
	position: absolute;
	z-index: -5;
}

.hide_me {
	display: none;
}