/* iPad Landscape */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {

body { width: 1024px; height: 675px; }
#preso, .slide { width: 1024px; height: 675px; }
#footer { width: 1005px; }

pre.highlight pre, pre.highlight, pre {
  font-size: 20px;
  line-height: 20px;
}

}

/* iPad Portrait */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

body { min-width: 768px; }
#preso, .slide { height: 720px; width: 768px; }
#footer { width: 755px; }
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1em; }

.content > p { font-size: 1.4em; }
.content ol { font-size: 1.5em; }
.content > ul { font-size: 2em; }
.bullets > ul { font-size: 2em; }
.smbullets > ul { font-size: 1.5em; }

.content.columns .grid_12 p, .content.comparison .grid_12 p {
  font-size: 125%;
}

.content.columns .grid_6 p, .content.comparison .grid_6 p {
  font-size: 100%;
}

.content.columns .grid_4 p, .content.comparison .grid_4 p {
  font-size: 75%;
}

pre.highlight pre, pre.highlight, pre {
  font-size: 16px;
  line-height: 16px;
}

}

/* iPhone Portrait and Landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

h1 { font-size: 1em; }
h2 { font-size: 0.75em; }
h3 { font-size: 0.5em; }

.content > p { font-size: 0.7em; }
.content ol { font-size: 0.8em; }
.content > ul { font-size: 1em; }
.bullets > ul { font-size: 1em; }
.smbullets > ul { font-size: 0.8em; }

.title { padding-top: 5%; }
.section-header { padding-top: 12%; }
.content > blockquote { font-size: 100%; }

.content.columns .grid_12 p, .content.comparison .grid_12 p {
  font-size: 100%;
}

.content.columns .grid_6 p, .content.comparison .grid_6 p {
  font-size: 75%;
}

.content.columns .grid_4 p, .content.comparison .grid_4 p {
  font-size: 50%;
}

.bullets > ul > li { padding: 5px; }
.smbullets > ul > li { padding: 5px; }

pre.highlight pre, pre.highlight, pre {
  font-size: 12px;
  line-height: 12px;
}

}

/* iPhone Portrait */ @media screen and (max-width: 320px) and (orientation:portrait) {

body { min-width: 320px; }
#preso, .slide { height: 300px; width: 320px; }
#preso {
  margin: 0;
  padding: 0;
  width: 320px;
  max-height: 356px;
  margin-left:auto;
  margin-right:auto;
}

#footer {
  background: #eee;
  margin: 0;
  padding: 2px;
  width: 300px;
  height: 20px;
  margin-left:auto;
  margin-right:auto;
}

.slide .center {
  height: 300px;
  width: 320px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

}

/* iPhone Landscape */ @media screen and (max-width: 480px) and (orientation:landscape) {

body { min-width: 480px; min-height: 300px; height: 320px; }
#preso, .slide { height: 300px; width: 480px; }
#preso {
  margin: 0;
  padding: 0;
  height: 320px;
  width: 480px;
  margin-left:auto;
  margin-right:auto;
}
#footer {
  background: #eee;
  margin: 0;
  padding: 2px;
  width: 470px;
  height: 20px;
  margin-left:auto;
  margin-right:auto;
}

.slide .center {
  height: 320px;
  width: 480px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

}

/* 960 Layout Overrides for Mobile Devices */

/* Overrides for iPad and devices */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

.container_12 { width: 768px;}
.container_12 .grid_12 { width: 752px; }
.container_12 .grid_6 { width: 360px; }
.container_12 .grid_4 { width: 236px; }
.container_12 .grid_3 { width: 172px; }

}

/* Overrides for iPhone and devices */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:landscape) {

.container_12 { width: 480px; }
.container_12 .grid_12 { width: 480px; }
.container_12 .grid_6 { width: 220px; }
.container_12 .grid_4 { width: 140px; }
.container_12 .grid_3 { width: 100px; }

}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) {

.container_12 { width: 320px; }
.container_12 .grid_12 { width: 320px; }
.container_12 .grid_6 { width: 140px; }
.container_12 .grid_4 { width: 86px; }
.container_12 .grid_3 { width: 60px; }

}