@charset "utf-8";
/* CSS Document */

/*controls the first image that appears at top that says a device like no other*/
#featureimage {
text-align:left;
}


/*controls the border that appears around the first image that appears at top that says a device like no other*/
#featuredborder {
border:0px solid #77b1e8;
}


/*controls the dark blue and light blue line that appears under the firs timage that appears
at top that says a device like no other*/
.bluetabs { 
margin-top:5px;
height:26px;
width:960px;
}


/*controls the whole left side of the screen that has the 4 white box's*/
#thewholeleftside {
background-color:#d1f5fe;
width:642px; 
height:705px;
border:1px solid #77b1e8;
}


/*controls the background image that appears behind the 4 white box's*/
.leftsideimagetop {
width:642px;
height:519px;
}


/*controls the title for each white box*/
#boxtitles {
padding-bottom:5px;
margin-top:0px;
margin-bottom:0px;
}


/*box1 controls the first white box that appears at top. box2 controls the second white box that appears at top. box3 controls the third white box that appears at top. box4 controls the 4th white box that appears at top*/
#box1,#box2,#box3,#box4 {
background-color:#FFF;
width:623px;
height:162px;
}


/*controls the first image in the first white box*/
#box1image {
margin-top:15px;
margin-left:15px;
width:198px; 
height:131px;
}


/*box1words controls the first words on the first white box. box2words controls the second words on the second white box. box3words controls the third words on the third white box. box4words controls the 4th words on the 4th white box*/
#box1words,#box2words,#box3words,#box4words {
width:360px;
margin-top:-125px;
margin-left:242px;
}


/*box2image controls the second image in the second white box. box3image controls the third image in the third white box. box4image controls the 4th image in the 4th white box*/
#box2image,#box3image,#box4image {
margin-top:15px;
margin-left:15px;
}


/*controls the whole right side*/
#thewholerightside {
background-color: #FFFFFF;
width:314px; 
height:705px;
border:1px solid #77b1e8;
}


/*controls the description for the portable capture station*/
#portabledesc {
text-align:center;
padding:0 16px;
}


/*when did a .circle you have to make sure .circle ul li.one and .circle ul li.two match up to the width of .circle, .circle ul, and circle ul li*/

/*controls the list for portable capture station. In this you have to set width and height and also put the box in its exact position.*/
.circle {
margin-top:20px;
list-style-type:none;
line-height:14px;
margin-left:25px;
width:270px;
height:165px;
padding:0;
}


/*this controls what font the list use's, the width and it having no padding and spacing. Do not forgot the width and padding:0 and margin:0*/
.circle ul {
width:270px;
list-style:none;
margin:0;
padding:0;
}


/*this controls the info next to each bullet appearing, if its not floating it will appear under the bullet. */
.circle ul li {
float:left;
width:270px;
line-height:18px;
}


/*This controls the first part that appears in the list. */
.circle ul li.one {
width:20px;
}


/*This controls the second part that appears in the list. */
.circle ul li.two {
width:250px;
}


/*controls the orange line between the portable device station and the need more information*/
#orangeline {
margin-top:-15px;
}


/*control the image for need more information*/
#needinfoimage {
margin-left:25px;
margin-top:30px;
width:84px;
border:1px solid #77b1e8;
}


/*controls all the word position for need more information*/
#needinfoallwordsposition {
width:190px;
margin-left:120px;
margin-top:-110px;
}


/*controls the links for need info*/
#needinfowords {
padding-bottom:6px;
}


/*controls the border for the first white box one on the left side*/
#boxborder {
background-color:#7caee8;
width:623px;
margin-left:8px;
margin-top:-508px;
padding:2px;
}


/*controls the border for 2nd,3rd and 4th white box on the left side*/
#boxborder2 {
background-color:#7caee8;
width:623px;
margin-left:8px;
margin-top:6px;
padding:2px;
}