/*
main colors:
#DDD - very light grey - borders
#CCC - lightish grey
#AAA - light grey

#777 - darkish grey
#333 - very dark grey
#000 - black

#556 - dark blueish text
#77aa77 - light green text
#f5f5f5 - search button background
*/


body {
	font-family: 'Open Sans', sans-serif;
}
* {	padding: 0; margin: 0; vertical-align: top; }

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#header {
height: 50px;
background: #CCC;
}

#loading-screen {
	position:fixed;
	z-index:1000;
    height:100%;
    width:100%;
	background: #000;
    opacity: 0.6;
	line-height: 100%;
	margin-left:auto;
	margin-right:auto;
}
#loading-screen-content{
	position:fixed;
    top: calc(50% - 25px);
	left: calc(50% - 150px);
	width:300px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:250%;
	color:#fff;
}

#logo {
float:left;
}

#global-footer{
margin-top:15px;
width:50%;
padding:5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-bottom:15px;
}

#header-tab-container{
float:left;
height:50px;
background: #CCC;
}

#header-tab-container .header-tab{
border-left:1px solid #AAA;
font-size:22px;
color:#777;
width:125px;
height:50px;
text-align:center;
line-height:50px;
float:left;
text-decoration:none;
}


#header-tab-container .header-tab:hover{
background:#000;
color:#ccc;
cursor:pointer;
}
#header-tab-container .header-tab:active{
background:#333;
}
#header-tab-container-mobile {
	display:none;
}

#header-tab-container-mobile-dropdown{
	background: #CCC;
	left:0;
	top:50;
	position:absolute;
	border:1px solid #AAA;
	border-top:0;
	font-size:22px;
	color:#777;
	width:125px;
	text-align:center;
	line-height:50px;
	float:left;
	text-decoration:none;
	display:none;
	z-index:100;
}
#header-tab-container-mobile-dropdown .header-tab{
border-bottom:1px solid #AAA;
font-size:22px;
color:#777;
width:125px;
height:50px;
text-align:center;
line-height:50px;
float:left;
text-decoration:none;
}
#header-tab-container-mobile-dropdown .header-tab:active{
	background:#333;
}


@media (max-width: 980px) {
    #header-tab-container {
        display:none !important;
    }
    #header-tab-container-mobile {
		margin-left:15px;
		float:left;
        display:block !important;
    }
    #logo {
        display:none !important;
    }
}

.header-right-tab{
position:relative;
font-size:22px;
color:#777;
height:50px;
text-align:center;
line-height:50px;
float:right;
padding-left:20px;
padding-right:20px;
}
.header-right-tab:hover{
background:#000;
color:#ccc;
cursor:pointer;
}
.header-right-tab.active{
background:#000;
color:#ccc;
cursor:pointer;
}

#profile-rep-tab{
color:#090;
}

#maincontent{
float:left;
background:#fafafa;
width:100%;
}
#content-header{
width:98%;
height:33px;
border-bottom:1px solid #DDD;
float:left;
padding-top:5px;
padding-bottom:5px;
}

#sidebar{
height: 100%;
width:270px;
float:left;
padding-right: 20px;
padding-left:10px;
}

@media (max-width: 980px) {
    #sidebar {
        display:none !important;
    }
}

.sidebar-section{
margin-top:15px;
margin-bottom:15px;
float:left;
width:100%;
}

#sidebar-newest-header{
	text-align:center;
	font-size:150%;
	color:#666;
	margin-bottom:10px;
}
.sidebar-newest-content{
margin-top:5px;
border-top:1px solid #eee;
width:100%;
height:73px;
position:relative;
cursor:pointer;
}
.sidebar-newest-content:hover{
background:#f5f5f5;
}
.sidebar-newest-content:active{
background:#f0f0f0;
}
.sidebar-newest-content .type{
position:absolute;
right:3px;
top:3px;
color:#999;
font-size:70%;
}
.sidebar-newest-content .views{
width:100%;
font-size:70%;
color:#333;
float:left;
padding-left:3px;
margin-top:3px;
}
.sidebar-newest-content .title{
width:100%;
font-size:150%;
color:#333;
float:left;
padding-left:3px;
margin-top:3px;
height:55px;
overflow-y:hidden;
}
.sidebar-newest-content .footer{
position:absolute;
left:0;
bottom:3px;
font-size:70%;
width:100%;
}
.sidebar-newest-content .footer .time{
	float:right;
	color:#999;
	font-size:75%;
	margin-left:5px;
}
.sidebar-newest-content .footer  .poster{
	float:right;
	color:#999;
	font-size:75%;
cursor:pointer;
}

#content{
width: calc(100% - 313px);
float:left;
background:#fff;
padding-left:10px;
}

@media (max-width: 980px) {
    #content {
		width: 100%;
		float:left;
		background:#fff;
		padding-left:10px;
    }
}

/* sign in stuff */
#signin-box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -250px;
    width: 500px;
    height: 300px;
	/*border:1px solid #777;*/
}

#profile-dropdown{
position:absolute;
right:0;
top:50px;
padding:5px;
border:1px solid #CCC;
border-top:0;
background:#eee;
z-index:500;
}
#profile-dropdown .link{
text-decoration:none;
color:#777;
font-size:120%;
}
#profile-dropdown .link{
width:200px;
}
#profile-dropdown .link:hover{
background:#000;
color:#ccc;
cursor:pointer;
}
.rep-row{
border-bottom:1px solid #666;
padding:10px;
float:left;
width:180px;
}
.rep-row:hover{
background: #999;
}
#rep-dropdown{
width:200px;
line-height:16px;
font-size:70%;
position:absolute;
right:0;
top:50px;
border:1px solid #CCC;
border-top:0;
background:#eee;
z-index:500;
}
#notification-dropdown{
width:200px;
line-height:16px;
font-size:70%;
position:absolute;
right:0;
top:50px;
border:1px solid #CCC;
border-top:0;
background:#eee;
z-index:500;
}

.box-header{
	width:100%;
	padding-top:5px;
	padding-bottom:5px;
border-bottom:1px solid #CCC;
}
.box-footer{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	border-bottom:1px solid #CCC;
	padding:5px;
}
.box-content{
	padding:10px;
	color:#777;
}
.box-header .text{
	margin-left:15px;
	font-size:22px;
	color:#777;
}

.row{
	width:100%;
	margin-top:15px;
	margin-bottom:15px;
	text-align:center;
}

.btn{
padding:5px;
background:#CCC;
color:#777;
font-size:120%;
}
.btn:hover{
background:#000;
color:#CCC;
cursor:pointer;
}
.btn:active{
background:#333;
}

/******** questions section *********/
#question-order-container{
	height:30px;
	margin-left:5px;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	float:left;
	padding-right:15px;
}
#question-order-container a{
	float:left;
	margin-left:10px;
	margin-right:10px;
	line-height:30px;
	font-size:100%;
	color:#666;
	text-decoration:none;
	text-align:center;
}
#question-order-container a:hover{
	font-weight:600;
	color:#000;
}
#question-order-container a:active{
	font-weight:900;
	color:#333;
}
#tutorial-order-container{
	height:30px;
	margin-left:5px;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	float:left;
	padding-right:15px;
}

#tutorial-order-container a{
	float:left;
	margin-left:10px;
	margin-right:10px;
	line-height:30px;
	font-size:100%;
	color:#666;
	text-decoration:none;
	text-align:center;
}
#tutorial-order-container a:hover{
	font-weight:600;
	color:#000;
}
#tutorial-order-container a:active{
	font-weight:900;
	color:#333;
}
#questions-section{
width:98%;
margin-left:auto;
margin-right:auto;
padding-top:5px;
padding-bottom:5px;
float:left;
}
.question-box{
height:103px;
width:100%;
border-bottom:1px solid #DDD;
padding-bottom:5px;
position:relative;
}
.question-box-inner{
width:100%;
height:100%;
}
.question-box-inner:hover{
background:#f5f5f5;
}
.question-title{
position:absolute;
top:5px;
left:5px;
color:#556;
font-size:150%;
cursor:pointer;
text-decoration:none;
}
.question-title:hover{
color:#66a;
}
.question-tag{
float:left;
margin-right:5px;
background:#aaa;
color:#fff;
cursor:pointer;
padding-left:5px;
padding-right:5px;
border-radius: 5px;
margin-top:5px;
}
.question-footer{
position:absolute;
bottom:5px;
left:5px;
width:95%;
}
.question-time{
	float:right;
	color:#77aa77;
	font-size:75%;
	margin-left:5px;
}
.question-poster{
	float:right;
	color:#77aa77;
	font-size:75%;
cursor:pointer;
}
.deletelink{
float:right;
color:#999;
cursor:pointer;
margin-right:10px;
font-size:75%;
}
.undeletelink{
float:right;
color:#999;
cursor:pointer;
margin-right:10px;
font-size:75%;
}
.deletelink:hover{
color:#333;
}
.deletelink:active{
color:#000;
}
.locklink{
float:right;
color:#999;
cursor:pointer;
margin-right:10px;
font-size:75%;
}
.unlocklink{
float:right;
color:#999;
cursor:pointer;
margin-right:10px;
font-size:75%;
}
.editlink:hover{
color:#333;
}
.editlink:active{
color:#000;
}
.editlink{
float:right;
color:#999;
cursor:pointer;
margin-right:10px;
font-size:75%;
}
.editlink:hover{
color:#333;
}
.editlink:active{
color:#000;
}
.question-poster:hover{
background:#eee;
}
.question-center{
width:100%;
position:absolute;
top:35px;
left:5px;
}
.question-stats{
width:200px;
}
.question-stat{
float:left;
text-align:center;
padding:5px;
width:45px;
}
.question-stat-value{
font-size:140%;
}
.question-stat-title{
font-size:75%;
}
.question-desc{
float:right; 
margin-top:5px;
color:#333;
width:calc(100% - 170px);
}
.tutorial-box{
height:220px;
width:100%;
border-bottom:1px solid #DDD;
padding-bottom:5px;
position:relative;
}
.tutorial-box-inner{
width:100%;
height:100%;
}
.tutorial-box-inner:hover{
background:#f5f5f5;
}
.tutorial-center{
width:100%;
position:absolute;
top:35px;
left:5px;
}
.tutorial-stats{
	float:left;
width:50px;
}
#sidebar-booksmarks{
	font-size:100%;
	font-weight:600;
	color:#666;
}
.bookmark-record{
color:#336;
text-decoration:underline;
width:270px;
text-overflow: ellipsis; 
overflow:hidden !important;
 display:inline-block;
	font-family:'arial';
	 white-space: nowrap;
}
.bookmark-btn{
	padding-top:5px;
	float:left;
width:38px;
cursor:pointer;
}

#sidebar-tut-collection{
	font-size:100%;
	font-weight:600;
	color:#666;
	width: 300px;
}
#sidebar-tut-collection a{
	text-decoration:none;
	color:#666;
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display:inline-block;
}
.collection-record{
	margin-left:25px;
	color:#666;
	width: 250px;
}
.collection-record-text{
	text-decoration:none;
	color:#666; 
	width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display:inline-block;
}
.tutorial-stat{
float:left;
text-align:center;
padding:5px;
width:45px;
}
.tutorial-stat-value{
font-size:140%;
}
.tutorial-stat-title{
font-size:75%;
}
.tutorial-summary-image{
	float:left;
	width:150px;
	height:150px;
	margin-top:5px;
}
.tutorial-desc{
float:left; 
margin-top:10px;
color:#333;
margin-left:15px;
width:calc(100% - 220px);
text-overflow: ellipsis; 
overflow:hidden !important;
height:125px;
 display:inline-block;
}
#search-box{
margin-top:4px;
 border-radius: 5px;
float:right;
height:25px;
font-size:140%;
padding-left:5px;
}

/* tutorial stuff */
#view-tutorial-container{
position:relative;
width:98%;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #DDD;
float:left; 
}

#view-tutorial-title{
float:left; 
color:#556;
font-size:200%;
margin-left:10px;
margin-top:10px;
width:calc(100% - 188px);
}
.view-tutorial-center{
margin-top:10px;
width:calc(98% - 150px);
float:right; 
margin-bottom:35px;
}
.tutorial-content-container{
position:relative;
width:98%;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #DDD;
margin-top:15px;
float:left; 
padding-bottom:10px;
}
.tutorial-collection-add-tutorial{
	text-align:center;
	border:1px dashed #0000CC;
}
.tutorial-collection-add-tutorial:hover{
background:#f5f5f5;
}
.tutorial-collection-add-tutorial a{
	line-height:220px;
	text-decoration:none;
	font-size:175%;
	color:#000;
}

/* question stuff */
#main-question-container{
position:relative;
width:98%;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #DDD;
float:left; 
}

#main-question-title{
float:left; 
color:#556;
font-size:200%;
margin-left:10px;
margin-top:10px;
width:calc(100% - 90px);
}

.rating-box{
float:left;
height:43px;
width:48px;
margin-top:10px;
margin-left:25px;
}
.answer-desc{
color:#333;
width:98%;
margin-left:auto;
margin-right:auto;
}
.view-question-center{
margin-top:10px;
width:98%;
float:right; 
margin-bottom:35px;
}

.view-question-rating{
text-align:center;
font-size:15px;
line-height:18px;
color:#556;
float:left; 
width:100%;
}

.view-question-rate-up{
top:5px;
left:5px;
cursor:pointer;
float:left; 
width:100%;
}
.view-question-rate-down{
left:5px;
top:33px;
cursor:pointer;
float:left; 
width:100%;
}
.answer-rate-up{
top:5px;
left:5px;
cursor:pointer;
float:left; 
width:100%;
}
.answer-rate-down{
left:5px;
top:33px;
cursor:pointer;
float:left; 
width:100%;
}

/** comments **/
.comment-container{
float:left;
width:98%;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #ddd;
padding-left:15px;
padding-bottom:5px;
}
.comments-title{
margin-top:10px;
float:left;
text-align:left;
padding-left:10px;
width:100%;
color:#CCC;
font-size:100%;
width:120px;
border-bottom:1px solid #ddd;
margin-bottom:10px;
}

.comments-comment{
float:left;
width:100%;
border-bottom:1px solid #eee;
margin-top:5px;
margin-bottom:10px;
}
.comments-comment:hover{
background:#f7f7f7;
}
.comment-rating{
float:left;
height:25px;
width:50px;
}
.comment-text{
width:calc(100% - 55px);
float:left;
font-size:75%;
color:#999;
}
.comment-time{

	float:right;
	color:#77aa77;
	font-size:75%;
	margin-left:5px;
}
.comment-poster{
float:right;
font-size:75%;
cursor:pointer;
color:#99f;
}
.comments-add-lnk{
width:100%;
float:left;
}
.comments-add-lnk a{
text-decoration:none;
color:#77aa77;
font-size:70%;
margin-left:10px;
}

.answer-center{
float:left; 
color:#333;
width:calc(100% - 74px);
margin-bottom:45px;
}
.after-main-question-ad{
width:100%;
margin-top:15px;
margin-bottom:15px;
float:left;
}
.question-top-ad{
width:100%;
margin-top:15px;
margin-bottom:15px;
float:left;
}
#chosen-answer-text{
font-size:75%;
margin:5px;
color:#000;
float:left;
margin-right:100%;
width:100px;
text-align:center;
border:1px solid #990;
border-radius:5px;
padding:3px;
background:#cc0;
}
.answer-container{
position:relative;
width:98%;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #DDD;
float:left; 
margin-top:25px;
}
.chosen-answer{
background:#cfc;
}
.deleted-answer{
background:#fcc;
}

.poster-tooltip{
float:left;
width:210px;
}
.poster-tooltip-name{
width:100%;
font-size:140%;
float:left;
}
.poster-tooltip-name:hover{
color:#99F;
}

.poster-tooltip-info{
width:100%;
font-size:75%;
float:left;
}

/* profile page */
#profile-container{
float:left;
width:98%;
margin-left:10px;
margin-top:10px;
}
#profile-title{
float:left;
font-size:200%;
color:#669;
padding-right:25px;
border-bottom:1px solid #668;
}

#profile-tab-container{
margin-top:15px;
width:100%;
float:left;
border:1px solid #ccc;
min-height:500px;
background:#f9f9f9;
margin-bottom:15px;
padding-bottom:15px;
}

#profile-tab-button-container{
width:150px;
background:#ddd;
float:left;
}
#profile-tabs{
	width:calc(100% - 250px);
	float:left;
}
.profile-tab-button{
float:left;
width:149px;
border-bottom:1px solid #ccc;
border-right:1px solid #ddd;
color:#666;
height:35px;
font-size:120%;
text-align:center;
cursor:pointer;
line-height:35px;
}
.profile-tab-button:hover{
background:#000;
color:#ccc;
}
.profile-tab-button:active{
background:#333;
color:#ccc;
}
.profile-tab-button.selected{
background:#f9f9f9;
border-right:1px solid #f9f9f9;
color:#333;
}

.overflow-ellipsis{
	text-overflow: ellipsis; 
	overflow:hidden !important; 
	white-space: nowrap;
	display:inline-block;
}

#tutorial-files-container{	
width:100%;
margin-top:0px;
margin-bottom:15px;
float:left;
}

#tutorial-files-container .container {
	width: 400px;
	border:1px solid #ccc;
	text-align:center;
	margin:0 auto;
	overflow:auto;
	padding:3px;
}

#tutorial-files-container .container .file {
	width: 100%;
	text-align:left;
	overflow:auto;
}
#tutorial-files-container .container .file:hover {
	width: 100%;
	text-align:left;
	overflow:auto;
	background:#eee;
}

#upload-file-btn{
	float:left;
	width:100%;
	cursor:pointer;
	text-align:left;
	margin-top:2px;
}
#upload-file-btn:hover{
	background:#eee;
}


/** new tutorials **/
#new-tutorial-container{
position:relative;
width:96%;
margin-left:auto;
margin-right:auto;
float:left; 
padding:15px;
}
.new-tutorial-comment-container{
width:98%;
float:left;
}

#new-tutorial-tags-actual{
position:absolute;
left:0;
top:3px;
padding-left:5px;
}

/** new questions **/
#new-question-container{
position:relative;
width:96%;
margin-left:auto;
margin-right:auto;
float:left; 
padding:15px;
}

.input-error-msg{
float:left;
width:98%;
color:#F00;
margin:10px;
}

.new-question-comment-container{
width:98%;
float:left;
}

#new-question-tags-actual{
position:absolute;
left:0;
top:3px;
padding-left:5px;
}

/****** input preview *******/
#description-preview{
margin-top:25px;
margin-bottom:25px;
float:left;
width:100%;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding-top:30px;
color:#333;
word-wrap: break-word;
overflow-x:auto;
position:relative;
}

.questioninputcode{
text-align:center;
display:inline-block;
font-family: Courier, Monaco, monospace;
width:100%;
margin-top:20px;
margin-bottom:20px;
}
.view-summary{
font-family:'Arial';
white-space:pre-wrap;	
}
.view-desc{
    white-space: pre-wrap;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
font-family:'Arial';
}
.view-desc ol{
margin-left:10px;
}
.view-desc .hilight{
color:#ea0;
background:#eee;
font-family:'monospace';
}
.view-desc pre{
width:100%;
}
.view-desc code{
display:inline-block;
width:90%;
background:#ddd;
border:1px solid #ccc;
padding:10px;
overflow-x:auto;
margin-left:auto;
margin-right:auto;
text-align:left;
overflow-y:auto;
max-height:500px;
}

.view-desc .image{
margin-left:auto;
margin-right:auto;
text-align:center;
}
.view-desc .image img{
max-width:50%;
max-height:400px;
}

#imagedialog{
position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  width:600px;
  height:300px;
  margin-top:-150px;
  margin-left:-300px;
  background:#FFF;
  border:2px solid #000;
}
#dropimagebox{
height:250px;
width:100%;
float:left;
background:#eee;
cursor:pointer;
}
#dropimagebox .text{
width:100%;
float:left;
margin-top:100px;
font-size:200%;
text-align:center;
font-family:'arial';
}
#dropimagebox:hover{
background:#ddd;
cursor:pointer;
}
#dropimagebox:active{
background:#aaa;
cursor:pointer;
}
#dropimagebox.dragging{
background:#aaa;
}

#netimagebox{
width:100%;
height:50px;
float:left;
}
#netimageinput{
margin-top:7px;
height:35px;
font-size:80%;
line-height:35px;
width:300px;
float:left;
margin-left:15px;
}
#add-image-submit-btn{
float:right;
height:30px;
margin-top:7px;
margin-right:15px;
line-height:30px;
padding-left:15px;
padding-right:15px;
}
.profile-row{
	width:98%;
	font-size:120%;
	line-height:24px;
}
#profile-section{
	width:100%;
	padding:10px;
}
#rep-section{
	width:98%;
	padding:10px;
}
#rep-section .rep-row{	
border-bottom:1px solid #666;
padding:10px;
float:left;
width:98%;
}
#notifications-section .rep-row,
#files-section .rep-row{
border-bottom:1px solid #666;
padding:0;
float:none;
width:100%;
height:30px;
line-height:30px;
font-size:120%;
text-align:left;
}
#notifications-section .rep-row:hover,
#files-section .rep-row:hover{
	background:#eee;
}

.rep-row.new {
	background:#ddee99;
}
.rep-row.new:hover{
	background:#99aa66;
}

#new-tutorial-summary-image{
	float:left;
	cursor:pointer;
}

/* paging */
.paging-container{
width:100%;
text-align:center;
float:left;
}
.paging-container .page{
padding:10px;
height:20px;
font-size:120%;
line-height:20px;
margin:3px;
border:1px solid #CCC;
text-align:center;
float:left;
text-decoration:none;
color:#666;
}
.paging-container .page:hover{
background:#eee;
}
.paging-container .current,
.paging-container .page:active{
background:#ccc;
color:#ff8300;
}

.member-block{
	float:left;
	width:310px;
	border:1px solid #cccccc;
	margin:10px;
	padding:5px;
}
.member-block a{
	text-decoration:none;
	color:#666;
	background:#FFF;
}
.member-block:hover{
	text-decoration:none;
	color:#CCC;
	background:#000;
}
.member-block:active{
	text-decoration:none;
	color:#CCC;
	background:#333;
}
.member-block a:hover{
	text-decoration:none;
	color:#CCC;
	background:#000;
}
.member-block a:active{
	text-decoration:none;
	color:#CCC;
	background:#333;
}
.member-block-name{
	font-size:140%;
	font-weight:600;
	margin-bottom:2px;
}
.member-block-info{
	margin-left:5px;
	width:195px;
	font-size:70%;
}

/******* input *********/
/*** tutorial input ***/
#new-tutorial-title{
height:35px;
width:100%;
}
#new-tutorial-tags{
height:35px;
width:100%;
}
#new-tutorial-desc{
float:left;
width:100%;
margin-top:15px;
}
#new-tutorial-desc textarea{
float:left;
width:100%;
height:400px;
}
#new-tutorial-desc-input{
margin-top:10px;
width:98%;
float:left;
}
#new-tutorial-summary{
float:left;
width:100%;
margin-top:15px;
}
#new-tutorial-summary textarea{
float:left;
margin-left:5px;
width:calc(100% - 105px);
height:100px;
}
#new-tutorial-summary-input{
margin-top:10px;
width:98%;
float:left;
}
.tutorial-input input{
padding-left:5px;
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.tutorial-input textarea{
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
resize: none;
padding:5px;
}
.tutorial-summary-input input{
padding-left:5px;
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.tutorial-summary-input textarea{
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
resize: none;
padding:5px;
}

/*** question input ***/
#new-question-title{
height:35px;
width:100%;
}
#new-question-tags{
height:35px;
width:100%;
}
#new-question-desc{
float:left;
width:100%;
margin-top:15px;
}
#new-question-desc textarea{
float:left;
width:100%;
height:400px;
}
#new-question-desc-input{
margin-top:10px;
width:98%;
float:left;
}
.new-question-comment-container textarea{
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
resize: none;
padding:5px;
width:100%;
}
.question-input input{
padding-left:5px;
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.question-input textarea{
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
resize: none;
padding:5px;
}
/*** answer input ***/
#new-answer-desc{
margin-top:20px;
float:left;
width:98%;
padding-left: 5px;
}
#new-answer-desc textarea{
float:left;
width:100%;
height:400px;
}
.input-buttons{
float:left;
width:100%;
padding:2px;
font-family: 'sans-serif';
}
.input-buttons .button{
float:left;
width:34px;
height:34px;
font-size:10px;
font-weight:100;
line-height:34px;
text-align:center;
cursor:pointer;
}
.input-buttons .large-text{
font-size:120%;
}
.input-buttons .list{
font-size:8px;
line-height:8px;
}
.input-buttons .list ol{
margin-top:6px;
margin-left:17px;
}
.input-buttons .list ul{
margin-top:6px;
margin-left:17px;
}
.input-buttons li{
height:8px;
}

.input-buttons .divider{
border-right:1px solid #ccc;
float:left;
height:34px;
margin-left:2px;
margin-right:2px;
}

.input-buttons .button:hover{
background:#eee;
}
.input-buttons .button:active{
background:#ddd;
}

.comment-input textarea:hover,
.question-input textarea:hover,
.question-input input:hover,
.tutorial-input textarea:hover,
.tutorial-input input:hover,
.tutorial-summary-input textarea:hover,
.tutorial-summary-input input:hover
{
    outline:0px !important;
    -webkit-appearance:none;
border-top:1px solid #cdc;
border-bottom:1px solid #cdc;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-radius: 0px;
background:#f9f9f9;
}

.comment-input textarea:focus,
.comment-input textarea:active,
.question-input input:focus,
.question-input textarea:focus,
.question-input textarea:active,
.tutorial-input input:focus,
.tutorial-input textarea:focus,
.tutorial-input textarea:active,
.tutorial-summary-input input:focus,
.tutorial-summary-input textarea:focus,
.tutorial-summary-input textarea:active{
    outline:0px !important;
    -webkit-appearance:none;
border:1px solid #99F;
border-radius: 5px;
background:#fff;
}

.question-input{
position:relative;
float:left;
width:98%;
}
.question-input input{
height:35px;
width:100%;
padding-left:5px;
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
}

.tutorial-input{
position:relative;
float:left;
width:98%;
}
.tutorial-input input{
height:35px;
width:100%;
padding-left:5px;
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
}

.tutorial-summary-input{
position:relative;
float:left;
width:98%;
}
.tutorial-summary-input input{
height:35px;
width:100%;
padding-left:5px;
border-radius: 0px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #fff;
border-right:1px solid #fff;
}

/******* buttons *******/
#ask-a-question-btn{
float:right;
padding:5px;
padding-top:2px;
padding-bottom:2px;
margin-right:30px;
margin-top:3px;
font-size:120%;
text-decoration:none;
}
#post-a-tutorial-btn{
float:right;
padding:5px;
padding-top:2px;
padding-bottom:2px;
margin-right:30px;
margin-top:3px;
font-size:120%;
text-decoration:none;
}

#search-submit-btn{
border-radius: 5px;
float:right;
padding:3px;
margin-top:3px;
margin-left:5px;
}

#post-answer-btn{
float:left;
font-size:120%;
}
#post-question-btn{
float:left;
margin-top:20px;
font-size:120%;
}
#post-pm-btn{
float:left;
margin-top:20px;
font-size:120%;
}
#post-news-btn{
float:left;
margin-top:20px;
font-size:120%;
}
#save-tutorial-btn{
float:left;
margin-top:20px;
font-size:120%;
}
#publish-tutorial-btn{
float:right;
margin-top:20px;
font-size:120%;
}

.comment-btn{
display:inline;
margin-top:5px;
float:left;
}

.question-btn{
 border-radius: 5px;
padding:3px;
border:1px solid #CCC;
background:#333;
color:#fff;
}
.question-btn:hover{
color:#fff;
background:#666;
cursor:pointer;
}
.question-btn:active{
background:#ccc;
color:#666;
}

.tutorial-btn{
 border-radius: 5px;
padding:3px;
border:1px solid #CCC;
background:#333;
color:#fff;
}

.tutorial-btn:hover{
color:#fff;
background:#666;
cursor:pointer;
}
.tutorial-btn:active{
background:#ccc;
color:#666;
}
.mark-answer-bottom{
float:left;
color:#fff;
cursor:pointer;
margin-right:10px;
	font-size:75%;
 border-radius: 5px;
border:1px solid #CCC;
padding:5px;
padding-bottom:3px;
padding-top:3px;
background:#060;
}
.mark-answer-bottom:hover{
color:#fff;
border:1px solid #FF0;
}
.mark-answer-bottom:active{
color:#fff;
background:#000;
border:1px solid #FF0;
}


@media (max-width: 980px) {
    #tutorial-order-container {
		display:none;
    }
    #question-order-container {
		display:none;
    }
	#search-box{
		width:150px;
	}
}