body{
margin:0px;
background-color:#3399CC;
background-image:url('images/blue2.jpg');
background-repeat:no-repeat;
background-position:center center;
background-attachment: fixed;
background-size:cover;
font-family:Arial, Helvetica, Sans-Serif;
}
a{display:inline-block;}
a.button:link,a.button:hover,a.button:active,a.button:visited,a.tab:link,a.tab:hover,a.tab:active,a.tab:visited{
text-decoration:none;
color:#888888;
}
a:link,a:hover,a:active,a:visited,a.active:link,a.active:hover,a.active:active,a.active:visited{
text-decoration:none;
color:#3399CC;
}
a.active:link,a.active:hover,a.active:active,a.active:visited{
text-decoration:none;
color:#fff;
}
.center{
width:960px;
margin:0 auto;
min-height:100%;
}
.box,.banner,#content6 input,.article,.comment, .bg,code{
background-image:url('images/grey.jpg');
background-position:-1px -90px;
margin:20px;
}

.button,.red,.tab,.bgc,.bgc div,.commentno,.commentno2,.key{
background-image:url('images/transparentS.png');
background-position:center 0;
}
.banner{
margin-top:20px;
width:500px;
height:60px;
text-align:center;
padding:9px 0;
background-position:-340px -90px;
}
.box,.banner,.article,.comment,code, .indent table, .indent td{
background-color:#CCCCCC;
border:solid #BBBBBB 1px;
box-shadow: 0 0 5px 5px rgba(204,204,204,0.5);
border-radius:25px;
}
.box{
padding:10px;	
}
.box .box, #overlay .box,.indent table{
padding:5px;
margin:0px 10px;
background-color:#3399cc;
color:#fff;
background-image:url('images/blue2.jpg');
}
code{
display:block;
font-weight:bold;
margin:0;	
font-size:14px;
}
.hr{
border:inset #3399cc 1px;
margin:30px 0;	
}
.indent table, .indent td{
padding:10px;
border-radius:10px;	
margin:0;
}
.box .bg,#overlay .box{
padding:15px;
margin:0px 10px;
background-color:#ccc;
color:#888;
background-image:url('images/grey.jpg');
}
.index{
width:888px;
margin:0 auto;	
}
.header{
color:#888888;	
}
.white{
color:#FFFFFF;
}
.text{
padding:10px;	
}
.indent{
padding:10px 40px;
}
.indent .box{
margin:0;
}
.text,.banner{
color:#888888;
font-size:14px;
line-height:17px;	
}
.subtext{
font-size:12px;
line-height:15px;
color:#888;
clear:left;
}
.header,.subheader{
font-size:24px;

font-weight:bold;
padding:10px 0 0 10px;	
}
.header{
padding-top:20px;
}
.subheader{
padding-left:20px;	
}
.menuimg{
background-image:url('images/s-design-cx1.png');
background-position:0 0;
background-repeat:no-repeat; 
height:100px;
width:350px;
margin:10px 0 0 10px;
}
.button{
background-color:#3399cc;
border:solid #ccc 1px;
color:#ffffff;
border-radius:10px;
box-shadow: 0 0 3px 3px rgba(204,204,204,0.5);
float:right;
margin:10px;
font-weight:bold;
font-size:20px;
line-height:25px;
cursor:pointer;
padding:5px 10px;
text-decoration:none;
}
.topheader .button{
font-size:12px;
line-height:15px;
margin:4px 5px;;
padding:2px 7px;
color:#888;	
box-shadow: 0 0 3px 3px rgba(204,204,204,0.3);
}
.articletitle{
font-size:16px;
line-height:19px;	
}
.createtitle .subtext{
padding-left:23px;	
}
.createoption{
clear:left;
float:left;
text-align:left;
max-width:668px;
padding:10px;	
}
#content6 input,#content1 input,#content2 input,#addcomment input,.filecon,.selection{
margin:0;
border:solid #bbb 1px;
border-radius:10px;
box-shadow: 0 0 3px 3px rgba(204,204,204,0.5);
background-color:#97C5F3;
background-image:url('images/blue2.jpg');
background-position:-400px -90px;
color:#fff;
height:18px;
width:360px;
outline:none;
padding:6px;
font-weight:bold;
font-family:Arial, Helvetica, Sans-Serif;	
}
#addcomment input[type="file"]{
height:34px;
width:355px;
padding:0;
border:0;
border-radius:0;
box-shadow:none;
background-color:transparent;	
background-image:none;
}
#addcomment .filecon{
position:relative; 
height:22px;
margin:0 auto;	
}
.hiddenfile{
position:absolute;
top:0;
left:0;
width:360px;
z-index:1;
text-align:right;
overflow:hidden;
}
.hiddenfile input{
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
cursor:pointer;
border:solid #FF0000 1px;
}
.select{
float:right;
height:20px;
padding:2px 10px 0 5px;
color:#888;
border-left:solid #bbb 1px;
border-radius:10px;
background-color:#ccc;
}
#filename{
float:left; 
font-size:12px;
padding-top:2px;
width:274px;
text-align:left;	
}
.selection{
margin-left:13px;
text-align:left;
cursor:pointer;
overflow:visible;
position:relative;	
}
.selection .options{
display:none;
position:absolute;
top:30px;
}
.options{
border:solid #ccc 1px;
border-radius:10px;	
background-color:#ccc;
width:360px;
background-image:url('images/grey.jpg');
background-position:-400px -90px;
}
.option{
padding:0 5px;
border-radius:10px;	
color:#888;
font-size:10px;		
}
.option:hover{
background-color:#3399cc;
background-image:url('images/blue2.jpg');
background-position:-400px -90px;
color:#fff;	
}
textarea{
border:0;
padding:0;
margin:0;
background-color:transparent;
color:#888;
font-weight:bold;
font-family:Arial, Helvetica, Sans-Serif;
width:748px;
height:150px;
resize:none;
outline:none;
color:#fff;	
}
.bgc,.bgi{
border:solid #bbb 1px;
border-radius:15px;
float:left;
margin:2px;	
background-color:#97C5F3;
}
.bgc,.tickbox{
height:50px;
width:93px;	
cursor:pointer;
overflow:hidden;
}
.bgi{
height:35px;
width:200px;
margin:0;
background-image:url('images/blue2.jpg');
box-shadow: 0 0 3px 3px rgba(204,204,204,0.5);
}
#avatar{
width:93px; 
height:50px;
border-radius:10px;
position:relative;
}
.createoption .bgi{
background-position:0 0;	
}
.index{
margin-top:20px;
}
.index .bgi{
margin:10px; 
background-position:850px 90px;	
}
.selected{
border-color:#97C5F3;
box-shadow: 0 0 3px 3px rgba(51,153,204,0.5);
}
.index a{
display:block;	
}
.bgc div, .bgi div{
font-size:14px;
text-align:center;
color:#fff;
}
.bgi div{
padding:10px;	
}
.bgc div{
margin:49px 0 0 0;	
}
.topheader{
background-image:url('images/blue2.jpg'); 
margin-top:0;
padding:0;
}
.content{
margin-top:0;
}
.topheader .text{
padding-top:15px;
}
.footer, .footer a:link, .footer a:hover, .footer a:active, .footer a:visited{
font-size:10px;
line-height:12px;
color:#888888;
margin-bottom:0;	
}
.footer{
background-image:url('images/blue2.jpg');
}
.s-design{
float:left;
padding:1px 5px;
}
.s-design img{
height:30px;
width:30px;
margin-right:5px;
float:left;
cursor:pointer;
}
.s-design div{
padding-top:4px;
width:205px;	
}
.intouch{
float:right;
padding:1px 5px;	
}
.intouch div{
max-width:600px;	
}
.arrow,.radio,.radiotrue,.check,.checktrue{
background-image:url('images/arrows.png');
background-repeat:no-repeat;
height:13px;
width:13px;	
float:left;
margin:2px 4px 0 5px;
}
.createtitle .grey, .text .grey{
margin-top:3px;
}
.button .grey{
margin-top:6px;
}
.grey{
background-position:0 0;	
}
.rgrey{
background-position:0 -13px;
}
.commentno .rgrey{
position:absolute;
left:-14px;
top:0;
width:8px;
}
.commentno2 .rgrey{
position:absolute;
left:-14px;
top:2px;
width:8px;
}
.blue{
background-position:-13px 0;
}
.rblue{
background-position:-13px -13px;
}
.commentno .rblue{
position:absolute;
left:-13px;
top:0;
width:9px;
}
.commentno2 .rblue{
position:absolute;
left:-13px;
top:2px;
width:9px;
}
.white{
background-position:-26px 0;
}
.home{
background-position:-117px 0;
margin:1px;	
}
.whitedown{
background-position:-52px 0;
margin:3px 5px 0 5px;
padding-bottom:0px;	
}
.edit{
background-position:-131px 0;
width:15px;
margin:7px 7px 0 7px;
padding-bottom:7px;
}
.copy{
background-position:-131px -21px;
width:15px;
margin:0;
}
.vcoms{
background-position:-150px 0;
width:21px;
margin:7px 4px 0 4px;
padding-bottom:7px;
}
.tabs,.tabs2{
height:34px;
padding:3px;
margin:0 25px;
overflow:hidden;
}
.tab,.key{
text-decoration:none;
height:18px;
padding:10px 7px;
background-color:#ccc;
color:#888;
font-weight:bold;
float:left;
border:solid #ccc 1px;
border-bottom:none;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow: 0 0 3px 3px rgba(204,204,204,0.3);
margin:0 6px 0 0;
cursor:pointer;
position:relative;
font-size:16px;
}
.new{
position:relative;
top:-30px;
font-size:10px;
text-align:center;
color:#3399CC;
}
.active{
background-color:#3399cc;
outline:none;
color:#fff;	
}
.active .home{
background-position:-104px 0;	
}
.sent{
background-position:-91px 0;
margin:6px 6px 0 6px;	
}
.remove{
background-position:-78px 0;
margin:7px 7px 0 7px;
padding-bottom:7px;
}
#error .remove{
margin:5px;	
}
#errortext,#cerrortext{
font-size:12px;
padding:6px 0 0 5px;
line-height:15px;
}
#error,#cerror{
text-align:left;
}

.red,.error,.box .error{
background-color:#ff0000;
color:#fff;
}
.error,.box .error{
background-image:url('images/red.jpg');
}
.error textarea{
color:#FFF;
}
.green{
background-color:#008000;
color:#fff;
}
.left{
float:left;
}
.right{
float:right;
}
.cl{clear:left;}
.cr{clear:right;}
.cb{clear:both;}
.cx{
float:right;
position:relative;
top:-15px;
height:32px;
width:32px;
background-image:url('images/CodeXpert3.png');	
}
#commentload,#editload{
float:right;
position:relative;
top:-11px;
height:24px;
width:24px;
background-image:url('images/sending.gif');	
margin-right:10px;
display:none;
}
.html5{
float:right;
height:32px;
width:32px;
background-image:url('images/html5_logo3.png');	
}
.facebook{
float:left;
padding-top:6px;
margin-left:20px;
margin-right:20px;	
}
.google{
float:left;
padding-top:4px;
margin-left:20px;	
}
#contentx .facebook,#contentx .google{
margin:10px 0;
position:relative;
top:-15px;
padding:0;
}
#contentx .facebook{
margin-left:3px;
top:-17px;
}
/*ToolTips*/
#tt{
position:absolute;
top:0;
visibility:hidden;
z-index:6;
}
#tooltip{
text-align:center;
font-size:10px;
line-height:12px;
color:#FFF;
font-weight:bold;
}
#ttcon{
padding:6px;
background-color:#3399cc;
background-image:url('images/transparentS.png');
border:solid #CCC 1px;
border-radius:5px;
box-shadow: 0 0 3px 3px rgba(180,180,180,0.3);
}
.ttup{
background-position:center -72px;
}
.ttdown{
background-position:center -7px;	
}
.tt1,.tt2,.tt3,.tt4{
overflow:hidden;
display:block;
height:0;
width:0;
border-left:6px solid transparent;
border-right:6px solid transparent;
}
.tt{
float:left;
margin-left:10px;
width:12px;
display:none;
}
.tt2{margin-top:-7px;}
.tt3{margin-top:-6px;}
.tt4{margin-top:-5px;}
.tt1{border-top:6px solid #CCC;}
.tt2{border-top:6px solid #3399cc;}
.tt3{border-bottom:6px solid #CCC;}
.tt4{border-bottom:6px solid #3399cc;}

#uploadbutton,#upload,#uploadmsg,#uploadprogress{
display:block;
display:none;
}
#upload{
width:auto;
margin:0 auto;
}
#uploadbutton{
float:none;
margin:0 auto;
}
#uploadframe{
visibility:hidden;
width:0px;
height:0px;
border:0;
}
#uploadinfo{
clear:both;	
float:left;	
width:384px;
height:80px;
border-right:solid #bbb 1px;
}
.filedesc{
float:left;
text-align:left;
font-size:12px;
padding:4px 0 0 15px;
}
#uploadmsg{
padding:0 10px 10px 10px;
width:353px;
font-size:12px;	
}
#uploadprogress{
padding-top:20px;	
}
.percentholder{
float:left; 
width:200px;
height:18px;	
background-color:#bbb;
border-radius:5px;
border:solid #bbb 1px;
margin:0 5px 0 10px;	
}
#percentbar{
width:0px;
height:18px;	
background-color:#3399cc;
background-image:url('images/transover.png');
background-position:0 -20px;
border-radius:5px;	
}
a{
outline:none;
}
.sdesign a,form,iframe{
display:inline;
}
.nowrap{
width:auto;
height:auto;
margin:0;
padding-top:4px;
}
.nowrap .radio,.nowrap .radiotrue{
float:left;
vertical-align:middle;
}
.radio,.radiotrue,.check,.checktrue{float:none;height:28px;width:28px;cursor:pointer;margin:0;}
.radio{background-position:-282px 0;}
.radiotrue{background-position:-336px 0;}
.check{background-position:-170px 0;}
.checktrue{background-position:-226px 0;}
#overlay{
height:100%;
margin:0;
padding-top:100px;
top:0;
left:0;
z-index:3;
width:100%;
min-width:960px;
position:fixed;
display:none;
background-image:url('images/overlay.png');
}
#overlay .box{
width:800px;
height:450px;
border:solid #ccc 1px;
border-radius:25px;	
margin:0 auto;
position:relative;
}
#preview img{
border-radius:15px;
display:block;
margin:0 auto;	
}
#preview .button{
position:absolute;
top:-20px;
right:-25px;	
}

.editbuttons{
clear:both;
}
.edittext{
float:left;
margin-top:10px;
border:solid #ccc 1px;
border-radius:15px;
background-color:#3399cc;
color:#fff;	
width:650px;
height:21px;
padding:8px 10px;
font-weight:bold;
font-size:18px;
line-height:21px;
}
.article{
padding:8px;
border:solid #bbb 1px;	
margin:0 5px 5px 5px;
font-size:12px;
}
.article .button{
margin-bottom:0;
border-radius:15px;	
}
.comment{
padding:15px;
border:solid #bbb 1px;
margin:0 5px 5px 5px;
font-size:12px;
line-height:15px;
position:relative;
}
.title{
font-weight:bold;
color:#3399cc;
font-size:18px;
}
.comment .title{
padding:20px 0 35px 0;
text-align:left;
}
.article .info{	
float:left; 
width:700px;
text-align:left;
}

.comment .info, #cp .info{
text-align:left;
}
.info .bgc{
margin-right:10px;	
}
.comments{
clear:right;
}
.date,.comments{
float:right;
font-size:10px;
padding-top:6px;
font-weight:bold;
}
.comment .date{
position:absolute;
right:10px;
top:30px;	
}
.box .editor, .box .counter{
float:right; 
margin:0 30px;
padding:10px 5px;
border-top:none;
position:relative;
top:-1px;
border-top-left-radius:0;
border-top-right-radius:0;
box-shadow:none;
background-position:-1px -380px;
}
.box .counter{
float:left;
font-size:12px;
line-height:15px;
font-weight:bold;
padding:13px 20px 12px 20px;
}
.editor a{
font-size:12px;
line-height:15px;
padding:2px 6px;
margin:0 7px;
color:#97C3F5;
font-weight:bold;
}
.editor a:hover{
color:#fff;
background-color:#97C3F5;
border-radius:5px;
}
.commentno,.commentno2{
border:solid #aaa 1px;
border-radius:5px;
background-color:#97C5F3;
background-position:center -9px;
color:#fff;
font-weight:bold;
padding:1px 5px;
position:relative;
top:-1px;
left:12px;	
}
.commentno2{
top:7px;	
}
.topheader,.content,.footer{
margin-left:0;
margin-right:0;	
}

.indent code,#cp code,#comments code{
padding:10px;
position:relative;
}
.indent code table,.indent code td,#cp code table,#cp code td,#comments code table,#comments code td{
border:none;
box-shadow:none;
background-image:none;
background-color:transparent;
padding:0px;
font-weight:normal;
font-family:Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', Monaco, 'Courier New', Courier, monospace;
font-size:14px;
color:#000;
width:100%;

}
.indent td.tdnum0,.indent td.tdnum1,#cp td.tdnum0,#cp td.tdnum1,#comments td.tdnum0,#comments td.tdnum1{
vertical-align:top;	
text-align:right;
padding:1px 2px 1px 8px;
border-right:solid #888 2px;
border-radius:0;
width:10px;
width:30px;
color:#fff;
background-color:#3399cc;
font-size:12px;
background-image:url('images/transover.png');
background-position:0 -25px;
background-repeat:repeat-x;
}
.indent td.tdline0,.indent td.tdline1,#cp td.tdline0,#cp td.tdline1,#comments td.tdline0,#comments td.tdline1{
vertical-align:top;	
padding:1px 8px;
border-radius:0;
border-top-right-radius:15px;
border-bottom-right-radius:15px;word-break:break-all;
}
.indent td.tdnum1,.indent td.tdline1{
background-color:#bbb;
}
.c_bl{color:#000;}
.c_r{color:#DD0000;}
.c_b{color:#0000BB;}
.c_g{color:#007700;}
.c_o{color:#FF8000;}

.indent code tr:hover td,#cp code tr:hover td,#comments code tr:hover td{
background-color:#3399CC;
background-image:url('images/blue2.jpg');
background-position:-1px -90px;
}
.indent code td.first,#cp code td.first,#comments code td.first{border-top-left-radius:15px;}
.indent code td.last,#cp code td.last,#comments code td.last{border-bottom-left-radius:15px;}
.indent code td.first1,#cp code td.first1,#comments code td.first1{border-radius:15px;}

.scrollbox{
position:absolute;
top:15px;
right:10px;
width:15px;
height:100%;	
background-color:#bbb;
border-radius:5px;
border:solid #bbb 1px;
}
.scrollbar{
position:absolute;
top:0;
left:0;
height:100px;
width:15px;
background-color:#3399CC;
border-radius:5px;	
background-image:url('images/transover.png');
}
.box .editable{
text-align:left;
outline:none;
padding:10px;
height:150px;
overflow:auto;	
}
.key{
position:absolute;
top:-19px;
right:15px;
display:none;
height:auto;
padding:6px 4px 4px 4px;
height:9px;
border-color:#bbb;
}
.key div{
float:left;
height:9px;
width:9px;
border-radius:3px;
margin-right:2px;	
}
.key .copy{
width:15px;
height:7px;
position:relative;
top:1px;
padding:0;
margin:0 2px 0 0;
border-radius:0;	
}

.k_bl{background-color:#000;}
.k_r{background-color:#DD0000;}
.k_b{background-color:#0000BB;}
.k_g{background-color:#007700;}
.k_o{background-color:#FF8000;}
code:hover .key{
display:block;
}
#previewcode textarea{
color:#888;	
height:378px;
margin:5px 20px;
width:770px;
font-family:Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', Monaco, 'Courier New', Courier, monospace;
font-size:14px;
font-weight:normal;
}