/*

 * examples/full/css/demo.css

 * 

 * This file is part of EditableGrid.

 * http://editablegrid.net

 *

 * Copyright (c) 2011 Webismymind SPRL

 * Dual licensed under the MIT or GPL Version 2 licenses.

 * http://editablegrid.net/license

 */



body {

	font-family:'lucida grande', tahoma, verdana, arial, sans-serif;

	font-size:11px;

}



h1 { 

	font-size: 15px;

}



h2 { 

	font-size: 13px;

}



a { 

	color: #548dc4;

	text-decoration: none;

}



h1 a {

	font-size: 12px;

	float: right;

}



a:hover {

	text-decoration: underline;

}



img {

	border: 0;

}



.ok { 

	background-color: #0a8819; 

	color: white; 

	padding: 5px;

}



input.invalid {

	background: red;

	color: #FDFDFD;

}

td {
	
}


#message {

	width: 100%;

}  



td.number {
	font-weight: bold;
	
	white-space: nowrap;

	text-align: left;
}



td.boolean {

	text-align: left;

}



th.boolean {

	text-align: left;

}



table.testgrid { 

	border-collapse: collapse; 

	border: 1px solid #CCB;

	width: 100%;

}



table.testgrid tr {

	border-bottom: 1px solid #DDD;

}



table.testgrid>tbody tr:hover {

	background-color: #888888;

	color: white;

}



table.testgrid>tbody tr:hover a {

	color: white;

}



table.testgrid th {

	background: #E5E5E5;

	border: 1px solid #D5D5D5;

	color: #555;

	text-align: left;

	padding-left: 5px;

	padding-right: 0px;

	padding-top: 5px;

	padding-bottom: 5px;

	white-space: nowrap; 

}



table.testgrid td {

	padding: 5px;

	border: 1px solid #E0E0E0;

}

table.testgrid i {

  font-size: 1.5em;

  cursor: pointer;

}

img.icon {

  width: 16px;

  cursor: pointer;

}

#paginator .icon {

  width: 24px;

  margin: 3px;

  vertical-align: middle;

}

#toolbar .icon {

  width: 32px;

  vertical-align: middle;

}

#toolbar a {

  display: inline-block;

}



#edition {

	padding-top: 5px;

	width: 600px;

	border: 0px;	

}



#paginator {

  	margin: 10px 0;

	font-size: 1.4em;

	text-align: center;

	margin-bottom: 5px;

}



#paginator a { color:  #0078cc; text-decoration: none;line-height: 40px; padding: 4px 8px;   }           

#paginator a:hover { color: #000; }

#paginator a:active, #currentpageindex {  background-color: #0078cc; color: #fff; border-radius: 5px;}

#paginator span#currentpageindex {  padding: 4px 8px;  }

#paginator a:focus { outline: 1px; }



#filter { 

	width: 250px;

	margin-bottom: 10px; 

    border: 1px solid #d1d1d1;

    padding: 5px;

    font-size: 1.1em;

}



#wrap {

	margin: 10px;

}



#addform {

  position: fixed;

  background-color: #f6f6f6;

  box-shadow: 3px 3px 3px #636363;

  display: none;

  width: 400px;

  height: 120px;

  border-radius: 20px;

  padding: 20px;

  left: 50%;

  top: 50%;

  margin-left: -200px;

  margin-top: -100px;

  z-index: 1000;

  border: 1px solid #e1e1e1;

}

#addform .row {

  margin: 10px 0 20px 0;

}

#addform input {

  width: 380px;

	padding: 5px 9px;

	border: solid 1px #e1d1e1;

	outline: 0;

}

   

form input:hover, form textarea:hover, form input:focus, form textarea:focus { 

	border-color: #a1a1a1; 

	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;

	-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;

}



#addform .row.tright {

  text-align: right;

}

.button {

  display: inline-block;

  margin-bottom: 0;

  font-weight: normal;

  text-align: center;

  vertical-align: middle;

  cursor: pointer;

  background-image: none;

  border: 1px solid transparent;

  white-space: nowrap;

  padding: 3px 12px;

  font-size: 14px;

  line-height: 1.42857143;

  border-radius: 4px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  color: #333333;

  background-color: #f1f1f1;

  border-color: #cccccc;

  transition: background-color 0.5s; }



.button:hover,

.button:focus,

.button:active,

.button:active {

  color: #333333;

  background-color: #cac9cb;

  border-color: #adadad;

  text-decoration: none; }



.button i.fa {

  /** usefull only with font-awesome icons */

  margin-right: 5px; }



/**** Delete button ***/

.button.delete {

  color: #ffffff;

  background-color: #d9534f;

  border-color: #d43f3a; }



.button.delete:hover,

.button.delete:focus,

.button.delete:active,

.button.delete.active {

  color: #ffffff;

  background-color: #d2322d;

  border-color: #ac2925; }



/****** Add or green button ****/

.button.add, .button.green {

  color: #ffffff;

  background-color: #6ccb63;

  border-color: #5db056; }



.button.add:hover,

.button.add:focus,

.button.add:active,

.button.add.active,

.button.green:hover,

.button.green:focus,

.button.green:active,

.button.green.active {

  color: #ffffff;

  background-color: #5aad55;

  border-color: #5db056; }





i.fa.red { color: #d2322d }