@charset "UTF-8";

/* CSS Document */

/* We are turning off underlining for links */

a{
text-decoration:none;
}

/* We are indenting paragraphs so paragraph text doesn't bump into other elements */

p{
margin-left:5px;
}

/* We are adding a bit of spacing around images */

img{
margin:10px;
}

/* Now we begin defining the columns that will display in full-sized browser windows */

article{
width:960px;
color:#000;
min-height:600px;
margin-right:auto;
margin-left:auto;
}

section{
padding:0%;
margin:0%;
min-height:420px;
float:left;
}

#a img{
float:left;
}

#a{
width:29%;
height: auto;
margin-right:20px;
margin-bottom:20px;
padding: 20px 10px 10px 10px;
opacity:100%;
background-image:url(../images/column-gradient.png);
border: solid 1px #39a5b7;
}

#b{
width:29%;
margin-right:20px;
margin-bottom:20px;
padding: 20px 10px 10px 10px;
opacity:100%;
background-image:url(../images/column-gradient.png);
border: solid 1px #39a5b7;
}

#c{
width:29%;
margin-bottom:20px;
padding: 20px 10px 10px 10px;
opacity:100%;
background-image:url(../images/column-gradient.png);
border: solid 1px #39a5b7;
}
#a img{
float:left;
}

#1{
width:60%;
border: solid 1px #0a57ff;
}

#2a{
width:30%;
border: solid 1px #0a57ff;
color:white;
}

header{
margin-left:auto;
margin-right:auto;
text-align:center;
height:125;}

@media (min-width:481px) and (max-width:959px){

    article{
    position:relative;
    height:1000px; /*We are defining a height of 1000px*/
    width:95%; /*We are changing the width from a pixel value to a relative value to resize in different tablets*/
    }

    section{
    min-height:200px; /*We are reducing the minimum height*/
    }

    section img{
    float:left; /*We are floating images in sections for a more compact tablet design*/
    padding:10px;
    }

    #a{
    float:none; /*We are removing the float*/ 
    width:94%; /*We are defining the width with a relative value */ 
    }

    #b{
	/*I have opt'd to change the background color of column b to nothing tablet viewports*/
    /*background-color:000;*/
    float:left; 
    width:94%; /*We are sizing the width to be about half the width of section a*/
    }
    #c{
    float:left;
    width:94%; /*We are sizing the width to be about half the width of section a*/
    }

}
@media (max-width:480px){

   article{
   width:100%; /*We are allowing the device to define the width -- the <article> will fill the entire width of the device*/
   margin:0px;
   padding:0px;
   }

   section{
   min-height:200px; /*We are removing constraints on width and reducing minimum height*/
   }
   
   section img{
   float:left; /*We are floating images in sections for a more compact smartphone design*/
   padding:10px;
   }

   #a{
   float:none; /*We are removing the float*/
   width:95%; /*We are defining the width with a relative value*/
   }

   #b{
   float:none; /*We are removing the float*/
   width:95%; /*We are defining the width with a relative value*/
   }

   #c{
   float:none; /*We are removing the float*/
   width:95%; /*We are defining the width with a relative value*/
   }

}