#toolcontainer {
    width: 100%;
    margin: 20px auto;
    background: none repeat scroll 0% 0% #EEE;
}


#toolheader h1 {
    text-align: left;
    height: 40px;
    padding:5px;
    background-color: #F5F5F5;
    background-repeat: repeat-x;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    margin-bottom: 5px;
    width: 99.9%;
    overflow: hidden;
    text-transform: uppercase;
    color:rgba(0, 0, 0, 0.25);
    font-size: 24px;
    font-weight: 500;
    text-shadow: 1px 1px #E1E1E1, 2px 2px #E1E1E1, 3px 3px #E1E1E1, 4px 4px #E1E1E1, 5px 5px #E1E1E1, 6px 6px #E1E1E1, 7px 7px #E1E1E1;
 
       margin-bottom: 0.2em;
    font-family: "Rancho","Brush Script MT",cursive;

}
#panelwrapper
{
    width:100%!important;
    margin:40px!important;
}
#panelwrapper .panel
{
    float:left;
    width:13%;
    height:150px;
    border:1px solid #ccc;
    padding:15px;
    margin:10px;     background-color:#f5f5f5;
}
#panelwrapper a img
{
    float:left;
    width:95%;
    height:95%;
   
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
#panelwrapper a img:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
             border:1px solid #ccc;
     
}
 
  

#viewCssCode {
    background-color: #fff !important;
    background: linear-gradient(#FFF, #F3F3F3) repeat scroll 0% 0% transparent;
    background-color: transparent;
    background-image: linear-gradient(#FFF, #Fafafa);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}

#toolbottom {
    clear: both;
    text-align: left;
    background: #46add4;
    color: rgba(0, 0, 0, 0.25);
    height: auto;
    padding: 2px;
}

/*
table {
    border-collapse: collapse;
    word-spacing:-1px;
    font-size: 90% !important;
    position: relative;
    list-style-type: none;
    color: #4A4744;
    border: 1px solid #C3C8BD;
  
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.27), 0px 0px 1px rgba(0, 0, 0, 0.06) inset;
    width: 99.9% !important;
    display: table;
    empty-cells: show;
    border-width: 1px;
       background: linear-gradient(to bottom, #FFF 0%, rgba(255, 255, 255, 0) 100%) repeat scroll 0% 0% transparent;
  
  
}*/


 /*   table .nestedtable {
        border-collapse: collapse;
        word-spacing: -5px;
        font-size: 11px !important;
        position: relative;
        list-style-type: none;
        color: #4A4744;
        font-family: Arial,Helvetica,sans-serif;
        display: table;
        empty-cells: show;
        width: 99.5% !important;
        border: 1px inset #ccc;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.27), 0px 0px 0px rgba(0, 0, 0, 0.06) inset;
       
    }*/

    /*    table .nestedtable tr th {
            overflow: hidden;
            text-decoration: none;
            background: linear-gradient(45deg, #FFF 0%, #F1F1F1 50%, #E1E1E1 51%, #F6F6F6 100%) repeat scroll 0% 0% transparent;
            box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(188, 188, 188, 0.1);
            transition: box-shadow 0.3s ease-in-out 0s;
            height: 18px;
            text-transform: uppercase;
            color: #000;
            font-size: 10px;
            font-weight: 600;
            text-shadow: 1px 1px #ccc, 2px 2px #ccc, 3px 3px #ccc, 4px 4px #ccc, 5px 5px #ccc, 6px 6px #ccc, 7px 7px #ccc, 8px 8px #ccc, 9px 9px #ccc, 10px 10px #ccc;
            margin-bottom: 0.1em;
        }
*/
 
    table input[type=text] {
        font-size: 11px;
        border-radius: 2px;
        Width: 95%;
    }

    table tfoot td {
        text-align: left;
        background-color: #eeeaea;
    }

    table tfoot tr th {
        line-height: 29px !important;
        padding-top: 5px;
        border-top: 1px solid #f9f9f9;
        color: #000;
       font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        vertical-align: bottom;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        font-size:75% ;
      
    background: rgb(226,226,226); /* Old browsers */
 
background: linear-gradient(to bottom, #FFF 0%, rgba(255, 255, 255, 0) 100%) repeat scroll 0% 0% transparent;

    }

    table tfoot th input[type=checkbox] {
        vertical-align:middle;
        margin-left: 2px;
        margin-right:2px;
        background: rgb(255,237,243); /* Old browsers */
        min-height:20px;


    }

    table tbody td {
        text-align: left;
       padding: 1px;  
     
font-family: Consolas,"Courier New",Courier,monospace;
    }

 

.full_width_sidebar {
    background-color: #F0F0F0;
    border: 1px solid #D5D5D5;
    margin: 0px 0px 25px;
    width: 100%;
    line-height:normal;
}

    .full_width_sidebar .box_w, .full_width_sidebar .box_g {
        background: none repeat scroll 0px 0px #FAFAFA;
        border: 1px solid #FFF;
        color: #888;
        font-size: 12px;
        margin: 5px;
      
        padding: 5px;
    }

.tools_header h2 {
    color: #666;
    font-size: 26px;
    margin-top: 5px;
    padding: 5px 0px 0px 5px;
    width: 620px;
    letter-spacing: -0.03em;
    line-height: 90%;
}

.full_width_sidebar h5 {
    color: #999;
    font-weight: bold;
    margin: 0px 5px;
}

.full_width_sidebar h3 {
    overflow: hidden;
    text-decoration: none;
  
    background: linear-gradient(45deg, #FFF 0%, rgba(255, 255, 255, 0) 50%, #73d5f3 51%, rgba(255, 255, 255, 0) 100%) repeat;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(188, 188, 188, 0.1);
    transition: box-shadow 0.3s ease-in-out 0s;
    height: 34px;
    text-transform:capitalize;
    color:rgba(0, 0, 0, 0.2);
   
    font-size: 1.5em;
    font-weight:400;
      margin-right:5px;
    margin-left:5px;
 
}
.full_width_sidebar h3 input[type=checkbox]{
    margin-right:5px;
    margin-left:5px;
}
.full_width_sidebar h4 {
    overflow: hidden;
    text-decoration: none;
     background: linear-gradient(45deg, #FFF 0%, #F1F1F1 50%, #E1E1E1 51%, #F6F6F6 100%) repeat scroll 0% 0% transparent;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(188, 188, 188, 0.1);
    transition: box-shadow 0.3s ease-in-out 0s;
    height: 22px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.25);
    font-size: 16px;
    font-weight: 600;
     margin-bottom: 0.2em; 
}

h5 {
    font-size: 13px;
    font-family: "Oswald",sans-serif;
    text-shadow: 1px 1px 0px #FFF;
}

.tools_header h1, .tools_header h2 {
    color: #666;
    font-size: 26px;
    height: 34px;
    margin-top: 20px;
    padding: 10px 0px 0px 10px;
    width: 620px;
    letter-spacing: -0.03em;
    line-height: 110%;
}

a {
    color: #D8621A;
    text-decoration: none;
}

.tools_header p, .tools_header .box_g {
    background-color: #F5F5F5;
}

.tools_header form, .tools_header p, .tools_header .box_g, .tools_header .box_w {
    outline: 1px solid #DDD;
    background-color: #FAFAFA;
    border: 1px solid #FDFDFD;
    clear: both;
    margin: 0px 0px 5px;
    padding: 10px 20px;
}

#page_header {
    box-shadow: 0px 0px 1px #666 inset, 1px 1px 2px rgba(0, 0, 0, 0.65);
    position: relative;
    z-index: 9999;
    box-sizing: border-box;
    height: 100px;
    min-width: 1100px;
    background: none repeat scroll 0px 0px #F5F5F5;
}

p {
    margin: 0px 0px 10px;
    line-height: 22px;
}

@media screen and (max-width: 767px) {
    table {
        float: none;
        text-align: center;
    }
}

@media screen and (max-width: 640px) {
    table {
        float: none;
        text-align: center;
    }
}

/*th:first-child { border-radius: 9px 0 0 0; }

th:last-child { border-radius: 0 9px 0 0; }

tr:last-child td:first-child { border-radius: 0 0 0 9px; }

tr:last-child td:last-child { border-radius: 0 0 9px 0; }*/

#wrap {
    width: 70%;
    margin: 0 auto;
}

#tabwrap {
    background: #fff;
    overflow: hidden;
    width: 90%;
    box-shadow: 0 0 20px #ddd;
    border: 1px solid #ddd;
}

.tabs {
    overflow: hidden;
    transition: background 0.1s ease-in-out;
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    -ms-transition: background 0.1s ease-in-out;
    -o-transition: background 0.1s ease-in-out;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    background: linear-gradient(#FFF, #F3F3F3) repeat scroll 0% 0% transparent;
    border-bottom: 1px solid #BFBFBF;
    color: #000;
    text-decoration: none;
     
}

    .tabs li {
        list-style: none;
    }

        .tabs li a {
            float: left;
            display: block;
            padding: 5px;
            color: #fff;
            width: 20%;
            text-decoration: none;
            text-align: center;
            border-right: 1px solid #555;
            border-left: 1px solid #888;
            font-size: 15px;
            text-shadow: 1px 1px 0 #000;
        }

            .tabs li a:hover {
                background: #666;
            }

        .tabs li:first-child a {
            border-left: 0;
        }

        .tabs li:last-child a {
            border-right: 0;
        }

        .tabs li.current a {
            background: #fff;
            color: #666;
            text-shadow: 1px 1px 0 #fff;
        }

.tab_content > div {
    clear: both;
    padding: 1px;
    color: #666;
    text-shadow: 1px 1px 1px;
    color: #666;
    text-shadow: 1px 1px 0 #fff;
  //  display: none;
}

.tab_content .current {
    display: block;
}

.tab_content #home.first {
    display: block;
}

.tab_content p {
    margin: 0 0 20px 0;
}



.slider_mozz {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #4f4f4f;
    border: solid 1px #bcbcbc;
    height: 14px;
    position: relative;
    text-align: left;
    margin-top: 6px;
    display: block;
    float: left;
    width: 50%;
}

.ui-slider-handle {
    border: 1px solid rgba(0,0,0,0.2);
    background: #ddd;
    color: #555555;
    cursor: pointer;
    height: 20px;
    position: absolute;
    width: 5px;
    margin-left: -5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    top: -3px;
}

    .ui-slider-handle:hover {
        border-color: #000;
    }

.ui-slider-horizontal {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(237,237,237,1);
    border: solid 1px silver;
    height: 14px;
    position: relative;
    text-align: left;
    margin-top: 6px;
    display: block;
    float: left;
    width: 85%;
    margin-bottom: 3px;
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    opacity: 0.8;
    transition: background 0.1s ease-in-out;
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    -ms-transition: background 0.1s ease-in-out;
    -o-transition: background 0.1s ease-in-out;
    background: linear-gradient(#FFF, #F3F3F3) repeat scroll 0% 0% transparent;
    box-shadow: 1px 2px 3px rgba(0,0,0,.7);
}

    .ui-slider-horizontal:hover {
        border-color: #000;
        opacity: 1;
    }

.ui-slider-range {
    height: 14px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}


.previewArea {
    z-index: 9999999;
}

.previewAreaBox {
    border: solid 1px silver;
    font-size: 18px;
    text-align: center;
    background-color: rgba(188,188,188,0.1);
    padding: 50px 50px 0 50px;
    z-index: 9999999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.previewAreapadding {
    padding: 15px;
    min-height: 140px;
    color: #f6200a;
}

.previewAreaBox .end, .previewAreaBox .start {
    font-size: 0px;
   
}

#viewCssCode ul {
    list-style: none;
    padding: 10px 0 0 0;
    margin: 0;
}
#csscode{
      border: solid 1px silver;
    font-size: 14px;
    text-align: left;
    background-color: rgba(188,188,188,0.1);
    padding: 2px 2px 0 2px;
    z-index: 9999999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align:justify;

}
#viewCssCode li {
    padding: 2px 10px;
    display: block;
    margin: 0 0 1px 0;
    list-style: none;
}
.pickable{
    width:48px!important;height:36px!important;
     font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px!important;
    cursor: pointer;
font-size: 0.75em;
font-weight: normal;
text-align: left;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0px 1px 0px #C5C5C5, 0px 2px 0px #C2C2C2, 0px 3px 0px #BEBEBE, 0px 4px 0px #BBB;
}

    #viewCssCode li.striped {
    }

#formDataLoad ul li {
    height: 24px;
}

#formDataLoad label {
    padding-left: 5px;
    font-size: 14px;
}


.toggletable {
 }

.css3button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000;
    padding: 5px 10px;
    background: -moz-linear-gradient( top, #ffffff 0%, #f8f8f8);
    background: -webkit-gradient( linear, left top, left bottom, from(#ffffff), to(#d2d2d2));
   -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 0 #C5C5C5, 0 2px 0 #C2C2C2, 0 3px 0 #BEBEBE, 0 4px 0 #BBB, 0 5px 0 #B8B8B8, 0 6px 1px rgba(0, 0, 0, 0.25), 0 5px 2px #000, 0 5px 4px rgba(0, 0, 0, 0.125), 0 5px 8px rgba(0, 0, 0, 0.063);
	-webkit-box-shadow:0 1px 0 #C5C5C5, 0 2px 0 #C2C2C2, 0 3px 0 #BEBEBE, 0 4px 0 #BBB, 0 5px 0 #B8B8B8, 0 6px 1px rgba(0, 0, 0, 0.25), 0 5px 2px #000, 0 5px 4px rgba(0, 0, 0, 0.125), 0 5px 8px rgba(0, 0, 0, 0.063);
	box-shadow:0 1px 0 #C5C5C5, 0 2px 0 #C2C2C2, 0 3px 0 #BEBEBE, 0 4px 0 #BBB, 0 5px 0 #B8B8B8, 0 6px 1px rgba(0, 0, 0, 0.25), 0 5px 2px #000, 0 5px 4px rgba(0, 0, 0, 0.125), 0 5px 8px rgba(0, 0, 0, 0.063);
    margin:5px;
    
}

h1 {
    text-align: center;
    font: bold 80px Sans-Serif;
    padding: 40px 0;
}

.simple {
    background: #91877b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.otto {
    background: #0e8dbc;
    color: white;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.relief {
    background-color: #3a50d9;
    color: #e0eff2;
    font: italic bold 100px Georgia, Serif;
    text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}

.close {
    background-color: #fff;
    color: #202c2d;
    text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5;
}

.printers {
    background-color: #edde9c;
    color: #bc2e1e;
    text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd;
}

.glow {
    color: #444;
    text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
}

.vamp {
    color: #92a5de;
    background: red;
    text-shadow: 0px 0px 0 rgb(137,156,213),1px 1px 0 rgb(129,148,205),2px 2px 0 rgb(120,139,196),3px 3px 0 rgb(111,130,187),4px 4px 0 rgb(103,122,179),5px 5px 0 rgb(94,113,170),6px 6px 0 rgb(85,104,161),7px 7px 0 rgb(76,95,152),8px 8px 0 rgb(68,87,144),9px 9px 0 rgb(59,78,135),10px 10px 0 rgb(50,69,126),11px 11px 0 rgb(42,61,118),12px 12px 0 rgb(33,52,109),13px 13px 0 rgb(24,43,100),14px 14px 0 rgb(15,34,91),15px 15px 0 rgb(7,26,83),16px 16px 0 rgb(-2,17,74),17px 17px 0 rgb(-11,8,65),18px 18px 0 rgb(-19,0,57),19px 19px 0 rgb(-28,-9,48), 20px 20px 0 rgb(-37,-18,39),21px 21px 20px rgba(0,0,0,1),21px 21px 1px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,.2);
}

#tablewrapper {
    width: 99% !important;
   
}


#resultsel1 {
    display: block;
    bottom: 1px;
  overflow:visible;
  overflow:auto!important;
    position:static;
    
}
#tbColor td:hover {
-webkit-box-shadow: 0px 0px 2px 4px rgba(255, 255, 255, .75); box-shadow: 0px 0px 2px 4px rgba(255, 255, 255, .75);
cursor: pointer;cursor:hand;
}
#resultsel2 {
    display: block;
    position: relative;
    bottom: 1px;
    width: 100%;
 
    margin: 20px;
}

.tablecode {
          border: 1px solid #cccccc;
          padding: 5px;
          height:auto;
          font-family: Tahoma, sans-serif;
          background-color:transparent;
          background-position: bottom right;
          background-repeat: no-repeat;
          min-Height:300px;
          color:#a9a7a7;
          font-size:12px; text-shadow: 1px 1px 1px #ccc, 0px 0px 0px #ccc;
          font-family : Consolas,'Courier New',Courier,monospace
      }
#outersquare { width: 20px; height: 20px; background: red;position:absolute; 

box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);background: none repeat scroll 0% 0% #DDD;

}
#innersquare {
    width: 10px;
    height: 10px;
    background: none repeat scroll 0% 0% #26CA28;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;position:absolute; 
    transition: all 0.5s ease 0s;
cursor: pointer;
  z-index: 1;
}