/*
 * Imports
 */

@import "bootstrap/bootstrap.less";

/*
 * Global Variables
 */

@title_color: #c5242e;

/* 
 * Global Styles
 */

body {
    background-image:url('/images/background_light.png');
}

header {
    padding-top: 20px;
}

section.fixed_height {
    height: 650px;
}

section.auto_height {
    height: auto;
}

h1 {
    color: @title_color;
    font-family: "Helvetica Neue LT Std", Helvetica, sans-serif;
    font-size:   2.0em;
    font-weight: bold;
    margin-bottom: 0;
}

/* To remove bordered styling when within a bootstrap "bordered-table" */
.borderless_table {
    th + th,
    td + td,
    th + td {
        border-left: 0px;
        border-top:  0px;
    }
}

.borderless_table td {
    border-top: 0;
}

/*
 * Text colors
 */

.text_red {
    color: @red;
}

.text_green {
    color: @green;
}

/*
 * Error Containers
 */

@error_bg_color: rgba(255, 215, 220, 1.0);

.error_container {
    padding:          30px;
    background-color: @error_bg_color;
    border-color:     @gray;
    color:            @grayDark;

    .border-radius(20px);
    .box-shadow(1px 1px 5px rgba(0,0,0,0.25));
}

.error_container h2 {
    color:       @title_color;    
    font-size:   1.3em;
    font-family: Helvetica, sans-serif;

}

.error_container .divider {
    background-color: @gray;

    height:             3px;
    margin-bottom:     10px;
}

/* Sizing */

.error_container_large {
    height: 200px;
}

.error_container_med {
    height: 125px;
}

/* Positioning */

.error_container_top {
    margin-top: 20px;
}

.error_container_right {
    margin-top:  20px;
    margin-left: 20px;
}

/* Arrows */

.arrow-down {
    width:          0;
    height:         0;
    margin-left:   40px;
    margin-bottom: 20px;

    border-left: 20px solid transparent;
    border-right: 0px solid transparent;
    border-top:  20px solid @error_bg_color;
}

.arrow-left {
    width:  0;
    height: 0;

    border-top:    20px solid transparent;
    border-bottom: 20px solid transparent; 
    border-right:  20px solid @error_bg_color;

    margin-right:  0px;
    margin-top: -140px;
}

.arrow-right {
    width:  0;
    height: 0;

    border-top:    20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left:   20px solid @error_bg_color;
}

.arrow-up {
    width:  0;
    height: 0;

    border-left:   20px solid transparent;
    border-right:  20px solid transparent;
    border-bottom: 20px solid @error_bg_color;
}

/*
 * Top Menu
 */

.menu_container {
    margin-top:       3.0em
}

.top_menu {
    white-space:      nowrap;
    margin-top:       -4.0em;
}

.top_menu ul {
    margin:  0;
    padding: 0;
}

.top_menu ul li {
    list-style-type: none;
    display:         inline-block;
    padding:         0.2em 0;
    margin:          0     1.9em;
}

.top_menu ul li a {
    padding:     0 5px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color:       white;
}

.top_menu ul li a:hover {
    text-decoration: underline;
}

/*
 * Sub Menu
 */

.sub_menu {
    margin-top: 2.0em; 
    text-align: right;
}

.sub_menu ul {
    margin:  0;
    padding: 0;
}

.sub_menu ul li {
    list-style-type: none;
    display:         inline-block;
    padding:         0.2em 0;
    margin-left:     1.9em;
    margin-right:    0;
}

.sub_menu ul li a {
    padding:     0 5px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color:       @black;
}

/*
 * Footer
 */

.footer_menu {
    margin-top: 20px;
}

.footer_menu a {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color:       white;
}

.contact_us_container {
    margin-top:  12px;
    font-weight: bold;
    font-family: "Helvetica Neue LT Std", Helvetica, sans-serif;
    font-size:   2.0em;
    color:       white;
}

.copyright_container {
    margin-top: -50px;
}

.copyright_container h3 {
    margin-left: 10px;
    color:       @grayLighter;
    font-weight: 200;
    font-family: Arial, Helvetica, sans-serif;
    font-size:   0.85em;
}

/* 
 * Splash Screen 
 */

.iphone_graphic {
    margin-top: 2.0em;
}

.splash_content {
    margin-top: 2.0em;
}

.splash_content h3 {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color:       #675956;
    font-weight: normal;
    font-size:   1.56em;
    margin-top:  30px;
}

.free_download {
    margin-top: -5.0em;
    position:   absolute;
}

.splash_app_store_logo {
    padding-top: 5px;
}

.splash_info_box {
    background-color: #ccc;
    font-family:      Arial, Helvetica, sans-serif;
    font-size:        1.0em;
    color:            #888888;
    font-weight:      100;
    padding:          10px 15px 17px 15px;

    .border-radius(20px);
    .gradientBar(#eee, @white);
    .box-shadow(1px 1px 5px 3px rgba(0,0,0,0.25));
}

.splash_info_box h1 {
    font-family:   "Helvetica Neue", Helvetica, sans-serif;
    font-size:     1.5em;
    color:         #c5252d;
    font-weight:   700;
    line-height:   1.2em;
    margin-bottom: 2px;
    margin-left:   10px;
}

.splash_info_box h3 {
    color:       #c5252d;
    font-size:   0.9em;
    margin-top:  0;
    margin-left: 10px;
}

.splash_left_pane_content {
    margin-left: 10px;
}

.splash_info_box img {
    margin-left: 10px;
}

.splash_info_box a {
    font-family: Arial, Helvetica, sans-serif;
    font-size:   1.0em;
    font-weight: bold;
    color:       #c5252d;
}

.splash_info_box a:hover {
    text-decoration: none;
}

.splash_info_box_business_owner {
    font-family:      Arial, Helvetica, sans-serif;
    font-size:        1.0em;
    color:            @black;
    font-weight:      100;
    padding:          10px 15px 10px 15px;

    .border-radius(20px);
    /*.gradientBar(rgba(3, 160, 229, 1.0), rgba(0, 185, 241, 1.0));*/
    .gradientBar(rgba(3, 140, 180, 1.0), rgba(0, 185, 241, 1.0));
    .box-shadow(1px 1px 5px 3px rgba(0,0,0,0.25));
}

.splash_info_box_business_owner h1 {
    font-family:   "Helvetica Neue", Helvetica, sans-serif;
    font-size:     1.5em;
    color:         @white;
    font-weight:   700;
    line-height:   1.2em;
    margin-bottom: 2px;
    margin-left:   10px;
}

.splash_info_box_business_owner h3 {
    color:       @white;
    font-size:   0.9em;
    margin-top:  0px;
    margin-left: 10px;
}

.splash_left_pane_content {
    margin-left: 10px;
}

.splash_info_box_business_owner img {
    margin-left: 10px;
}

.splash_info_box_business_owner a {
    font-family: Arial, Helvetica, sans-serif;
    font-size:   1.0em;
    font-weight: bold;
    color:       @white;
}

.splash_info_box_business_owner a:hover {
    text-decoration: none;
}

.tik_business_image {
    position: relative;
    top:   35px;
    left: -40px;
}

/*
 * About Screen
 */

.about_content {
    margin-top: 2.0em;
    color:      @gray;
}

.about_content h1 {
    font-family: "Helvetica Neue LT Std", Helvetica, sans-serif;
    font-size:   2.0em;
    font-weight: bold;
    color:       @title_color;
}

.about_content p {
    margin-top:  1.0em;
    font-family: Arial, Helvetica, sans-serif;
    font-size:   1.2em;
}

.hotspot {
    position:         relative;
    background-color: #000;
    width: 20px;
    height: 20px; 
    cursor: pointer;

    .border-radius(10px);
}

.hotspot_internal {
    position: absolute;
    background-color: #f00;
    width: 14px;
    height: 14px;
    top: 3px;
    margin-left: 3px;

    .border-radius(7px);
}

.hotspot_internal:hover {
    background-color: #80c83f;
}

.hotspot_position1 {
    margin-top: -200px;
    margin-left: 180px;
}

.hotspot_position2 {
    margin-top: -85px;
    margin-left: 80px;
}

.hotspot_position3 {
    margin-top: -60px;
    margin-left: 50px;
}

.hotspot_position4 {
    margin-top: -120px;
    margin-left: 150px;
}

.hotspot_position5 {
    margin-top:  -40px;
    margin-left: 180px;
}

.slideshow {
    position: absolute;
    top: 270px;
    margin-left: 21px;
}

.slideshow img {
    width: 243px;
}

.slideshow_controls {
    margin-left: 72px;
    margin-top: -55px;
}

.slideshow_controls img {
    margin-left: 20px;
}

/*
 * Login dialog
 */

.login_title h3 {
    font-family: "Helvetica Neue LT Std", Helvetica, sans-serif;
    font-weight: 800;
    font-size:   2.0em;

    margin-top:  20px;
    margin-left: 20px;
}

#login_modal .modal-body a {
    color:       @gray;
    margin-left: 15px;
}

.login_footer {
    color:       @gray;
    font-family: Helvetica, sans-serif;
    text-align:  center;
}

.register_call_to_action h3 {
    color:       #d12c30;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size:   1.5em;
}

.register_call_to_action:hover {
    text-decoration: none;
    color:       #d12c30;
}

.modal-footer:hover {
    background-color: @grayLighter;
}

.remember_me_label {
    margin-left: 10px;
    color: @gray;
}

/*
 * Login page (Fallback page)
 */

.login_page_form div.field {
    margin-left: -20px;
}

.login_page_form a {
    margin-left: 0px;
}

/*
 * Registration page
 */

.register_error_container {
    height: 200px;
    margin-top: 20px;
    padding: 30px;
    background-color: @white;
    border-color: @gray;
    color: @grayDark;

    .border-radius(20px);
    .box-shadow(1px 1px 5px rgba(0,0,0,0.25));
}

.sidekicks {
    position: absolute;
    top: 530px;
}

.register_error_container h2 {
    color: @title_color;    
    font-size: 1.3em;
    font-family: Helvetica, sans-serif;

}

.register_error_container .divider {
    background-color: @gray;
    height: 3px;
    margin-bottom: 10px;
}

/*
 * Coupon Index page
 */

@coupon_shares_padding: 5px;

.coupon_business_name {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.coupon_table {
    margin-bottom: 0;
}

.coupon_table th {
    background-color: @gray;
    color:            @white;
    font-family:      Helvetica, sans-serif;
    font-size:        0.9em;
    text-align:       center;
}

.coupon {
    font-family: Helvetica, sans-serif;
    font-size: 1.2em;
    color:     @gray;
}

.coupon td {
    #gradient > .vertical(rgba(245, 241, 237, 1.0), rgba(230, 225, 218, 1.0));
}

tr.coupon { 
    cursor: pointer;
}

tr.coupon:hover {
    td {
        #gradient > .vertical(@white, rgba(230, 225, 218, 1.0));
    }
}

.coupon_image {
    text-align:     center;
    vertical-align: middle;
}

.coupon_image_backing {
    border:  5px solid @white;
    padding: 5px;
    margin: 10px;

    #gradient > .vertical(rgba(181, 211, 68, 1.0), rgba(132, 181, 77, 1.0));
    .box-shadow(1px 1px 5px rgba(0,0,0,0.25));
    
    -webkit-transform: matrix(0.999,0.042,-0.042,0.999,0,0);
    -moz-transform: matrix(0.999,0.042,-0.042,0.999,0px,0px);
    -ms-transform: matrix(0.999,0.042,-0.042,0.999,0,0);
    -o-transform: matrix(0.999,0.042,-0.042,0.999,0,0);
    transform: matrix(0.999,0.042,-0.042,0.999,0,0);
}

.coupon_headline {
    vertical-align: middle;
    text-align:     center;
    width:          360px; 
}

.coupon_status {
    vertical-align: middle;
    text-align:     center;
    width:          236px;
}

.share_type {
    text-align: left;
}

.share_value { 
    text-align: right;
}

.coupon_stats {
    font-family:    Helvetica, sans-serif;
    font-size:      0.8em;
    padding:        0;
    vertical-align: top;
    margin-left:    20px;
    width:          180px;
}

.coupon_stats_header {
    background-color: @grayLight;
    margin-left:     -10px;
    margin-right:    -10px;
    padding-top:      10px;
    padding-bottom:   10px;
    padding-left:     10px;
    padding-right:    10px;
    font-size:         0.8em;
}

.coupon_stats_data {
    padding-left: 20px;
}

.coupon_stats_table {
    margin: 0;
}

.coupon_stats_table th {
    background-color: @grayLight;
    font-size:        0.8em;
}

.coupon_stats_table td {
    padding: 0;

    /* Cancel out the vertical borders from the bootstrap bordered-table 
     * for the facebook share table */
    th + th,
    td + td,
    th + td {
        border-left: none;
    }
}

.coupon_shares_table {
    margin-bottom:   0;
    width:         100%;
}

.coupon_shares_table td {
    padding-left:   2px;
    padding-right:  2px;
    padding-bottom: 2px;
    padding-top:    2px;
    vertical-align: middle;
}

.coupon_shares_table td.share_icon_container {
    text-align:   left;
    padding-left: @coupon_shares_padding;
}

.coupon_shares_table td.num_shares {
    text-align:    right;
    padding-right: @coupon_shares_padding;
}

.redeemed_container {
    margin-top: 20px;
}

.redeemed_number {
    color:          #c5242e;
    font-size:      3.0em;
    font-weight:    bold;
    text-align:     center;
    vertical-align: middle;
    width:          111px;
}

.pagination_container {
    background-color: rgba(245, 241, 237, 1.0);
    margin-left:      0px;
}

/*
 * Coupon Detail page
 */

.coupon_detail {
    color:      @gray;
    font-size:   1.2em;

    padding-left: 40px;
}

.coupon_detail_headline {
    background-color: rgba(200, 149, 108, 1.0);
    padding-top:      10px;
    padding-bottom:   10px;
    margin-left:       0px;
    margin-bottom:    10px;
}

.coupon_detail_headline h2 {
    color:       @white;
    font-family: Helvetica, sans-serif;
    font-size:   1.5em;
}

.coupon_detail_timing {
    margin-top: 20px;
    margin-left: 0px;
}

.coupon_detail_timing strong{
    font-size: 1.1em;
}

.coupon_detail_timing a {
    margin-top: 0.5em;
    font-size:  0.8em;
}

.coupon_detail_sharing {
    color:      @gray;
    font-size:  16px;
    margin-top: 20px;
    width:      70px;
}

.coupon_detail_description {
    color:      @gray;
    font-size:  0.9em;
    margin-left:  0px;
}

.coupon_detail_map {
    border:  5px solid @white;
}

/*
 * Profile Settings page
 */

.profile_settings_table {
    margin-top: 0px;
}

.profile_settings_table thead {
    background-color: @gray;
    color:            @white;
    font-size:        0.8em;
    font-family:      Helvetica, sans-serif;
}

.profile_settings_table th {
    width:          50%;
    vertical-align: top;
}

.profile_settings_table td {
    background-color: @white;
    color:            @gray;
}

.profile_settings_table th h2 {
    font-weight: bold;
    color:    @white;
    font-size: 1.4em;
}

.profile_settings_table tfoot td {
    background-color: @gray;
}

.profile_settings_table tfoot a {
    color:            @grayDark;
    background-color: @grayLight;
    font-size:        0.9em;
    
    padding:      3px 20px;
    margin-left:  5px;
    margin-right: 5px;

    .border-radius(10px);
}

.profile_settings_table tfoot a:hover {
    text-decoration:  none;
    background-color: #cfcfcf;
}

.table_marginless_bottom {
    margin-bottom: 0px;
}

.tk_condensed_table td {
    padding: 7px;
}

#profile_settings_title {
    margin-top: 30px;
    margin-left: 0px;
}

.coupon_image_backing_mini {
    border:  5px solid @white;

    padding: 5px;

    margin: 10px 20px;

    #gradient > .vertical(rgba(181, 211, 68, 1.0), rgba(132, 181, 77, 1.0));
    .box-shadow(1px 1px 5px rgba(0,0,0,0.25));
    
    -webkit-transform: matrix(0.999,0.042,-0.042,0.999,0,0);
    -moz-transform:    matrix(0.999,0.042,-0.042,0.999,0px,0px);
    -ms-transform:     matrix(0.999,0.042,-0.042,0.999,0,0);
    -o-transform:      matrix(0.999,0.042,-0.042,0.999,0,0);
    transform:         matrix(0.999,0.042,-0.042,0.999,0,0);
}

/*
 * Edit Profile Wizard
 */

.edit_merchant_form_header {
    background-color: @gray;
    color:            @white;
    font-size:        2.0em;
    font-family:      Helvetica, sans-serif;
    font-weight:      300;

    padding-left:   10px;
    padding-top:    10px;
    padding-bottom: 10px;
}

.login_page_form div.edit_merchant_form_header {
    margin-left: -20px;
}

.edit_merchant_form_body {
    background-color: @white;
    height:           573px;

}

.edit_merchant_form_body div.field {
    margin-left: 20px;
}

.edit_merchant_form_body textarea {
    height: 200px;
}

.edit_merchant_form_body .button_bar {
    margin-left: 0px;
}

#icon_scroll_container {
    width:    460px;
    position: relative;

    border: 1px solid @grayLight;

    .border-radius(4px);
    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
    .box-shadow(@shadow);
}

#icon_scroll_container div.scrollableArea img {
    position: relative;
    float:    left;

    margin-top:    10px;
    margin-bottom: 10px;
    margin-left:    5px;
    margin-right:   5px;
    padding:        0;
    height:        50px;
}

/* 
 * On image hover, add border and shrink the margins by the border width.
 * Otherwise the content of the scrollable div will expand vertically, adding
 * another row to compensate for the increased width
 */
#icon_scroll_container div.scrollableArea img:hover {
    border: 1px solid @grayLight;

    margin-left:   4px;
    margin-right:  4px;
    margin-top:    9px;
    margin-bottom: 9px;

    cursor: pointer;
}

#icon_scroll_container div.scrollableArea img.selected_icon {
    border: 1px solid rgba(49, 149, 239, 1.0);

    margin-left:   4px;
    margin-right:  4px;
    margin-top:    9px;
    margin-bottom: 9px;
}

.edit_merchant_public_info_mascots img {
    margin-top: 200px;
}

.edit_merchant_public_info_error_container {
    margin-left: 40px;
}

/*
 * New Coupon Wizard
 */

.new_coupon_form_header {
    background-color: @gray;
    color:            @white;
    font-size:        2.0em;
    font-family:      Helvetica, sans-serif;
    font-weight:      300;

    padding-left:   10px;
    padding-top:    10px;
    padding-bottom: 10px;
}

.login_page_form div.new_coupon_form_header {
    margin-left: -20px;
}

.new_coupon_form_body {
    background-color: @white;
    height:           573px;
}

.new_coupon_form_body div.field {
    margin-left: 20px;
}

.new_coupon_form_body select.enable_time_select_size {
    width: 50px;
}

.new_coupon_form_body img.ui-datepicker-trigger {
    margin-bottom: -8px;
    margin-left:    3px;
}

/* Verify page */
.new_coupon_form_body table td {
    color: @gray;
}

.new_coupon_form_body table td strong {
    color: rgba(100, 100, 100, 1.0);
}

/* 
 * Addon accordion height isn't quite accurate so have to pad it here so that
 * the buttons aren't hidden underneath
 */
.addons_container {
    height:     520px;
    overflow-y: auto;
}

#addons_accordion {
    margin-top:      20px;
    margin-bottom:   20px;
    height:         440px;
}

#addons_accordion strong {
    font-family: "Helvetica Neue", Helvetica, sans-serif;

    color:    @black;
    font-size: 1.0em;
}

#addons_accordion a {
    font-family: Arial, Helvetica, sans-serif;

    color: @grayDark;

    font-size: 0.9em;
}

#addons_accordion div {
    font-family: Arial, Helvetica, sans-serif;

    color: @gray;
}

#addons_accordion input {
    display: inline;
}

#addons_accordion h3.ui-state-active {
    #gradient > .vertical(rgba(211, 241, 98, 1.0), rgba(162, 211, 107, 1.0));
}

#addons_accordion div.ui-widget-content {
    background: @white;
}

#addons_accordion div.ui-accordion-content {
    padding-left: 0px;
}

.age_range_textbox {
    width:      30px;
    text-align: right;
}

.age_range_slider {
    margin-top:     5px;
    width:        200px;
}

.gender_textbox {
    width: 30px;
    text-align: right;
}

.add_on_checkbox_col {
    text-align: right;
}

.gender_slider {
    margin-top:   5px;
    width:      200px;
}

#num_recipients_plus {
    display: inline-block;
}

#num_recipients_minus {
    display: inline-block;
}

#num_recipients_display {
    text-align: center;
    width: 60px;
    color: @green;
    font-weight: 600;
}

/* Container for total */

@total_bg_color: rgba(243, 226, 208, 1.0);

.total_container {
    height:           200px;
    padding:          30px;
    margin-top:       20px;
    background-color: @total_bg_color;
    border-color:     @gray;
    color:            @grayDark;

    text-align:       center;

    .border-radius(20px);
    .box-shadow(1px 1px 5px rgba(0,0,0,0.25));
}

.total_container h2 {
    color:       @title_color;    
    font-size:   1.3em;
    font-family: Helvetica, sans-serif;
    text-align:  left;
}

.total_container .divider {
    background-color: @gray;

    height:             3px;
    margin-bottom:     10px;
}

.total_container_arrow_down {
    width:          0;
    height:         0;
    margin-left:   40px;
    margin-bottom: 20px;

    border-left: 20px solid transparent;
    border-right: 0px solid transparent;
    border-top:  20px solid @total_bg_color;
}

.coupon_total {
    font-size: 5em;
    color:     rgba(120, 176, 63, 1.0);
}

.currency_cell {
    text-align: right;
}

#receipt_table {
    margin-top:    1em;
    margin-bottom: 0px;
}

#receipt_table td {
    padding-top:    0px;
    padding-bottom: 0px;
    padding-left:   0px;
}

#receipt_table td.discount {
    color: @red;
}

#receipt_table td.total {
    color: @green;
}

/*
 * Terms of service modal dialog
 */

.terms_title h3 {
    font-family: "Helvetica Neue LT Std", Helvetica, sans-serif;
    font-weight: 800;
    font-size:   1.5em;

    margin-top:  20px;
    margin-left: 20px;
}

#terms_modal_ok {
    /* Remove transparency from close button */
    .opacity(100);
}

#terms_modal p {
    margin-left: 20px;
}

/*
 * Terms of service static page
 */

.terms_content {
    margin-top: 2.0em;
    color:      @gray;
}

.terms_content h1 {
    font-family: "Helvetica Neue LT Std", Helvetica, sans-serif;
    font-size:   2.0em;
    font-weight: bold;
    color:       @title_color;
}

.terms_content p {
    margin-top:  1.0em;
    font-family: Arial, Helvetica, sans-serif;
    font-size:   1.2em;
}

.terms_content_scrollable {
    overflow-y: auto;
    height:     550px;
}

.terms_mascots img {
    margin-top: 200px;
}