ACC SHELL

Path : /srv/www/vhosts/blastresistantbin/css/
File Upload :
Current File : /srv/www/vhosts/blastresistantbin/css/style.css

/* ==================================== CLEAR FIX ==================================== */
a img {
	border: 0px;
}


/* ==================================== BODY ==================================== */
body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	text-align: center;
}

body.home {
	background-image: url('../img/header_bin.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}

body.about,
body.contact {
	background-image: url('../img/header_no_bin.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}

body.detail {
	background-image: url('../img/header_product.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}

/* ==================================== HEADINGS ==================================== */
h1 {
	clear: both;
	color: #2799d6;
	font-family: 'Museo-700';
	font-size: 2.2em;
	padding-top: 10px;
}

.detail h1 {
	text-transform: uppercase;
	height: 115px;
	width: 380px;
	background-color: #ffffff;
	padding: 35px 30px 0px 200px;
	text-align: right;
	margin: 0px;
}

h2 {
	font-family: 'Museo-700';
	text-transform: uppercase;
	font-size: 160%;
	font-weight: normal;
	margin-bottom: 0px;
}

.blue-white h2 {
	margin: 0px 0px 15px 0px;
	font-size: 140%;
}

h3 {
	font-family: 'Museo-700';
	text-transform: uppercase;
	font-weight: normal;
	color: #2799d6;
}

.normalcase {
	text-transform: none;
}

.inline {
	text-align: right;
	margin: 0px;
	padding: 0px;
}

/* ==================================== HEADER ==================================== */
div.header {
	min-width: 940px;
	background-image: url('../img/nav_bg.png');
	background-position: center top;
	background-repeat: repeat-x;
}

.home .header {
	height: 614px;
}

.about .header {
	height: 271px;
}

.contact .header {
	height: 290px;
}

.detail .header {
	height: 415px;
}

.header .logo-nav {
	max-width: 1100px;
	min-width: 940px;
	margin: 0px auto 0px auto;
	padding: 0px 10px 0px 10px;
}

/* === LOGO === */
.header .logo-nav div.logo {
	height: 153px;
	width: 269px;
	margin-left: -67px;
	padding: 23px 0px 0px 67px;
	float: left;
	background-image: url('../img/logo_bg.png');
	background-position: left bottom;
	background-repeat: no-repeat;
}


/* === NAVIGATION === */
ul.nav {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: right;
}

ul.nav li {
	display: inline-block;
}

ul.nav li a {
	font-family: 'Museo-300';
	font-weight: 100;
	color: #000000;
	text-decoration: none;
}

ul.social {
	padding-top: 35px;
}

ul.menu {
	clear: right;
	padding-top: 30px;
}

ul.menu li a {
	padding-left: 0.4em;
}

ul.menu li + li {
	padding-left: 0.2em;
}

ul.menu li + li:before {
	content: "|";
}

.header .product-image {
	position: relative;
		top: -200px;
		left: 250px;
}

div.shadow {
	background-image: url('../img/header_shadow.png');
	background-position: 10px bottom;
	background-repeat: no-repeat;
	padding: 0px 0px 14px 0px;
	margin: 0px auto 0px auto;
	text-align: right;
  z-index:-1;
}

.detail .shadow {
	width: 580px;
	position: relative;
		top: 30px;
		left: -200px;
}

.home .shadow {
	width: 583px;
	position: relative;
		top: 130px;
		left: -208px;
}

.slogan {
	font-family: 'Museo-300';
	font-size: 160%;
	height: 125px;
	width: 563px;
	padding-top: 25px;
	padding-right: 20px;
	text-align: right;
	background-image: url('../img/header_shadow_bin.jpg');
	background-repeat: no-repeat;
	background-position: right center;
	background-color: #ffffff;
	clear: both;
}

/* ==================================== CONTENT ==================================== */
div.wrapper {
	min-width: 940px;
	margin: 0px auto 0px auto;
}

.blue-line {
	padding-top: 37px;
	background-image: url('../img/content_blue_line.png');
	background-repeat: no-repeat;
	background-position: center top;
	clear: both;
}

.blue {
	padding-top: 65px;
	background-image: url('../img/content_blue.png');
	background-repeat: no-repeat;
	background-position: center top;
}

.light-blue {
	padding-top: 30px;
	background-image: url('../img/content_light_blue.jpg');
	background-repeat: no-repeat;
	background-position: center top;
}

div.content {
	max-width: 1100px;
	min-width: 940px;
	margin: 0px auto 0px auto;
	padding: 15px 10px 15px 10px;
}

.content input, textarea{
  color:#969696;
}

.about .content {
	padding-bottom: 263px;
}

.light-blue > .content {
	overflow: hidden;
	padding-top: 71px;
	padding-bottom: 118px;
}

.light-blue > .content > .left,
.light-blue > .content > .right {
	width: 550px;
	float: left;
	height: 102px;
	line-height: 102px;
}

.light-blue > .content > .left {
	padding-right: 40px;
	width: 510px;
}

.video {
	background-image: url('../img/image_bg.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	padding: 0px 11px 12px 0px;
	display: inline-block;
}

.blue-line > .content {
	padding-bottom: 77px;
}

.blue-line > .content > .left,
.blue-line > .content > .right {
	width: 537px;
	display: inline-block;
	vertical-align: middle;
}

.blue-line > .content > .left {
	text-align: right;
	padding-right: 10px;
}

.blue-line > .content > .right {
	text-align: left;
	padding-left: 10px;
}

.blue-line > .content > .right > .video {
	width: 540px;
}

.blue-line > .content {
	padding-top: 62px
}

.detail > .blue-line > .content > .left,
.detail > .blue-line > .content > .right {
	text-align: left;
	vertical-align: top;
}

.detail > .blue-line > .content > .left {
	padding-right: 70px;
	width: 477px;
}

.detail > .blue-line > .content > .right {
	padding-left: 0px;
	width: 547px;
}

.detail > .blue-line > .content > .video {
	margin-top: 70px;
}

.blue-white {
	margin-top: 68px;
	padding: 20px 30px 20px 30px;
	color: #ffffff;
	background-image: url('../img/stripes_bg.jpg');
	background-repeat: repeat-x repeat-y; 
}

.content .gallery img {
	background-image: url('../img/image_bg.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	padding: 0px 10px 12px 0px;
	display: inline-block;
}

.content .gallery img + img {
	margin-left: 56px;
}

/* === TEXT SETTINGS === */
.content {
	font-family: 'Museo-300';
}

.content ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.content ul li { 
	padding-left: 0em; 
	text-indent: 0em;
}

.content ul li:before {
	content: "•";
	color: #2799d6;
}

.light-blue > .content a.button {
	font-family: 'Museo-700';
	font-weight: bold;
	font-size: 160%;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff;
	display: inline-block;
	width: 530px;
	height: 102px;
	vertical-align: middle;
	line-height: 98px;
	background-image: url('../img/msg_button.png');
	background-repeat: no-repeat;
	background-position: center center;
}

.light-blue > .content a.button:hover {
	background-image: url('../img/msg_button_hover.png');
	height: 98px;
	padding-top: 4px;
}

.blue-white ul {
	list-style: disc;
}

.blue-white ul li:before {
	content: none;
	color: #ffffff;
}

.content strong {
	font-family: 'Museo-500';
	font-weight: normal;
	font-size: 120%;
	text-align: left;
	display: block;
	margin: 70px 0px 70px 0px;
}

.detail .wrapper .content .left p + h2 {
	margin-top: 70px;
}

.content dt {
	font-weight: bold;
	float: left;
}

.content dt:after {
	content: ":";
	margin-right: 0.5em;
}

.content dd {
	margin: 0px;
}

/* === FORM === */
.contact form {
	padding: 60px 0px 143px 0px;
}

.contact fieldset {
	width: 940px;
	padding: 0px;
	margin: 0px auto 0px auto;
	border: 0px;
}

.contact textarea,
.contact input[type='text'] {
	font-family: 'Museo-300';
	font-size: 150%;
	padding: 0px 30px 0px 30px;
	border-radius: 10px;
	border: 0px;
	box-shadow: #9ed1ed 0px 4px 0px;
	margin-bottom: 32px;
}

.contact input[type='text'] {
	height: 55px;
	width: 399px;
}

.contact input.wide,
.contact textarea {
	width: 880px;
}

.contact input.left {
	margin-left: 16px;
}

.contact textarea {
	padding-top: 10px;
	padding-bottom: 10px;
	height: 140px;
}

.contact input[type='submit'] {
	width: 530px;
	height: 76px;
	padding: 0px;
	border: 0px;
	margin-top: 25px;
	cursor: pointer;
	background-color: transparent;
	background-image: url('../img/send_form.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	color: #ffffff;
	font-family: 'Museo-700';
	font-weight: bold;
	font-size: 200%;
	text-transform: uppercase;
}

.contact input[type='submit']:hover {
	padding-top: 6px;
	background-image: url('../img/send_form_hover.png');
}

/* === PRODUCTS === */
.product {
	width: 320px;
	display: inline-block;
	margin-top: 70px;
  vertical-align: top;
}

.product + .product {
	margin-left: 65px;
}

.content .product .left {
	float: left;
	text-align: right;
	width: 177px;
}

.product h3 {
	text-align: right;
	margin: 0px 0px 20px 0px;
}

.product ul li:before {
	color: #000000;
}

.content .product .right {
	float: right;
	width: 143px;
}

.content .product .right img {
	margin: 0.75em 0em 18px 0em;	
}

.content .product .right a {
	font-family: 'Museo-700';
	font-weight: bold;
	font-size: 100%;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	background-image: url('../img/to_product.png');
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 10px;
	width: 115px;
	height: 66px;
}

.content .product a:hover {
	background-image: url('../img/to_product_hover.png');
	padding-top: 14px;
	height: 62px;
}

/* ==================================== FOOTER ==================================== */
div.footer {
	min-width: 940px;
	padding-top: 66px;
	color: #ffffff;
	font-family: 'Museo-300';
	padding-bottom: 30px;
}

.home .footer,
.about .footer {
	background-image: url('../img/footer_blue.png');
	background-repeat: no-repeat;
	background-position: center top;
}

.contact .footer,
.detail .footer {
	background-image: url('../img/footer_white.png');
	background-repeat: no-repeat;
	background-position: center top;
}

.footer a.button {
	font-family: 'Museo-700';
	font-weight: bold;
	font-size: 200%;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	background-image: url('../img/msg_button_footer.png');
	background-repeat: no-repeat;
	background-position: center center;
	width: 461px;
	height: 55px;
	line-height: 55px;
	vertical-align: middle;
}

.footer a.button:hover {
	background-image: url('../img/msg_button_footer_hover.png');
	padding-top: 4px;
	height: 51px;
}

ACC SHELL 2018