/*
  Implement a responsive layout. For excellent guidelines, see - http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html
*/

#main {
  background:none repeat scroll 0 0 #E8D4AF;
  float:left;
  height:auto;
  padding:10px;
  /*position:absolute; */
  /*width:940px;*/
  width: auto;
  border: 10px solid #97002B;
  border-top: none;
}
#container {
  height:auto;
}
#content {
  background:none repeat scroll 0 0 #E8D4AF;
  float:left;
  margin:0;
  padding:10px;
  width:590px;
}

/* smaller fixed size) */
@media screen and (max-width: 992px) {
  body {
      min-width:870px;
  }
  #wrapper {
    width: 870px;
  }
  #main {
    width: 830px;
  }
  #container {
    width: 520px;
  }
  #content {
    width: auto;
  }
  .link-tile img {
    height: 85px;
  }
  .link-tile a {
    height: auto;
  }
}

/* fluid single column */
@media screen and (max-width: 880px) {
  body {
    min-width: 100%;
  }
  #wrapper {
    width: 95%;
  }
  #main {
    width: auto;
  }
  #container {
    width: 95%;
  }
  #content {
    width: auto;
  }
  .link-tile img {
    height: 72px;
  }
  .link-tile a {
    height: auto;
  }
  #primary {
    float: none;
    position: static;
  }
}

@media screen and (max-width: 810px) {
  .link-tile img {
    height: 40px;
  }
}

@media screen and (max-width: 640px) {
  .link-tile img {
    height: 40px;
  }
  #blog-description img {
    width: 99%;
  }

  #blog-title img {
    height: 165px;
  }
  #access-homepage {
    bottom: 15px;
    left: 175px;
  }
  body.home #blog-description {
    left: 175px;
  }
}

@media screen and (max-width: 475px) {
 #main {
    border: 3px solid  #97002B;
  }
  #wrapper {
    width: 100%;
  }

  #header {
    height: auto; /*200px;*/
  }
  #branding {
    height: auto;
  }

  .link-tile img {
    height: 0px;
  }
  #cat-title {
    height: 84px;
    position: relative;
    top: -18px;
/*    top: 105px; */
  }
  #titlebar {
    font-size: 2em;
    top: 100px;
  }
  #titlebar img {
    height: 50px;
  }
  #titlepict {
    height: auto;
  }
  #titlepict img {
    height: 85px;
  }


  #blog-title {
    position: static;
  }
  #blog-title img {
    height: 140px;
  }
  #access-homepage {
    width: 200px;
    top: 38px;
    left: 170px;
  }
  #access .menu {
    font-size: 16px;
    width: 220px;
  }
 #blog-description {
    right: -5px;
    top: 60px;
  }
  #blog-description img {
    height: 24px;
    width: 215px;
  }
  body.home #blog-description {
    left: 170px;
  }
}

@media screen and (max-width: 395px) {
/* #main {
    border: 3px solid  green;
  }
*/
  #blog-title img {
    height: 125px;
  }
  #access-homepage {
    /*bottom: 90px;*/
    left: 140px;
  }
  #blog-description img {
    height: 24px;
    width: 172px;
  }
  body.home #blog-description {
    left: 135px;
  }
}

/* this is my Samsung Acclaim size */
/* the actual size of the acclaim is much less than 320 and I had to specify
   the body & wrapper width in order it to display without being chopped
*/
@media screen and (max-width: 320px) {
  body {
    width: 310px;
  }
  #wrapper {
    width: 300px;
  }
  #main {
    width: 274px;
    border: 3px solid #97002B;
  }
/*  #container {
    width: 250px;
    border: 2px solid green;
  }
  #content {
    width: 240px;
    border: 2px solid black;
  }
*/
  #blog-title img {
    height: 95px;
  }
  #blog-description {
    right: -5px;
  }
  #blog-description img {
    height: 18px;
    width: 175px;
  }
  #cat-title {
    top: 0px;
  }
  #titlebar {
    font-size: 2em;
  }
  #titlebar img {
    height: 40px;
  }
  #titlepict img {
    height: 70px;
  }
  #access .menu {
    font-size: 12px;
    width: 165px;
  }

/* homepage tweaks */
  #access-homepage {
    width: 180px;
    top: 24px;
    left: 115px;
  }
  body.home #blog-description {
    left: 110px;
  }
}