screen2.css

/* screen1.css: Screen Styles */

/* Universal Settings */

body {
 /* max-width: 1024px;  */
  /* margin: auto;*/
 /* padding: auto;*/
  font-family: 'Habibi', serif;
  line-height: 1.3em;
  background:url(/diamond_upholstery.png);
  /*  background-size:100% 100%;*/
  background-repeat:repeat;
 }
 
/*  Fonts and Headings  */

h1, h2, h3 {
  font-weight: bold; 
  font-size: 100%;
  color: #c418d8; 
}

h1 { 
  font-size: 2.0em; 
  line-height: 1em; 
 /* margin-bottom: 2.0em; */
}

h2 { 
  font-size: 1.5em; 
  line-height: 1.2em; 
  margin-top: 1em;
}

h3 { 
  font-size: 1em; 
  line-height: 1.2em; 
  font-style:italic
 /* margin-bottom: 1em; */
}

h4 { 
  font-size: .75em; 
  line-height: .75em; 
 /* margin-bottom: 1.2em; */
}

h5 { 
  font-size: .90em; 
  line-height: 1em; 
  font-style:italic;
  color: #c418d8;
  margin-bottom: 1em; 
}

p { 
  font-size: 1em; 
  line-height: 1.2em; 
  margin-bottom: 1.2em; 
}

#logo {
  width:18%;
  height:18%;
padding: .3em;
   float:left;
}

#banner {
  width:75%;
  height:45%;
  float:left;
}
#bullet {
  margin-left: 1.5em;
}
.quote {
  border-top-style:dotted;
  border-top-color: #c418d8;
  border-spacing: 1.5em;
  color:#CC99CC;
}
.quote1 {
    border-spacing: 1.5em;
  color:#CC99CC;
}
.photo {
  border:3px solid #c418d8;
  height:95%;
  width:95%; 
}

.leftnav-15 {
  color:#CC99CC;
}

/*no numbers in the nav list for the slides*/
#slides {
  display:none;
}

#slides .slidesjs-container {
  margin-bottom:10px;
}

#slides .slidesjs-previous {
  margin-right: 5px;
  float:left;
}
#slides .slidesjs-next {
  margin-right: 5px;
  float:left;
}

.slidesjs-pagination {
    margin:6px 0 0;
    float: right;
    list-style: none;
}

.slidesjs-pagination li {
    float: left;
    margin: 0 1px;
}

.slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
   
    background-image: url(/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
}

.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px }

.slidesjs-pagination li a:hover { background-position: 0 -26px }

#slides a:link, #slides a:visited { color: #333 }

#slides a:hover, #slides a:active { color: #9e2020 }



/*This is not working yet, I was trying to add bullets to part of a list within a list*/
.freelancecoders{
  list-style-type: square;
}
/*Responsive Grid Layout three column grid like a chicago style window*/
/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float:left;
  margin: 1.4% 0 1.4% 1.4%;
}
.col:first-child { margin-left: 0; }

.clear {
  clear:both;
}


#banner {
   background: url(media/purplebubblespng.png) no-repeat scroll;
  background-position:center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  float:left;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;} 


nav ul ul {
  display: none;
}
/* Bold on still working on the nav */
  nav ul li:hover > ul {
    display: block;
  }

.navigation {
  max-width: none;
  background: #d8baf6;
  padding: .8em;
  text-transform: uppercase;
  font-weight: bold;
 }

.navigation li a:hover {
  background: #d8baf6;
}

.navheader { 
  font-size: 12px;
}

.selected {
  background:#d8baf6;
  border-style:solid;
border-color:#c418d8;
  border-width:2px;
  
} 


@media only screen and (min-width:320px) {

}


@media only screen and (min-width:320px) {
#slides {
  display:none;
}

#slides .slidesjs-container {
  margin-bottom:10px;
}

#slides .slidesjs-previous {
  margin-right: 5px;
  float:left;
}
#slides .slidesjs-next {
  margin-right: 5px;
  float:left;
}

.slidesjs-pagination {
    margin:6px 0 0;
    float: right;
    list-style: none;
}

.slidesjs-pagination li {
    float: left;
    margin: 0 1px;
}

.slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
   
    background-image: url(/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
}

.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px }

.slidesjs-pagination li a:hover { background-position: 0 -26px }

#slides a:link, #slides a:visited { color: #333 }

#slides a:hover, #slides a:active { color: #9e2020 }

/*This is not working yet, I was trying to add bullets to part of a list within a list instead I used HEX code
.freelancecoders{
  list-style-type: square;

}*/

@media only screen and (min-width:480px) {
  .leftnav-15{
    Width: 15%;
  }

  .middlemain-60 {
    Width:60%
  } 


  .rightimg-15 {
    Width: 15%;
  }

.navigation li {
  float: left;
}

.navigation li a {
  display: block;
  color: #c418d8;
  padding: 1.2em;
}
}

@media only screen and (min-width:1024px) {
    .leftnav-15{
    Width: 15%;
  }

  .middlemain-60 {
    Width:60%
  } 

  .rightimg-15 {
    Width: 15%;
  }
}
<!--h1.logo a {
    color: #d8d8d8;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 22px;
    float: left;
    letter-spacing: 0.2em;
}
a.to_nav {
    float: right;
    color: #fff;
    background: #4e4e4e;
    text-decoration: none;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
    height: 22px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
a.to_nav:hover,
a.to_nav:focus {
    color: #1c1c1c;
    background: #ccc;
}
-->

<!--
a { 
  color: #8B4789; 
}

em { 
  font-style: normal;
} 

#tagline { 
  padding-top: 100px; 
  padding-bottom: 50px;
  float: left; 
  list-style-type: none;
} 

#contactinfo { 
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 30px;
  float: left;
  list-style-type: none;
  width: auto;   
  text-align: left; 
  background: #ffffff;
} 





ul.programs {
  padding-top: 160px;
  padding-bottom: 50px;
  padding-left: 25px;
}
#page {
  padding-top: 160px;
  padding-bottom: 50px;
  padding-left: 25px;
}

@media only screen and (min-width:768px)

}


*/
#showed2, #hideed2, #showexp2, #hideexp2, #showobj2, #hideobj2 {
  text-decoration: none;
  font-weight: bold;
  color: #008282;  
  text-transform: uppercase;
  font-size: .90em; 
}
-->
/*Web Fonts from Google - add font-family: 'Habibi', serif; to the CSS and add this line to the HTML <link href='http://fonts.googleapis.com/css?family=Habibi' rel='stylesheet' type='text/css'> */

/*Media Queries so the site is optimized for mobile devices, large screens and everything in between*/

    
 /*Portrait iPhone: Horizontal px 320, Vertical px 480, diagonal 3.5in, resolution 163 ppi 
     @media (max-width: 320px)*/

 /*Landscape iPhone: Horizontal px 320, Vertical px 480, diagonal 3.5in, resolution 163 ppi
     @media (min-width: 321px) and (max-width: 480px)*/

 /*Portrait iPhone 4S: Horizontal px 640, Vertical px 960, diagonal 3.5in, resolution 326 ppi  
     @media (max-width: 320px)*/

 /*Landscape iPhone 4S: Horizontal px 640, Vertical px 960, diagonal 3.5in, resolution 326 ppi
     @media (min-width: 321px) and (max-width: 480px)

Screen Width = 768px (CSS Pixels) Screen Height = 1024px (CSS Pixels) Screen Width = 768px (Actual Pixels) Screen Height = 1024px (Actual Pixels) Device-pixel-ratio: 1 

/*Portrait iPad mini: Horizontal px 1024, Vertical px 768, diagonal 3.5in, resolution 326 ppi 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ } */

/*Landscape iPad mini
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} */ 

 /*Portrait iPad/iPad 2: Horizontal px 1024, Vertical px 768, diagonal 9.7 in, resolution 132 ppi
     @media (min-width: 481px) and (max-width: 768px)*/

 /*Landscape iPad/iPad 2 Horizontal px 1024, Vertical px 768, diagonal 9.7 in, resolution 132 ppi*/

 /*Portrait /iPad 3 Horizontal px 2048, Vertical px 1536, diagonal 9.7 in, resolution 264 ppi*/

 /*Landscape /iPad 3 Horizontal px 2048, Vertical px 1536, diagonal 9.7 in, resolution 264 ppi*/

 /*Portrait /Samsung Galaxy Note 10.1 Horizontal px 1280, Vertical px 800, diagonal 10.1 in, resolution 149 ppi*/

 /*Landscape /Samsung Galaxy Note 10.1 Horizontal px 1280, Vertical px 800, diagonal 10.1 in, resolution 149 ppi*/

 /*Portrait /Microsoft Surface RT Horizontal px 1366, Vertical px 768, diagonal 10.6 in, resolution 155 ppi*/

 /*Landscape /Microsoft Surface RT Horizontal px 1366, Vertical px 768, diagonal 10.6 in, resolution 155 ppi*/

 /*Portrait /Google Nexus 10 RT Horizontal px 2560, Vertical px 1560, diagonal 10.1 in, resolution 300 ppi*/

   /*Standard Monitor
     @media (min-width: 548px) and (max-width: 989px)*/
/*Currently, the standard size of a monitor screen is 1024 pixels by 760 pixels, this means the web secure area should be less than that — it is 989px by 548px.*/