body{
font-family: Arial;
margin:0px;
padding:0px;
background:#fff;
font-size:15px;
color:#222;
}

body,td{
font-family: Arial;
line-height:1.4em;
}

p{
color:#333;
width:680px;
}

.how_edit p{
width:550px;
}

a{
color:#333;
font-family: Georgia;
}

a:visited{
color:#555;
}

a:hover{
color:#94C7E4;
}

.bold{
font-weight:bold;
}

.italic{
font-style:italic;
border:0px solid red;
}

.grayText{
color: #777;
}
.abs{
position:absolute;
}

.top{
top: 0px;
}

.right{
right:0px;}

.left,
.floatleft{
float:left;
}

.right,
.floatright{
float:right;
}

.hidden{
display: none;
}

ul,li{
list-style: none;
padding: 0px;
margin: 0px;
}

.addText{
border-left:7px solid #f7f7f7;
width:280px;
color:#777;
font-family: Georgia;
top:50px;
line-height:1.3em;
padding-left:10px;
}

.preText{
color:#777;
font-family: Georgia;
line-height:1.3em;
}

.both{
clear:both;
width:100%;
}

.smallbox{
clear:both;
}

.emptyClear{
clear:both;
border:0px solid red;
margin:0px !important;
}

.boxDiv{
height:20px;
}

.clear{
clear:both;
width:450px;
}

.clearboth{
clear:both;
}

.bigdiv{
height:20px;
}

.bigClear{
clear:both;
height:20px;
}

.smalldivider{
clear:both;
height:3px;
margin-top:15px;
}

div.sublink{
/*
top:4px;
right:15px;
width:140px;
border:0px solid red;
position:absolute;
*/
text-align:right;
clear: both;
}

div.sublink a{
color:#7FB3D0;
padding-right:15px;
background: url(/i/out.png) right 4px no-repeat;
}

.textRight{
text-align: right;
}

.linkToTop a,
.linkToTop a:visited{
padding: 3px 10px;
text-decoration: none;
}

.linkToTop a:hover{
text-decoration: none;
}

/* --------------- CONTAINERS ---------------  */

div#container{
text-align:center;
background:#fff;
}

.patterns_index div#container,
.patterns div#container{
text-align:center;
width:740px;
margin:40px auto 40px auto;
background:#fff;
}

div#container-inner{
padding:0px 20px 20px 20px;
}

.patterns_index div#container-inner,
.patterns div#container-inner{
margin:0px;
border:0px solid red;
padding:20px;
}

.fullpage div#container-inner{
padding-top:0px;
}

div#page{
position:relative;
/*border-top: 1px solid #eee;*/
padding-top:20px;
border:0px solid red;
}

.fullpage div#page{
padding-top:0px;}

div#page-inner{
text-align:left;
width:1000px;
margin:0px auto;
position:relative;
}

.patterns_index div#page-inner,
.patterns div#page-inner{
margin:0px;
width:700px;
}

.index div#page-inner{
width:840px;
width:1000px;
}

.cardPage div#page-inner{
width:940px;
}

.showlist div#page-inner,
.showlist div#container{
margin:0px auto;
width:1100px;
}

.fullpage div#page-inner{
width:auto;
margin:0px 10px;
border:0px solid red;
padding-top:20px;
}

/* ---------- page HEADER --------  */

div#header{
position:relative;
border:0px solid red;
}

div#header-inner{
position:relative;
text-align:left;
width:1000px;
margin:0px auto;
height:170px;
border:0px solid red;
padding-top:20px;
border-top: 3px solid #BEE36F;
}

.patterns_index div#header-inner,
.patterns div#header-inner{
width: 100%;
border-top: 0px solid #BEE36F;
padding-top:0px;
height:170px;
}

.index div#header-inner{
width: 1000px;
}

div#logo{
border:0px solid red;
background-image: url(/i/top.png);
background-position: left 0px;
background-repeat:no-repeat;
height: 140px;
width: 507px;
float: left;
margin-top: 30px;
}

.tests #logo,
.index #logo{
margin-top: 10px;
}


.patterns_index div#logo,
.patterns div#logo{
border:0px solid red;
background-image: url(/i/top_patt.png);
}

.cards div#logo{
border:0px solid red;
background-image: url(/i/top_card.png);
}

.tests div#logo{
border:0px solid red;
background-image: url(/i/top_tests.png);
}

div#logo a{
display:block;
border:0px solid red;
height:130px;
width:390px;
}

.patterns_index div#logo a,
.index div#logo a{
display:none;
}

.tests #home,
.index #home{
display:none;
}


div#menu{
top: 35px;
padding-left: 0px;
line-height: 1.6em;
font-family: Georgia;
position: relative;
float: right;
border: 0px solid red;
}

li.current{
font-weight: bold;
}

.gorizontal{
border:0px solid red;
background: #BEE36F;
width: 400px;
}

.gorizontal li{
float: left;
text-align: right;
width: 49%;
font-size: 15px;
border-right: 1px dotted #ddd;
color: #fff;
line-height: 24px;
}

.gorizontal li.pos-1{
width: 50%;
float: right;
text-align: left;
border-right: 0px dotted #ddd;
}

.gorizontal li.last{
border-right: 0px dotted #fff;
}

.gorizontal li a{
display: block;
text-decoration: none;
padding: 0px 10px;
}

.gorizontal li a:hover{
text-decoration: underline;
color: #92BF2F;
}

.gorizontal li.current a{
color: #92BF2F;
font-weight: normal;
font-size: 20px;
}

.patterns_index div#menu{
position: relative;
width: 170px;
border:0px solid red;
border-left:1px solid #ddd;
padding-left:15px;
float:right;
line-height:1.6em;
font-family: Georgia;
margin-top:25px;
margin-right: 0px;
font-size: 14px;
}

.patterns_index div#menu li{
float: none;
}

#home{
font-size:11px;
color:#777;
position:absolute;
left:0px;
}

/* ---------- SELECTS --------  */

.selectdis{
left:705px;
width:250px;
padding: 15px 5px 5px 5px;
border:1px solid #ccc;
border-top:0px solid #ccc;
background:whitesmoke;
}

.selectdis select{
width:140px;
}

div.selectpattern {
width:710px;
border:0px solid red;
float:left;
clear:both;
}

div.selectlayout div.floatleft,
div.selectpattern div.floatleft{
position:relative;
}

div.selectpattern div.floatleft form,
div.selectpattern div.floatleft input{
margin:0px !important;
padding:0px !important;
}

div.selectpattern div.floatleft{
padding:0px !important;
margin:0px 15px 5px 0px !important;
border:0px solid red;
width:56px;
height:56px;
}

div.lay_id{
position:absolute;
top:0px;
right:3px;
color:#fff;
font-size:12px;
padding:0px 3px;
}

.selectpattern div.lay_id{
right:3px;
top:3px;
line-height:14px;
padding:0px 2px;
color:#eee;
background-color: #333;
opacity: 0.70;
filter: Alpha(opacity=70);
}

.selectpattern input{
border:3px solid #fff;
position:absolute;
}

.selectpattern .current,
.selectoverlays .current{
border:3px solid #cc0000;
}

.selectpattern div:hover{
opacity: 0.80;
filter: Alpha(opacity=80);
}

.selectoverlays div{
float:left;
margin:0px 5px 5px 0px;
width:56px;
height:56px;
}

.selectoverlays div.bold{
width:100%;
height:auto;
}

.selectoverlays div a{
display:block;
width:50px;
height:50px;
background-position:center center !important;
border:1px solid #ddd;
}

.selectsize,
div.selectoverlays{
margin-bottom:10px;
font-family: Georgia;
font-size:14px;
}

.selectsize span,
.selectsize a{
padding:0px 3px;
margin:0px 3px;
border-bottom:1px dashed #777;
}

.selectsize .current{
border-bottom:0px dashed #777;
background-color: #e1f538;
font-weight:bold;
}

.selectbutBG{
width:200px;
}

.selectbutBG div{
height:40px;
width:80px;
margin:5px;
float:left;
}

.selectbutton{
width:500px;
}


/*---------------COLORS MARKERS-------------------*/

.color1{
background:#CC0000;
color: #fff;
}

.color2{
background:#ff5500;
color: #fff;
}

.color3{
background:#ff9900;
color: #fff;
}

.color4{
background:#ffcc00;
color:#DF4E00 !important;
}

.color5{
background:#FFED2F;
color:#DF4E00 !important;
}

.color6{
background:#DCEF3B;
color:#727F00 !important;
}

.color7{
background:#89CF19;
color:#446F00 !important;
}

.color8{
background:#77D0EF;
color:#005E7F !important;
}

.color9{
background:#0081AF;
color:#B3E1EF !important;
}

.color0{
background:#B17FFF;
}

.color01{
background:#DF45CD;
color:#FFDFFB !important;
}

.colorSpan{
padding: 0px 3px !important;
}

/*----------------COLORS BOX----------------------*/

.colorsBox{
margin-bottom:25px;
}

.colorsBox input{
border:1px solid #ccc;
width:43px;
height:40px;
text-align:center;
font-size:11px;
}

.colorsBox div{
margin-right:5px;
}

/* ---------- MAKECODE --------  */

.make_code{
width:1000px;
margin-top:30px;
}

.formcreate{
margin-top:15px;
width:900px;
}

.patterns .formcreate{
margin-top:15px;
width:700px;
}

.patternslist{
width:185px;
}

.patternslist .small{
font-style: italic;
color: #777;
font-size: 12px;
line-height: 1.4em;
}

.cardPage .formcreate{
width:940px;
}

.make_code td{
padding-right:10px;
}

.make_code .fields{
/*width:500px;*/
}

.fieldsDiv{
padding:3px 0px 3px 5px;
font-size:18px;
font-family:Georgia;
margin:0px 0px 15px 0px;
}

.divBg{
background-color: #D1E4EF;
color:#3684AF;
border:1px solid #A7CBDF;
}

.divText{
background-color: #E3EFD1;
color:#799F3B;
border:1px solid #D1DF99;
}

/*
color:#92BF2F;
color:#ffaa00;
*/


.patterns_index .make_code{
width:700px;
margin-top:0px;
}

.patterns_index .make_code td{
width:35%;
border:0px solid red;
}

td.readypic{
text-align:center;
width:205px;
}

#pic_cont{
width:200px;
height:200px;
border:1px solid #ddd;
margin:0px auto;
background-color: #fafafa;
}

.showlist div.floatleft{
margin:3px;
}

#pic_cont img{
border:1px solid #ddd;
}

.readypic .addText{
width:200px;
margin:0px auto;
margin-top:10px;
text-align:left;
font-size:.8em;
color:#999;
}

/* ---------- DIVIDERS --------  */

.divider{
background-image: url(/i/grad.png);
height:10px;
clear:both;
margin-bottom:20px;
}

.red{
background-color: #DD0000;
}

.orange{
background-color: orange;
}

.yellow{
background-color: #ffdd00;
}

.lightyellow{
background-color: #FFE960;
}

.green{
background-color: #e1f538;
}

.darkgreen{
background-color: #99BF00;
}

.lightblue{
background-color: lightblue;
}

.blue{
background-color: #3366CC;
}

.lightviol{
background-color: #CC99FF;
}

.viol{
background-color: #663399;
}

.gray{
background-color: #bbb;
}

.sred{
background-color: #FFCFCF;
}

.sor{
background-color: #FFDC9F;
}

.grayLine{
width: 100%;
height: 2px;
background-color: #eee;
}


a.sor{
color: #D17627;
}

a.lightyellow{
color: #C98200;
}

a.green{
color: #738E05;
}

a.lightblue{
color: #02707F;
}

/*----------------- HEADERS ---------------------*/

.header{
margin-top:0px;
margin-bottom:1px;
font-size: 28px;
font-family: Georgia;
color: #444;
}

.pageheader{
font-size: 26px;
font-family: Georgia;
color:#bbb;
margin-bottom: 30px;
}

.bighead{
color:#333;
font-size:32px;
margin-bottom:35px;
}

.midhead{
font-size:28px;
}

.smallhead{
color:#222;
font-family: Georgia;
font-size:18px;
}

.fields .header{
border-bottom:1px solid #ddd;
}

.formcreate .fields .header{
border-bottom:0px solid #ddd;
}

.formcreate .header{
margin-bottom:20px;
}

/*----------------- COL TEXT ---------------------*/

.bluetext,
.bluetext:link,
.bluetext:visited{
color:#7FB3D0;
}

.greentext,
.greentext:link,
.greentext:visited{
color:#92BF2F;
}

.orangetext,
.orangetext:link,
.orangetext:visited{
color:#ffaa00;
}

.more:link,
.more:visited{
font-weight:bold;
color:#7FB3D0;
font-style:italic;
}

td.readycodes span.small{
font-size:13px;
font-style:italic;
color:#555;
}

.warning{
font-size:14px;
color:#333;
font-weight:bold;
}


.lightor{
background-color:#FFD68F;
padding: 0px 3px;
}

.lightbl{
background-color:#B3DFEF;
padding: 0px 3px;
}

.lightgr{
background-color:#D8EFB3;
padding: 0px 3px;
}

.lightyel{
background-color:#FFEE9F;
padding: 0px 3px;
}

.fields .header:hover{
background-color:#eee;
}

.formcreate .fields .header:hover{
background-color:#fff;
}

.subHeader{
color:#222;
margin-bottom:10px;
margin-top:15px;
background:#eee;
padding:3px;
text-align:center;
clear:both;
}

.subHeader:hover{
background-color:#ddd;
}

/*----------------- ARROWS ---------------------*/

.arrup{
background-image:url(/i/arrows.png);
background-repeat: no-repeat;
background-position: 98.6% 10px;}

.arrdown{
background-image:url(/i/arrows.png);
background-repeat: no-repeat;
background-position: 98.6% -11px;
}

.hidden .arrdown{
background-color:#FFF4BF !important;
}


/*-----------------MAKE INPUTS ---------------------*/

.make_code .fields input,
.make_code .fields select{
margin-left:10px;
margin-bottom:0px;
margin-top:3px;
color:#555;
/*width:240px;*/
}

.make_code .onecol input,
.make_code .onecol select,
.make_code .readycodes textarea{
border:1px solid #ccc;
}

.make_code .fields #go{
margin-top:30px;
height:40px;
font-size:17px;
font-family: Georgia;
}

.make_code .fields .large input{
width:95%;
margin-bottom:7px;}

div.fields2{
height:25px;
}

.make_code .fields2 select,
.make_code .fields2 input{
width:47.5%;
margin-left:5px;}

.fields2 div.fieldName{
width:47.5%;
}

.make_code .fields3 select,
.make_code .fields3 input{
width:28.8%;
margin-left:14px;}

.make_code .fields4 select,
.make_code .fields4 input{
width:19.5%;
margin-left:5px;}

.make_code .fields5 select,
.make_code .fields5 input{
width:17.3%;
margin-left:7px;}


div.fieldName{
float:left;
line-height:25px;
width:120px;
/*font-style:italic;
margin-left:10px;

*/
}

.formcreate div.fieldName,
.formcreate  .fields input,
.formcreate  .fields select{
margin-left:0px;}

.large  div.fieldName{
float:none;
width:100%;
}

.one div.fieldName,
.two div.fieldName{
width:100%;
}
.fields3 div.fieldName{
width:30.1%;
}
div.oneline input{
border:1px solid #ccc;
}

/*---------------------- COLS TYPES ----------------------------*/

div.onecol{
float:left;
border:0px solid red;
position:relative;
}

div.double{
height:100px;
height:55px;
}

.one{
/*width:100%;*/
width:455px;
padding:5px 0px 15px 0px;
border-bottom:1px solid #eee !important;
}

.two{
width:50%;
}

.formcreate .two{
width:232px;
}

.three{
width:33%;
height:55px;
}

.four{
width:25%;
}

.make_code .onecol select,
.make_code .onecol input{
width:87%;
margin-bottom:0px;
}

.formcreate .fields select,
.formcreate .fields input{
}

.oneline{
border:0px solid red;
border-bottom:1px solid #eee !important;
width:455px;
margin-bottom:0px;
padding:5px 0px;
clear:both;
}

.make_code .oneline select,
.make_code .oneline input{
width:100px;
margin-bottom:7px;
}

.make_code .oneline .fieldName{
width:335px;
}

.formcreate .one input,
.formcreate .one textarea{
width:455px;
border:1px solid #ccc;
}

.checkBoxItem .fieldName{
line-height: 24px;
}

.formcreate .checkBoxItem input{
width:auto;
margin-right: 3px;
margin-top:5px;
vertical-align: top;
}

.formcreate .one textarea{
height:80px;
}

#codes{
width: 380px;
height: 410px;
width: 450px;
height: 100px;

}

#profileCodes{
width:860px;
height:200px;
}

.shortline{
border:0px solid red !important;
width:230px;
border-bottom:1px solid #eee !important;
padding:5px 0px;
}

.shortline div.fieldName{
border:0px solid red !important;
width:125px;
}

.shortline select{
width:100px !important;
}

/*----------------- SIZE ---------------------*/

div.size {
width:50%;
}

div.size span{
border:0px solid red;
height:16px;
vertical-align:top;
color:#777;
}

div.size div.fieldName{
width:100%;
border:0px solid red;
}

div.size input{
width:180px !important;
text-align:right;
}

.formcreate .size input{
width:100px;
}

/*----------------- COLORS GALLERY ---------------------*/

.showColor{
color:#444;
margin:0px auto 15px auto;
}

.onecolor{
margin-top:5px;
height:50px;
width:120px;
position:relative;
background-image:url(/styles/grad.png);
background-repeat: no-repeat;
background-position: right;
}

.showColor span{
font-style:italic;
color:#222;
background:url(/styles/transp.png);
padding:0px 5px;
position:absolute;
bottom:0px;
right:0px;
}


/*------------------ VITRUM --------------------*/

div.vitrum{
width:400px;
}

div.colorstrip{
height:25px;
}
.glass{
position:absolute;
width:400px;
}

.vertstrip{
opacity: 0.30;
filter: Alpha(opacity=30);
width:17px;
float:left;
}

/*--------------------------------------*/

.hasbgcolor{
background-color: #FFEE94;
}

/*------------------ FRAME --------------------*/

#myframe{
width:99.9%;
height:1700px;
margin:50px auto 10px auto;
border:0px;
}

div.selectpattern div.floatleft{
margin:0px 10px 10px 0px;
}

div.selectlayout div.floatleft{
margin:0px 21px 25px 0px;
}

div.buttonCont{
width:240px;
float:left;
padding-bottom:20px;
}

div.buttonCont textarea{
color:#777;
font-size:12px;
}

/*----------------SOCICONS----------------------*/

.socIcons img{
vertical-align: middle;
margin-right: 5px;
}
.socIcons input{
width: 370px !important;
}

/*------------------CARDS--------------------*/

.selectcard .floatleft{
width: 20%;
text-align: center;
position: relative;
padding: 20px 0px;
}

.selectcard .floatleft-inner{
position:relative;
padding: 0px  !important;
height: 79px;
width: 150px;
margin: 0px auto;
}

.selectcard .currentCard{
background: #E3EFD1;
}


/*----------------FOOTER----------------------*/
.footer{
width:1000px;
margin:0px auto;
color:#aaa;
font-size:12px;
padding-top:10px;
text-align:left;
}

.footer-inner{
width:1000px;
border-top:1px solid #ddd;
padding-top:10px;
text-align:center;
}

.patterns_index .footer,
.patterns_index .footer-inner,
.patterns .footer,
.patterns .footer-inner{
width:700px;
}

.index .footer,
.index .footer-inner{
width:840px;
}

.footer span{
padding:0px 7px;}


#google_translate_element{
position:absolute;
top:0px;
left:330px;
}


/*----------------LINKS----------------------*/

.linkItems{
float: left;
clear: both;
width: 425px;
margin-bottom: 20px;
}

.linkItemsHeader{
margin-bottom: 7px;
font-weight: bold;
}


.linkName,
.linkUrl{
float: left;
}

.linkName{
width: 140px;
margin-right: 15px;
}
.linkName input{
width: 135px;
}

.linkUrl input{
width: 259px;
}

div.socLinkSwitch{
margin-bottom: 0px;
color: #222222;
font-family: Georgia;
font-size: 22px;
}

.socLinkSwitch span{
padding: 10px 0px;
cursor: pointer;
color: #222;
display: block;
float: left;
width: 50%;
text-align: center
}

span.currentBox{
background: #e5e5e5;
color: #000;
text-shadow: 1px 1px 0px #fff;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

.uniBox{
background: #e5e5e5;
padding: 15px;
float: left;
clear: both;
}

.beforeCode{
border: 1px solid #eee;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
text-align: center;
height: 50px;
line-height: 50px;
font-family: Georgia;
font-size: 22px;
color: #ddd;
}

.beforeCode a,
.beforeCode a:visited,
.beforeCode a:hover{
color: #ddd;
text-decoration: none;
}

.make_code .buttonsLinks{
width: 99%;
padding-right: 0px;
}
.buttonsLinks .clear{
width: 100% !important;
}

.getCodeButt{
float: left;
clear: both;
background:#FFEE9F;
color: #EF9C2F;
padding: 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Georgia;
font-size: 22px;
cursor: pointer;
text-shadow: 1px 1px 0 #FCF5D4;
}

.imagesBox{
border: 2px solid #F2FAFF;
background:#F2FAFF;
float: left;
clear: both;
width: 100%;
}

.addthis_toolbox{
margin-top: 5px;
}

#shareLinks{
width: 320px;
float: left;
clear: both;
margin-top: 25px;
}

#shareLinks div span{
color: #7FB3D0;
border-bottom: 1px dashed #7FB3D0;
cursor: pointer;
}

#tell_friends{
margin-top: 5px;
padding-left: 10px;
padding-top: 3px;
}


#layout_bookmark{
float: left;
clear: both;
width: 100%;
margin-top: 5px;
margin-left: 10px;
}

.open{
float: left;
width: 210px;
background:#FFEE9F;
-webkit-border-radius: 5px 5px 0px 0px
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#shareLinks div.open span{
border-bottom: 0px dashed #7FB3D0;
color: #333;
font-weight: bold;
padding: 0px 7px;
}

#short_url{
float: left;
clear: both;
padding-left: 10px;
width: 210px;
background:#FFEE9F;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}

#short_url input{
border: 1px solid #ddd;
margin: 5px 12px 12px 8px;
width: 180px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#at_hover,
#at_hover .at_item,
#at_hover .at_bold{
font-family: Arial;
}

.help,
.help:visited,
.help:hover{
background: #94C7E4;
color: #fff;
padding: 0px 3px;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}