/******* 		Google Web Fonts 		*******/
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400);
@import url(http://fonts.googleapis.com/css?family=Roboto);

/******* 		Defaults 		*******/
* {
	margin: 0;
	padding: 0;
}

html,body,#container {
	width: 100%;
	min-height: 100%;
}

html {
	background: #fff;
}

body {
	font: 14px/1.4 'Roboto', Helvetica, Arial;
	color: #464646;
}

.wrap {
	width: 960px;
	padding: 0 10px;
	margin: 0 auto;
}

.group:before,.group:after {
	content: '';
}

.group:after {
	display: table;
	clear: both;
}

.left {
	float: left;
}

.right {
	float: right;
}

table {
	border-collapse: collapse;
	width: 100%;
}

table td {
	vertical-align: top;
}

a {
	color: #00BBFF;
	text-decoration: none;
}

ul, li {
	list-style: none;
}


/******* 		Typography 		*******/
h1 {
	padding: 0 0 10px;
}

h3 {
	text-transform: uppercase;
}

h4 {
	text-transform: uppercase;
	padding: 0 0 0.5em;
	font-size: 12px;
}

h5 {
	text-align: center;
	font-size: 0.9em;
	padding: 0 0 1em;
}

/******* 		Custom Classes 		*******/
.dib {display: inline-block;}
.e-ib * {display: inline-block;}
.text-uppercase {text-transform: uppercase;}
.ptb5 {padding: 5px 0;}
.ptb10 {padding: 10px 0;}
.p10 {padding: 10px;}
.p20 {padding: 20px;}
.p15 {padding: 15px;}
.p30 {padding: 30px;}
.p0 {padding: 0;margin: 0;}
.text-light {color: #666;font-size: 0.9em;}
.border {border: 1px solid #ddd;}
img {max-width: 100%;max-height: 100%;}

/******* 		header 		*******/
header#mainHeader {background: #333;padding: 0.3em 0 0.5em;position: fixed;left: 0;top: 0;width: 100%;height: auto;z-index: 9993;}
header#mainHeader .logo a {font: 2em 'Oswald';font-weight: 300;color: #00b9fc;}
header#mainHeader .logo a:hover {text-decoration: none;}
header#mainHeader .logo a span {color: #fff;padding-left: 1px;}
#headerForm {display: inline-block;position: relative;margin-top: 10px;background: rgba(255,255,255,0.9);height: 26px;padding: 0 10px;border-radius: 5px;}
#headerForm * {display: inline-block;}
#headerForm span {color: #000;font-size: 16px;line-height: 26px;}
#headerSearch {background: transparent;border: none;outline: none;box-shadow: none;height: 100%;line-height: 20px;}
nav#topNav a {color: #f2f2f2;margin-right: 1em;text-transform: uppercase;}

#headerForm .resultsOuter {position: absolute;top: 30px;right: -3px;width: auto;}
#headerForm .results {position: relative;width: 260px;margin: 0 auto;border: 1px solid #ddd;z-index: 9993;background: #fff;display: none;height: 152px;}
#headerForm .item {border-bottom: 1px solid #e6e6e6;cursor: pointer;}
#headerForm .item:hover {background: #0099dc;}
#headerForm .item:hover .title, #headerForm .item:hover span {color: #fff;}
#headerForm .item .content {width: 240px;padding: 4px 10px 0 10px;text-align: left;}
#headerForm .item .title {font: 14px/1.2 'Oswald';color: #444;}
#headerForm .item span {font-size: 10px;display: block;line-height: 1;}

.breadcrumb {font-weight: bold;font-size: 0.85em;text-transform: uppercase;padding: 1em 0;color: #888;}
.breadcrumb span {display: inline-block;padding: 0 1px;}
.breadcrumb .active a {color: #777;}
.breadcrumb .separator {font-size: 0.8em;position: relative;top: -1px;}
.head .left {width: 150px;}

.head .right {width: calc(100% - 150px);}
.head .right .span2 {width: 50%;float: left;padding-top: 3em;}
.head .right .span3 {width: 33%;float: left;padding-top: 3em;}
.head .right .span4 {width: 25%;float: left;padding-top: 3em;}
.head .right .span5 {width: 20%;float: left;padding-top: 3em;}
.head .right .span6 {width: 16.66%;float: left;padding-top: 3em;}
.head .right .span7 {width: 14.28%;float: left;padding-top: 3em;}
.head .right .span8 {width: 12.25%;float: left;padding-top: 3em;}

#search {display: none;position: relative;background: #f6f6f6;border-left: 2px solid #00bbff;padding: 1em 1em 1.5em;box-shadow: 0 1px #ddd;width: 450px;}
#search .close {position: absolute;right: 8px;top: 5px;font-size: 1.3em;cursor: pointer;font-weight: bold;}
#search .title {font-size: 1.5em;padding: 0 0 0.3em;}
#search .input {display: inline-block;border: 1px solid #ddd;border-radius: 8px;overflow: hidden;}
#search input {border: none;outline: none;height: 30px;width: 260px;padding: 0 10px;}
#search input[type=submit] {width: 100px;cursor: pointer;display: none;}
#search input[type=submit]:hover {background: #d2d2d2;}
#search p.alert {color: red;}

#search .results {position: relative;width: 420px;display: none;margin: 0 auto;}
#search .results .item {border-bottom: 1px solid #ddd;cursor: pointer;}
#search .results .item:hover {background: #0099dc;}
#search .results .item:hover .title, #search .item:hover span {color: #fff;}
#search .results .item .content {width: 350px;padding: 4px 10px 0 10px;text-align: left;float: left;}
#search .results .item .title {font: 16px/1.2 'Oswald';color: #444;}
#search .results .item span {font-size: 12px;display: block;line-height: 1;padding-bottom: 3px;}
#search .results .item img {float: left;}

.headerImage {position: relative;}
.headerImage a.compareCameraRemove {position: absolute;top: 15px;left: calc(50% - 35px);}

table.compare {width: 100%;}
table.compare tr {border-bottom: 1px solid #e6e6e6;}
table.compare tr:last-of-type {border-bottom: 0;}
table.compare tr:last-of-type td {padding-bottom: 1em;}
#comparisonTable table.compare tr:last-of-type td {padding-bottom: 0em;}
table.compare td {padding: 0.75em 0;line-height: 22px;}
table.compare td.span2 {width: 395px;}
table.compare td.span3 {width: 263px;}
table.compare td.span4 {width: 197px;}
table.compare td.span5 {width: 158px;}
table.compare td.span6 {width: 131px;}
table.compare td.main {width: 155px;font-size: 16px;padding-right: 15px;font-family: 'Oswald';}
table.compare td.compareOneOnOne {text-align: center;}

.camera-group .title {font-family: 'Oswald';font-size: 25px;padding: 0.3em -0px;border-bottom: 1px solid #e6e6e6;cursor: pointer;}
.camera-group .title span {display: inline-block;width: 20px;height: 14px;background: url(../images/icon-arrow-down.png) center center no-repeat;padding-right: 1em;}
.camera-group .title:hover span {position: relative;top: -2px;}
.camera-group.open .title span {background: url(../images/icon-arrow-up.png) center center no-repeat;}
.camera-group table.compare {display: none;}
.camera-group.open table.compare {display: block;}
.camera-group.group-main table.compare {display: block;}

td.megapixel .mp-box {position: relative;width: 80px;height: 80px;background: #ccc;}
td.megapixel .value {position: absolute;width: 100%;height: 100%;text-align: center;line-height: 80px;top: 0;left: 0;font-size: 2.2em;font-weight: normal;}
td.megapixel .mp-box .inner-box {position: relative;margin: 0 auto;background: #B2D764;vertical-align: middle;text-align: center;line-height: 80px;-webkit-box-shadow: inset 0 0 15px rgba(0,0,0,0.5);box-shadow: inset 0 0 15px rgba(0,0,0,0.5);}
td.megapixel p {text-transform: uppercase;font-size: 11px;font-weight: normal;padding-top: 4px;}
td.sensor .inner {display: block;width: 80px;height: 80px;text-align: center;line-height: 80px;background: url(../images/arrow.jpg) center center no-repeat;background-size: contain;font-size: 1.25em;}

td.name a {font-size: 1.3em;font-weight: normal;border-bottom: 1px solid transparent;}
td.iso p {font-weight: normal;font-size: 1.1em;}

td.iso .grid {display: block;}
td.iso .grid .box {display: block;height: 5px;width: 5px;margin: 1px;background: #ddd;float: left;}
.grid .box:nth-child(2), .grid .box:nth-child(4), .grid .box:nth-child(7), .grid .box:nth-child(11), .grid .box:nth-child(16) {clear: both;}
.iso .grid .box.on {background: #b2d764;}
td.iso.iso-min .box.on {background: #eb756e;}

td.screen .inner {display: block;width: 58px;height: 58px;background: url(../images/arrow-green.jpg) center center no-repeat;text-align: center;line-height: 58px;font-size: 20px;}

td.battery .bar {display: block;float: left;height: 40px;width: 10px;background: #ddd;position: relative;margin-right: 8px;}
td.battery .bar .val {position: absolute;bottom: 0;left: 0;width: 100%;background: #B2D764;}
td.battery p span {text-transform: uppercase;font-size: 0.75em;}


/******* 		Footer 		*******/
footer {background: #333;padding: 1em 0;clear: both;}
footer .logo a {font: 2em 'Oswald';font-weight: 300;color: #00b9fc;}
footer .logo a:hover {text-decoration: none;}
footer .logo a span {color: #fff;padding-left: 1px;}
#footerNav {padding-top: 1em;}
#footerNav a {display: inline-block;color: #fff;padding-left: 5px;}


#comparisonTable thead th {border-bottom: 2px solid #2980b9; border-top: 2px solid #2980b9; font-size: 16px;font: 1.8em/1.5 'Oswald';font-weight: 400;color: #c0392b;}