@CHARSET "UTF-8";
/* JoodDB css File */
/* If you want to keep changes on update copy this file to your template cc folder */
/* (/templates/YOUR_TEMPLATE/css/joodb.css) */

/* Joodb form */
#joodbForm { display: block; }
#joodbForm input.inputbox, #joodbForm  select.inputbox, #joodbForm  textarea.inputbox {
    border: 1px solid #A9A9A9;
    background-color: #fff;
    box-shadow: inset 4px 4px 10px 0 #E5E5E5;
    border-radius: 3px;
    padding: 4px 6px;
    line-height: 1.46em;
    height: auto;
}
#joodbForm input.inputbox:focus, #joodbForm select.inputbox:focus, #joodbForm  textarea.inputbox:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
}
#joodbForm .button { padding: 4px 6px; line-height: 1.46em; height: auto; width: auto; display: inline-block; border: 1px solid #A9A9A9; }
#joodbForm fieldset { display: block; position: relative; overflow: visible; padding: 10px 15px; margin: 10px 0; border: 1px solid #dddddd; background: #f5f5f5; border-radius: 5px; }
#joodbForm legend { background-color: #444; box-shadow: 2px 2px 5px rgba(00,00,00,0.4); border-radius: 3px; padding: 2px 5px; color: #000; }
#joodbForm label { margin: 5px 0 3px 0; }
#joodbForm input.required, #joodbForm  textarea.required, #joodbForm  select.required { background-color: #fffac9; }
#joodbForm label.invalid { color: #d40000; }
#joodbForm input.invalid, #joodbForm  textarea.invalid, #joodbForm  select.invalid { border: 1px solid #d40000; }
#joodbForm textarea { width: inherit; box-sizing: border-box; }
#joodbForm .control-group { float: left; display: block; width: 100%; box-sizing: border-box; }
#joodbForm .input-mini {  width: 60px; }
#joodbForm .input-small { width: 90px; }
#joodbForm .input-medium { width: 150px; }
#joodbForm .input-large { width: 210px; }
#joodbForm .input-xlarge { width: 270px; }
#joodbForm .input-xxlarge {  width: 100%; }
#joodbForm .text-large { font-size: 1.4em; height: auto;  line-height: 1.46em; height: auto; }
#joodbForm .inline { display: inline-block; margin: 0 10px 5px 0; }

/* Definition Lists */
.joodb dl { display: flex; flex-wrap: wrap; margin: 5px 0; line-height: 1.4em; padding: 0;  box-sizing: padding-box;   }
.joodb dt {  display: flex; width: 25%; color: #666; font-weight: bold; min-height: 1.4em; margin: 0; padding: 5px;   box-sizing: border-box; }
.joodb dd { display: flex; min-height: 1.4em;  margin: 0; padding: 5px; width: 75%;  box-sizing: border-box;  }

/* Search form */
#joodbForm .searchbox { display: block; margin: 10px 0; }
#joodbForm .searchbox .inputbox { padding: 5px 8px; display: inline-block;  width: auto; min-width: 150px; }
#joodbForm .searchbox input.inputbox { width: 200px; }
#joodbForm .searchbox select.inputbox {  min-width: 0; width: 150px; }
#joodbForm .searchbox button {  display: inline-block; }
#joodbForm #limit { width: 60px; text-align: center; }

.joodb .table { display: table;}
.joodb .tr { display: table-row;}
.joodb .td { display: table-cell;  padding: 10px;vertical-align: middle; }

/* Pagination */
.joodb div.pagination { clear: both; display: block; width: 100%; overflow: visible; margin: 10px 0; }
.joodb .alphabox a, .joodb .alphabox span { padding: 3px 5px;  margin: 0 1px; }
.joodb .alphabox ul { list-style: none; margin: 0; padding: 0; }
.joodb .alphabox li { display: inline-block; padding: 0; margin: 0; background: none; }
.joodb .alphabox li a, .joodb .alphabox li span { padding: 4px 5px;  border: 1px solid #f0f0f0; }
.joodb small, .joodb .small { color: #666666; }

.joodb { display: block;  clear: both;  }

/* tables */
.joodb table { background: #ffffff; border-collapse: collapse;  border-spacing: 0; text-align: left;  width: 100%; }
.joodb table tr:nth-child(odd) > td, .odd { background-color: #DAD9D7;  }
.joodb table td { border-bottom: .1rem solid #efefef; padding: 5px 8px; font-size: .8em; }
.joodb table th, .joodb .header { background: #356aa0; color: #fff; border-bottom: 1px solid #ccc; padding: 5px 8px; text-align: left; font-size: 1.1em; font-weight: 600; }
.joodb table th a, .joodb .header a {  color: #fff; text-decoration: none; }
.joodb table th a:hover, .joodb .header a:hover {  color: #ffa; text-decoration: none; }

.joodb .block { display: block; clear: both; overflow: hidden; padding: 10px; margin-bottom: 10px; border: 1px solid #f0f0f0; border-radius: 3px; }
.joodb .title { padding: 0; margin: 0 0 5px 0; font-size: 1.2em; }

.nodata { display: block; font-size: 1.4em; font-weight: bold; color: #d40000; margin: 5px 0; }
.prevbutton, .nextbutton ,.readonbutton, .backbutton  { display: inline-block; margin: 5px 0; }
.nextbutton ,.readonbutton { float: right; }
.item-separator { border-bottom: 1px solid #f5f5f5; margin: 10px 0 10px 0; height: 1px; line-height: 1px; }
.clr {  *zoom: 1;  }
.clr:before, .block:before,
.clr:after, .block:after { display: table;  content: ""; line-height: 0;  }
.database-thumb, .database-image { background: #ffffff; border: 1px solid #ddd; padding: 2px; border-radius: 4px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11); height: auto; }

/* BV206 parts layout */

.joodberror {
color: #666666;
font-family: arial;
font-size: 16px;
}

#boxshadow {
  position: relative;
  -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

/* Make the image fit the box */
#boxshadow img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

#boxshadow::after {
  content: '';
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);        
  width: 70%; 
  left: 15%; /* one half of the remaining 30% */
  height: 100px;
  bottom: 0;
}
.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.wrapper_alt { 
  border : 3px solid #fff; 
  overflow:hidden;
  background-color: #ffffff;

}

.wrapper_alt div {
   padding: 10px;
}

.wrapper { 
  border : 3px solid #fff; 
  overflow:hidden;
  background-color: #ffffff;

}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}

#one {
  background-color: #fffff;
  float:left; 
  margin-right:20px;
  width:40%;
  border-right:0px solid #000;


}
#two { 

  background-color: white;
  overflow:hidden;
  margin:10px;
  border:0px dashed #ccc;
  min-height:170px;
}
#three { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
  width:400px;
  box-shadow: 3px 3px 8px 3px #666;
}
#four { 
  background-color: white;
	width:400px;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
  box-shadow: 3px 3px 8px 3px #666;
}

.wrapperpics {
  position: relative; 
  background-color: #d7dbd7;
  border : 0px solid #fff; 
  overflow:hidden;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;

}


#pic1 {
  background-color: #d7dbd7;
  float:left; 
  margin-right:10px;
  margin-bottom: 10px;
  width:200px;
  border:5px solid #ccc;	
}

#pic2 {
  background-color: #d7dbd7;
  float:left; 

}

#pic3 {
  background-color: #d7dbd7;
  float:left; 
  margin-right:10px;
  margin-bottom: 10px;
  width:100px;
  border-right:0px solid #000;
}

#pic4 {
  background-color: #d7dbd7;
  float:left; 
  margin-right:10px;
  margin-bottom: 10px;
  width:100px;
  border-right:0px solid #000;
}

#pic5 {
  background-color: #d7dbd7;
  float:left; 
  margin-right:10px;
  margin-bottom: 10px;
  width:100px;
  border-right:0px solid #000;
}

.left {
  background-color: #ffffff;
  padding: 20px;
  float: left;
  width: 40%; /* The width is 20%, by default */
  border:1px solid #999A99;
  box-shadow: 3px 3px 8px 3px #666;
  margin-bottom: 25px;
}
.left-search {
  background-color: #ffffff;
  padding: 20px;
  float: left;
  width: 40%; /* The width is 20%, by default */
  border:1px solid #999A99;
  margin-bottom: 25px;
}
  
.right-search {
  background-color: #ffffff;
  padding: 20px;
  float: left;
  width: 55%; /* The width is 20%, by default */

}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

.right {
  background-color: #C4D0C3;
  padding: 20px;
  float: left;
  width: 60%; /* The width is 20%, by default */
  border:1px solid #999A99;
  box-shadow: 3px 3px 8px 3px #666;
}

.leftcat {
  background-color: #ffffff;
  padding: 20px;
  float: left;
  width: 50%; /* The width is 20%, by default */

}

.maincat {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 5%; /* The width is 60%, by default */
  border:1px solid #999A99;
  box-shadow: 3px 3px 8px 3px #666;
}

.rightcat {
  background-color: #ffffff;
  border-style: inset;
  border:0px solid #999A99;
  padding: 0px;
  vertical-align: middle;
  float: left;
  width: 50%; /* The width is 20%, by default */

}

.catbutton {
  background-color: #ffffff;
  padding: 5px;
  border:1px solid #999A99;
  box-shadow: 3px 3px 8px 3px #666;
}
.gsbutton {
	box-shadow: 7px 10px 14px -10px #546669;
	background-color:#90ab93;
	border-radius:8px;
	border:1px solid #c4c9cc;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:8px 11px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.gsbutton:hover {
	background-color:#718273;
  	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
}


.gsbutton:active {
	position:relative;
	top:1px;
}