/*
Theme Name: LifeOfLight
Author: dtx
Author URI: http://datorex.net/
Description: Custom theme for LifeOfLight.
Version: 1.1
*/



/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
}


/* LOL customized
-------------------------------------------------- */

pre{
	border: 0!important;
	background-color: rgba(25,46,88,0.6)!important;
	color: #ffffff!important;
}

mark{
	background-color: rgba(145,246,88,0.4);
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 20px;
  margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {

}

/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
  border: 0;
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
	 -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
		  box-shadow: 0 2px 10px rgba(0,0,0,.25);
	background-image: url('images/bg.png');
	/* background-color: rgba(2, 190, 253, 0.6); */
	background-color: rgba(25,46,88,.8);
}

/* Downsize the brand/project name a bit */
.navbar .brand {
  padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}

/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
  padding: 15px 20px;
}

/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
  margin-top: 10px;
}

.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus {
	background-color: #192e58;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

.carousel-person{
	display: none;
}
.carousel-person img{
	min-width: 0% !important;
	height: 25% !important;
	left: 22% !important;
	top: 17% !important;
}

.carousel {
/*   background: url('images/frontslidertop.jpg'); */
  margin-bottom: 60px;
}

.carousel .container {
  position: relative;
  z-index: 9;
}

.carousel-control {
  height: 80px;
  margin-top: 0;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
}

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.carousel-caption {
  background-color: transparent;
  position: static;
  max-width: 620px;
  padding: 0 20px;
  margin-top: 15.5%;
}
.carousel-caption h1,
.carousel-caption .lead {
  margin: 0 0 0 25%;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  /* background-color: rgba(25,46,88,0.4); */
  padding: 0 15px;
}
}
.carousel-caption .btn {
  margin-top: 10px;
}


.search-highlight{
	background-color: #0088cc;
	color: #ffffff;
}


.widget-title{
	text-align: center;
}


.cart-link{
	color: #999;
	font-size: 22px;
	padding: 10px 15%;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 5px;
	/* background-color: #005580; */
	background-color: #192e58;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
a.cart-link:hover{
	text-decoration: none;
	color: #ffffff;
}

.media-logo img{
	min-width: 0%;
	height: 15%;
	left: 8%;
	top: 27%;

}
.media-logo img{
	min-width: 0% !important;
	height: 33% !important;
	left: 8% !important;
	top: 46% !important;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .span4 {
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .span4 p {
  margin-left: 10px;
  margin-right: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
  padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
  overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
  margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}

/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
  margin-right: 40px;
}
.featurette-image.pull-right {
  margin-left: 40px;
}

/* Thin out the marketing headings */
.featurette-heading {
  font-size: 50px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

/* Woocommerce
-------------------------------------------------*/
.cart_list{
	list-style:none;
	font-size: .80em;
	width: 258px;
	padding: 10px 0 10px 10px;
	margin: 0;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
}
.cart_list > li{


}
.cart_list img{
	height: 50px;
	width: 50px;
	padding-right: 5px;
}
.total{
	padding-left: 85px;
}
.woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li, .woocommerce-page ul.cart_list li, .woocommerce-page ul.product_list_widget li{
	padding: 10px !important;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
	margin-bottom: 0;
}

/* message */
.woocommerce-message{
	border: 3px solid #0088cc !important;
	/* padding: 1em 1em .50em 3.5em !important; */
}
.woocommerce-message:before{
}
.woocommerce-message:before, .woocommerce-error:before, .woocommerce-info:before{
	height: 2.5em !important;
	width: 2.5em !important;
}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button{
	padding: 2px 10px !important;
}


/* Sidenav for Docs
-------------------------------------------------- */

.bs-docs-sidenav {
  width: 228px;
  margin: 30px 0 0;
  padding: 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
  -webkit-border-radius: 6px 6px 0 0;
     -moz-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
  opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
  background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
  opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
  background-image: url(../img/glyphicons-halflings-white.png);
  opacity: 1;
}
.bs-docs-sidenav.affix {
  top: 40px;
}
.bs-docs-sidenav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}

/*
	CONTACT FORM 7
*/

span.wpcf7-not-valid-tip {
	position: absolute;
	top: 0px !important;
	left: 110% !important;
	z-index: 100;
	background: #FFFCD6 !important;
	border: none !important;
	border-left: 3px solid #FEC297 !important;
	font-size: 10pt !important;
	width: 75% !important;
	padding: 2px !important;
}

div.wpcf7-response-output{
	margin: 0 !important;
}

.contact-form-lol{
	float: left;
	width: 25%;
	font-size: .85em;
	text-align: right;
	padding: 0 10px;
}

.form-narrow-box{
	width: 20%;
}
span.wpcf7-not-valid-tip-no-ajax{
	color: #f00;
	font-size: 10pt;
	display: inline !important;
	margin: 0 15px;
	padding: 3px; 
	background-color: #FFFCD6;
	border-left: 3px solid #FEC297;
}

div.wpcf7-validation-errors{
	background-color: #FEA397;
	border: 2px solid #F78573 !important;
}
div.wpcf7-mail-sent-ok{
	background-color: #158909;
	color: #ffffff;
	padding: 15px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

/* Desktop large
------------------------- */
@media (min-width: 1200px) {
  .bs-docs-container {
    max-width: 970px;
  }
  .bs-docs-sidenav {
    width: 258px;
  }
  .bs-docs-sidenav > li > a {
    width: 230px \9; /* Override the previous IE8-9 hack */
  }
}

@media (max-width: 979px) {

  .container.navbar-wrapper {
	margin-bottom: 0;
	width: auto;
  }
  .navbar-inner {
	border-radius: 0;
	margin: -20px 0;
  }

  .carousel .item {
	height: 500px;
  }
  .carousel img {
	width: auto;
	height: 500px;
  }

  .featurette {
	height: auto;
	padding: 0;
  }
  .featurette-image.pull-left,
  .featurette-image.pull-right {
	display: block;
	float: none;
	max-width: 40%;
	margin: 0 auto 20px;
  }
  
  /* When affixed, space properly */
  .bs-docs-sidenav {
    top: 0;
    width: 218px;
    margin-top: 30px;
    margin-right: 0;
  }
}


@media (max-width: 767px) {

  .navbar-inner {
	margin: -20px;
  }

  .carousel {
	margin-left: -20px;
	margin-right: -20px;
  }
  .carousel .container {

  }
  .carousel .item {
	height: 300px;
  }
  .carousel img {
	height: 300px;
  }
  .carousel-caption {
	width: 65%;
	padding: 0 70px;
	margin-top: 100px;
  }
  .carousel-caption h1 {
	font-size: 30px;
  }
  .carousel-caption .lead,
  .carousel-caption .btn {
	font-size: 18px;
  }

  .marketing .span4 + .span4 {
	margin-top: 40px;
  }

  .featurette-heading {
	font-size: 30px;
  }
  .featurette .lead {
	font-size: 18px;
	line-height: 1.5;
  }

}

@media (max-width: 768px) {
	.carousel-caption{
		padding-top: 25px;
	}
	.carousel-person{
		display: block;
	}
	.carousel-person-hide{
		display: none;
	}
}

@media (max-width: 768px) {
	.display-no{
		display: none;
	}
	#LOLCarousel{
		display: none;
	}
	
	.media-logo img{
		min-width: 0% !important;
		height: 23% !important;
		left: 8% !important;
		top: 50% !important;
	}
}



/* docs CSS Tablet to desktop
------------------------- */
@media (min-width: 768px) and (max-width: 979px) {

  /* Adjust sidenav width */
  .bs-docs-sidenav {
    width: 166px;
    margin-top: 20px;
  }
  .bs-docs-sidenav.affix {
    top: 0;
  }
}

/* Tablet
------------------------- */
@media (max-width: 767px) {
  /* Sidenav */
  .bs-docs-sidenav {
    width: auto;
    margin-bottom: 20px;
  }
  .bs-docs-sidenav.affix {
    position: static;
    width: auto;
    top: 0;
  }
}

@media (max-width: 360px) {
	.carousel-caption {
		margin-top: 10%;	
	}
}