/* ~~~~ Interactive Web Page Script ~ Cameras ~~~~ */
@charset "UTF-8";
body {
	font: 100% Candara, sans-serif;
	/*background: #42495A;*/
    background: url(../images/bg_2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	margin: 0;
	padding: 0;
	color: #42495A;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: .5em;
}
a img {
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #3C5F8F; 
	text-decoration: underline;
}
a:visited {
	color: #D7BDB4; 
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}

/* ~~ This fixed width container surrounds all other divs ~~ */
.container {
	width: 960px;
	background: #F1F1F4 url(../images/bg.jpg) repeat-y;
	/* ~~ for the desktop view the background for the 3 columns is provided by the background-image for the container div. This is necessary since the sidebars and content divs are varying heights.  ~~ */
	margin: 0 auto;
}

/* ~~ The header design will accommodate a logo or banner image up to 960 pixels wide.  ~~ */
.header {
    padding: 0;
    margin: 0;
    background-color: #42495A; /* #FFF */
}
/* ~~ These are the columns for the layout. ~~ 
The background colors of the columns match those in the background image of the container. This is redundant on the desktop but plays an important role for viewing with a tablet or phone.
*/
.sidebar1 {
	float: left;
	width: 180px;
	background: #3C5F8F; /* #A80F39 */
	color: #FFF;
}
.content {
	padding: 0;
	width: 600px;
	float: left;
	background: #FFF; /* #FCDED3 */
}

.spec {
    margin: -5px 0 0 0;
    border-bottom: 1px solid #3C5F8F;
    line-height: 0;
}

.title {
    background-color: rgb(239, 231, 228); /* rgba(238, 208, 187, 0.7) */
    border: 1px solid #F1F1F4;
}

.cameras {
    background-color: rgba(149, 152, 152, 0.7);
    /*border-left: 1px solid #F1F1F4;
    border-right: 1px solid #F1F1F4;
    border-bottom: 1px solid #F1F1F4;*/
}

.early {
    background-color: rgba(189, 175, 171, 0.7);
    /*border-left: 1px solid #F1F1F4;
    border-right: 1px solid #F1F1F4;
    border-bottom: 1px solid #F1F1F4;*/
}

.nikon {
    background-color: rgba(189, 175, 171, 0.7);
}

.photo {
    background-color: rgba(216, 203, 197, 0.7);
    /*border-left: 1px solid #F1F1F4;
    border-right: 1px solid #F1F1F4;*/
}

.early img {
    border-radius: 8px;
    width: 50%; 
    height: auto; 
    margin-left: 22%; 
    border: 2px solid #7E9CB4; /* #8498BD */
}

.nikon img {
    border-radius: 8px;
    width: 50%; 
    height: auto; 
    margin-left: 22%; 
    border: 2px solid #7E9CB4;
}

.photo img {
    border-radius: 8px;
    width: 50%; 
    height: auto; 
    margin-left: 22%; 
    border: 2px solid #7E9CB4; /* #8498BD */
}

.answer img {
    border-radius: 8px;
    border: 2px solid #7E9CB4;
}

.return {
    background-color: rgb(239, 231, 228);
}

.sidebar2 {
	float: right;
	width: 180px;
	background: #3CBDB4;
	padding: 10px 0;
	color: #FFF; /* #A80F39 */
    border-top: 1px solid #FFF;
}

.sidebar2 a {
    color: #F6EEE3;
    text-decoration: none;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px;
}

ul.nav {
	list-style: none;
	border-top: 1px solid #FFF;
	margin: 0;
	background: #3C5F8F;
}
ul.nav li {
	border-bottom: 1px solid #FFF;
}
ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	width: 160px;
	text-decoration: none;
	background: #3C5F8F;
	color: #FFF;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background: #D7BDB4; /* #D7BDB4 */
	color: #3C5F8F;
}

/*------------------------- Week 1 Lab1 ~ Form -----------------------*/
div#results {
	background-color:#F1F1F4; /* #FF6 */
	height:auto;
	width:500px;
	border:1px solid #D7BDB4; /* red */
	padding:10px;
	margin-left:20px;
	-moz-box-shadow: 10px 10px 5px #888;
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 10px 10px 5px #888;
	border-radius:7px;

}
div#more {
	background-color: #42495A;
	height:auto;
	width:500px;
	border:1px solid #3CBDB4; 
	padding:10px;
	margin-left:20px;
	margin-top:20px;
	-moz-box-shadow: 10px 10px 5px #888;
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 10px 10px 5px #888;
	color:#3CBDB4; 

}
#signup /* #form1 */
{
	padding: 10px;
	width: 500px;
	border-style: solid;
	border-color: #42495A;
	border-radius: 10px;
	-moz-box-shadow: 10px 10px 5px #888;
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 10px 10px 5px #888;
	background-color: rgba(132, 152, 189, .8); /* #CFF */
	margin:20px;
}

/* ------------ NEW FORM CSS FROM WEEK 6 SKILL BUILDER -------------*/

form#order div, form#signup div{
	padding-bottom: 10px;	
}

form#order .label, form#signup .label {
	display: block;
	clear: left;
	float: left;
	width: 175px;
	text-align: right;
	padding: 7px 15px 0 0;
	text-transform: uppercase;	
	font-weight: bold;
}

form#signup .label {
	width: 200px;	
}

.labelBlock {
	text-transform: uppercase;
	font-weight: bold;	
	display: block;
	padding-bottom: 0 !important;
	clear: both;
	margin-top: 10px;
}

form#order select, form#signup select {
	display: inline-block;
	margin-top: 8px;	
}

form#order input[type="radio"], form#signup input[type="radio"], form#signup input[type="checkbox"] {
   display: inline-block;
   margin-top: 10px;	
}

form .indent, #submit {
	margin-left: 215px;	
}

#console label {
	float: left;
	width: 100px;
}
.clearLeft {
	clear: left;
}

#signup .indent label.error {
  margin-left: 0;
}

/*---------------------------- Original CSS -------------------------*/
.footer {
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both;
	background: #7E9CB4; /* #8498BD */
	vertical-align: text-bottom;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 3px solid #42495A; /* #42495A */
    color: #F0ECEB;
}
.footer p {
	font-size: 0.85em;
}

.ref a {
    color: #3C5870;
}

/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* The following two styles make adjust the size of images in the header and content divs for all platforms */
.header img {
	max-width: 100%;
	height: auto;
}
.content img {
	max-width: 100%;
	height: auto;
}
pre {
	margin-right: 40px;
	margin-left: 40px;
}
#menu {
	left: 0px;
	top: 0px;
	display: none;
}


/*------COLOR SCHEME --------
#42495A rgb(66, 73, 90)     || #021724 rgb(2, 23, 36)
#3C5F8F rgb(60, 95, 143)    || #182F3E rgb(24, 47, 62)
#8498BD rgb(132, 152, 189)  || #3C5870 rgb(60, 88, 112)
#D7BDB4 rgb(215, 189, 180)  || #93ADC2 rgb(147, 173, 194)
#EEC1BB rgb(238, 193, 187)  || #7E9CB4 rgb(126, 156, 180)
#E4B3B9 rgb(228, 179, 185)
#EED0BB rgb(238, 208, 187)

#FCDED3 rgb(252, 222, 211)
#F1F1F4 rgb(241, 241, 244)  || #F0ECEB rgb(240, 236, 235)
#3CBDB4 rgb(60, 189, 180)   || #38959E rgb(56, 149, 158)
                            || #024F5C rgb(2, 79, 92)

Sand
#959898 rgb(149, 152, 152)
#B4AFAB rgb(189, 175, 171)
#D8CBC5 rgb(216, 203, 197)
#F6EEE3 rgb(246, 238, 227)
#EFE7E4 rgb(239, 231, 228)