/*light teal #D0E7E7;
med teal #82c0c0;
dk teal #339999;
hover teal #2B8282;
light green #96B162;
green #6E9325;
hover green #5E7D1F;
gold #ffcc00;
apricot: #D95757;
dk apricot: #CC3333;
light grey #F9F9F9;
med grey #8B8B8B;
med-dark grey #646464
dk grey #424242;*/

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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,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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
a {text-decoration: none;}

html{overflow-y: scroll;}
body {
    margin: 0 auto;
    max-width: 980px;
    font-family: 'Open Sans', 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
}
/*Clearfix*/
/*Add .group to categorys, unable to access currently so applied to class*/
.group:before, .group:after, .merchant:before, .merchant:after {content: "";display: table;}
.group:after, .merchant:after {clear: both;}
.group, .merchant {zoom:1;}

/*------BEGIN MARGINS AND FONT SIZE RESET------*/
#header, #main, #footer {
    font-size: 62.5%; /*sets 1 em equal to 10 px*/
}
#header{margin: 0 1em 2em 1em;}
#footer {margin: 1em 4%;}

#main {
    margin: 0em 4%;
    padding-top: 3em;
    padding-bottom: 5em;
    border-top: .1em solid #EFEFEF;
    border-bottom: .1em solid #EFEFEF;
}
#singlecol, #footer small {
    width: 80%;
    margin: 0 auto;
}
.skip a, #skip a:hover, #skip a:visited {
    position: absolute;
    left: 0px;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip a:active, #skip a:focus {
    position: static;
    width: auto;
    height: auto;
}




/*---------------BEGIN LOGO/BAR---------------*/
#masthead {
    height: 5em;
    background-color: #82c0c0;
}
#logo {
    float: left;
    margin: 1.1em 4%;
    width: 29.5em; /*makes logo responsive*/
}
#logo img { /*makes logo responsive*/
    width: 100%;
    max-height: 100%;
}

/*---------------Register/Login buttons---------------*/
#memberLinks { /*div around acctBtn and logBtn*/
    display: inline-block;
    float: right;
    margin-right: 4%;
    margin-top: .85em;
}
#membername { /*Hello message to member (logged in only)*/
    color: white;
    float: left;
    width:auto;
    margin-left: 1em;
    text-align: right;
    display: inline-block;
    font-size: 1.4em;
    font-weight: 400;
    margin-top: .8em;
    margin-right: 1em;
}
#acctBtn, #logBtn {
    float: left;
    height: 3em;
    width: 9em;
    margin-left: 1em;
    -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
    text-align: center;
    display: inline-block;
}
#logBtn {
    background-color: #339999;
    border: 1px solid #2B8282;
}
#logBtn:hover {
    background-color: #2B8282;
    cursor: pointer;
}
#acctBtn {
    background-color: #6E9325;
    border: 1px solid #5E7D1F;
}
#acctBtn:hover {
    background-color: #5E7D1F;
    cursor: pointer;
}
#acctBtn a, #logBtn a {
    display: block;
    margin-top: .6em;
    color: #FFF;
    font-size: 1.4em;
    font-weight: 400;
}

/*-----------------BEGIN LOG IN DROP DOWN-----------------*/
#logBtn div {
    display: none;
    position: relative;
    float: right;
    top: 0em;
    z-index: 11;
    width: 30em;
    height: auto;
    background-color: #F9F9F9;
    border-top: .3em solid #339999; border-bottom: .3em solid #339999;
    border-left: 1px solid #B8B8B8; border-right: 1px solid #B8B8B8;
}
#logBtn div#hoverstate1 { /*Extends depth of hover area invisibly on logbtn*/
    height: 2.2em;	/*Note the yellow underscore when directly on the new Browse page is shifted down*/
    border:none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
div#hoverstate2 { /*Extends depth of hover area invisibly on browse*/
    height: 3em;
    border:none;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    top:-3em;
    position:absolute;
    width:9em;
}
#logBtn:hover div { /*Show the login drop down on hover*/
    display: inline-block;
    cursor: pointer;
}

/*Login Form Drop Down*/
#login-content form {
    text-align: left;
    margin: 2em;
}
#login-content form a { 
    font-weight: 600;
    color: #82c0c0;
    font-size: 1.2em;
    display: inline-block;
}
#login-content form label, label {
    font-size: 1.6em;
    line-height: 1.3em;
}
#login-content form input,
#registration form input {
    background-color: #FFF;
    -moz-border-radius: 1.2em; -webkit-border-radius: 1.2em; border-radius: 1.2em;
    border: 1px solid #B8B8B8;
    height: 1.6em;
}
#login-content form input {
    width: 98%;
}
#login-content input[type=text],
#login-content input[type=password] {
    text-indent: 2%;
    margin: 0 0 1em 0;
}
#login-content form input[type=submit] {
    display: inline-block;
    float: right;
    margin-left: 1em;
    height: 2.4em; width: 4em;
    border: none;
    -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;    
    background-color: #646464;
    font-size: 1.2em;
    font-weight: 400;
    color: #FFF;
    text-align: center;
}
#login-content form input[type=submit]:hover {
    background-color: #424242;
    cursor: pointer;
}

/*dd that appears at smaller screen for login/register*/
#menu-icon { 
    display: none;
    width: 50px;
    height: 100%;
    background: #4C8FEC url(/img/index.php?id=iconMenu.png) no-repeat center;
    background-color: #339999;
}
a:hover#menu-icon {
    background-color: #2B8282;
    cursor: pointer;
}

/*---------------Create border up arrow for drop downs for log in and browse---------------*/
#login-content:before, #login-content:after, /*Login dd box arrow*/
ul.col-3:before, ul.col-3:after {  /*Browse dd box arrow*/
    content: '';
    height: 0; width: 0;
    position: absolute;
    bottom: 100%;
    border: solid transparent;
}  
#login-content:before { /*Create border for arrow for LOGIN dd*/
    border-width: 1.2em;
    right: 2.5em;
    border-bottom-color: #339999;
    z-index: 1;
}
#login-content:after { /*Create fill for arrow for LOGIN dd*/
    border-width: .7em;
    right: 3em;
    border-bottom-color: #F9F9F9;
    z-index:2;
}
ul.col-3:before { /*Create border for arrow for BROWSE dd*/
    border-width: 1.2em;
    left: 1.8em;
    border-bottom-color: #82c0c0;
    z-index: 1;
}
ul.col-3:after { /*Create fill for arrow for BROWSE dd*/
    border-width: .7em;
    left: 2.3em;
    border-bottom-color: #F9F9F9;
    z-index:2;
}


/*--------------------------NAV/SEARCH SECTION--------------------------*/
#searchform {
    float: right;
    margin-right: 4%; margin-top: 2.4em;
}
#searchform input[type=search] {
    width: 25em;
    -webkit-border-radius: 1.2em; -moz-border-radius: 1.2em; border-radius: 1.2em;
    border: 1px solid #B8B8B8;
    font-size: 1.6em;
    /*Firefox has not left indent on text but many errors occur when using text-indent on search input*/
}

nav {
    margin: 3em 4%;
}
nav a {
    font-size: 1.4em;
    color: #8B8B8B;
    text-transform: uppercase;
}
nav a:hover, nav a:active, nav a:focus {
    color: #424242;
    cursor: pointer;
}
/*yellow bar under nav when on that page*/
body#home li#nav-offers, body#homepage li#nav-offers,
body#faqpage li#nav-faq, body#faq li#nav-faq,
body#contactpage li#nav-contact, body#contact li#nav-contact,
body#browsepage li#nav-browse {
    border-bottom-color: #ffcc00;
}
body#home li#nav-offers a, body#homepage li#nav-offers a,
body#faqpage li#nav-faq a, body#faq li#nav-faq a,
body#contactpage li#nav-contact a, body#contact li#nav-contact a,
body#browsepage li#nav-browse a {
    color: #424242;
}
							/*nav .active a {
							    color: #424242;
							}*/
nav li {
    float: left;
    margin-right: 3em;
    padding-bottom: .2em;
    border-bottom: .3em solid #FFF;
}
nav li#nav-browse { /*Made deeper to allow for browse dd to be less frustrating*/
    height: 2em;
}
#browse a:after { /*Adds triangle img next to Browse link*/
    content: url(/img/index.php?id=triangle8B8B8B.png);
    padding-left: .3em;
}
#browse a:hover:after { /*Adds triangle img next to Browse link*/
    content: url(/img/index.php?id=triangle424242.png);
    cursor: pointer;
}


/*-------------------NAV/BROWSE DROP DOWN-------------------*/
nav ul ul {
    position: absolute;
    display: none;
    height: auto;
    width: 76em;
    padding: 1em 1em;
    z-index: 10;
    margin-top: 1.1em;
    background-color: #F9F9F9;
    border-top: .3em solid #82c0c0; border-bottom: .3em solid #82c0c0;
    border-left: 1px solid #B8B8B8; border-right: 1px solid #B8B8B8;
}
nav li:hover > ul {
    display: block;
    cursor: pointer;
}
ul.col-3 { /*3 column drop-down*/
    -webkit-column-count:3; -moz-column-count:3; -ms-column-count: 3; /*IE 10 only*/
    -webkit-column-gap: 10px; -moz-column-gap: 10px; -ms-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
nav ul ul li {
    position: relative;
    margin: 0;
    padding: 1em .5em;
    float: none;
    border: none;
}
nav ul ul li a {
    text-transform: none;
    display: block;
    font-size: 1.2em;
    font-weight: 400;
    color: #424242;
    line-height: 1.5em;
}
nav ul ul li a:hover {
                                                        color: #82c0c0;
}

/*-------------------INDEX/CATEGORIES-------------------*/

#singlecol img {
    float: left;
}

/*Public Index*/
.steps {
    background-color: #F9F9F9;
    border: 1px solid #8B8B8B;
    -moz-border-radius: 24px; -webkit-border-radius: 24px; border-radius: 24px;
    padding: 3em;
    margin-bottom: 2em;
}
.steps ol {
    list-style-type: decimal;
    margin-left: 1.5em;
    font-size: 1.8em;
    line-height: 1.5;
    font-weight: 600;
    color: #424242;
}
.steps ol li {
    margin-top: .5em;
}
.steps ol li .normal {
    font-weight: 400;
}

/*Special Offers (offers) and Category Pages (listings)*/
#offers {
    display: table;
    width: 100%;
    -webkit-border-horizontal-spacing: 2em;
    -webkit-border-vertical-spacing: 2em;
    border-spacing: 2em;   
}
#offers .offer1 {
    width: 27.4em;
    display: table-cell;
    border-top: .3em solid #424242; border-bottom: .3em solid #424242;
    border-left: 1px solid #8B8B8B; border-right: 1px solid #8B8B8B;
    background-color: #F9F9F9;
}
#offers .offer1 .offer1wrap {
    display: block;
    position: relative;
    padding-bottom: 2em;
    padding-top:0em;
}
#listings .merchant {
    width: 90%;
    position:relative;
    padding: 2em;
    border-top: .3em solid #424242; border-bottom: .3em solid #424242;
    border-left: 1px solid #8B8B8B; border-right: 1px solid #8B8B8B;
    background-color: #F9F9F9;
    margin-top: 2em;
}

/*Special Offers and Category Pages h2 and h3*/
#offers .offer1 h2,
#listings .merchant h2 {
    font-size: 2em;
    margin-top: .4em;
    display: inline-block;
}
#offers .offer1 h2 {
    margin: 1.6em 1em 0em 1em;;
}
#listings h2 {
    color: #424242;
    font-weight: 600;
}
.offer1wrap h3 {
    font-size: 1.2em;
    background-color: #ffcc00;
    padding: .4em;
    position: absolute;
    top:0;right:0;
}
#listings h3 {
    font-size: 1.2em;
    background-color: #ffcc00;
    padding: .4em;
    margin: .5em 0em .5em 21em;
    display: block;
    line-height: 1.3;
}

/*Special Offers and Category Pages ul, li, and p*/
#offers .offer1 p,
#offers .offer1 ul,
#listings .merchant p,
#listings .merchant ul {
    font-size: 1.4em;
    font-weight: 600;
    text-align: left;
    margin-bottom:0;
}
#offers .offer1 p {
    text-align: center;
    margin: .5em 1em 0em 1em;
}
#listings .merchant p {
    margin-left: 18.3em;
}
#offers .offer1 ul,
#listings .merchant ul {
    list-style: disc;
    line-height: 1.5;
    margin-left: 20.5em; margin-bottom: 1.5em;
    color: #424242;
}
#listings .merchant ul {
    margin-left: 20em; margin-bottom: 0;
}
#offers .offer1 ul li,
#listings .merchant ul li {
    margin-top: .5em;
}

/*Special Offers and Category pages images*/
#offers .offer1 img {
    width: 23.4em;
    height: auto;
    border: 1px solid #8B8B8B;
    margin: 1em 2em;
    float: left;
}
#listings .merchant img {
    width: 23.4em;
    height: auto;
    border: 1px solid #8B8B8B;
    position: static;
    margin-top: .8em; margin-bottom: 1em;
    margin-right: 2em;
}


/*-------------------------BEGIN NON-LOGIN FORMS-------------------------*/
.datawidth {
    width: 100%;
}
input,
.datawidth p {
    font-family: 'Century Gothic', Arial, sans;
}
.datawidth p,
#registration table {
    font-size: 1.4em;
}
#rewards1 {
    height: auto;
}

/*Submit and Cancel Buttons*/
#registration form input[type=submit],
table tr td input[type=button],
table tr td input[type=submit],
.summarybuttons input[type=submit] {
    height: 2.5em; width: 6.5em;
    -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
    background-color: #339999;
    border: 1px solid #2B8282;
    text-align: center;
    display: block;
    color: #FFF;
    font-size: 1.4em;
    font-weight: 400;
    margin-top: 1em; margin-bottom: 0em;
}
#registration form input[type=submit]:hover,
table tr td input[type=button]:hover,
table tr td input[type=submit]:hover,
.summarybuttons input[type=submit]:hover {
    background-color: #2B8282;
    cursor: pointer;
}
body#myaccount #personalsubmit,
body#registerpage #personalsubmit,
.summarybuttons input[type=button] {
    display: inline;
    margin-right: 1em;
    padding-left: .5em; padding-right: .5em;
}
body#myaccount #personalcancel,
body#registerpage #personalcancel,
.summarybuttons input[type=button] {
    border: none;
    font-size: 1.4em;
    font-weight: 400;
    color: #8B8B8B;
    width: auto;
}
.summarybuttons input[type=button] {
    background-color: #F9F9F9;
    margin-top: 1.5em;
}
body#registerpage #personalcancel {
    margin-top: 1.5em;
}

body#myaccount table #personalsubmit,
body#registerpage #personalsubmit,
table tr td input[type=submit],
body#registerpage #personalcancel {
    font-size: .9em;
}
body#registerpage #personalsubmit, table tr td input[type=submit] {
    float:left;
}
body#myaccount #personalcancel:hover,
body#registerpage #personalcancel:hover,
.summarybuttons input[type=button]:hover {
    color: #424242;
    cursor: pointer;
}

/*
see login drop down for #registration form input styles
*/
#registration form label { 
    width: 30%;
    display: block;
    float: left;
    text-align: right;
    margin-right: 1em;
}
#registration input,
#registration select {
    padding-left: .8em; padding-right: .8em;
    margin: 0 0 1em 0;
}
#check {
    margin-top: 1em;
}
#check .fineprint {
    display: block;
    text-align: left;
    width: 90%;
    padding-left: 19px;
    text-indent: -19px;
}
#check input[type=checkbox] {
    width: 13px;
    height: 13px;
    margin-right: .5em;
    padding: 0;
    vertical-align: bottom;
    position: relative;
    top: 11px;
    *overflow: hidden;
}


/*-------------------------Browse Page (not Drop Down)-------------------------*/
body#browsepage #main ul.col-2 a {
    font-size: 1.8em;
    font-weight: 400;
}
body#browsepage #main ul.col-2 { /*2 column drop-down*/
    -webkit-column-count:2; -moz-column-count:2; -ms-column-count: 2; /*only IE 10*/
    -webkit-column-gap: 10px; -moz-column-gap: 10px; -ms-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    margin-top: 1em;
}
body#browsepage #main ul.col-2 li {
    margin-bottom: 1.5em;
}


/*-------------------------Account and Contact Pages-------------------------*/
#contactinfo, #accountinfo {
    font-size: 1.6em;
    line-height: 1.3em;
}
#contactinfo table, #accountinfo table {
    width: 100%;
}
#contactinfo .label, #accountinfo .label, #registration .label {
    width: 30%;
    text-align: right;
    padding: .3em 1em .3em 0;
}


/*---------------------BEGIN ACCOUNT DASHBOARD---------------------*/
#accountMap, #main #accountMap a { /*Nav under acct page header*/
    font-size: 11px;
    color: #8B8B8B;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom:0;
}
#main #accountMap a:hover { /*Nav under acct page header*/
    color: #424242;
    cursor: pointer;
}

#dashAccount {
    width: 100%;
    display: table;
    margin-top: 3em;
}
.row {
    display: table-row;
}
.boxed {
    width: 50%;
    background-color: #F9F9F9;
    display: table-cell;
    border-top: .3em solid #424242; border-bottom: .3em solid #424242;
    border-left: 1px solid #8B8B8B; border-right: 1px solid #8B8B8B;
    margin-right: 3em; margin-top: 3em;
}
.boxed:hover {
    border-top: .3em solid #2B8282; border-bottom: .3em solid #2B8282;
}
.boxed p {
    margin: 2em;
}
.spacer {
    padding:1.5em;
}


/*-----------------BEGIN REWARDS LIST TABLES-----------------*/
#rewards1, #rewards2, #purchasewrapper {
    height: auto;
    display: inline; /*Makes height:auto work*/
}
#rewards1 form table {
    width: 100%;
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.5;
}
body.confirm #rewardCart2 thead tr#balance td,
body.confirm #rewardCart2 tfoot tr td {
    font-weight: 600;
}
#rewards1 form table tr td {
    padding-left: .5em;
}
#rewards1 form table tbody tr td a {
    font-size: 120%;
    vertical-align: baseline;
    position: relative;
}
#rewards1 .rewardswrapper {
    /*width: 93%;*/
    position:relative;
    padding: 2em;
    border-top: .3em solid #424242; border-bottom: .3em solid #424242;
    border-left: 1px solid #8B8B8B; border-right: 1px solid #8B8B8B;
    background-color: #F9F9F9;
    margin-top: 2em;
}
#rewards2 #rewards, #rewardCart2, #purchasewrapper #purchases {
    margin-top: 2em;
}
#rewards2 #rewards {
    width: 100%;
}

/*Column widths for tables*/
.merchantname {width: 55%;}
body.confirm #rewardCart2 .merchantname { width: 40%;} 
#rewardCart2 .merchantname {width: 56%;}
#purchases .merchantname {width: 45%;}

.delivery {width: 21%;}
body.confirm #rewardCart2 .delivery { width: 9%;}
#rewardCart2 .delivery, #rewardCart2 .estimate {width: 17%;}

.purchdate {width: 23%;}
.purchtotal, .purchreward {width: 16%;}

.amount {width: 8%}
#rewardCart2 .amount {width: 10%;}

#rewards1 form table tbody tr td:nth-child(1) {width: 80%;}
#rewards1 form table tbody tr td:nth-child(2) {width: 18%;}

/*Table alternating row colors, thead/tfoot borders, height*/
#rewards tbody .even,
#purchases tbody .even {
    background-color: #F9F9F9;
}
body.confirm tbody tr.even {
    background-color: #FFF;
}
body.confirm tbody tr.odd {
    background-color: #E0E0E0;
}
body.beforeconfirm #rewards1 .rewardswrapper tbody tr:nth-child(even)  {
    background-color: #FFF;
}
body.beforeconfirm #rewards1 .rewardswrapper tbody tr:nth-child(odd)  {
    background-color: #E0E0E0;
}
body.beforeconfirm #rewards1 .rewardswrapper tbody tr,
body.confirm #rewards1 tbody tr {
    border-bottom: 1px solid #E0E0E0; /*fallback for IE 9 and below where rotating tints won't work due to nth child*/
}

body.beforeconfirm #rewards1 .rewardswrapper thead tr td,
body.confirm #rewards1 thead tr#columnhead td {
    border-bottom: 1px solid #B8B8B8;
}
body.beforeconfirm #rewards1 .rewardswrapper tbody tr:nth-last-child(1),
body.confirm #rewards1 tbody tr:nth-last-child(1) {
    border-bottom: 1px solid #B8B8B8;
}
body.beforeconfirm #rewards1 .rewardswrapper thead tr td:nth-child(3),
body.beforeconfirm #rewards1 .rewardswrapper tbody tr td:nth-child(3),
body.beforeconfirm #rewards1 .rewardswrapper tfoot tr td:nth-child(3) {
    background-color: #F9F9F9;
    border-bottom: 1px solid #F9F9F9;
}
body.beforeconfirm #rewards1 .rewardswrapper thead,
body.beforeconfirm #rewards1 .rewardswrapper tfoot {
    background-color: #F9F9F9;
}
body.beforeconfirm #rewards1 .rewardswrapper thead tr td {
    padding-bottom: .5em;
}
body.beforeconfirm #rewards1 .rewardswrapper tfoot tr td {
    padding-top: .5em;
}    
#rewards1 input[type=submit] {
    float: right;
    font-size: .7em;
}
#rewards1 .summarybuttons input[type=submit] {
    font-size: 1.4em;
}
    
.purchtotal, /*cleaner to add class of rightalign to all once file access*/
.purchreward,
body.beforeconfirm #rewards1 .rewardswrapper tr td:nth-child(2), 
.rewardswrapper tr td input  {
    text-align: right;
}
body#redeem #columnhead .delivery {
    text-align: left;
}

/*Redeem confirm pages only*/
.recipientinfo {
    width: 100%;
    background-color: #D0E7E7;
    border: 1px solid #82c0c0;
    margin-top: 1em; margin-bottom: 6em;
}
.recipientinfo p {
    font-size: 1.4em;
    margin-left: 1.5em; margin-right: 1.5em;
    margin-top: 1.2em; margin-bottom: 1.2em;
    float: left;
}
.recipientinfo p.confirmemail {
    width: 35%;
}
body.confirm .nosubmit { /*Same item as .recipientinfo*/
    margin-bottom: 1em;
}
.recipientinfo .nosubmit { /*Redeem complete only*/
    margin-bottom: 3em;
}
.summarybuttons { /*Redeem confirm only*/
    position: absolute;
    bottom: 2em;
    right: 2em;
}

/*Table cell formatting*/
#rewards thead tr td,
#rewardCart2 thead tr#columnhead td,
#purchases thead tr td,
body.beforeconfirm #rewards1 .rewardswrapper thead,
body.beforeconfirm #rewards1 .rewardswrapper tfoot {
    font-weight: 600;
    vertical-align: bottom;
    line-height: 1.1em;
}
#rewards td,
#rewardCart2 thead tr td,
#rewardCart2 tbody tr td,
#rewardCart2 tfoot tr td {
    padding-left: .5em;
}
#rewardCart2 thead tr#balance td, #rewardCart2 tfoot tr#totalamount td {
    padding-bottom: 1.5em;
}
#rewards1 form table tr td:nth-child(2),
body.confirm #rewards1 tr:nth-last-child(1),
body.confirm tr td:nth-last-child(1) {
    padding-right: .5em;
}
#purchases td {
    padding-right: .5em;
    padding-left: .5em;
}
.totals {
    font-weight: 600;
    margin-bottom: 0em;
    padding-bottom: 1.4em;
    border-bottom: 1px solid #8B8B8B;
}
#recentpurchases th, #purchases th {
    padding-top: 0em;
}
#recentpurchases tfoot tr td,
#purchases tfoot tr td {
    padding-top: 1em;
}
.purchfine {
    margin-bottom: 4em;
}


/*------------------BEGIN GENERAL TEXT STYLES------------------*/
h1 {
    font-size: 3.7em;
    font-weight: 300;
    color: #339999;
}
h2 {
    font-size: 3.0em;
    font-weight: 300;
    color: #82c0c0;
}
p, dt, dd, #rewards, table#purchases, #recentpurchases table,
#rewardCart2 thead tr td, #rewardCart2 tbody tr td, #rewardCart2 tfoot tr td {
    font-size: 1.8em;
    line-height: 1.5em;
    font-weight: 400;
    color: #424242;
    margin-top: .5em; margin-bottom: 1em;
}
.lastp {
    margin-bottom: 0;
}
dt {
    font-weight: 600;
    font-style: italic;
    margin: 0;
}
dd {
    margin-bottom: 1.5em;
    margin-top: 0;
}
dl {
    margin: 1em 0 0 0;
}
legend, th {
    font-weight: 300;
    color: #82c0c0;
    text-align: left;
}
th {
    font-size: 1.4em;
    padding-top: 1em;
    padding-bottom: .4em;
}
legend {
    font-size: 2em;
    line-height: 1.2em;
    padding-top: 1.5em;
    padding-bottom: .5em;
}
.rightalign {
    text-align: right;
}
b { /*This is ridiculous but the font is already bold where we use this element*/
    font-style: italic;
}
sup {
    font-size: 80%;
    vertical-align: baseline;
    position: relative;
    top:-0.3em;
}
.fineprint, .error, .purchfine { /*Registration forms small print and errors*/
    color: #8B8B8B;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: 400;
}
.error {
    color: red;
    margin-left: 28%;
    margin-top: -.6em;
}
.purchfine {
    font-size: 1em;
}


/*-------------------------Footer Styles And Misc-------------------------*/
#footer small {
    display: block;
    color: #8B8B8B;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: 300;
    padding-bottom: .5em;
}
#footer small a, #main a, .fineprint a {
    font-weight: 600;
    color: #82c0c0;
}
#footer small a:hover, #login a:hover,
#main a:hover, .fineprint a:hover {
    color: #339999;
    cursor: pointer;
}
#main a.offerlink {
    font-size: 70%;
    font-weight: 400;
    text-transform: uppercase;
    color: #D95757;
}
#main a.offerlink:hover {
    color: #CC3333;
}
.legal, #footer p {
    text-align: center;
}
.TM { /*in footer*/
    font-size: .1em;
    line-height: 1em;
}
.vr {
    color: #D0E7E7;
    font-size: 1em;
}
#footer p {
    margin-bottom: 2em;
}
#footer p a {
    font-size: .7em;
    color: #8B8B8B;
    padding: 1em;
    font-weight: 300;
}
#footer p a:hover {
    color: #424242;
    cursor: pointer;
}


/*--------------------------MEDIA QUERIES--------------------------*/
@media screen and (max-width: 980px) {
    nav ul ul {
	width: 50em;
    }
    ul.col-3 { /*2 column drop-down*/
	-webkit-column-count:2; -moz-column-count:2; -ms-column-count: 2; /*only IE 10*/
	-webkit-column-gap: 10px; -moz-column-gap: 10px; -ms-column-gap: 10px;
	column-count: 2;
	column-gap: 10px;
    }
}
@media screen and (max-width: 945px) { /*Special Offers table non-table*/
    #offers {
	display: inline-block;
	-webkit-border-horizontal-spacing: 0em;
	-webkit-border-vertical-spacing: 0em;
	border-spacing: 0em;   
    }
    #offers .offer1 {
	width: 77%;
	display: inline-block;
	margin: 1em;
    }
    #offers .offer1 h2 {
	margin-left: 0;
    }
    #offers .offer1 p{
	margin-left: 0em;
	text-align: left;
    }
    #offers .offer1 ul{
	margin-left: 20em;
	text-align: left;
    }
    #offers .offer1 img {
	width: 23.4em;
	height: auto;
	border: 1px solid #8B8B8B;
	position: static;
	margin-right: 2em;
	margin-top: 3.3em; margin-bottom: 2em;
    }
    #offers .offer1:before, #offers .offer1:after{ content: ""; display: table;}
    #offers .offer1:after {clear:both;}
    #offers .offer1 { zoom: 1;}
}


@media screen and (max-width: 917px) {
    #searchform input[type=search] {
	width: 20em;
    }
}

@media screen and (max-width: 830px) {
    #searchform input[type=search] {
	width: 15em;
    }
    #registration form label {
	width: 100%;
	display: block;
	text-align: left;
	margin-right: 0em;
    }
}

@media screen and (max-width: 770px) {
    #header {
	margin-bottom: 2em;
    }
    #main {
	padding-top: 0em; padding-bottom: 3em;
	border-top: none;
	margin: 0em 3%;
    }
    #membername {
	display:none;
    }
    #memberLinks {
	margin-right: 2%;
    }
    nav {
	margin: 3em 2%;
    }
    nav ul ul {
	left: 3.0%;
    }
    ul.col-3:before { /*Create border for arrow for BROWSE dd*/
	left: 15.7em;
    }
    ul.col-3:after { /*Create fill for arrow for BROWSE dd*/
	left: 16.2em;
    }
    .publicnav ul.col-3:before { /*Create border for arrow for BROWSE dd*/
	left: 9.9em;
    }
    .publicnav ul.col-3:after { /*Create fill for arrow for BROWSE dd*/
	left: 10.4em;
    }
    body#browsepage #main ul.col-2 { /*2 column drop-down browse page*/
	-webkit-column-count:1; -moz-column-count:1; -ms-column-count: 1; /*only IE 10*/
	-webkit-column-gap: 0px; -moz-column-gap: 0px; -ms-columngap: 0px;
	column-count: 1;
	column-gap: 0px;
	margin-top: 1em;
    }
    #logo {
	margin: 1.1em 2%;
    }
    #singlecol, #footer small {
	width: 100%;
	margin: 0 auto;
    }
    #singlecol h1 {
	margin-bottom: .3em;
    }
    #searchform {
	float: none;
	margin-left: 2%; margin-right: 2%;
    }
    #searchform input[type=search] {
	width: 95%;
    }
    #footer {
	margin-top: 2em;
    }
    #footer p {
	margin-top: 0em;
    }
    #footer p a{
	padding: .4em;
    }
    #rewards td, #purchases td {
	padding-left: 0em;
    }    
}

@media screen and (max-width: 700px) {
    #listings .merchant, #offers .offer1 {
	width: 90%;
	margin-left: 0; margin-right: 0;
    }
    #offers .offer1 {
	padding-left: 2em;
    }
    #listings .merchant p {
	margin-left: 0;
    }
    #offers .offer1 p, #offers .offer1 h2, #offers .offer1 img {
	margin-left: 0em;
    }
    #listings .merchant h2{
	display: block;
    }
    #listings .merchant img, #offers .offer1 img {
	position: static;
	float: none;
    }
    #listings .merchant img {
	display: inline-block;
    }
    #offers .offer1 img {
	display: block;
	margin-top: 1em; margin-bottom: 1em;
    }
    #listings h3 {
	margin-left: -.3em;
	margin-top: 0em;
    }
    .recipientinfo p.confirmemail {
	float: none;
    }
    .recipientinfo p.confirmusps {
	float: none;
	margin-right: 1.5em;
    }
}

@media screen and (max-width: 566px) { /**/
    #header {
	margin-left: 0; margin-right: 0;
    }
    #masthead {
	height: 4.5em;
    }
    #logo {
	margin: 1.1em 2%;
	width: 25em;
    }
    #memberLinks {
	width: 50px;
	height: 100%;
	margin: 0;
	top: 0;
    }
    #menu-icon {
	display: block;
    }
    #memberLinks ul:before, #memberLinks ul:after { 
	content: '';
	height: 0; width: 0;
	position: absolute;
	bottom: 100%;
	border: solid transparent;
    }
    #memberLinks ul:before { /*Create border for arrow for register and login dd*/
	border-width: 1.2em;
	right: .5em;
	border-bottom-color: #646464;
	z-index: 1;
    }
    #memberLinks ul:after { /*Create fill for arrow for register and login dd*/
	border-width: .7em;
	right: 1em;
	border-bottom-color: #F9F9F9;
	z-index: 2;
    }
    #logBtn div:before {
	right: .5em;
    }
    #logBtn div:after {
	right: 1em;
    }
    #memberLinks ul, #memberLinks:active ul {
	display: none;
	position: absolute;
	padding: 0px;
	background: #fff;
	top: 30px; right: 10px;
	width: 30em;
	border-top: .3em solid #646464; border-bottom: .3em solid #646464;
	border-left: 1px solid #B8B8B8; border-right: 1px solid #B8B8B8;
    }
    #memberLinks:hover ul {
	display: block;
    }
    #memberLinks li {
	text-align: center;
	width: 100%;
 	margin: 0;
	-moz-border-radius: 0px; -webkit-border-radius: 0px;
	border-radius: 0px;
    }
    #acctBtn a, a#login-trigger, a#logout {
	color: #424242;
    }
    #acctBtn, #logBtn {
	border: none;
	background-color: #F9F9F9;
    }
    #logBtn {
	border-top: 1px solid #B8B8B8;
    }
    #logBtn div {
	right: -1px;
	top: -1.5em;
    }
    #acctBtn:hover, #logBtn:hover {
	background-color: #D6D6D6;
    }
    #logBtn.public:hover {
	height: 4em;
    }
    #login-trigger:after {
	content: url(/img/index.php?id=triangle424242.png);
	padding-left: .3em;
    }
    #memberLinks ul, #memberLinks:active ul {
	top: 37px;
	right: 7px;
    }
    nav {
	width: 100%;
	margin-right: 0%;
	margin-top: 2em;
    }
    nav li {
	margin-right: 2em;
    }
    .publicnav ul.col-3:before { /*Create border for arrow for BROWSE dd*/
	left: 8.0em;
    }
    .publicnav ul.col-3:after { /*Create fill for arrow for BROWSE dd*/
	left: 8.5em;
    }
    #searchform {
	margin-top: 1em;
    }
    #searchform input[type=search] {
	width: 92%;
    }    
    #footer p a {
	font-size: .6em;
    }
    .hidetext/*, #rewardcart tbody tr td:nth-child(1)*/ { /*nth child doesn't work in IE9 or below*/
	width: 15em;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
    }
    #rewards td, #purchases td,
    #rewardCart2 thead tr td, #rewardCart2 tbody tr td, #rewardCart2 tfoot tr td {
	padding-top: .2em; padding-bottom: .2em;
    }
    #offers .offer1 {
	width: 85%;
    }
    #listings .merchant h2 {
	display: block;
    }
    #listings .merchant p {
	margin-left:0;
    }
    #listings .merchant{
	width: 80%;
    }
    #listings .merchant ul,
    #offers .offers1 ul {
	margin-left:2em;
    }
    #listings .merchant img,
    #offers .offer1 img {
	margin-top: 1em; margin-bottom: 1em;
    }
    #offers .offer1 img {
	float: none;
	margin-top: .6em;
    }
    
}
@media screen and (max-width: 555px) {
    nav ul ul {
	width: 25em;
    }
    ul.col-3 { /*2 column drop-down*/
	-webkit-column-count:1; -moz-column-count:1; -ms-column-count: 1;
	-webkit-column-gap: 0px; -moz-column-gap: 0px; -ms-column-gap: 0px;
	column-count: 1;
	column-gap: 0px;
    }
    ul.col-3:before { /*Create border for arrow for BROWSE dd*/
	left: 14.3em;
    }
    ul.col-3:after { /*Create fill for arrow for BROWSE dd*/
	left: 14.8em;
    }
    #dashAccount {
	display: inline-block;
	margin-top: 2em;
    }
    .boxed {
	width: 100%;
	display: inline-block;
	margin-bottom: 1.5em;
	margin-top: 0em;
    }
    .spacer {
	display:none;
    }
    .boxed p {
	margin: 1em;
    }
    #recentpurchases table, p.totals, table#purchases {
	font-size: 1.1em;
    }
    #rewards, #rewards1 form table {
	font-size: .9em;
    }
    #listings .merchant {
	padding: 2em 3em;
    }
}
@media screen and (max-width: 355px) {
    nav a {
	    font-size: 1.2em;
	}
    ul.col-3:before { /*Create border for arrow for BROWSE dd*/
	left: 12.3em;
    }
    ul.col-3:after { /*Create fill for arrow for BROWSE dd*/
	left: 12.8em;
    }
    .publicnav ul.col-3:before { /*Create border for arrow for BROWSE dd*/
	left:  7.1em;
    }
    .publicnav ul.col-3:after { /*Create fill for arrow for BROWSE dd*/
	left: 7.6em;
    }
    #rewards1 .rewardswrapper {
	padding: 1em;
    }
    #rewards, #rewards1 form table tbody tr, #rewards1 form table tbody tr,
    #rewardCart2 thead tr td, #rewardCart2 tbody tr td, #rewardCart2 tfoot tr td, .rewardswrapper p.lastp {
	font-size: .9em;
    }
    #rewards1 .rewardswrapper h2 {
	font-size: 1.8em;
    }
    .recipientinfo p {
	font-size: .7em;
	margin: .5em .65em;
    }
    #rewards td, #recentpurchases table {
	padding-top: .5em;
	padding-bottom: .5em;
    }
    #offers .offer1 {
	margin-top: 2em;
    }
    #listings .merchant {
	width: 23.5em;
	margin: 2em auto;
    }
    #offers .offer1 {
	width: 26.5em;
	margin: 1em auto;
	padding-left: 3em;
    }
    .easy {
	padding: 1.5em;
	-moz-border-radius:10px; -webkit-border-radius: 10px;
	border-radius: 10px;
    }
}