body { background: #333333; color: #eeeeee; font-family: 'Arial', sans-serif; font-size: 14px; line-height: 21px; } * { margin: 0px; padding: 0px; } img { display: inline-block; width:auto; height: auto; } h1 { font-weight: 400; font-size: 200%; padding: 24px 0px; font-family: 'Lora', serif; } h2 { font-weight: 300; font-size: 160%; padding: 18px 0px; font-family: 'Lora', serif; } h3 { font-weight: 300; font-size: 140%; padding: 12px 0px; font-family: 'Lora', serif; } p { padding-bottom: 10px; } a { color: #E67425; } a:hover { color: #666666; } .clear { clear: both; } .container { position: relative; width: 90%; max-width: 1100px; margin: 0px auto; } .online { border-top: 5px solid #E67425; } .offline { border-top: 5px solid red; } #header { position: fixed; width: 100%; left: 0px; top: 0px; background: #333333; padding: 0px; z-index: 2000; display: block; } #header .project-logo { float: left; padding: 10px 0px; } #header .project-logo a { font-size: 20px; text-decoration: none; color: #E67425; } #header .top-navigation { float: right; position: relative; } #header .top-navigation div#user-email { padding: 11px 10px 11px 10px; } #header .top-navigation div#user-email:hover { background: #E67425; color: #ffffff; cursor: pointer; } #header .top-navigation div#user-email.on { background: #E67425; color: #ffffff; } #header .top-navigation #user-nav { display: none; position: absolute; top: 43px; right: 0px; z-index: 100; background: #E67425; } #header .top-navigation #user-nav ul { margin: 0px; padding: 0px; position: relative; z-index: 100; } #header .top-navigation #user-nav ul li { list-style: none; display: inline-block; position: relative; } #header .top-navigation #user-nav ul li.on { background: #E67425; } #header .top-navigation #user-nav ul li.groupinfo { color: #ffffff; font-size: 10px; padding: 12px 20px; } #header .top-navigation #user-nav ul li a { display: block; padding: 12px 20px; width: 200px; color: #ffffff; } #header .top-navigation #user-nav ul li a:hover { text-decoration: none; background-color: #ED9B65; color: #ffffff; } #header .top-navigation #user-nav ul li.on a { color: #ffffff; } #header .top-navigation #user-nav ul li.on a:hover { color: #ffffff; } #header .top-navigation #user-nav ul li ul { display: none; position: absolute; top: 40px; right: 0px; width: 250px; background: #E67425; } #header .top-navigation #user-nav ul li ul li { display: block; width: 250px; } #header .top-navigation #user-nav ul li ul li:hover a { background: #ED9B65; color: #ffffff; } #header .top-navigation ul { } #header .top-navigation ul li { position: relative; list-style: none; display: inline-block; } #header .top-navigation ul li.mobile-only { display: none; } #header .top-navigation ul li a { position: relative; display: block; padding: 38px 10px; color: #231f20; text-decoration: none; } #header .top-navigation ul li a:hover { color: #73233c; } #header .movile-nav { display: none; } div#main-area { color: #333333; background: #ffffff; padding: 80px 0px 40px 0px; } #orderInfo { position: fixed; top: 74px; width: 90%; max-width: 1100px; margin: 0px auto; background: #dddddd; } #main-area.return #orderInfo { } #store-order-worksheet { padding: 60px 0px 0px 0px; } #footer { padding: 40px 0px; background: #eeeeee; } #footer .info { float: left; padding: 10px 0px; } #footer .info p { padding: 0px; font-size: 12px; } #footer .bottom-navigation { float: left; } #footer .bottom-navigation ul { padding: 0px; } #footer .bottom-navigation ul li { position: relative; list-style: none; display: inline-block; } #footer .bottom-navigation ul li a { position: relative; display: block; padding: 0px 20px 0px 0px; color: #333333; text-decoration: none; } #footer .bottom-navigation ul li a:hover{ color: #73233c; } #footer .social { float; left; padding: 10px 0px; } #footer .social a { display: inline-block; } #footer .social a img { width: 35px; } #footer .contact { float: right; text-align: right; padding: 0px 0px 10px 0px; } #footer .contact h3 { padding-top: 0px; } #footer .contact a { color:#E67425; } #footer .contact aLhover { color: #333; } a.new_cta { text-decoration: none !important; position: relative; padding: 10px 20px; font-size: 12px; line-height: normal; background: #333333; color: #ffffff; display: inline-block; text-align: center; } a.new_cta:hover { text-decoration: none !important; background: #E67425; color: #ffffff; } a.orange { text-decoration: none; background: #E67425; color: #ffffff; } a.orange:hover { text-decoration: none; background: #333333; color: #ffffff; } a.blue { background: #5AC7F2; color: #ffffff; text-decoration: none; } a.blue:hover { background: #81D6F5; color: #ffffff; text-decoration: none; } a.red { background: #930000; color: #ffffff; text-decoration: none; } a.red:hover { background: #B30000; color: #ffffff; text-decoration: none; } a.green { background: green; color: #ffffff; text-decoration: none; } a.green:hover { background: #008000; color: #ffffff; text-decoration: none; } div#list { /* display: table; */ display: block; width: 100%; border-top: 1px solid #cccccc; } div#list div.list_top { /* display: table-row; */ display: block; background-color: #666666; font-weight: bold; color: #ffffff; } div#list div.list_item { /* display: table-row; */ display: block; color: #000000; border-bottom: 1px solid #cccccc; } div#list div.list_top div.list_column, div#list div.list_item div.list_column { display: block; float: left; /* display: table-cell; */ padding: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .item-title { padding: 0px 0px 10px 0px; } @media screen and (max-width: 1000px) { #header .project-logo { float: left; padding:1 0px 0px; } #header .project-logo a img { height: 60px; } #header .top-navigation ul li a { padding: 38px 8px; } } @media screen and (max-width: 900px) { #header .project-logo { float: left; padding: 10px 0px; } #header .project-logo a img { height: 50px; } #header .top-navigation ul li a { padding: 38px 5px; } } @media screen and (max-width: 768px) { #header { position: fixed; border-top: 5px solid #E67425; padding: 0px; z-index: 2000; width: 100%; } #header .container { width: 100%; } #header .project-logo { padding-left: 5%; } #header .project-logo a img { height: 40px; } #header .top-navigation { position: absolute; top: 41px; left: 0px; width: 100%; display: none;border-bottom: 1px solid #73233C; } #header .top-navigation #user-nav { width: 100%; } #header .top-navigation #user-nav ul { width: 100%; } #header .top-navigation #user-nav ul li { width: 100%; } #header .top-navigation #user-nav ul li a { width: calc(100% - 40px); } #header .top-navigation #user-email { display: none; } #header .top-navigation #user-nav { display: block; top: 0px; } div.page { padding-top: 80px; } #header .movile-nav { display: block; position: absolute; right: 0px; top: 0px; padding: 11px 5%; } #header .movile-nav:hover { cursor: pointer; } #header .movile-nav.on { background: #E67425; } div#main-area { padding: 70px 0px 40px 0px; } #footer .bottom-navigation { float: none; text-align: center; } #footer .bottom-navigation ul { padding: 0px; } #footer .bottom-navigation ul li { position: relative; list-style: none; display: inline-block; } #footer .bottom-navigation ul li a { position: relative; display: block; padding: 0px 20px 0px 0px; color: #333333; text-decoration: none; } #footer .info { float: none; text-align: center; padding: 10px 0px; } #footer .social { float; none; text-align: center; padding: 30px 0px; } #footer .contact { float: none; text-align: center; padding: 30px 0px 10px 0px; } } @media screen and (max-width: 600px) { #main-content { width: 90%; margin: 0px auto; } #content { padding: 30px 0px 0px 0px; } #content .rail { float: none; width: 100%; padding: 0px 0px 20px 0px; } #content .content { float: none; width: 100%; padding: 0px 0px 40px 0px; } #orderInfo { position: fixed; width: 90%; background: #dddddd; } } div#form { margin: 0px; padding: 40px; background: #f0f0f0; } #form select { border: 0px; background: #DCDCDC; padding: 10px; } #form input[type="email"], #form input[type="text"], #form input[type="password"], #form textarea { border: 0px; background: #DCDCDC; padding: 10px; width: calc(100% - 20px); font-family: 'Arial', sans-serif; } #form input.first_name { width: calc(38% - 20px); float:left;} #form input.last_name { width: calc(58% - 20px); float:right; } #form textarea { height: 100px; } #form button { } #form button img { height: 20px; } button, a.cta-button { padding: 10px 20px; background: #E67425; border: 0px; color: #fff; font-size: 12px; } button:hover, a.cta-button:hover { background: #333333; cursor: pointer } div.required { position: absolute; padding: 5px 0px; color: #666666; font-size: 10px; } div.active_error { position: absolute; padding: 5px 0px; color: #990000; font-size: 10px; } @media screen and (max-width: 480px) { #form { padding: 0px 0px; margin: 0px 0px; } #form .input_name { width: 100%; padding: 10px 0px; margin-bottom: 0px; } #form .input { position: relative; width: 100%; margin-bottom: 20px; } .column-head-left { width: 100%; } .column-head-left .padding { padding: 10px 0px; } .column-head-right { width: 100%; } .column-head-right .padding { padding: 10px 0px; } } @media screen and (min-width: 481px) and (max-width:700px) { #form { padding: 0px 0px; margin: 0px 0px 0px 0px; } #form .input_name { float: left; width: 40%; padding: 10px 0px; margin-bottom: 40px; } #form .input { position: relative; float: left; width: 60%; margin-bottom: 40px; } .column-head-left { width: 100%; } .column-head-left .padding { padding: 10px 0px; } .column-head-right { width: 100%; } .column-head-right .padding { padding: 10px 0px; } } @media screen and (min-width:701px) { #form { padding: 0px 0px 20px 0px; margin: 0px 0px; } #form .input_name { float: left; width: 40%; padding: 10px 0px; margin-bottom: 40px; } #form .input { position: relative; float: left; width: 60%; margin-bottom: 40px; } .column-head-left { width: 50%; float: left; } .column-head-left .padding { padding: 0px 20px 0px 0px; } .column-head-right { width: 50%; float: left; } .column-head-right .padding { padding: 0px 0px 0px 20px; } } .iframe_popup { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3000; display: none; position: fixed; top: 0px; left: 0px; background-image:URL('../icon/bg_popup.png'); } .iframe_popup .inner { position: absolute; display: none; border: 0px solid #000000; z-index: 3000; width: 0px; height: 0px; top: 30px; left: 0px; padding: 20px; background-color: #fff; -moz-box-shadow: 0px 0px 100px 2px #000; -webkit-box-shadow: 0px 0px 100px 2px #000; box-shadow: 0px 0px 100px 2px #000; opacity: 0; } .iframe_popup .inner iframe { width: 0px; } .iframe_popup .inner a#close_popup { position: absolute; top: 10px; right: 10px; } #popup_info { position: relative; width: calc(100% - 10px); padding: 0px 5px; } // .new_cta { width: calc(100% - 60px); } div.more-actions { padding: 0px 0px 5px 0px; } div.item-title { font-size: 24px; padding: 0px; margin: 0px; } a#more-action { display: inline; padding: 0px 10px; margin: 0px 0px 0px 10px; } a#more-action:hover { background: #E5E5E5; } div.notes { float: left; width: calc(30% - 40px); padding-left: 40px; } div.notes div.box { padding: 20px; margin: 0px 0px 20px 0px; background: #eeeeee; color: #000000; } div.notes a.new_cta { margin: 0px 0px 20px 0px; } div.main { float: left; width: 70%; } div#overview div.box { width: calc((100% - 120px)/2); margin-right: 20px; float:left; } div#overview div.box:nth-child(2n+2) { margin-right: 0px; } .dep-overview-left { width: 48%; float: left; } .dep-overview-right { width: 48%; float: right; } .dep-info-item { border-top: #cccccc solid 1px; margin: px 0px 5px 0px; padding: 5px 0px; } .dep-info-item-field { width: 40%; float: left; } .dep-info-item-value { width: 60%; float: left; } .dep-info-item-value input[type="text"],textarea { width: calc(100% - 8px ); } .dep-info-item-value span.edit-area { display: none; } @media (max-width: 1280px) { div#overview div.box { width: 100%; margin-right: 0px; float:none; } } .date { border: 1px solid #ccc; font-size: 14px !important; } .important_message { padding: 10px 0px; text-align: center; background: green; color: #ffffff; } .crumb { padding: 10px 0px; } #error_message { position: fixed; top: 0px; left: 0px; width: 100%; padding: 26px 0px; background: red; color: #ffffff; text-align: center; z-index: 10000; font-size: 150%; } #success_message { position: fixed; top: 0px; left: 0px; width: 100%; padding: 26px 0px; background: green; color: #ffffff; text-align: center; z-index: 10000; font-size: 150%; } div.product-pop-head { background: #ffffff;position: sticky; top: 42px; left: 0px; } div.product-pop-head div#all-product-search { padding: 0px 0px 10px 0px; } div#results { padding: 0px 0px 20px 0px; } #searchResultItems { } #searchResultItems div.searchResultItem.head { color: #000000; } #searchResultItems div.searchResultItem div.col { float: left; padding: 8px 4px; border-right: 0px solid #ffffff; font-size: 12px; color: #000000; } #searchResultItems div.add-product { display: block; margin: 0px 0px 2px 0px; background: #eeeeee; } #searchResultItems div.add-product div.searchResultItem { display: block; color: #E67425; text-decoration: none; } #searchResultItems div.add-product:hover { background: #E67425;} #searchResultItems div.add-product:hover div.searchResultItem div.col { color: #ffffff !important; } .search_box input[name=search_term] { width: calc( 100% - 16px ); padding: 6px; } .search_box { width: 100%; padding: 0px 0px 20px 0px; } .left_jobs { float: left; width: calc(50% - 10px); padding-right: 10px; } .right_jobs { float: left; width: calc(50% - 10px); padding-left: 10px; } div.half { width: calc(50% - 10px); margin: 0px 10px 0px 0px; float: left; } div.half:nth-child(2) { width: calc(50% - 10px); margin: 0px 0px 0px 10px; } a.user_home_cta { width: 100%; padding: 16px 0px; text-align: center; font-size: 16px; text-decoration: none; margin-bottom: 20px; } a.user_home_cta:hover { width: 100%; padding: 16px 0px; text-align: center; font-size: 16px; text-decoration: none; margin-bottom: 20px; } a.user_home_cta { display: block; position: relative; width: 100%; text-decoration: none; } a.user_home_cta .image { width: 33px; height: 33px; padding: 10px; position: absolute; left: 0px; top: 0px; } a.user_home_cta .image img { width: 100%; height: auto; } a.user_home_cta { display: inline-block; padding: 10px 10px; background: #eeeeee; color: #E67425; text-decoration: none; } a.user_home_cta:hover { display: inline-block; padding: 10px 10px; color: #eeeeee; background:#E67425; text-decoration: none; } a.user_home_cta img { position: relative; top: 2px; padding-right: 6px; height: 16px; } a.user_home_cta { width: 100%; padding: 16px 0px; text-align: center; font-size: 16px; text-decoration: none; margin-bottom: 20px; } a.user_home_cta:hover { width: 100%; padding: 16px 0px; text-align: center; font-size: 16px; text-decoration: none; margin-bottom: 20px; } a.create_order_cta_four { background: #eeeeee; color: #E67425; width: calc((100% - 25px)/4); float: left; padding: 10px 0px; text-align: center; font-size: 14px; text-decoration: none; margin: 0px 0px 0px 5px; } a.create_order_cta_four.two { margin: 0px 0px 0px 5px; color: green !important; } a.create_order_cta_four.three { margin: 0px 0px 0px 5px; } a.create_order_cta_four.four { margin: 0px 0px 0px 5px; } a.create_order_cta_four:hover { color: #eeeeee; background:#E67425; } a.create_order_cta_four img { position: relative; top: 2px; padding-right: 6px; height: 16px; } a.create_order_cta_three { background: #eeeeee; color: #E67425; width: calc((100% - 25px)/3); float: left; padding: 10px 0px; text-align: center; font-size: 14px; text-decoration: none; margin: 0px 0px 0px 5px; } a.create_order_cta_three.two { margin: 0px 0px 0px 5px; color: green !imporant; } a.create_order_cta_three.three { margin: 0px px 0px 5px; } a.create_order_cta_three:hover { color: #eeeeee; background:#E67425; } a.user_home_cta_half { background: #eeeeee; color: #E67425; width: calc(50% - 10px); float: left; padding: 16px 0px; text-align: center; font-size: 16px; text-decoration: none; margin: 0px 5px 20px 5px; } a.user_home_cta_half:hover { color: #eeeeee; background:#E67425; } a.user_home_cta_half img { position: relative; top: 2px; padding-right: 6px; height: 16px; } a.user_home_cta_third { display: block; position: relative; width: calc((100% - 10px) / 3); float: left; text-decoration: none; } a.user_home_cta_third .image { width: 33px; height: 33px; padding: 10px; position: absolute; left: 0px; top: 0px; background: #a5a5a5; } a.user_home_cta_third .image img { width: 100%; height: auto; } a.user_home_cta_third div.title { display: block; width: 100%; background: #eeeeee; color: #E67425; padding: 16px 0px 16px 0px; font-size: 16px; text-decoration: none; text-align: center; } a.user_home_cta_third:hover { color: #eeeeee; background: #E67425; } a.user_home_cta_third:hover div { color: #eeeeee; background: #E67425; } a.user_home_cta_third.order { margin: 0px 5px 20px 0px; } a.user_home_cta_third.return { margin: 0px 0px 20px 0px; } a.user_home_cta_third.history { margin: 0px 0px 20px 5px; } a.user_home_cta.return { background-image: url('../icon/icon-return-ccc.png'); background-size: 60px 60px; background-repeat: no-repeat; background-position: 10px 17px; } a.user_home_cta.order { background-image: url('../icon/icon-order-ccc.png'); background-size: 60px 60px; background-repeat: no-repeat; background-position: 10px 17px; } #search-order-list #search-list { float: left; padding: 8px; width: calc(100% - 130px); margin-bottom: 5px; } @media (max-width: 780px) { #order-options { padding: 5px 0px; } #search-order-list { padding: 5px; text-align: left; } #search-order-list #search-list { float: left; padding: 8px; width: calc(100% - 130px); margin-bottom: 5px; } a.create_order_cta_four, a.create_order_cta_four.two { width: calc((100% - 15px)/2); } a.create_order_cta_four.three, a.create_order_cta_four.four { display: none; } div.half { width: 100%; margin: 0px 0px 0px 0px; float:none; } div.half:nth-child(2) { width: 100%; margin: 0px 0px 0px 0px; float:none; } a.user_home_cta_half { display: block; float: none; width: 100%; padding: 16px 0px; text-align: center; font-size: 16px; text-decoration: none; margin: 0px 0px 20px 0px; } a.user_home_cta_third { position: relative; float: none; width: 100%; margin: 0px 0px 20px 0px; } a.user_home_cta_third.order, a.user_home_cta_third.return, a.user_home_cta_third.history { margin: 0px 0px 20px 0px !important; } } /* ORDER PAGE */ #data-sync { width: 100%; padding: 16px 0px; text-align: center; font-size: 16px; text-decoration: none; margin-bottom: 20px;} #data-sync a.full { padding: 10px 0px; width: 100%; } #data-sync a { margin: 10px 0px 0px 0px; padding: 10px 30px; font-size: 12px; display: inline-block; text-decoration: none; background: #e2e2e2; color:#E67425; } #data-sync a:hover { text-decoration: none; background: #E67425; color:#ffffff; } h1 { font-size: 150%; font-family: arial; } h2 { font-size: 120%; font-family: arial; } p#storeName { font-size: 150%; } .box { padding: 16px 0px; text-align: center; background: #EEEEEE; } .box.green { background: #46920E; color: #ffffff; } #workarea { padding: 0px; font-size: 12px; } #workarea .product-line { padding: 0px 0px 2px 0px; background: #eeeeee; margin-bottom: 1px; } #workarea .product-line div.qty-adjust { float: left; width: 86px; } #workarea .product-line div.col { float: left; padding: 10px 4px; margin-right: 1px; background: #eeeeee; } #workarea .product-line div.col.last-ordered { float: none; padding: 0px !important; margin-right: 1px; background: #eeeeee; } #workarea .product-line div.col.last-ordered a { display: block; padding: 10px 4px; text-decoration: none; cursor: pointer; color: blue; } #workarea .product-line div.col.last-ordered a:hover { } #workarea .product-line.head div.qty-adjust { background: #cccccc; } #workarea .product-line.head div.col { background: #cccccc; } #workarea .product-line .product-description { } #workarea .product-line input { padding: 10px 5px; width: 20px; text-align: center; } #workarea .product-line input.product_number { width: 100px; } #done-cancel { position: fixed; bottom: 0px; left: 0px; width: 100%; } #done-cancel a { width: calc(50% - 2px); display: block; text-align: center; padding: 10px 0px; text-decoration: none; font-size: 12px; } #done-cancel a#sync_order { float: left; background: green; color: #ffffff; } #done-cancel a#cancel_order { float: right; background: red; color: #ffffff; } a.delete-line { display: inline-block; padding: 9px; background: red; color: #ffffff; text-decoration: none; } a.qty-up { display: inline-block; padding: 9px; text-decoration: none; background: #333333; color: #ffffff; } #workarea .product-line div.product_qty { display: inline-block; padding: 9px 0px; width: 34px; text-align: center; background-color: #ffffff; } a.qty-down { display: inline-block; padding: 9px; text-decoration: none; background: #555555; color: #ffffff; } @media (max-width: 600px) { #workarea { padding: 20px 0px 0px 0px; font-size: 12px; } #workarea .product-line { padding: 0px 10px 0px 10px; background: #eeeeee; margin-bottom: 2px; } } .popup { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3000; display: none; background-color: rgba(0,0,0,.7); } .popup .inner { background: #ffffff; color: #333333; display: block; position: absolute; z-index: 3000; width: 0px; height: 0px; top: 0px; left: 0px; padding: 0px; overflow-y: scroll; -moz-box-shadow: 0px 0px 100px 2px #000; -webkit-box-shadow: 0px 0px 100px 2px #000; box-shadow: 0px 0px 100px 2px #000; opacity: 0; } .popup .inner iframe { width: 0px; } .popup .inner div.close_popup_area { position: sticky; top: 0px; z-index: 1000; width: 100%; background: #ffffff; padding: 0px; text-align: right; } .popup .inner div.close_popup_area a#close_popup { position: relative; padding: 10px; display: inline-block; } @media (max-width: 600px) { .popup .inner div.close_popup_area { top: 0px; z-index: 1000; } } div#auth-check-alert { display: none; position: absolute; top: 0px; left: 0px; z-index: 15000; width: 100%; height: 1000px; background: url("../icon/bg_popup.png"); } div#auth-check-alert div.alert-inner { position: absolute; top: 100px; left: 50%; margin-left: -175px; width: 310px; background: #ffffff; padding: 20px; text-align: center; color: #2C3549; } #loading-bg { background-color: rgba(0,0,0,.8); position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999; } #loading-bg #loading-inner { position: absolute; width: 90%; max-width: 400px; left: -400px; top: -100px; color: #ffffff; }