/* start of desktop styles */ @media screen and (max-width: 991px) { /* start of large tablet styles */ div.page_container{} } @media screen and (max-width: 767px) { /* start of medium tablet styles */ div.page_container{} } @media screen and (max-width: 479px) { /* start of phone styles */ div.page_container{} } span.release_state{ font-family : Impact, Charcoal, sans-serif; font-size : 16px; font-weight : normal; font-style : italic; color : #630; } /* span.release_state is for the upper-right indicator of what state the development is in. Remove for production*/ :root{ --light-black:#252525; --white:#fff; --light-blue:#3ff; --gray-a:#ccc; --gray-b:#444; --gray-c:#eee; --gray-d:#999; --gray-e:#ddd; --gray-f:#555; --gray-g:#333; --gray-h:#aaa; --red:#d83c3c; --light-red:#ed7878; --dark-red:#c42f2f; --light-yellow:#ffc; --light-green:#cfc; --dark-green:#360; --tan:#eadcce; --light-brown:#c1a366; --brown:#960; --dark-brown: #630; --light-purple:#eef; --dark-purple:#dcf; } .green{color:green;} .red{color:red;} .magenta{color:magenta;} .bmagenta{background:magenta;} .brown{color:brown;} .bold{font-weight:bold;} .bwhite{background:white;} a { color : blue; } a:hover { color : red; } body { font-family : "Century Gothic","Trebuchet MS", Helvetica, sans-serif; font-size : 14px; margin : 0; padding : 25px; min-width:810px; } div.page_container{ max-width: 600px; } div.background{ margin-top : -15px; padding-top: 25px; padding-bottom: 10px; background: var(--white) url('http://wwphelps.com/images/leather_bkgd_01.jpg'); -webkit-border-radius : 32px 0 0 0; -khtml-border-radius : 32px 0 0 0; behavior: url(PIE.htc); border-radius : 32px 0 0 0; } div.menu_02{ text-align : right; padding-right : 15px; text-align : right; padding-bottom : 10px; } div.menu_03{ } div.body{ width : -220px; border : 2px solid var(--light-black); background: var(--white) url('http://wwphelps.com/images/paper_bkgd_02.jpg'); -webkit-border-radius : 24px 0 0 0; -khtml-border-radius : 24px 0 0 0; behavior: url(PIE.htc); border-radius : 24px 0 0 0; padding : 15px; } div.center{ background : var(--white) url('http://wwphelps.com/images/logo_01_b.png') no-repeat; } span.leather{ color : white; font-weight : bold; } a.leather, a.leather_02, a.profile{ color : white; text-decoration : none; font-weight : bold; } a.leather:hover, a.leather_02:hover, a.profile:hover { color : var(--light-blue); } a.leather_02{ font-weight : normal; font-size : 11px; } p.menu_level_00{ font-weight : bold; color : var(--gray-a); font-size : 18px; margin : 25px 5px 0 0; padding : 0; border-bottom : 1px solid var(--gray-a); } p.menu_level_01{ margin : 0 0 0 20px; padding : 0; } form{ margin : 0; padding : 0; } table.leather{ display : inline-block; } td.leather_lft, td.leather_rgt{ text-align : right; font-size : 14px; white-space : nowrap; text-align : right; } td.leather_lft{ padding-right : 15px; } td.leather_rgt{ width : 205px; } input.search, input.send_email, input.login{ width : 125px; margin-right : 5px; padding-left : 3px; border : 1px solid var(--light-black); -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(PIE.htc); border-radius : 5px; } button.send_email, button.login{ font-weight : bold; padding : 0; width : 69px; padding-right : 3px; border : 1px solid var(--light-black); -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(PIE.htc); border-radius : 5px; } button.send_email{ width : 95px; } /*----------------------- Search Field -----------------------*/ /*Clearing Floats*/ .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } /* Form wrapper styling */ .form-wrapper { width: 215px; padding: 5px; background: var(--gray-b); background: rgba(0,0,0,.2); border-radius: 5px; -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(PIE.htc); box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); } /* Form text input */ .form-wrapper input { width: 165px; height: 20px; padding: 0px 5px; float: left; font: bold 14px 'Trebuchet MS', 'Tahoma'; border: 0; background: var(--gray-c); border-radius: 3px 0 0 3px; -webkit-border-radius : 3px 0 3px; -khtml-border-radius : 3px 0 0 3px; behavior: url(PIE.htc); } .form-wrapper input:focus { outline: 0; background: var(--white); box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: var(--gray-d); font-weight: normal; font-style: italic; } .form-wrapper input:-moz-placeholder { color: var(--gray-d); font-weight: normal; font-style: italic; } .form-wrapper input:-ms-input-placeholder { color: var(--gray-d); font-weight: normal; font-style: italic; } /* Form submit button */ .form-wrapper button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 20px; width: 50px; font: bold 11px 'Trebuchet MS', 'Tahoma'; color: var(--white); text-transform: uppercase; background: var(--red); border-radius: 0 3px 3px 0; -webkit-border-radius : 0 3px 3px 0; -khtml-border-radius : 0 3px 3px 0; behavior: url(PIE.htc); text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .form-wrapper button:hover{ background: var(--light-red); } .form-wrapper button:active, .form-wrapper button:focus{ background: var(--dark-red); outline: 0; } .form-wrapper button:before { /* left arrow */ content: ''; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent var(--red) transparent; top: 3px; left: -6px; } .form-wrapper button:hover:before{ border-right-color: var(--light-red); } .form-wrapper button:focus:before, .form-wrapper button:active:before{ border-right-color: var(--dark-red); } .form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */ border: 0; padding: 0; } /*----------------------- End Search Field -----------------------*/ div.table_surround{ margin: 0 20px 0 20px; } table.main{ width : 100%; } td.main_00{ height:25px; padding-right : 4px; font-size : 14px; } td.main_01{ height:25px; width : 145px; padding : 2px 10px 0; vertical-align : top; font-size : 14px; } td.main_02{ height:25px; vertical-align : top; font-size : 14px; } div.fb-wwphelps{ margin-left:17px; margin-top:5px; } td.statistics { vertical-align : top; text-align : left; width : 300px; } td.stats_lft{ font-size : 11px; vertical-align : top; padding-right : 5px; text-align : right; } td.stats_rgt{ font-size : 11px; vertical-align : top; width : 1%; white-space:nowrap; } div.statistics{ width : 140px; background : var(--light-yellow); padding : 4px; -webkit-border-radius : 20px 20px 5px 5px; -khtml-border-radius : 20px 20px 5px 5px; behavior: url(PIE.htc); border-radius : 20px 20px 5px 5px; opacity : 0.85; } td.stat_lft{ vertical-align : top; font-size : 11px; text-align : right; padding-right : 5px; } td.stat_rgt{ vertical-align : top; font-size : 11px; } div.footer{ margin-top:10px; text-align : center; font-size : 11px; color : white; font-weight : normal; } span.footer{ font-weight : normal; color : var(--light-blue); } a.footer_01, a.footer_02{ color : var(--white); text-decoration : none; } a.footer_01:hover, a.footer_02:hover{ color : var(--light-blue); } a.footer_02{ color : var(--light-blue); } a.footer_02:hover{ color : white; } div.announcement{ background : var(--light-green); border : 1px solid var(--dark-green); -webkit-border-radius : 20px 0 20px 0; -khtml-border-radius : 20px 0 20px 0; behavior: url(PIE.htc); border-radius : 20px 0 20px 0; margin : 0 0 25px; padding : 7px; } p.announcement_01{ text-align : center; font-size : 22px; font-weight : bold; font-family : Georgia, serif; margin : 0 0 10px; padding : 0; } p.announcement_02{ text-align : center; font-style : italic; margin : 0 5px 5px; padding : 0; font-size : 13px; } p.viewing_00{ } span.viewing_00{ font-weight : bold; background : green; color : white; padding : 0 5px; } select.viewing { border : 1px solid var(--light-black); -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(PIE.htc); border-radius : 5px; font-size : 11px; } span.viewing{ font-size : 11px; } h1{ font-family : Georgia, serif; font-size : 24px; border-bottom : 1px solid var(--light-black); display:block; line-height:0.85; text-shadow: 2px 1px var(--gray-e), 2px -1px var(--gray-e), -1px 1px var(--gray-e), -2px -1px var(--gray-e); width:97%; } h1.noborder{ border:0; padding-bottom:0; margin-bottom:0; } h2{ font-family : Georgia, serif; font-size : 18px; margin : 25px 0 0; color : var(--dark-brown); width:97% display:inline-block; line-height:0.85; text-shadow: 2px 1px var(--gray-e), 2px -1px var(--gray-e), -1px 1px var(--gray-e), -2px -1px var(--gray-e); } h2.underlined{ border-bottom:1px solid var(--dark-brown); margin-bottom : 5px; } hr.line{ border:1px solid #252525; width:97%; text-align:left; } li.faq{ font-size : 14px; font-family : Trebuchet, arial, helvetica, sans-serif; margin-bottom : 3px; } p.paragraph_00{ font-size : 14px; font-family : Trebuchet, arial, helvetica, sans-serif; margin : 5px 0 0 10px; } p.li{ text-indent:15px; margin:0; } p.paragraph_01{ font-size : 14px; font-family : Trebuchet, arial, helvetica, sans-serif; margin : 0 0 0 10px; text-indent : 15px; } span.line_00{ font-size : 14px; font-family : Trebuchet, arial, helvetica, sans-serif; } span.inline_header_00{ font-weight : bold; font-style : italic; padding-right : 15px; } p.double_indent_00, p.double_indent_0X{ font-size : 14px; font-family : Trebuchet, arial, helvetica, sans-serif; margin : 25px 105px 25px 75px; font-style : italic; } p.double_indent_0X{ margin : 25px 105px 0 75px; } p.double_indent_X0{ margin : 0 105px 25px 75px; text-indent : 15px; } td.sort_lft{ vertical-align : top; white-space : nowrap; padding-right : 7px; } td.sort_rgt{ vertical-align : top; } div.notice{ border : 3px ridge blue; background : var(--light-purple); padding : 3px; font-size : 9px; -webkit-border-radius : 4px; -khtml-border-radius : 4px; behavior: url(PIE.htc); border-radius : 4px; margin-bottom : 7px; } td.warning_headline, div.warning_header{ font-size : 13px; font-weight : bold; } div.warning_body{ margin-bottom : 12px; } td.warning_close{ cursor : pointer; text-align : center; font-size : 13px; -webkit-border-radius : 10px; -khtml-border-radius : 10px; behavior: url(PIE.htc); border-radius : 10px; } td.warning_close:hover{ background : red; color:white; } div.warning{ border : 4px ridge yellow; padding : 7px; font-weight : normal; font-size : 11px; background : var(--light-yellow); -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(PIE.htc); border-radius : 5px; } div.error{ border : 4px ridge red; padding : 10px; font-weight : bold; background : var(--light-red); margin-top : 25px; -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(PIE.htc); border-radius : 5px; } div.ok{ border : 4px ridge green; padding : 10px; font-weight : bold; background : var(--light-green); margin-top : 25px; } table.header{width:100%;} td.account{ text-align : right; vertical-align : bottom; padding-bottom : 18px; } div.login{ font-weight : bold; font-size : 11px; } input.login{ padding : 0 3px; background : var(--dark-purple); margin-right : 0; } input.red { background : var(--light-red); color:black; } button.login { font-size : 11px; } div.profile_center{ color : white; font-weight : bold; text-align : center; } span.user_options{ font-size : 11px; font-variant : small-caps; } img.profile{ width : 125px; border : 2px solid var(--light-black); -webkit-border-radius : 70px; -khtml-border-radius : 70px; behavior: url(PIE.htc); border-radius : 70px; box-shadow: 5px 5px 5px rgba(0,0,0,0.5); background-color:white; } a.profile{ text-decoration : underline; } div.penname_list{ margin-top : 7px; border : 2px solid var(--brown); background : var(--light-brown); -webkit-border-radius : 10px; -khtml-border-radius : 10px; behavior: url(PIE.htc); border-radius : 10px; padding-bottom : 10px; } div.penname_list_header{ background : var(--brown); padding : 2px 10px; text-align : center; font-weight : bold; -webkit-border-radius : 6px 6px 0 0; -khtml-border-radius : 6px 6px 0 0; behavior: url(PIE.htc); border-radius : 6px 6px 0 0; margin-bottom : 10px; } div.no_pennames{ color : white; font-style : italic; text-align : center; } span.captured{ background : green; padding : 2px 7px; color : white; font-weight ; bold; font-size : 11px; margin-left : 7px; } td.book_header_lft, td.book_header_mid, td.book_header_rgt{ vertical-align : middle; text-align : center; background : var(--gray-f); color : white; font-weight : bold; font-size : 13px; padding : 7px 14px; } td.book_lft, td.book_mid, td.book_rgt{ font-size : 13px; vertical-align : top; text-align : center; border-bottom : 1px solid var(--gray-f); padding : 7px 14px; } td.book_lft{ text-align : left; border-left : 1px solid var(--gray-f); border-right : 1px solid var(--gray-f); } td.book_rgt{ border-right : 1px solid var(--gray-f); font-weight : bold; } span.format_emphasis{ font-weight : bold; color : var(--dark-brown); } div.block_white{ background : var(--gray-c); padding : 10px; margin-bottom : 5px; min-height:115px; } div.book_entry{ padding:2px; background : var(--gray-c); } img.book_entry{ width : 75px; } td.book_entry_lft{ vertical-align : top; } td.book_entry_rgt{ vertical-align : top; padding-left : 15px; } table.book_entry{ margin-bottom : 15px; } a.be_title{ color : var(--dark-brown); font-weight : bold; font-variant : small-caps; font-size : 16px; text-decoration : none; } a.be_title:hover, a.be_author:hover{ text-decoration : underline; } a.be_author{ color : var(--dark-brown); text-decoration : none; } span.be_small{ font-size : 12px; } td.register_login_left{ font-size : 9px; text-align : right; padding-right : 7px; font-weight : bold; } td.register_login_left a{ text-decoration : none; } td.register_login_right{ width : 1%; } a.common_link{ text-decoration : none; font-weight : bold; font-size : inherit; } .phelps_radio { position: relative; padding: 0 6px; margin: 10px 0 0; } .phelps_radio input[type='radio'] {display: none;} .phelps_radio label:before { content: " "; display: inline-block; position: relative; top: 1px; margin: 0 5px 0 0; width: 10px; height: 10px; border-radius: 5px; border: 1px solid var(--tan); background-color: transparent; } .phelps_radio input[type=radio]:checked + label:after { border-radius: 11px; width: 8px; height: 8px; position: absolute; top: 6px; left: 8px; content: " "; display: block; background: var(--dark-brown); } img.business_logo{ width : 175px; margin : 12px 0; } img.book_cover{ width : 175px; margin : 12px 0; } a.profile_penname_list{ font-size : 13px; font-weight : bold; text-decoration : none; color : var(--dark-brown); } a.profile_penname_list:hover{color:blue;} button.profile{ -webkit-border-radius : 10px; -khtml-border-radius : 10px; border-radius : 10px; behavior: url(PIE.htc); font-size : 9px; display : none; background : var(--tan); } .profile_file_actual{ font-family : Trebuchet MS, arial, helvetica, sans-serif; font-size : 11px; height : 17px; font-weight : bold; } .profile_file{ font-family : Trebuchet MS, arial, helvetica, sans-serif; font-size : 10px; font-weight : bold; width : 250px; border : 0; margin : 0; margin-top : 10px; padding : 1px; padding-left : 7px; border-left : 1px solid var(--tan); border-bottom : 1px solid var(--tan); -webkit-border-radius : 10px 10px 0 10px; -khtml-border-radius : 10px 10px 0 10px; behavior: url(border-radius.htc); border-radius : 10px 10px 0 10px; z-index: 1; position: relative; } .profile_file label{ z-index: 10; width: 64px; height: 15px; position: absolute; top: 1px; left: 1px; display: block; -webkit-border-radius : 8px 0 0 8px; -khtml-border-radius : 8px 0 0 8px; behavior: url(border-radius.htc); border-radius : 8px 0 0 8px; background: var(--light-yellow); background: -webkit-linear-gradient(top, var(--tan) 0%, var(--light-yellow) 40%, var(--light-brown) 100%); background: linear-gradient(to bottom, var(--tan) 0%, var(--light-yellow) 40%, var(--light-brown) 100%); padding-left:7px; padding-top : 2px; color : var(--gray-g); } /* Fallback styles */ .book { display: inline-block; box-shadow: 5px 5px 20px var(--gray-g); margin: 10px; } .book img { vertical-align: middle; } /* * In order for this to work, you must use Modernizer * to detect 3D transform browser support. This will add * a "csstransforms3d" class to the HTML element. * * Visit http://modernizr.com/ for installation instructions */ .csstransforms3d .books { -moz-perspective: 100px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .csstransforms3d .book { position: relative; -moz-perspective: 100px; -moz-transform: rotateY(-3deg); -webkit-transform: perspective(100) rotateY(-3deg); outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */ box-shadow: none; margin: 0; } .csstransforms3d .book img { position: relative; max-width: 100%; } .csstransforms3d .book:before, .csstransforms3d .book:after { position: absolute; top: 2%; height: 96%; content: ' '; z-index: -1; } .csstransforms3d .book:before { width: 100%; left: 7.5%; background-color: var(--dark-brown); box-shadow: 5px 5px 20px var(--gray-g); } .csstransforms3d .book:after { width: 5%; left: 100%; background-color: var(--gray-c); box-shadow: inset 0px 0px 5px var(--gray-h); -moz-transform: rotateY(20deg); -webkit-transform: perspective(100) rotateY(20deg); } .roundedTwo { width: 14px; height: 14px; position: relative; margin: 3px auto; background: var(--light-yellow); background: -webkit-linear-gradient(top, var(--light-yellow) 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, var(--light-yellow) 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 7px; box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5); } .roundedTwo label { width: 10px; height: 10px; position: absolute; top: 2px; left: 2px; cursor: pointer; background: -webkit-linear-gradient(top, var(--gray-a) 0%, var(--gray-e) 100%); background: linear-gradient(to bottom, var(--gray-a) 0%, var(--gray-e) 100%); border-radius: 5px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; } .roundedTwo label:after { content: ''; width: 10px; height: 4px; position: absolute; top: -1px; left: 0px; border: 3px solid green; border-top: none; border-right: none; background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .roundedTwo label:hover::after { opacity: 0.3; } .roundedTwo input[type=checkbox] { visibility: hidden; } .roundedTwo input[type=checkbox]:checked + label:after { opacity: 1; } span.subscribe{ font-size : 14px; } .green_check{ color:green; font-weight:bold; position: absolute; top: 1px; right: 1px; display: block; } .slideThree { width: 50px; height: 16px; background: transparent; margin: 3px auto; position: relative; border-radius: 8px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); } .slideThree:after { content: 'OFF'; color: var(--white); position: absolute; right: 5px; z-index: 0; font: 9px/16px Arial, sans-serif; font-weight: bold; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15); } .slideThree:before { content: 'ON'; color: var(--white); position: absolute; left: 5px; z-index: 1; font: 9px/16px Arial, sans-serif; font-weight: bold; } .slideThree label { display: block; width: 24px; height: 14px; cursor: pointer; position: absolute; top: 1px; left: 1px; z-index: 2; background: var(--light-yellow); background: -webkit-linear-gradient(top, var(--light-yellow) 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, var(--light-yellow) 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 50px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); } .slideThree span{ display: block; position: absolute; width: 50px; height: 16px; background: red; z-index: 0; top: 0px; left: 0px; border-radius: 8px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); } .slideThree input[type=checkbox] { visibility: hidden; } .slideThree input[type=checkbox]:checked + label { left: 25px; } .slideThree input[type=checkbox]:checked ~ span { background: green; } hr.coolRule { border:0; height:1px; background-image: -webkit-linear-gradient(left, var(--gray-c)), var(--gray-d), var(--gray-c))); background-image: -moz-linear-gradient(left, var(--gray-c)), var(--gray-d), var(--gray-c))); background-image: -ms-linear-gradient(left, var(--gray-c)), var(--gray-d), var(--gray-c))); background-image: -o-linear-gradient(left, var(--gray-c)), var(--gray-d), var(--gray-c))); z-index:-1; } hr.scroll { border:0; border-top: 1px solid var(--gray-d); text-align: center; } hr.scroll:after { font-family:times new roman; content: 'ยง'; display: inline-block; position: relative; top: -14px; padding: 0 2px;; background: var(--light-green); color: var(--gray-d); font-size: 22px; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg); } div.catalog_columns{ text-align : center; border-top:1px solid var(--light-black); border-bottom:1px solid var(--light-black); margin-bottom : 20px; padding-bottom : 2px; } button.profile_tab_item{ background : var(--gray-e); -webkit-border-radius : 5px 5px 0 0; -khtml-border-radius : 5px 5px 0 0; behavior: url(border-radius.htc); border-radius : 5px 5px 0 0; border : 1px solid var(--gray-h); border-bottom-width : 0; margin : 0; margin-right : 1px; font-size : 11px; font-weight : bold; } button.profile_tab_item:hover{ background : var(--gray-h); } button.profile_tab_active{ background : white; } button.catalog_sort{ background : transparent; border:0; margin : 0; font-size : 11px; font-weight : bold; -webkit-border-radius : 3px; -khtml-border-radius : 3px; behavior: url(border-radius.htc); border-radius : 3px; } button.catalog_sort:hover{ background : white; } button.catalog_sort_active{ background : var(--dark-brown); color : white; } button.catalog_sort_active:hover{ background : var(--dark-brown); color : white; } div.search_failed{ margin-top : 7px; font-weight : bold; font-size : 11px; text-align : center; font-style: italic; color : red; } td.failed{ font-weight : bold; font-size : 11px; text-align : center; font-style: italic; color : red; } img.catalog_author{ height : 75px; float : left; -webkit-border-radius : 32px; -khtml-border-radius : 32px; behavior: url(border-radius.htc); border-radius : 32px; border:1px solid var(--light-black); box-shadow: 5px 5px 5px rgba(0,0,0,0.75); margin-right : 12px; } div.catalog_author{ height : 85px; } div.profile_container{ font-size : 0; margin-bottom : 15px; } span.catalog_secondary{ font-size : 11px; color:brown; } img.catalog_book{ width : 88px; } button.wwp{ background : var(--tan); font-weight : bold; font-size : 14px; -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(border-radius.htc); border-radius : 5px; } button.wwp:hover{ background : var(--brown); color : var(--tan); } button.profile:hover{ background : var(--brown); color : var(--tan); } .social_Pw{background:#ffffff;color:#000;}.social_Bl{background:#aaaaaa;color:#000;}.social_Ld{background:#b2c9e9;color:#000;}.social_Fb{background:#3b5998;color:#fff;}.social_Tw{background:#00aced;color:#000;}.social_Li{background:#007bb6;color:#fff;}.social_In{background:#bc2a8d;color:#fff;}.social_Pi{background:#cb2027;color:#fff;}.social_G+{background:#dd4b39;color:#fff;}.social_Tb{background:#32506d;color:#fff;}.social_Yt{background:#bb0000;color:#fff;}.social_Lt{background:#523937;color:#fff;}.social_Sd{background:#1e7b85;color:#fff;}.social_Gr{background:#e2dfce;color:#000;}.social_Wp{background:#f89b33;color:#000;}.social_Cp{background:#33a3b4;color:#000;}button.social{ -webkit-border-radius : 10px 10px 0 10px; -khtml-border-radius : 10px 10px 0 10px; behavior: url(border-radius.htc); border-radius : 10px 10px 0 10px; border:1px solid var(--gray-d); margin-bottom:5px; width : 35px; } button.social:hover{background:var(--light-blue);color:black;} div.actb{ text-align:center; font-weight:bold; font-variant:small-caps; color:white; font-size:16px; } div.actv{ text-align:center; font-weight:bold; color:white; font-size:28px; } div.actc{ border:1px solid white; -webkit-border-radius : 10px 10px 0 10px; -khtml-border-radius : 10px 10px 0 10px; behavior: url(border-radius.htc); border-radius : 10px 10px 0 10px; margin-bottom:12px; } label.cartcount{ border:1px solid var(--light-black); color:var(--light-black); padding:1px; font-size:9px; -webkit-border-radius : 5px; -khtml-border-radius : 5px; behavior: url(border-radius.htc); border-radius : 5px; } button.nostyle{border:0 solid black;background:transparent;font-family:inherit;font-size:16px;} div.iw{border:4 ridge gold;margin:25px;padding:10px;font-size:14px;} div.iwt{font-size:16px;font-weight:bold;text-align:center;margin-bottom:15px;border-bottom:1px solid var(--light-black);} .overlay{visibility:hidden;background:rgba(0,0,0,0.7);position:fixed;top:0;bottom:0;left:0;right:0;transition:opacity 500ms;opacity:0;} .overlay:target{visibility:visible;opacity:1;} .popup_shell{position:relative;width:35%;min-width:400px;margin:70px auto;-webkit-border-radius:5px;-khtml-border-radius:5px;behavior:url(border-radius.htc);border-radius:5px;border:1px solid #252525;background:#eadcce;box-shadow:10px 10px 5px #000;transition:all 5s ease-in-out;} .popup_shell h2{font-variant:small-caps;font-size:12px;font-weight:bold;border-bottom:1px solid #252525;margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif;padding:7px 0 2px 7px;margin-bottom:7px;background:#ccc} .popup_shell .close{position:absolute;top:-2px;right:10px;transition:all 200ms;font-size:20px;font-weight:normal;text-decoration:none;color:#333;} .popup_shell .close:hover{color:red;font-weight:bold;} .popup_shell .popup{font-family:"Century Gothic","Trebuchet MS",Helvetica,sans-serif;font-size:14px;padding:5px;} .input_common_brown_border{ font-family : Trebuchet MS, arial, helvetica, sans-serif; font-size : 11px; font-weight : bold; border : 0; margin : 0; margin-top : 10px; padding : 1px; padding-left : 7px; border-left : 1px solid var(--dark-brown); border-bottom : 1px solid var(--dark-brown); background:var(--tan); -webkit-border-radius : 10px 10px 0 10px; -khtml-border-radius : 10px 10px 0 10px; behavior: url(border-radius.htc); border-radius : 10px 10px 0 10px; } div.sag_title { background:var(--brown); color:white; text-align : center; font-weight : bold; font-size : 18px; border:3px ridge var(--dark-brown); -webkit-border-radius : 16px 16px 0 0; -khtml-border-radius : 16px 16px 0 0; behavior: url(PIE.htc); border-radius : 16px 16px 0 0; } input.input_common_brown_border{width:250px;} div.sag_item{margin:15px 20px;} div.sag_body{font-style:italic;font-size:11px;margin:0 3px;margin-bottom:7px;} /* TEST Popup container */ .testpopup { position: relative; display: inline-block; cursor: pointer; } /* The actual popup (appears on top) */ .testpopup .testpopuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Popup arrow */ .testpopup .testpopuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class when clicking on the popup container (hide and show the popup) */ .testpopup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} } input.new_checkbox{ visibility:hidden; margin-left:-15px;} input[type="checkbox"].new_checkbox + label:before { background: #fff; border: 1px solid #333; content: "\00a0"; display: inline-block; font: 16px/1em sans-serif; height: 16px; margin: 0 .25em 0 0; padding: 0; vertical-align: top; width: 16px; } input[type="checkbox"].new_checkbox:checked + label:before { background: #fff; color: var(--dark-green); font-size:16px; font-weight:bold; content: "\2713"; text-align: center; } input[type="checkbox"].new_checkbox:checked + label:after { font-weight: bold; } input[type="checkbox"].new_checkbox:focus + label::before { outline: rgb(59, 153, 252) auto 5px; } label { cursor: pointer; } input[type="checkbox"].new_checkbox_red + label:before { background : var(--light-red); } .alert-error{ display:flex; flex:auto; border-radius: 3px; background: #fdd; height:20px; width:300px; margin-bottom:15px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); } .alert-error-marker{ width:20px; height:20px; border-radius: 3px; background: #e88; color:white; font-weight:bold; font-size:16px; text-align:center; } .alert-error-text{ font-family:Trebuchet MS, arial, helvetica, sans-serif; color:#a55; padding:3px 4px 0px 15px; height:20px; }