/* Basic element styles */

body {
  font-family: Arial, sans-serif;
  font-size:14px;
  background:white;
  color:rgb(43, 38, 38);
}

h1, h2, h3, h5, h6 {
  text-align: center;
}

h1 {
  font-size:55px;
  margin-bottom:0px;
  cursor:default;
  padding:0px;
  letter-spacing: 2.1px;
}

h3 {
  font-size:18px;
  padding:0px;
}

h4 {
  text-align: left;
  font-size:14px;
  padding:0px;
  margin:4px;
}

h5 {
  font-size:20px;
  margin:-6px 0 0 0;
  color:#5e6163;
}

input[type='text'] {
  border-radius:2px;
  padding:3px;
  border:solid 1px #bbb;
}

input[type="radio"] {
  margin-right:5px;
}

/* Classes for buttons and other stuff */

.btn {
  background:white;
  border:solid 1px #bbb;
  border-radius:2px;
  cursor: pointer;
  font-weight: bold;
  display:inline-block;
  text-align: center;
  text-decoration: none;
}

.btn.large {
  font-size:18px;
  padding:4px 8px;

}

.btn.medium {
  font-size:14px;
  padding:2px 6px;
}

.btn.small {

}

.btn:hover {
  color:white !important;
  text-decoration: none;
}


.btn.grey {
  color:#333;
}

.btn.grey:hover {
  background:#333;
  border:solid 1px #333;
}

.btn.red {
  color:rgb(208,52,37);
}

.btn.red:hover {
  background:rgb(208,52,37);
  border:solid 1px rgb(208,52,37);
}

.btn.blue {
  color:rgb(21,90,233);
}

.btn.blue:hover {
  background:rgb(21,90,233);
  border:solid 1px rgb(21,90,233);
}

.btn.green {
  color:green;
}

.btn.green:hover {
  background:green;
  border:solid 1px green;
}

/* Main menu with buttons */

#menu {
  margin: 30px auto 8px auto;
  max-width:90%;
  text-align: center;
}

#import-file {
  display:none;
}

/* Message box for success/failure messages */
#message-box {
  margin:10px auto;
  width:90%;
  color:white;
  max-width: 800px;
  border-radius:3px;
  height:0px;
  line-height: 30px;
  font-size:16px;
  text-align:center;
  overflow:hidden;
  transition: height 0.2s ease-out;
  position: relative;
}

#message-box.visible {
  height:30px;
  transition: height 0.2s ease-out;
}

#message-box.success {
  background-color: green;
}

#message-box.error {
  background-color: rgb(208,52,37);;
}

#message-box a {
  color:white;
  font-size:20px;
  position: absolute;
  right:6px;
  top:0px;
}

/* Table of redirects */

.redirect-table {
  max-width:800px;
  border:solid 1px #bbb;
  margin:0px auto;
  border-radius:3px;
}

.redirect-row {
  position: relative;
  font-size:14px;
  padding:8px;
  line-height:18px;
  border-bottom:solid 1px #bbb;
}

.redirect-info {
  display:table;
}

.redirect-info div {
  display:table-row;
}

.redirect-info div label {
  display:table-cell;
  padding:3px 5px;
  white-space: nowrap;
}

.redirect-info div p {
  display:table-cell;
  word-wrap:break-word;
  max-width:700px;
}

.redirect-row:last-child {
  border-bottom: none !important;
}

.redirect-row:nth-child(odd) {
  background:#f8f8f8;
}

.redirect-row.disabled label, .redirect-row.disabled span, .redirect-row.disabled p, a.disabled {
  color:#bbb !important;
}

/* Edit, Delete, Disable buttons */
.redirect-row a, .redirect-row a:visited {
  font-size:13px;
  margin-top:5px;
  padding:2px;
  width:60px;
}

.redirect-row h4 span.disabled-marker {
  color:red !important;
}

.move-up-btn, .move-down-btn {
  width:35px !important;
}


.redirect-row label {
  display:inline-block;
  width:80px;
  font-weight:bold;
  text-align: right;
}

.arrow {
  font-size:18px;
}

a.disabled:hover {
  cursor:default;
  color:#bbb !important;
  border:solid 1px #bbb !important;
  background:white !important;
}

/* Popup form for deleting redirects */

#delete-redirect-form {
  position: fixed;
  padding:10px;
  min-width:500px;
  width:intrinsic;
  background:white;
  border:solid 1px #bbb;
  border-radius:3px;
  z-index: 6000;
  left:50%;
  margin-left:-260px;
  top:50%;
  margin-top:-220px;
  height:220px;
}

#delete-redirect-form div{
  margin-bottom:7px;
}

#delete-redirect-form div label:first-child {
  width:130px;
  font-weight:bold;
  text-align: right;
  display:inline-block;
  vertical-align: top;
}

#delete-redirect-form div span {
  display:inline-block;
  width: 330px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
}

/* Edit form */

#cover {
  position: fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index: 5000;
  background: #333;
  opacity: 0.5;
}

.blur {
  -webkit-filter:blur(3px); 
  filter:blur(3px); 
}

#edit-redirect-form {
  position: fixed;
  display:table;
  width:700px;
  background:white;
  border:solid 1px #bbb;
  border-radius:3px;
  z-index: 6000;
  left:50%;
  margin-left:-350px;
  top:50%;
  margin-top:-258px;
}

.form-grid {
  display:table;
}

.form-grid > div{
  display:table-row;
}

.form-grid > div > label {
  display:table-cell;
  font-weight:bold;
  text-align: right;
  padding:6px;
  white-space: nowrap;
  width:140px;
  vertical-align:top;
}

.input-cell {
  padding-top:1px;
} 

.form-grid div input[type='text'] {
  width:510px;
  font-size:14px;
}

.example-result {
  width:500px;
  display:inline-block;
  word-wrap:break-word;
  margin-top:5px;
}

.example-result-error {
  margin-top:5px;
  display:inline-block;
}

#unescape-matches, #escape-matches {
  margin-top:7px;
  margin-left:0px;
}

.input-cell label {
  display:block;
}

#apply-to {
  padding-top:3px;
}

#apply-to label span {
  position: relative;
  top:1px;
}

.input-cell label input {
  margin-left:0px;
}

.error {
  color:red;
}

.placeholder  {
  color:#c0c0c0;
  font-size:11px;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #c0c0c0;  
}

.advanced {
  margin-top:8px;
}

#advanced-toggle {
  padding-top:3px;
  text-align: center;
}

#advanced-toggle a {
  color:rgb(21,90,233);
}

#advanced-toggle a:hover {
  text-decoration: underline;
}

.advanced div .input-cell label:first-child {
  margin-top:2px;
}


a[ng-click] {
  cursor:pointer;
}

#wildcardtype, #regextype {
  margin-right:10px;
  display:inline-block;
  margin-top:4px;
}

.button-container {
  margin-top:20px;
  text-align: center;
  padding-bottom:10px;
}



/* Footer with link */
footer {
  margin-top:30px;
  text-align: center;
}

footer small {
  font-size:10px;
  color:#555;
}

footer small a, footer small a:visited {
  text-decoration: none;
  color:rgb(21,90,233);
}

footer small a:hover {
  text-decoration: underline;
}