/*==========================
   Author: {Alonso Sánchez}
   Date:   {18 Marzo del 2018}
   
   Notes:
   Hand coded for Build a Website
   from Scratch with HTML & CSS
   by Brad Hussey
   
   Colour Palette:
   ---------------
   Light Cream:                 #f2f3ee
   Orange:			#d17f38
   Yellow:			#e8c04f
   Brown:			#4b2707
   =============================== */

/* General */

body{
    background:#f2f3ee url('../images/bg-tile.gif') top left repeat; /*Para salir del
    directorio es: '../bla/bla'*/
    color:#4b2707;
    font-size:14px;
    font-family: 'Open Sans', sans-serif,helvetica, Arial;
    /*font-family: 'Love Ya Like A Sister', cursive;
    font-family: 'Lovers Quarrel', cursive;*/ 
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizelegibility;
}
.container{
     width:924px;
     margin:0 auto;
     padding:30px 24px;
}
/* Typography */
h1,h2{
    color:#d17f38;
    font-size: 40px;
    font-weight: normal;
    line-height: 44px;
    margin:0;
    font-family: 'Love Ya Like A Sister', cursive;
    line-height: 44px;
    margin:0;
}
h1{
    text-align: center;
    padding:0 0 20px;
    background:url(../images/header-divider.png) bottom center no-repeat;
}
h1 em{
    font-style:normal;
    color:#4b2707;
    
}
h2{
    font-size:34px;
}
h3{
    margin:0;
}
p.lead{
    font-size: 30px;
    font-weight:300;
    text-align: center;
    margin:10px 0;
}
p{
    margin:0;
}    
a:link{
    color:#d17f38;
}
a:visited{
    color:#d17f38;
}
a:hover{
    color:#4b2707;
}
hr{
    border:none;
    height:33px;
    width:333px; 
    margin:30px auto;
    background: url(../images/divider.png) center no-repeat;
}
/* Header */
header nav{
    text-align: center;
}
header nav ul{
    margin:0;
    padding:0;
    list-style: none;/*Elimina los puntos de las listas*/
    display: block;
    line-height: 141px;
}
header nav ul li{
    display: inline-block;
    padding:0 20px;
    
}
header nav ul li a{
text-transform: uppercase; 
text-decoration: none;
font-weight: bold;
}
header nav ul li a:hover{
  color:#4b2707;
  padding-top:20px;
  background:url(../images/tiny-donut.png)top center no-repeat;
}
header nav ul li#logo a{
 display: block;
 width: 292px;
 height: 141px;
 background: url(../images/logo.png) center center no-repeat;
text-indent: -9999px;
}
header nav ul li#logo a:hover{
    padding: 0;
    background: url(../images/logo-hover.png) center center no-repeat;
}
/* Hero */
#Hero{
    background:#e8c04f url(../images/bg-tile-yellow.gif) top left repeat;
}
#Hero .container{
position: relative;    
}
#Hero .large-ribbon{
    height:190px;
    width: 150px;
    background: url(../images/fresh-whole-ingredients.png) top left no-repeat;
    text-indent:-9999px;
    position: absolute;
    top:-23px;
    right:-30px;
}
/* The Whole Story */
#story-excerpt{
    width:520px; 
    margin-right:24px;
    float:left;
    font-size:16px;
}
#best-donut{
background: url(../images/award.png) left center no-repeat;
padding: 30px 0 30px 130px;
float:left;
width:240px;
}
/* News & Events */
#articles{
    width:370px;
    float:left;
    margin-right:24px;
}
#feature-image{
    width: 530px;
    float:left;
}
#news-events article{
    margin: 20px 0;
    padding-left:55px;
}
#news-events article.news{
    background: url(../images/icon-news.png) top left no-repeat;
}
#news-events article.event{
    background: url(../images/icon-calendar.png) top left no-repeat;
}
#news-events header time{
    color:#d17f38;
    font-size: 12px;
}
#news-events section.excerpt{
    margin:10px 0;
    
}
#news-events footer{
    font-size: 12px;
}
 /*# <- Es un ID
 .NombreClase <- Es una clase */
 
/* Footer */
footer.main{
    background:#4b2707 url(../images/bg-tile-brown.gif) top left repeat;
    color:#f2f3ee;
    padding:30px 0;
}
footer.main a:hover{
   color:#f2f3ee;
}
#uncopyright, #credits{
    width: 240px;
    float:left;
    padding:10px 0 10px 50px;
}
#uncopyright{
    background: url(../images/icon-recycle.png) center left no-repeat;
}
#credits{
    background: url(../images/icon-apple.png) center left no-repeat;
    float:right;
    margin-top:9px;
}
/* Force Elements to Self Clear its Children: http://css-tricks.com/snippets/css/clear-fix/ */

.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
	}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */