.tilt.right {
   transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -webkit-transform: rotate(3deg);
}
.tilt.left {
   transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -webkit-transform: rotate(-3deg);
}
body {
   min-width: 520px;
}
.list {
 flex-direction: vertical;
 border-radius: 3px;
 width: 230px;
 height: 300px;
 position: relative;
 padding: 4px 3px 3px;
 max-height: 100%;
 margin: 0 5px;
 flex: 0 0 260px;
 background: #e3e3e3 ;
}
.column {
   width: 280px;
   float: left;
   padding-bottom: 100px;
   position: absolute;
}
.dropzone {
  min-height: 15px;
}
.portlet {
  width: 100%;
   margin: 0 1em 1em 0;
   padding: 0.3em;
   background: #fff;
   border-radius: 3px;
}
.portlet-header {
  padding-top: 10px;
  padding-bottom: 10px:
  min-height: 30px;
   padding: 0.1em 0.1em;
   margin-bottom: 0.5em;
   position: relative;
   white-space: normal;
}
.portlet-toggle {
   position: absolute;
   top: 50%;
   right: 0;
   margin-top: -8px;
}
.portlet-content {
   padding: 0.4em;
}
.portlet-placeholder {
   border: 1px dotted black;
   margin: 0 1em 1em 0;
   height: 50px;
}

.portlet-column {
  display: inline-block;
  width: 300px;
  margin: 4px;
  vertical-align: top;
  background: #ccc;
  border-radius: 5px;
  padding: 10px;
}
.board {
  overflow: scroll;
  white-space: nowrap;
}
.add-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  color: #8c8c8c;
  display: block;
  -moz-box-flex: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 2px -3px -3px;
  padding: 7px 10px;
  text-decoration: none;
}
.board-column-name {
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
  font-size: 15px;
  line-height: 18px;
  margin: 0;
  min-height: 19px;
  margin-bottom: 5px;
  min-width: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
.card-name {
  word-wrap: normal;
  width: 100%;
}
li.sortable-placeholder {
  border: 1px dashed #FF0000;
  background: none;
}
header, section {
  display: block;
}
body {
  font-family: 'Droid Serif';
}
h1, h2 {
  text-align: center;
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding-left: 0em;
}
#features {
  margin: auto;
  width: 460px;
  font-size: 0.9em;
}
.connected, .sortable, .exclude, .handles {
  margin: auto;
  padding: 0;
  width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sortable.grid {
  overflow: hidden;
}
.connected li, .sortable li, .exclude li, .handles li {
  list-style: none;
  list-style-type: none;
  border: 1px solid #CCC;
  background: #F6F6F6;
  font-family: "Tahoma";
  color: #1C94C4;
  margin: 5px;
  padding: 5px;
  height: 100%;
}
.connected.ul {
  list-style-type: none;
}
.handles span {
  cursor: move;
}
li.disabled {
  opacity: 0.5;
}
.sortable.grid li {
  line-height: 80px;
  float: left;
  width: 80px;
  height: 80px;
  text-align: center;
}
li.highlight {
  background: #FEE25F;
}
#connected {
  overflow: hidden;
  margin: auto;
  float: left;
}
.connected {
  float: left;
  width: 100%;
}
.connected.no2 {
  float: right;
}

#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 0em; font-size: 1.4em; height: 44px; }
#sortable li span { position: absolute; margin-left: -1.3em; martin-right: 1em; }