/* --------------------------------------------- Project: Steve Giralt Gift App Author: John Merlino Date: December 8, 2015 File: main.css --------------------------------------------- */ /* Mobile Optimized */ /* --------------------------------------------- */ #container, #gifts { width: 300px; } #container { margin: 0 auto; } #sg_holiday_gift_app, #sg_holiday_gift_app_data, #sg_holiday_gift_app_login { background: #fff; position: relative; } #sg_holiday_gift_app_login #wrapper { text-align:center; } /* Header */ #header { text-align:center; margin: 20px 0 0 0; } #header h1 { font: italic 16px Georgia, "Times New Roman", Times, serif; text-transform:uppercase; letter-spacing: 2px; color: #f7b933; } #header em { font: bold 78px Arial, Helvetica, sans-serif !important; text-transform:uppercase; display:block; color: #f7b933; } #header .gift_title { color: #f7b933; } #header p { color: #3f3f3f; margin: 15px 0px 50px; line-height: 1.2; } #header #choose_msg, #header #choosen_msg { display: none; } #header.choose #choose_msg { display: block; } #header.choosen #choosen_msg { display: block; } #header.choosen #choosen_msg { max-width: 580px; margin: 15px auto 30px; } /* Buttons */ .button_set { text-align: center; padding: 30px 0; clear: both; } .btn_primary { margin: 0 4px; font-size: 16px; font-weight: 600; letter-spacing: 1.1; background-color: #f7b933; color: #333; text-transform: uppercase; text-decoration: none; border-radius: 30px 30px; padding: 12px 26px; } .btn_secondary { margin: 0 4px; font-size: 16px; font-weight: 600; letter-spacing: 1.1; background-color: #dfdfdf; color: #333; text-transform: uppercase; text-decoration: none; border-radius: 30px 30px; padding: 12px 26px; } .btn_primary span, .btn_secondary span { font-size: 16px; } #gift_selector { position: relative; margin: 0; } #gifts, #galleries, #info_form { display: none; } /* Gift Categories */ #gifts { margin: 0 auto; } #gifts .gift_cat a { display: block; width: 300px; height: 205px; padding: 5px 0 0 0; margin: 0 0 10px 0; background-color: #eee; } #gifts .gift_cat a { text-decoration: none; } #gifts .gift_cat .cat { display: block; margin: 10px auto 0; width: 200px; height: 150px; } #gifts .gift_cat h2 { font-size: 18px; font-weight: 600; text-align: center; text-transform: uppercase; margin: 12px 0 0 0; } #gifts #opt1 a { } #gifts #opt1 .cat { background: url('../images/icon_museums.png') no-repeat left top; } #gifts #opt2 a { } #gifts #opt2 .cat { background: url('../images/icon_animals.png') no-repeat left top; } #gifts #opt3 a { } #gifts #opt3 .cat { background: url('../images/icon_exercise.png') no-repeat left top; } #gifts #opt4 a { } #gifts #opt4 .cat { background: url('../images/icon_charity.png') no-repeat left top; } /* Galleries of Gifts */ #galleries .gallery_header { margin: 0 5px 15px; height: 60px; background-color: #3f3f3f; } #galleries.gallery_museum .gallery_header { background: #3f3f3f url("../images/header_icon_museum.png") no-repeat 13px center; } #galleries.gallery_garden .gallery_header { background: #3f3f3f url("../images/header_icon_garden.png") no-repeat 13px center; } #galleries.gallery_exercise .gallery_header { background: #3f3f3f url("../images/header_icon_exercise.png") no-repeat 13px center; } #galleries.gallery_cash .gallery_header { background: #3f3f3f url("../images/header_icon_cash.png") no-repeat 13px center; } #galleries .gallery_header h2 { padding: 0 0 0 70px; font-size: 18px; line-height: 60px; font-weight: 600; text-transform: uppercase; color: #fff; } #galleries .gift { opacity: 0.6; display: block; float: left; margin: 5px; width: 285px; height: auto; background: #fff; border: 2px solid #b9b9b9; } #galleries .gift span { display: none; } #galleries .gift.selected { opacity: 1 !important; border: 2px solid #f7b933 !important; } #galleries .gift img { width: 100%; } #gallery_museum, #gallery_garden, #gallery_exercise, #gallery_cash { display: none; } #galleries.gallery_museum #gallery_museum, #galleries.gallery_garden #gallery_garden, #galleries.gallery_exercise #gallery_exercise, #galleries.gallery_cash #gallery_cash { display: block; } #galleries .button_set { clear: both; } #selected_description { position: absolute; top: 408px; left: 12px; font-size: 14px; color: #fff; font-weight: bold; text-transform: uppercase; } #selected_description em { color: #ffa302; font-style: normal; font-weight: bold; font-size: 14px; text-transform: uppercase; } /* Info Form */ #info_form { } #info_form h2 { font-size: 21px; font-weight: bold; color: #ffa302; padding-bottom: 10px; } #info_form .body_copy #gift_description em, #info_form .body_copy #gift_description { font-size: 15px; font-weight: bold; color: #bdbdbd; line-height: 18px; } #info_form .body_copy { padding-bottom: 20px; color: #bdbdbd; } #info_form .body_copy #gift_description em { color: #fff; } #info_form .gift_display { width: 100%; height: 200px; text-align: center; border: 1px solid #666; } #info_form #form_wrapper { padding: 0 0 0 12px; } #info_form #form_wrapper .entry { padding-bottom: 16px; } #info_form #form_wrapper .entry h4 span { font-size: 15px; font-weight: bold; color: #666; } #info_form #form_wrapper .entry h4 { padding-bottom: 5px; } #info_form #form_wrapper .entry .text { width: 250px; color: #666; font-size: 14px; padding: 8px 6px; } #info_form .btn_primary { display: block; margin: 0; } #info_form .btn_secondary { display: block; margin: 0 0 10px 0; } /* Confirm Page */ #sg_holiday_gift_app_confirm #gift_selector { padding-top: 110px; height: 322px;} #sg_holiday_gift_app_confirm #thank_you { margin: 0 auto; text-align: center; } #sg_holiday_gift_app_confirm #thank_you h2 { font-size: 26px; font-weight: bold; color: #ffa302; padding-bottom: 10px; } #sg_holiday_gift_app_confirm #thank_you p.signature, #sg_holiday_gift_app_confirm #thank_you p.body_copy { font-size: 16px; font-weight: normal; color: #666; line-height: 18px; padding-bottom: 16px; } #sg_holiday_gift_app_confirm #thank_you p a { font-size: 16px; font-weight: bold; text-decoration: underline; } /* Footer/Logo */ #footer #sg_logo { display: block; float: right; margin: 40px 0 30px 0; width: 150px; height: 68px; background: url('../images/sg_logo_2.gif') top left no-repeat; } #footer #sg_logo span { display: none; } /* ------------------------------------------------------------ Media Queries ------------------------------------------------------------ */ /* Tablet */ /* --------------------------------------------- */ @media (min-width: 600px) { #gifts, #container { width: 580px; } #gifts .gift_cat a { width: 100%; height: 245px; margin: 0 auto 10px; padding: 30px 0 0 0; } #galleries .gift { width: 179px; height: auto; } #info_form .gift_display { padding: 20px 0; } #info_form #form_wrapper { padding: 0; } #info_form .col_a { width: 288px; float: left; } #info_form .col_b { width: 288px; float: right; } #info_form .row { clear: both; } #info_form #form_wrapper .row .text { width: 542px; } #info_form .btn_primary { display: inline-block; margin: 0 4px; } #info_form .btn_secondary { display: inline-block; margin: 0 4px; } #info_form #input_state { float: left; width: 160px; } #info_form #input_state.entry .text { width: 130px; } #info_form #input_zip { float: left; width: 105px; } #info_form #input_zip.entry .text { width: 89px; } #sg_holiday_gift_app_confirm #gift_selector { width: 500px; margin: 0 auto; } #footer #sg_logo { } } /* Desktop */ /* --------------------------------------------- */ @media (min-width: 980px) { #container { width: 960px; } #gifts { width: 870px; } #gifts .gift_cat a { width: 415px; height: 275px; margin: 0 10px 20px; float: left; } #gifts .gift_cat a:hover .cat { background-position: 0 -150px !important; } #gifts #opt1 a:hover h2 { color: #3f70c2; } #gifts #opt2 a:hover h2 { color: #1f970f; } #gifts #opt3 a:hover h2 { color: #01a8a6; } #gifts #opt4 a:hover h2 { color: #ef5d0d; } #galleries { width: 868px; margin: 0 auto; } #galleries .gift { width: 275px; height: 180px; } #galleries .gift:hover { opacity: 0.9; border: 2px solid #666; } #info_form { width: 580px; margin: 0 auto; } #footer #sg_logo { float: right; margin: 40px 50px 30px 0; } } /* Data Page */ #sg_holiday_gift_app_data { margin: 15px; } #sg_holiday_gift_app_data #container { width: auto !important; } #sg_holiday_gift_app_data #header h1 { font-size: 25px; font-weight: bold; color: #ffa302; } #sg_holiday_gift_app_data #header p { font-size: 15px; font-weight: bold; color: #b4b4b4; } #sg_holiday_gift_app_data table { } /* Tablesorter */ table.tablesorter { font-family:arial; background-color: #CDCDCD; margin:10px 0pt 15px; font-size: 8pt; width: 100%; text-align: left; } table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #eee; color: #000; border: 1px solid #FFF; font-size: 13px; padding: 4px; font-weight: bold; } table.tablesorter thead tr .header { background-image: url(../images/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } table.tablesorter thead tr .headerSortUp { background-image: url(../images/asc.gif); } table.tablesorter thead tr .headerSortDown { background-image: url(../images/desc.gif); } table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #ffa302; } table.tablesorter tbody td { color: #333; padding: 4px; vertical-align: top; } table.tablesorter tbody tr:nth-child(odd) td { background-color: #FFF; } table.tablesorter tbody tr:nth-child(even) td { background-color: #F0F0F6; } /* Login Page Form */ #sg_holiday_gift_app_login #header p { max-width: 580px; margin: 15px auto 30px; } #login { max-width: 350px; padding: 50px 50px 30px 50px; background: #dfdfdf; margin: 0px auto; } #login .entry { margin-bottom: 20px; } #login .entry h4 { font-size: 14px; text-align: left; letter-spacing: 1px; padding-bottom: 4px; } #login .entry .text { width: 95%; color: #666; font-size: 14px; padding: 6px 0px 6px 10px; } #login .error { color: #e25151; } #login #btn_submit_form { }