/* BASIC STRUCTURE
*******************************************************************************/
body {
    background-color: #E0E9F0;
    /*background-image: url("../img/someImge.png");*/
    background-position: 0 40px;
    background-repeat: repeat-x;
    padding-top: 50px;
    position: relative;
}

#container-bg {  
    background-color: #f8f8f8;/*#f0f0f0;*/
	margin:-10px auto 40px auto;
	max-width:980px;
	display:block;
	border-top:none;
    -webkit-box-shadow: 0px 2px 2px 2px #C1C4BA;
    -moz-box-shadow: 0px 2px 2px 2px #C1C4BA;
    box-shadow: 5px 5px 15px 5px #C1C4BA;;
    -webkit-border-radius: 0px 0px 0px 8px;
    -moz-border-radius: 0px 0px 0px 8px;
    border-radius: 0px 0px 8px 8px;
    padding-top:20px;
}

/* Overridng som bootstrap 
*************************************************************************/
/*icon viewing in telegr.am*/
[class^="icon-"],
[class*=" icon-"] {
  background-image: url("/src/bootstrap/2.0.4/img/glyphicons-halflings.png");
}
.icon-white {
  background-image: url("/src/bootstrap/2.0.4/img/glyphicons-halflings-white.png");
}

/* overriding width default for the fluid right column to make it a bit wider using a id */
.row-fluid > #col2.span3 {
    width: 31.0%;
}


/* PAGE HEADER AND HEDINGS FONTS
*************************************************************************/
h1, h2, h3 {
    color: #000000;
    /* font-family: Orbitron,Helvetica,Verdana,sans-serif; */
    font-weight: normal;
    text-shadow: 1px 1px 1px #EEE; /*2px 2px 2px #CCCCCC;*/
}

.page-header#sideCol  {
    border-bottom: none;
    margin: 18px 0;
    padding-bottom: 0px;
}


/* NAVBAR
*******************************************************************************/
.navbar {
    width:100%;
    background-color: #006699;
    background-image: -moz-linear-gradient(center top , #003366, #006699); 
    background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#006699));
    background-repeat: repeat-x;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;  
 
} 
.navbar .brand {
    color: #ccc;
    font-family: Orbitron,Helvetica,Verdana,sans-serif;
    font-weight: bold;
    padding: 10px 10px 10px 10px;
    text-shadow: 2px 4px 5px #777;
    margin-left: 5px;
}
.navbar-inner {
     background-color: #006699; 
     background-image: -moz-linear-gradient(center top , #003366, #006699);  
     background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#006699)); 
     background-repeat: repeat-x; 
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;   
   
	margin: 0px auto 0px auto;
	max-width:1020px;    
}
div.navbar > div.navbar-inner > div.container > div.nav-collapse > ul.nav > li > a {
  color:#ccc;
}
.navbar a:hover, .navbar .brand:hover, div.navbar > div.navbar-inner > div.container > div.nav-collapse > ul.nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
    background-color: #003c6f;
    color: #FFFFFF;
    text-decoration: none;
}

li.vdivider {
  display: inline-block;
  width:4px;
  height:100%;
  padding-top: 40px;
  background: transparent url('../images/tbdivider.png') top right no-repeat;
}
li.hdivider {
  height: 1px;
  margin: 2px 3px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
/* HEADER
*************************************************************************/

div#header div#hdr { float: left;  max-width: 180px; height:61px; margin-left:20px; margin-bottom:10px; }

.header-home { display:block; background: url('/images/liftweb-logo-single-small2.png') no-repeat; height: 61px; width: 180px;}

.header-home span {
	padding-left: 30px;
	text-indent: -9999px;
	float:left;
	display: inline;
}	

.header-home span a{
	display: block;
	height: 60px; width: 185px;
}

.lh-top-btn {
    width:120px;
	float:right;
    margin:5px 0px 20px 10px;
	}

/* MAIN QUOTE AREA 
*************************************************************************/

/*playing around with gradient just coment this out if you whant the bootstrap defaults */
/*.well {
  background-image: -moz-radial-gradient(orange,#4861b4);
  background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(#4861b4)); 
  background-image: -webkit-radial-gradient(orange, #4861b4); 
  background-image: radial-gradient(orange, #4861b4);
  color:#ccc;
}*/

#lh-quote div.well > blockquote > p.lead > strong {font-size:150%;}

#lh-quote div.well  { overflow: hidden;min-height:235px;}

#lh-quote div.well > blockquote > p.lead:after {
    bottom: 3px;
    content: "”";
    right: -10px;
    text-align: right;
}
#lh-quote div.well > blockquote > p.lead:before {
    content: "“";
    left: -10px;
    top: -11px;   
}
blockquote > p.lead{  
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: 600;
}
blockquote > p.lead:after,
blockquote > p.lead:before { 
    font-family: Georgia,Serif;
    color:#ccc;
    font-size: 36px;
    font-weight: bold;
}

/* BOXES BOXEs BOXes BOxes Boxes
*******************************************************************************/

/*playing around with gradient just coment this out if you whant the plainer look bellow */
/*div.gradient-panel {
  background-image: -moz-radial-gradient(#9eccf0,#E0E9F0);
  background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#9eccf0), to(#E0E9F0)); 
  background-image: -webkit-radial-gradient(#9eccf0, #E0E9F0); 
  background-image: radial-gradient(#9eccf0, #E0E9F0);
  }*/
/*plain look*/	
div.gradient-panel {
   background: #E0E9F0;
   overflow: hidden;
   display: inline-block;
   float:left;
   width:24%; min-width:204px;
   min-height:105px;
	border: none;  
	padding: 10px 5px 5px 10px;
	margin: 0px 0.5% 15px 0.5%;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	-webkit-box-shadow: 1px 1px 1px 2px #C1C4BA; 
	-moz-box-shadow: 1px 1px 1px 2px #C1C4BA;
	box-shadow: 1px 1px 1px 2px #C1C4BA; 
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius: 4px;
}


/* USER LOGOS
*******************************************************************************/
#logo-container {
  display: block;
  float:left;
  width:100%; 
  background:#9eccf0; /*#b6d7f0;*/ /* #7891E4;*/ /*#E0E9F0;*/ /*#4861b4;*/ /*#374e97;*/ 
  text-align:center;
  padding:10px 0px; 
  margin:5px 0px 25px 0px; 

	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	-webkit-box-shadow: 1px 1px 1px 2px #C1C4BA; 
	-moz-box-shadow: 1px 1px 1px 2px #C1C4BA;
	box-shadow: 1px 1px 1px 2px #C1C4BA;   
 
  -webkit-border-radius: 20px; 
  -moz-border-radius: 20px; 
  border-radius: 20px;  
  }


#logo-container {
  background-image: -moz-radial-gradient(#9eccf0,#E0E9F0);
  background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#9eccf0), to(#E0E9F0)); 
  background-image: -webkit-radial-gradient(#9eccf0, #E0E9F0); 
  background-image: radial-gradient(#9eccf0, #E0E9F0);
  } 
 
  
#logo-container .logo {
  float:left; 
  width:24%; 
  margin: 10px 0.5% 10px 0.5%;
  text-align:center; 
  }
  
/* FOOTER
*******************************************************************************/
#footer{ float:left; margin: 5px auto 0;	width: 100%; height:auto; text-align:center;  }
#footer p {	
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino",
  "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: normal;
 }
.ftr-links {line-height: 18px; color:#888; font-size:0.9em; }
.ftr-links a, .ftr-links a:visited, .ftr-copy a {color:#888; }
.ftr-links a:hover {text-decoration:underline;}
.ftr-copy { text-align:center; color:#000;}  

hr.tight {
  margin: 4px 0;
}

/* Nice HR
*******************************************************************************/
hr {
	padding-top: 0px;
	padding-bottom: 0px;
    border: 0;
    height: 1px;
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:         linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
}


/* MEDIA stuff 
*************************************************************************/

@media (max-width: 1040px) {
   div.gradient-panel {width: 49%;min-height:70px;}
   div.gradient-panel h1 {font-size:180%;}
   /*#lh-quote div.well {min-height:235px;}*/
}

@media (min-width: 768px) and (max-width: 979px) {
    body {font-size: 80%; line-height: 16px; padding-top:0px; padding-left:0px;padding-right:0px;}
    li.vdivider {display: none !important;}
    #container-bg {    
    background-color: #f8f8f8;
	margin:-20px auto 40px auto;
	max-width:1024px;
	display:block;
	border:none;
    -webkit-box-shadow: 0px #fff;
    -moz-box-shadow: 0px #fff;
    box-shadow: 0px #fff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px ;
    border-radius: 0px ;
    padding-top:20px;
    }
    .navbar .container { padding: 0 10px;}
    .navbar-fixed-top, .navbar-fixed-bottom {margin-left: 0;margin-right: 0;}
	div.gradient-panel {width: 49%;min-height:70px;}
    div.gradient-panel h1 {font-size:130%;}	
    div.gradient-panel p {font-size:100%;}	
    #logo-container .logo { width:44%;}    
    .lh-top-btn { width:90px;}
    #lh-quote div.well {min-height:290px;}
}
@media (max-width: 767px) {
    body {font-size: 90%;line-height: 16px; padding-top:0px; padding-left:0px;padding-right:0px; }
    li.vdivider {display: none !important;}
    .row-fluid > #col2.span3 {width: 98.0%;}
    #container-bg {    
    background-color: #f8f8f8;
	margin:-18px auto 40px auto;
	max-width:1024px;
	display:block;
	border:none;
    -webkit-box-shadow: 0px #fff;
    -moz-box-shadow: 0px #fff;
    box-shadow: 0px #fff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px ;
    border-radius: 0px ;
    padding:10px 5px;
    }    
    .navbar-fixed-top, .navbar-fixed-bottom {margin-left: 0;margin-right: 0;}
    .navbar .container { padding: 0 10px;}
	div.gradient-panel h1 {font-size:120%;}	
	div.gradient-panel p {font-size:90%;}
	div.gradient-panel {width:100%;min-height:70px;}
	.lh-top-btn { width:70px;}
	#logo-container .logo { width:44%;}  
    .lh-top-btn {width:100px;margin:5px 0px 20px 0px;}	
    .header-home {max-height: 61px; max-width: 180px;margin:0px 0px 5px 1px;}
    div#header div#hdr { margin-left:3px; }
	#lh-quote div.well {min-height:460px;}
}



@media (max-width: 480px) {
    body {font-size: 90%;line-height: 16px;padding-top:0px; padding-left:0px;padding-right:0px;}
    li.vdivider {display: none !important;}
    #container-bg {    
    background-color: #f8f8f8;
	margin:-18px auto 5px auto;
	max-width:1024px;
	display:block;
	border:none;
    -webkit-box-shadow: 0px #fff;
    -moz-box-shadow: 0px #fff;
    box-shadow: 0px #fff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px ;
    border-radius: 0px ;
    padding:10px 5px;
    }    
    .navbar .container { padding: 0 10px;}
    .navbar-fixed-top, .navbar-fixed-bottom {margin-left: 0;margin-right: 0;}
	div.box-gradient {width: 100%;min-height:90px; }
	div.box-gradient h1 {font-size:120%;}
	div.box-gradient span {font-size:70%;}	
	.lh-top-btn { width:90px;}	
	#logo-container .logo { width:95%;}  
    .lh-top-btn {width:100px;margin:5px 0px 20px 0px;}
    .header-home {max-height: 61px; max-width: 180px;margin:0px 0px 5px 1px;}
    div#header div#hdr { margin-left:3px; }
    #lh-quote div.well {min-height:730px;}
}

/* 
*************************************************************************/


/* SUBNAV is currently not used 
*
*.subnav {
*    background-color: #EEEEEE;
*    background-image: -moz-linear-gradient(center top , #F5F5F5 0%, #EEEEEE 100%);
*    background-repeat: repeat-x;
*    border: 1px solid #E5E5E5;
*    border-radius: 4px 4px 4px 4px;
*    height: 36px;
*    width: 100%;
*}
*************************************************************************/