body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
    height: 100%;
    overflow: hidden;
}


.menu {
    position:fixed;
    z-index:3;
    left:0px;
    top:0px;
    width:100%;
    margin-top:0;
    background-color: #000000;
}
.menu img {
    float:left;
    padding-right:16px;
}
.menu button {
    float: left;
    outline: none;
    cursor: pointer;
    font-size:150%;
    background-color:#000000; 
    color: #9D8678;
    padding: 16px;
    border: none;
    transition: 0.8s;
}
.menu button:hover {
    color: #FFF4E6;
    transition: 0.8s;
}
.menu button.active {
    color: #FFF4E6;
    text-shadow: -0.25px -0.25px 0 #6E614F, 0.25px -0.25px 0 #6E614F, -0.25px 0.25px 0 #6E614F, 0.25px 0.25px 0 #6E614F;
}

.sub_menu {
    display:block;
    width:100%;
    float:right;
    background-color: #000000;
    border-bottom: 3px solid #9D8678; 
}

.sub_menu button {
    float: left;
    outline: none;
    cursor: pointer;
    font-size:110%;
    background-color: #000000; 
    color: #9D8678;
    padding: 16px;
    border: none;
    text-decoration: none;
    transition: 0.8s;
}
.sub_menu button:hover {
    text-decoration: underline;
/*    background-color: #CCBBA1;*/
    transition: 0.8s;
}
.sub_menu button.active {
    text-decoration: underline;
    color: #FFF4E6;
    text-shadow: -0.25px -0.25px 0 #6E614F, 0.25px -0.25px 0 #6E614F, -0.25px 0.25px 0 #6E614F, 0.25px 0.25px 0 #6E614F;
}
.sub_menu .logout_ctrl {
        float:right;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    margin-top:56px;
}
.tabcontent span {
    clear:left;
    float:left;
}
.tabcontent ul {
    clear:left;
    float:left;
}
.tabcontent form {
    clear:left;
    float:left;
}
.tabcontent hr {
    width:96%;
    padding-top:6px;
    border:none;
    border-bottom: 1px solid #CCBBA1; 
    border-color:#6E614F;
    line-height: 0.2em;
    clear:left;
}
.tabcontent h5 {
    float:left;
    clear:left;
    font-size:116%;
    font-weight:bold;
    text-align: left; 
    margin:16px;
    margin-left:24px;
    margin-bottom:0px;
    padding-top:0px;
/*    padding-bottom:16px;*/
}
.td_block {
    display:block;
    float:left;
    clear:left;
/*    margin:24px;*/
/*    background-color: aquamarine;*/
}
.td_block span {
    display:inline-block;
    float:left;
    clear:none;
/*    line-height:24px;*/
    min-width:56px;  
    font-size:110%;
}
.td_header {
    padding-top:24px;
    font-size:110%;
    font-weight:600;
}
.td_large {
    width:196px;
    min-width:196px;  
    padding-right:16px;
/*     background-color:red;*/
}
.td_rename{
     min-width:72px;  
}
.td_block:not(.td_enactive) .td_rename:hover {
    color:blue;
    cursor:pointer;
}
.td_block:not(.td_enactive) .td_remove:hover {
    color:blue;
    cursor:pointer;
}
.td_bottom {
    float:left;
    clear:left;
    margin-bottom:152px;   
}
.td_enactive {
    color:#CCBBA1;
}

a {
    font-weight:normal;
    cursor:pointer;
    color:blue;
}
a:hover {
    color:blue;
    font-weight: bold;
}
.product_preview {
    margin-right:36px;
}
.left {
    float: left;
    clear:left;
    margin: 0 36px 20px 0;
    width:500px;
}
.right {
    float: right;
    padding: 0 20px 20px 0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/*
table {
    border-collapse:collapse;
    
    border-spacing:5;
    margin:24px;
}
*/
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
caption,th {
    text-align:left;
}

.img_preview {
    display:inline-block;
    overflow:hidden;
    word-wrap: none;
    padding-left:24px;
    padding-right:24px;
    padding-bottom:0px;
    height:240;
}
.img_preview img:hover {
     height:260px;
}

#preview_prev {
    height:200px;
}
#preview_current {
    height:260px;
}
#preview_next{
    height:200px;
}

.home_description {
    display:none;
}

#crochet_description {
    margin-left:0px;
    font-size:100%;
}
#grapher_description {
    margin-left:0px;
    font-size:100%;
}

.overview_disp {
    float:left;
    clear:left;
    margin-top:12px;
    margin-bottom:32px;
}
.overview_disp h5 {
    float:left;
    clear:left;
/*    text-shadow: -0.5px -0.5px 0 #6E614F, 0.5px -0.5px 0 #6E614F, -0.5px 0.5px 0 #6E614F, 0.5px 0.5px 0 #6E614F; */
/*    width: calc(100% - 40px); */
    font-size:116%;
    font-weight:bold;
    text-align: left; 
/*
    border-bottom: 1px solid #CCBBA1; 
    border-color:#6E614F;
*/
/*    line-height: 0.2em;*/
    margin:16px;
    margin-left:24px;
    padding-top:0px;
    padding-bottom:16px;
}
.overview_disp div {
    
    height:360px;
}
.overview_disp img { 
    margin-top:12px;
    max-width:45%;
    max-height:inherit;
}
.overview_disp span { 
    display:inline-block;
    height:inherit;
    max-width:45%;
}

#msg_cover {
    transition: opacity 0.1s;
}
.msg_popup {
    display:inline-block;
    position:fixed;
    z-index:4;
    top:35%;
    left:35%;
    width:352px;
    height:124px;
    background-color:#FFEBCD;
    color:#6E614F;
    padding:24px;
    border-radius:3px;
    overflow:hidden;
    
    outline: 2px solid #6E614F; 
    box-shadow: 0 0 0 3px red;
}
.msg_popup button {
    position:absolute;
    bottom:8px;
    right:8px;
    width:96px;
    height:36px;
    outline:none;
    cursor:pointer;
    font-size:120%;
    line-height:16px;
    background-color:#FFEBCD; 
    color:#6E614F;
    border:2px solid #FFEBCD;
	border-radius:2px; 
    transition: background-color 0.8s, border 1.2s;
}
.msg_popup button:hover {
    background-color:#CCBBA1;
    border:2px solid #9D8678;
    transition: background-color 0.8s, border 0.6s;
}
/*
dark :      #6E614F
blend:      #9D8678
medium:     #CCBBA1
tan:        #FFEBCD
light:      #FFF4E6
*/
            
body {
    color: #6E614F;
    background: #FFEBCD url('images/base/bg_cell.png');  
}
.main {
    position:fixed;
    overscroll-behavior: none;
    line-height:180%;
    width:100%;
    top: 54px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

p {
    font-size: 120%;
    margin:24px;
    margin-top:12px;
    margin-bottom:12px;
    float:left;
    clear:left;
}
span {
    display:inline-block;
    font-size: 120%;
    margin:24px;
    margin-top:12px;
    margin-bottom:12px;
}
h3 {
    text-shadow: -0.5px -0.5px 0 #6E614F, 0.5px -0.5px 0 #6E614F, -0.5px 0.5px 0 #6E614F, 0.5px 0.5px 0 #6E614F; 
    width: calc(100% - 40px); 
    font-size:200%;
    text-align: left; 
    border-bottom: 1px solid #CCBBA1; 
    border-color:#6E614F;
    line-height: 0.2em;
    margin:16px;
    margin-left:24px;
    padding-top:16px;
    padding-bottom:16px;
} 
h4 {
    font-size:135%;
    font-weight:600;
    text-align: left; 
    text-shadow: -0.5px -0.5px 0 #6E614F, 0.5px -0.5px 0 #6E614F, -0.5px 0.5px 0 #6E614F, 0.5px 0.5px 0 #6E614F;  
    margin:16px;
    margin-left:24px;
    padding-top:16px;
    padding-bottom:16px;
    float:left;
    clear:left;
} 

details {
    clear:left;
    float:left;
    margin:36px;
    margin-top:0px;
    margin-bottom:24px;
    padding: .5em .5em 0;
    color:#6E614F;
    font-size:100%;
}
summary {
    cursor:pointer;
    font-size:110%;
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}


li {
    line-height:28px;
}

#dialogbox{
	display: none;
	position: absolute;
	background: #000;
    border:4px solid #6E614F;
	border-radius:7px; 
	width:372px;
	z-index: 10;
}

#dialogbox > #dialogboxhead{ background: #9D8678; font-size:19px; padding:10px; color:#FFEBCD; }
#dialogbox > #dialogboxbody{ background: #CCBBA1; border:1px solid #6E614F; min-height:68px; color:#FFEBCD; }
#dialogbox > #dialogboxfoot{ background: #9D8678; padding:10px; text-align:right; }

#dialogbox span {
    color: #6E614F;
    height:24px;
    font-size:16pt;
    min-width:256px;
    margin-left:12px;
    margin-top:24px;
}
#dialogbox input[type=text] {
    border:1px solid #6E614F;
    background-color: #fff4E6;
    color: #6E614F;
    border-radius:3px;
    height:24px;
    font-size:12pt;
    min-width:256px;
    margin-left:12px;
    margin-bottom:16px;
}
#dialogbox button {
    outline:none;
    cursor:pointer;
    font-size:120%;
    line-height:16px;
    background-color:#9D8678; 
    color:#FFEBCD;
    padding:6px;
    border:2px solid #9D8678;
	border-radius:2px; 
    transition: background-color 0.8s, border 1.2s;
}
#dialogbox button:hover {
    background-color:#6E614F;
    border:2px solid #CCBBA1;
    transition: background-color 0.8s, border 0.6s;
}
/*
tr {
    line-height:32px;
}
td {
    min-width: 128px;
}
.error{
    color:red;
}
.note {
    color:blueviolet;
    font-weight:bold;
}
input[type=text] {
    border:1px solid #6E614F;
    background-color: #fff4E6;
    color: #6E614F;
    border-radius:3px;
    height:24px;
    font-size:12pt;
    min-width:224px;
}
textarea {
    border:1px solid #6E614F;
    background-color: #fff4E6;
    color: #6E614F;
    border-radius:3px;
    height:24px;
    font-size:14pt;
}
input[type=submit] {
    color: #6E614F;
    min-width:128px;
    min-height:36px;
    background-color:rgba(204,187,161,0.3);
    border: 2px solid rgba(204,187,161,0.3);
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.6);
    border-radius:3px;
    font-size:medium;
    font-weight:600;
    margin-top:24px;
    cursor: pointer;
    transition: 0.8s;
}
form {
    float:left;
}
*/
.paypal_btn {
    margin-left:124px;
}
.btn_download {      
    color: blue;
    min-width:128px;
    min-height:36px;
    background-color:rgba(255,235,205,0.7);
    border: 2px solid rgba(204,187,161,0.3);
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.6);
    border-radius:3px;
    font-size:medium;
    font-weight:600;
    margin-right:12px;
    cursor: pointer;
    transition: 0.8s;
}
.btn_download:hover:not(.active):not(:disabled) {
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    border: 2px solid rgba(110,97,79,0.4);
    font-weight:bold;
    transition: 0.8s;
}
.btn_shift {
    margin:24px;
}
.product_item_wrapper {
    width:96%;
    margin: 0 auto;
}
.product_checkout {
    margin:8px;
    border: 2px solid rgba(0,0,0,0);
    float:left;
    cursor:pointer;
    line-height:24px;
}
.product_checkout img {
    float:left;
}
.product_checkout span {
    line-height:36px;
    float:left;
}
.product_checkout:hover {
    border: 2px solid rgba(204,187,161,0.3);
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.6);
}
.product_item {
    margin:8px;
    border: 2px solid rgba(0,0,0,0);
    float:left;
    width:48%;
    min-height:500px;
    cursor:pointer;
    line-height:24px;
}
.product_item:hover {
    border: 2px solid rgba(204,187,161,0.3);
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.6);
}
.product_item img {
    margin-left:24px;
}

.login_notice {
    cursor:pointer;
    font-weight:bold;
}
.login_notice:hover {
    color:blue;
}
/*
.contact_class {
    margin-top:36px;
}
.contact_class img {
    float:left;
    clear:left;
    margin-left:24px;
    height:164px;
}
.contact_class p {
    float:left;
    margin-top:0px;
}
*/

/*
.tutorials_wrapper h4{
    margin-top:32px;
    margin-bottom:0px;
    float:left;
    clear:left;
}
.tutorials iframe {
    margin-left:24px;
    clear:left;
    float:left;
}
.tutorials span {
    display:inline-block;
    float:left;
    width:48%;
}
*/


/*
.dropdown {
    position: relative;
    display: inline-block;
}
.dropbtn {
    font-size:150%;
    background-color: #000000; 
    color: #FFF4E6;
    padding: 16px;
    border: none;
   
    transition: 0.8s;
}
.dropbtn.active {
    background-color: #CCBBA1;
    color: #6E614F;
    text-shadow: -1.5px -1.5px 0 #FFF4E6, 1.5px -1.5px 0 #FFF4E6, -1.5px 1.5px 0 #FFF4E6, 1.5px 1.5px 0 #FFF4E6;
}
.dropbtn:hover {
    background-color: #CCBBA1;
    transition: 0.8s;
}
.dropdown-content {
    position: absolute;
    width:164px;
    max-height:0px;
    font-size:150%;
    font-weight: 500;
    background-color: #CCBBA1;
    overflow: hidden;
    z-index: 1;
    border: 0px solid transparent;
    border-radius:2px;
    transition: 0.4s;
}
.dropdown-content .dropsub {
    color: #6E614F;
    width:100%;
    padding:16px;
    font-size:medium;
    font-weight:600;
    background-color: #CCBBA1;
    display: inline-block;
    transition: background-color 0.8s;
}
.dropdown-content .dropsub:hover {
    background-color:#FFF4E6;
    transition: background-color 0.8s;
}
.dropdown:hover .dropdown-content {  
    max-height:200px; 
    padding:0px;
    border: 2px solid #6E614F;
    transition: max-height 0.8s ease 0.3s, border 0.1s ease 0.3s; 
}
.dropdown:hover .dropbtn { 
    background-color: #CCBBA1; 
}
*/
.inv_page {
    margin-left:  auto;
    margin-right:  auto;
    text-align: center; 
    margin-top: 177px; 
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
}
.inv_page h1 {
  font-size: 48px;
  font-weight: 300;
  margin: 0 0 20px 0;
}
.inv_page .lead {
    cursor: pointer;
    font-size: 21px;
    font-weight: 200;
    margin-bottom: 20px;
    color: #6E614F;
    text-shadow: -0.5px -0.5px 0 #FFEBCD, 0.5px -0.5px 0 #FFEBCD, -0.5px 0.5px 0 #FFEBCD, 0.5px 0.5px 0 #FFEBCD;
    transition: color 0.8s, text-shadow 0.8s;
}
.inv_page .lead:hover {
    color:#FFF4E6;
    text-shadow: -0.5px -0.5px 0 #6E614F, 0.5px -0.5px 0 #6E614F, -0.5px 0.5px 0 #6E614F, 0.5px 0.5px 0 #6E614F; 
    transition: color 0.8s, text-shadow 0.8s;
}
.inv_page .lead a { 
    text-decoration: none; 
    color:inherit; 
}
.display_block {
    margin:16px;
    float:left;
    clear:left;
    
}
.display_block img {
    float:left;
    clear:left;
}
.display_block div {
    background-color: red;
/*
    float:right;
    clear:right;
*/
}
.display_block div span {
/*    display:inline-block;*/
    padding:2px;
}



.modal {
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    top:56px;
    left: 0;
    right:0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    pointer-events: none;
    opacity: 0;
   
    display:block;
    margin-left:auto;
    margin-right:auto;
    
    transition: opacity 0.1s ease 0.9s;
}
.modal.show {
    opacity: 1;
    transition: opacity 0.6s;
    pointer-events: all;
}
.modal_close {
    position:absolute;
    top:4px;
    right:16px;
    color:crimson;
    text-shadow: -1.9px -1.9px 0 #6E614F, 1.9px -1.9px 0 #6E614F, -1.9px 1.9px 0 #6E614F, 1.9px 1.9px 0 #6E614F;
    font-size: 150%;
    font-weight: bold;
    transition: 0.6s;
    
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
}
.modal .modal_close:hover {
    transform: scale(1.1);
    color:darkorange;
    transition: 0.6s;
}

.noscroll {
    overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;
}

.login_page {
    position: fixed;      

    top:-86%;
    left:0;
    right:0;
    margin:auto;

    width:1052px;
    height: 86%;

    transition: top 0.9s;

    overflow-y:visible;
    overflow-x:hidden;
    
    background-color: #FFEBCD;  /* Fallback Color*/    
    background: linear-gradient(rgba(204,187,161,0.55), rgba(204,187,161,0.55) 90%),url("images/base/bg_cell.png") repeat 0 0;
    
    border: 2px solid #CCBBA1;
    border-radius:3px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
}
.login_page.show {
    top:72px;
    transition: top 0.9s ease-in-out;
}

.login_page img {
    position:absolute;
    z-index:0;
    width:100%;
    height:auto;
}
.login_page .error {
    font-weight:bold;
    color:#ff3232;
}

.signin_popup table {
    margin:14px;
/*    margin-left:28px;*/
}
.signin_popup tr {
    line-height:42px;
}
.signin_popup td {
    padding-left:16px;
    min-width: 128px;
}
.signin_popup .signin_overlay {
    position:absolute;
    top:24px;
    right:24px;
     
    min-width 356px;
    padding:24px;
    
    margin:10px;
    margin-bottom:64px;
    
    color:#FFF4E6;
    background-color: rgba(100, 100, 100, 0.5);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,244,230,0.4);
    border-radius:3px;
}
.signin_popup .signin_help {
    position:absolute;
    top:456px;
    left:24px;
    
    padding-left:24px;
    padding-right:24px;
    
    color:#FFF4E6;
}
.signin_popup .signin_help a {
    text-decoration: none;
    color:#FFF4E6;
}
.signin_popup .signin_help span {
    margin:0px;
    margin-top:12px;
}

.signin_popup h3 {
    position:relative;
    clear:left;
    width: 96%; 
    text-align: left; 
    border-bottom: 1px solid #CCBBA1; 
    border-color:#6E614F;
    line-height: 0.2em;
    padding-top: 12px;
    padding-bottom:16px;
/*    margin-left: 16px;*/
    margin-top: 16px;
} 
.signin_popup h3 span { 
    color:#FFF4E6;
    text-shadow: -1.5px -1.5px 0 #6E614F, 1.5px -1.5px 0 #6E614F, -1.5px 1.5px 0 #6E614F, 1.5px 1.5px 0 #6E614F;  
/*    padding-left:10px;*/
}
.signin_popup .chkText {
    display:inline-block;
/*    float:right;*/
    font-size:smaller;
    padding:8px;
    padding-top:4px;
    cursor:default;
    transition:0.4s;
}
.signin_popup .chkText:hover {
    transform: scale(1.1);
    transition:0.4s;
}

.signin_text {
    height: 24px;
    min-width: 128px;
/*    min-width:156px;*/
    width:186;
    font-size:small;
    color:#6E614F;
    background-color:#FFF4E6;
    border: 2px solid #6E614F;
    border-radius:3px;
    padding-left:8px;
}
.signin_text.crafty_pin {
    max-width:64px;
    color: mediumpurple;
}

.signin_btn:not(hover) {
    min-width: 128px;
    max-width:96px;
    height:36px;
    font-size:100%;
    font-weight:normal;
    margin-top:16px;
    margin-left:2px;
    color:#CCBBA1;
    background-color:#6E614F;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    border: 1px solid #CCBBA1;    
    border-radius:3px;
    transition: border 0.8s, color 0.8s, font-weight 0.8s;
}
.signin_btn:hover {
    color:#FFF4E6;
    background-color:#6E614F;
    font-weight:bold;
    border: 2px solid #CCBBA1;
    transition: border 0.8s, color 0.8s, font-weight 0.8s;
}
.tos {
    display:none;
    position:absolute;
    top:24px;
    left:24px;
    
    max-width:60%;
    max-height:600px;
    
    padding-left:24px;
    padding-right:24px;
    padding-bottom:24px;
    
    color:#FFF4E6;
    background-color: rgba(100, 100, 100, 0.5);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,244,230,0.4);
    border-radius:3px;
}
.tos h2 {
    margin-top:16px;
}
.tos > span {
    clear:left;
    float:left;
    font-size:smaller;
    line-height:20px;
}
.tos .terms {
    overflow-y:scroll;
    max-width:auto;
    max-height:180px;;
    background-color:white;
    color:black;
    padding:24px;
    margin-top:12px;
    margin-bottom:12px;
}
.tos .terms ul {
    list-style-type:square;
    margin-top:8px;
    padding:bottom:8px;
    line-height: 32px;
}
.tos .terms ul li{
    margin-top: 10px;
}

.tut_tabcontent h3 {
    margin-left:16px;
    font-size:150%;
}

.tut_tabcontent h4 {
    float:left;
    clear:left;
    font-weight:bold;
    text-align: left; 
    text-shadow: none; 
    margin:16px;
    margin-bottom:0px;
    padding-top:24px;

    font-size:115%;

}
.tut_tabcontent span {
    float:left;
    clear:left;
    margin:16px;
    margin-bottom:0px;
    margin-top:0px;
    padding:0px;
}

.tut_tab {
    float: left;
    border: 1px solid #9D8678;
    background-color: #FFEBCD;
    width: 20%;
    box-sizing: border-box;
}

.tut_tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 10px 10px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 18px;
}

.tut_tab button:hover {
    background-color: #CCBBA1;
}

.tut_tab button.active {
    color: #FFF4E6;
    background-color: #9D8678;
}

.tut_tabcontent {
    display:none;
    float: left;
    padding: 0px 24px 36px 24px;
    border: 1px solid #9D8678;
    width: 80%;
    border-left: none;
    min-height:100%;
    font-size: 110%;
    box-sizing: border-box;
}

.tut_tabcontent#Main_Interface {
     display:block;
}