* { -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
@import url(https://fonts.googleapis.com/css?family=Gothic+A1:500,700);
/* Rolling Tales presets
font-family: 'Gothic A1', sans-serif;
font-weight: 500;  (or 700 for bold)
font-size: 0.9rem;
RT gold  #fdc835
RT red   #ff1616
RT cyan  #5ce1e6
*/

/* CSS for Catalog elements */
div.main {width:100%; margin:1px; position:relative;}
div.main p {font-family:'Gothic A1', sans-serif; font-weight:500; font-size:0.9em;}
div.main p a {background-color: #fdc835; color:black; text-decoration: none;}
.notation {margin-top:0px; color:#555; font-style:italic; font-size:0.75em; font-family: 'Gothic A1', sans-serif;}
.alphaBttn {background-color:#ff1616; border:none; display:inline-block; font-size:0.9rem; font-weight:700; color:black;
 text-align:center; text-decoration:none; cursor:pointer; border-radius:5px; margin:6px 9px; padding:5px 8px; min-width:33px;
 font-family:'Gothic A1', sans-serif;}
.PgNavBttn {background-color:#ff1616; border:none; display:inline-block; font-size:0.9rem; font-weight:700; color:black;
 text-align:center; text-decoration:none; cursor:pointer; border-radius:4px; margin:1px; padding:8px 1px; height:40px;
 font-family:'Gothic A1', sans-serif;}
.PgSubmitBttn {background-color:#ff1616; border:none; display:inline-block; font-size:0.9rem; font-weight:700; color:black;
 text-align:center; text-decoration:none; cursor:pointer; border-radius:4px; margin:1px; padding:2px; width:75px; height:50px;
 word-wrap:break-word; white-space:normal; font-family:'Gothic A1', sans-serif;}
.alphaBttn:hover, .PgNavBttn:hover {background-color:#AA1616; color:#fff;}
input[type=text] {height:30px; border:1px solid #666; margin:4px 0px;}

/* CSS for catalog search results table elements */
table {border:none; border-spacing:0; border-collapse:collapse; color:#333; font-family: 'Gothic A1', sans-serif;}
table.altrows {border: 1px solid #DDD; width:94%}
table.altrows tr:nth-child(odd) {color: #000; background: #DDD;}
td,th {padding:4px; border:1px solid #CCC; overflow:hidden; text-align:left; vertical-align:middle;}
th {background-color:#CCC; text-align:center;}
/* specific table cell classes */
table.altrows th {position: -webkit-sticky; position: sticky; top: 0; z-index: 2;}
td.col_sm {font-size:0.7rem; border-width:1px;}
td.col_c {text-align:center; border-width:1px;} 
td.col_r {text-align:right; border-width:1px;}
td.notesL {padding-top:5px; width:15px; border-right:none;}
td.notesR {padding-top:5px; width:15px; border-left:none;}
.cartResult {border:3px solid #888; padding:20px 2px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; width:90%}
.cartResult td {border:none;}
img.imgNote {margin:1px; height:15px; display:inline;}

/* CSS for modal popup windows  */
.close {background:#606061; color:#FFFFFF; line-height:25px; width:24px; text-align:center; 
 position:absolute; right: -5px; top: -5px; text-decoration:none; font-weight: 700;
-webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
-moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow: 1px 1px 3px #000;}
.close:hover { background: #d90000; }

.modalDialog { font-family: 'Gothic A1', sans-serif;
 position: fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.7); z-index:99999; opacity:0; pointer-events:none;
-webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; }
.modalDialog:target {opacity:1; pointer-events: auto;}
.modalDialog > div {min-width:75px; max-width:67%; min-height:100px; position:relative; margin:15% auto; padding:2px; border-radius:3px; background:#eee;}
.popText {margin:8px;}

.modalImage {position: fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.7); z-index:99999; opacity:0; pointer-events:none;
-webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; text-align:center;}
.modalImage:target {opacity:1; pointer-events: auto;}
.modalImage > div {position:relative; padding:3px; max-width:90%; margin:2% auto;}
.popImage {height:auto; max-height:calc(100vh - 70px); min-height:300px; max-width:90%;}

/* miscellaneous CSS */
div.confirmBox {border:2px solid #333; background-color:#fdc835; padding:10px; margin-top:16px;
 border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
/* end CSS */