Milan blog CSS

blog

@charset "utf-8";
/* CSS Document */

body {font-family:'Lora', Times, serif;
background:#D5D3D3;
font-size: 1.7em;
line-height: 2.2em;}

body a {color:#132DC9;}

body a:hover {color:#132DC9;}

.container{max-width:960px;}

#first {border-radius: 20px 20px 0 0;}

#last {border-radius: 0 0 20px 20px;}

aside {border-radius: 20px;}

article h2 {font-family: 'Oswald', cursive;}



/*NAVIGATION:*/

nav {background-color:#3F3F3F;}



/*NAMEHEAD:*/
nav p {font-size: 1.3em;
text-align:left;
margin-top: 8px;
margin-left: 10px;
font-family:'Oswald', sans-serif;
letter-spacing: 0.05em;}

.namehead a {text-decoration:none;
color: #D0D0D0;}

.namehead a:hover {color:#D0D0D0;}




/*NAVBAR:*/
.fade_nav {margin: 9px;}

.fade_nav li {
	margin-right: 24px;
   display: inline-block;
   }
   
   
   
   .fade_nav li a {text-decoration:none;
   color: #C8C8C8;
  background: #3F3F3F;
   padding: 6px 14px;
   letter-spacing: 0.05em;
	font-family:'Oswald', sans-serif;
	border-radius: 5px;
	transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
   }

   .fade_nav li a:hover {
	  color: white;
	  background: #1E1E1E;
      }
	 




/*Article section*/
section article {background: #E9E2E2;
padding:2%;}

section {margin-top:100px;}

article hr {
	width: 90%;
	border-bottom: 1px dotted #B4B4B4;
	margin-top: 30px;}

#first {padding-bottom: 90px;}

#last {padding-bottom: 90px;}

article {padding-bottom: 90px;}

article h2 {font-family: 'Oswald', cursive;
font-weight: bold;
letter-spacing: 0.05em;}

#first h2 a {text-decoration:none;
color: #212121;
font-size: 1.4em;}

#first h2 a:hover{border-bottom: 2px solid #D4D3D3;
color: #132DC9;}

#last h2 a {text-decoration:none;
color: #212121;
font-size: 1.4em;}

#last h2 a:hover{border-bottom: 2px solid #D4D3D3;
color: #132DC9;}

article h2 a {text-decoration:none;
color: #7C7B7B;
font-size: 1.4em;}

article h2 a:hover{border-bottom: 2px solid #D4D3D3;
color: #121AB4;}

.date {font-size: 0.8em;
color: #9B9B9B;}

.date a {text-decoration:none;}

article time {font-style:italic;
font-weight:bold;}

.smallprofile {width: 3em ;
vertical-align:bottom;
border-radius: 2em;
margin: 5px;}




/* ARTICLE IMAGES */
.fade {
	max-height: 250px;
	max-width: 300px;
	border-radius: 0.4em;
	margin-top:30px;
	margin-bottom:10px;
   opacity: 1;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
   }
   
   .fade:hover {
      opacity: 0.85;
      } 




/*ASIDE*/
aside {background: #E9E2E2;
padding:4%;
font-size: 0.85em;
}

aside p {color: #606060;
opacity: 0.9;}


aside .twt {width:12%;
margin-right:10px;
margin-bottom:2px;}

.twitter-follow-button {background-color: #01ADEE;
color: white;
padding-top:3px;
padding-bottom:4px;
border-radius: 5%;
padding-left: 8px;
padding-right: 8px;
transition-property: background-color;
transition-duration: 0.5s;
transition-timing-function: linear;
    }

.twitter-follow-button:hover {text-decoration:none;
background: #132DC9;
color:white;}





/*RECENT POSTS*/
aside .main {text-align:left;
margin-top: 50px;}

aside .main h1 {font-family:'Oswald', cursive;
font-size: 1.6em;
letter-spacing: 0.05em;
border-bottom: 1px solid #ACACAC;
margin-bottom: -5px;
padding-bottom: 6px;
margin-left: 7px;}

.main h1 a {text-decoration:none;
color:black;}

.main ul {list-style:none;}

.main ul li {margin-left: -30px;
font-family:'Oswald', cursive;
font-size: 0.85em;
letter-spacing: 0.05em;
}

.main ul li {border-bottom: 1px solid #ACACAC;}

.main ul li a {color: #606060;
opacity: 0.9;}

.main ul li a:hover {color:#132DC9;}

/*PAGENAVI*/

.wp-pagenavi {
margin-top: 20px;
margin-bottom: 20px;
margin-right: 0px;
padding:10px;}

.wp-pagenavi a {text-decoration:none;
padding:6px 20px;
border: 2px solid #606060;
letter-spacing: 0.05em;
opacity: 0.9;
color: #5A5959;
font-family:'Oswald', sans-serif;
border-radius: 5px;
transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;}

.wp-pagenavi a:hover {background-color:#1E1E1E;
color: white;
border: 2px solid #1E1E1E;} 


/*FOOTER*/

footer {font-family: 'Oswald', sans-serif;
background-color: #3F3F3F;
line-height: 1.5em;}

footer p {margin-top: 10px;} 

footer ul {margin-top: 15px;
text-align:center;}

footer ul li {display:inline;
margin: 20px;
}

footer a .mail {width: 4.5%;
padding:5px;
border:hidden;}

footer a .fbook {width: 6.5%;
padding:5px;
border:hidden;}

footer a .twitt {width: 7.5%;
padding:5px;
border:hidden;}

footer a .linkedin {width: 5.5%;
padding:5px;
border:hidden;}

footer p {font-size: 0.75em;
color: #D0D0D0;}




@media screen and (max-width: 420px) {
	
	section{ margin-top: 75px;}
		
	section h2 {font-size: 1.4em;}
	
	body {font-size: 1.4em;}

	.fade_nav {height: 35px;
	 overflow: hidden;
	display: inline;
	text-align: center;
	}
	
	.fade_nav li {font-size: 0.7em;
	margin-right: 5px;}
	
	.namehead {text-align: center;
	margin-bottom: 0;}
    
	
	.fade {width: 100%;}
	
	footer ul li {display:inline;
	margin: 10px;}
	
	footer a .mail {width: 8.5%;
padding:0;
border:hidden;}

footer a .fbook {width: 13%;
padding:0;
border:hidden;}

footer a .twitt {width: 13%;
padding:0;
border:hidden;}

footer a .linkedin {width: 10.5%;
padding:0;
border:hidden;}

.wp-pagenavi a {padding: 2px;}
}


@media screen and (max-width: 970px) {
	section{ margin-top: 75px;}
		

	.fade_nav {
	text-align: center;
	margin-top: -3px;
	margin-bottom: -2px;
	}
	
	
	.namehead {text-align: center;
	margin-bottom: 0;}
    
	
	footer ul li {display:inline;
	margin: 10px;}
	
	footer a .mail {width: 5.5%;
padding:0;
border:hidden;}

footer a .fbook {width: 9.5%;
padding:0;
border:hidden;}

footer a .twitt {width: 10%;
padding:0;
border:hidden;}

footer a .linkedin {width: 7%;
padding:0;
border:hidden;}

.wp-pagenavi {margin-left: 35px;}

aside .twt {width: 5%;}	
	
}