body{
 margin:0px;
}

.imageClass{
 height:14px;
 width:14px;
}

.formClass{
 margin-left:15px;
}

#main-header {
 height:104px;
 width:100%;	
 background-color:#18ABB5;
}

#nav-bar{
 margin-left:20%;
}

#submit-box{
 height:60px;
 width:120px;
 background-color:#18ABB5;
 color:#F8F7CE;
 font-family:verdana;
 font-size:18px;
 margin-left:20px;
 margin-top:20px;
 text-align:center;
 cursor:pointer;
 padding:2px, 2px, 2px, 2px;
}

.text-style{
color:#18ABB5;
font-size:17px;
font-family:sans-serif;

}


#articleArea{
height:100%;
width: 100%;
position:absolute;
}


.article{
height:40px;/*30, 35, 32, 25, 28, 75*/
background-color:#FFFFFF;/*white;*/
border:none;
/* margin-left:225px; */
/*226, 200, 180px with upvote;*/
/*margin-right:250px;*/
/*font-family:sans-serif;*/
/*border-bottom:1px solid #ddd;*/
padding-top:10px;
padding-right:20px;
padding-left:0px;
padding-bottom:20px;
cursor:pointer;
margin-left:16%;
}

.article-entry{
display:inline-block;
}

h2{
height:2px;/*35, 32, 25, 28, 75*/
background-color:#FFFFFF;/*white;*/
border:none;
margin-left:16%;/*225, 200*/
/*margin-top:7px;*/
padding-top:5px;/*20*/
padding-right:10px;
padding-left:0px;/*13*/
padding-bottom:18px;
font-size:20px;
font-family:verdana;
color:#18ABB5;
font-weight:100;
}

.title-header{
display: inline-block;
}

.title{
cursor:pointer;
font-size:18px;/*16*/
text-decoration:none;
color:black;/*#504a4a;/*#3D3D3D;/* #222*/
/*margin-left:10px;*/
font-family:verdana; /*'Open Sans',*/
line-height: 30px;
font-weight: 400;
}

.title:hover{
/*background:#e6ecf0;*/
}
/*color for header in case black is too dark:#3d4647;*/

.domain{
height:28px;
background-color:white;
cursor:pointer;
text-align:center;
font-family:/* 'Open Sans',*/ verdana;
font-size:13px;/*15*/
text-decoration:none;
color:#aaa;/*gray;*/
padding-top:5px;
/*margin-left:28px with upvote;/*20*/
}


.anchor{
height:28px;
width:93px;
border-radius:15px;
border:1px solid #ddd;
/*border:none;*/
/*font-family:sans-serif;*/
background-color:white;
cursor:pointer;
text-align:center;
font-size:12px;
text-decoration:none;
color:gray;/*#BFBFBF*/
margin-left:28px;
}


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

.anchor-comment{
display:block;
text-decoration:none;
color:gray;
}

/*.paragraph{
font-size:16px;
margin-left:20px;
margin-top:-5px;
display:inline-block;
}*/

.articleCounter {
display: inline-block;
font-size:25px; 
}

#logo-text {
color:#F8F7CE;
/*height:22px;
width:250px;
border-radius:1px;
border:1px solid #F8F7CE;*/
font-family:verdana;/*sans-serif;*/
/*font-weight:bold;*/
/*font-style:italic;*/
font-size:18px;/*18, 20px;*/
text-align:center;
margin:auto;
padding:10px;   
text-decoration:none;
display:block;
}

#comment{
}


.font{
font-size:19px;/*18, 20*/
text-decoration:none;
/*font-weight:bold;*/
}

#logo{
text-decoration:none;
}

.logo-sub-text{
font-size:16px;/*18, 16-verdana*/
color:#F8F7CE;
/*text-align:center;*/
font-family:verdana;/*'Source Sans Pro';sans-serif;*/
/*font-style:italic;*/
/*font-weight:bold;*/
/*display:inline-block;*/
/*opacity:.8;*/
text-decoration:none;

/*padding:10px;*/
/*display:inline-block;*/
}

table{width:100%;}

th{font-weight:lighter;}


/*.userName{
color:#F8F7CE;
font-family:sans-serif;
margin-bottom:30px;
font-size:24px;
pointer-events:none;
*/

.submit{   
text-decoration:none;
font-family:sans-serif;
font-size:24px;
color:azure;   
}

/*#main-nav{
width:1200px;
/*margin-left:200px;}*/


/*.main-nav-item{
display:inline-block;
position:relative;

}*/


#buttonSubmitMain, #loginButton, #logoutButton, #buttonSubscribeMain,.button-tabs, #button-category{
height:28px;/*30*/
width:90px;
border-radius:15px;
border:1.4px solid #F8F7CE;
/*border:none;*/
font-family:sans-serif;
font-size:18px;/*19 without border*/
background-color:#18ABB5;
color:#F8F7CE;
cursor:pointer;
text-align:center;
/*font-weight:350;/*340*/
/*opacity:0.8;*/
/*display:inline-block;*/
}

#buttonSubmitMain:hover{
border:2px solid #F8F7CE;
/*border-radius:15px;*/
}

#loginButton:hover{
border:2px solid #F8F7CE;/*1.4*/
/*border-radius:15px;*/
}

#logoutButton:hover{
border:2px solid #F8F7CE;
/*border-radius:15px;*/
}

.button-tabs:hover{
border-bottom:1.4px solid #F8F7CE;
opacity:1;
}


.dropdown {
position: relative;
display: inline-block;
}

#line-div {
height:1px;
margin-left:16%;
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#ddd), color-stop(100%,#ffffff));
background:linear-gradient(to right, #ddd, #fff);
}

.upvote-icon{
display:inline-block;
margin-right:10px;
font-family:verdana;
font-size:18px;
color:#504a4a;
}

.dropbtn {
background-color:#18ABB5;
color:#F8F7CE;
font-size:24px;/*26*/
border: none;
transform: rotate(90deg);
border:none;
font-family:sans-serif;
cursor:pointer;
text-align:center;
font-weight:350;
}

.dropdown-content {
display:none;
position:absolute;
background-color:white;/*#f1f1f1;*/
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: #18ABB5;/*gray*/
padding: 12px 16px;
text-decoration: none;
display: block;
font-family:verdana;
text-align:left;
}

.dropdown:hover .dropdown-content{
display: block;
}

.dropdown-content a:hover {
background-color:#18ABB5;
color:white;
}


/*.dropdown:hover .dropbtn {background-color:#F8F7CE;}*/


#displayName{
height:30px;
border:none;
font-family:sans-serif;
font-size:24px;
background-color:#18ABB5;
color:#F8F7CE;
}

.message{
display:block;
font-size:16px;
font-family:sans-serif;
color:#3D3D3D;
}


#logoutButton{
/*margin-right:20px;*/
/*float:right;*/
}

#buttonSubmitMain{
/*margin-left:20px;*/
/*float:left;*/
}

#loginButton{
/*margin-right:20px;*/
}

/*.userName{
height:30px;
width:90px;
font-family:sans-serif;
font-size:24px;
color:#F8F7CE;
}
*/

/*.float-right {
float:right;
}*/


/*#about{   
text-decoration:none;
font-family:sans-serif;
font-size:24px;
color:white;
margin-left:20px;  
margin-right:20px;
}*/

.topsubmit{
height:70px;     
width:500px;
background-color:#ccc;
margin-top:0;    
margin-bottom:20px; 
   
}


#titleField, #urlField{
height:30px;/*25px;*/
width:600px;/*500px;*/
border:1px solid #ddd;     
border-radius:5px;/*15px;*/
font-size:18px;
}

#summaryField{
height:100px;
width:500px;
border: 1px solid #ddd;
border-radius:15px;
font-size: 18px;

}

#categoryField{
height:30px;
width:600px;/*500px;*/
border: 1px solid #ddd;
font-size: 18px;
border-radius:5px;/*15px;*/
}


#messageField{
height:100px;
width:500px; 
border-radius:2px;
border: 1px solid #ddd;     
}

#userName, .password, .email{
height:25px;
width:300px;
border: 1px solid #ddd;     
/*border-radius:2px;*/
font-size: 18px;
border-radius:15px;     
}

#submitButton,.loginSubmitButton {
background-color:#18ABB5;/*white;*/
color:#F8F7CE;/*black;*/
cursor:pointer;
border:1px solid #fff;

}


.loginSubmitButton {
height:30px;
border-radius:15px;
font-size:15px;
}

#submitButton{
height:35px;
width:160px;/*90*/
font-size:17px;
border-radius:5px;
}



.loginSubmitButton{
width:80px;
}



#submitButton{
/*background-color:gray;*/
}

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

/*#submitButton:hover{
background-color:#ddd;
}*/


#submit-form {
/*display:none;*/
margin-top:20px;
margin-left:20%;/*30%, 25%*/
/*text-align:left;*/ 
}

#item-title{
margin-left:1%;/*10%;*/
color:#18ABB5;
font-family:sans-serif;
font-size:19px;
font-weight:bold;
}

.text-style{
color:#18ABB5;
font-size:17px;
font-family:sans-serif;
}




#subscribeForm{
display:none;
margin-top:50px;
text-align:center;
}

.login-form{
display:inline-block;  
text-align:left;
}

h3{
color:#18ABB5;
font-family:sans-serif;
font-size:19px;
/*font-weight:bold;*/
}


#verticalAlign{
vertical-align:top;
}

#formMessage{
display:none;
text-align:center;
}

.number{
font-size:18px;
display:none;
}

/*.style-font{
font-style:sans-serif;
}*/



/*color:#3d4647;*/


@media only screen and (max-width: 900px) {
.title {
font-size:15px;/*16 before 15 when artile was 75, 17*/
margin-left:0px;
margin-right:7px;
color:black;
line-height:25px;
}

.title:hover{
/*background:white;*/
}

.dropbtn{
font-size:25px;
}


h2{
margin-left:4%;/*20, 23, 25, 20*/
/*margin-top:12px;*/
padding-top:5px;
padding-bottom:5px;
font-size:16px;/*18*/
}


#articleArea{
width:100%;
}

.upvote-icon{
font-size:16px;/*17*/
margin-right:2px;
display:inline-block;
}


.article{
height:auto;/*66px;/*66, 68, 55*/
padding-top:8px;/*8, 10, 12*/
margin-left:0px;
/* padding-left:13px; */
border:none;
border-bottom:1px solid #ddd;
/*padding-right:20px;
padding-left:13px;*/
padding-bottom:15px;
}

.article-entry{
margin-left:4%;
/* margin-left:8px; *//*11, 13*/}


#line-div{
display:none;
}

#main-header{
height:90px;
}

/*.artcile{
padding-top:5px;
}*/


.message{
font-size:15px;
}


#logo-text{
padding:2px;
font-size:18px;
}


.logo-sub-text{
font-size:15px;
font-family:sans-serif;
/*font-weight: bold;*/
/*margin-left:1px;
display:inline-block;
margin-left:6.5%;/*5% if font-size is 13*/
/*padding:2px;*/
/*font-weight:340;*/
}

.domain{
font-size:13px;
margin-left:4%;/*9px; *//*13, 1*/
}

.anchor{
font-size:11px;
margin-left:0px;
height:24px;
width:80px;
}

#buttonSubmitMain, #loginButton, #logoutButton, #displayName, #buttonSubscribeMain, .readButton{
/*width:50px;
height:20px;*/
font-size:16px;/*originally 15*/
/*text-align:center;*/
border:none;
height:25px;/*none*/

}

/*.readButton{
border:1.5px solid #18ABB5;
width:120px;
font-size:16px;
}*/

/*#buttonSubscribeMain{
margin-left:10px;
}*/

#buttonSubmitMain:hover{
border:none;
}

#loginButton:hover{
border:none;
}

#buttonSubmitMain{
margin-left:-3px;/*originaly 6px*/
}

#loginButton{
margin-right:-3px;

}

#logoutButton{
margin-right:-3px;
}

#displayName{
margin-right:-14px;
}


#userName, #titleField, #urlField, #messageField{
width:280px;/*300*/
height:22px;
font-size:15px;
}

#categoryField{
width:280px;
height:32px;/*26*/
font-size:15px;
}


.imageClass{
height:4px;
width:4px;
}

.paragraph{
margin-left:0px;
}

.number{
display:none;
/*font-size:16px;
color:black;*/
}

.font{
font-size:20px;/*22*/
}

#subscribeForm{
margin-top:35px;
}

#submit-form {
margin-left:5%;/*2%;*/
}

#item-title{
margin-left:4%;
}



/*#buttonSubmitMain, #loginButton, #logoutButton, #buttonSubscribeMain{
width:76px;
height:28px;
/*height:32*
width:85}*/

}

@media only screen and (max-width: 350px) {
        .formClass{
        margin-left:0px;
        }

        #item-title{
        font-size:16px;
        }

        .text-style{
        font-size:15px;
        }
}


@media only screen and (min-width: 1900px) {
         .formClass{
        margin-left:20%;
        }

        #item-title{
        margin-left:20%;
        }

}