/* @override http://localhost:3000/stylesheets/clikboard.css?1226968060 */

body {
  background: url(../images/corkboard_background.jpg) repeat scroll;
  text-align: center;
  min-width: 960px;
}

/* If textarea's (and probably other inputs too) are set to a specific width
   this doesn't include the border drawn around the input field. This div
   compensates for this.
   Also cancels out 5px left/right padding blueprint adds
*/
div.textarea_fixer {
  padding-right: 12px;
}

h1, h2, h3, h4, h5 {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #2d5e81;
}

h2, h3, h4, h5 {
  color: #336e99;
}

a:link,
a:visited,
a:active {
  color: #009;
}

a:hover {
  color: #fff;
  background-color: #009;
  text-decoration: none;
}

a.warn:link,
a.warn:visited,
a.warn:active {
  color: #c00;
}

a.warn:hover {
  color: #fff;
  background-color: #f00;
  text-decoration: none;
}

img.h2_divider {
  margin-left: auto;
  margin-right: auto;
  margin-top: -16px; /* height of image */
  display: block;
}

.fieldWithErrors input, .fieldWithErrors select {
  background-color: #ffdfdf;
}

/* SHEET  ====================================================================*/

table.sheet {
  border-collapse: collapse;
  width: auto;
  margin: 0 auto;
}

table.sheet td.top_left,
table.sheet td.top_right {
  padding: 0;
  width: 4px;
  height: 4px;
}

table.sheet td.content,
table.sheet td.content div.outline {
  text-align: left;
  vertical-align: top;
}

table.sheet .container {
  width: 846px;
}

table.sheet td.left {
  width: 8px;
  background: url(../images/shadow_left.png) repeat-y top right;
  padding: 1px;                         /* Required for FF to display cell */
}

table.sheet td.right {
  width: 8px;
  background: url(../images/shadow_right.png) repeat-y top left;
  padding: 1px;                         /* Required for FF to display cell */
}

table.sheet td.bottom_left {
  height: 8px;
  width: 8px;
  background: url(../images/shadow_bottom_left.png) no-repeat top right;
  padding: 1px;                         /* Required for FF to display cell */
}

table.sheet td.bottom {
  height: 8px;
  background: url(../images/shadow_bottom.png) repeat-x;
  padding: 1px;                         /* Required for FF to display cell */
}

table.sheet td.bottom_right {
  height: 8px;
  width: 8px;
  background: url(../images/shadow_bottom_right.png) no-repeat top left;
  padding: 0px 0px 0px 0px;
}

table.sheet h1 {
  border-bottom: 1px solid #d6d6d6;
  padding-bottom: 8px;
}

/* SHEET: HEADER -------------------------------------------------------------*/

table.sheet.header {
  margin-bottom: 20px;
}

table.sheet.header td {
  padding: 0;
  line-height: 0;
}

/* Transparent tapes */
table.sheet.header td.top_left,
table.sheet.header td.top_right {
  display: block;
  position: relative;
  height: 1%;                           /* Holly hack */
}

table.sheet.header td.top_left img#tape_left {
  position: absolute;
  left: -13px;
  top: 0px;
}

table.sheet.header td.top_left span {
  position: absolute;
  left: 28px;
  top: -12px;
  background: url(../images/badge.png) no-repeat top left;
}

table.sheet.header td.top_right img {
  position: absolute;
  left: -20px;
  top: 0px;
}

table.sheet.header td.badge {
  background: #fff;
  width: 166px;
  height: 1%;                           /* Holly hack */
}

table.sheet.header td.logo_tl,
table.sheet.header td.logo_bl {
  background: #fff;
  width: 242px;
}

table.sheet.header td.logo_tl,
table.sheet.header td.logo_tr,
table.sheet.header td.top_nav {
  vertical-align: bottom;
}

table.sheet.header td.logo_bl,
table.sheet.header td.logo_br,
table.sheet.header td.bottom_nav {
  vertical-align: top;
}

table.sheet.header td.logo_tr,
table.sheet.header td.logo_br {
  width: 45px;  
}

table.sheet.header td.logo_tr,
table.sheet.header td.top_nav {
  background: #f7931e;
}

table.sheet.header td.logo_br,
table.sheet.header td.bottom_nav {
  background: #f15a24;
}

table.sheet.header td.top_nav,
table.sheet.header td.bottom_nav {
  width: 435px;
  font-size: 1.2em;
  line-height: 2.5em;
  text-align: right;
}

table.sheet.header .nav_links {
  margin-right: 30px;
}

table.sheet.header td.top_nav .nav_links a.active {
  background: #f15a24;
  border: 3px solid #f15a24;
  border-bottom: 15px solid #f15a24;
}

table.sheet.header td.bottom_nav .nav_links a.active {
  background: #f7931e;
  border: 3px solid #f7931e;
  border-top: 15px solid #f7931e;
}

table.sheet.header .nav_links a.active:link,
table.sheet.header .nav_links a.active:visited,
table.sheet.header .nav_links a.active:active {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  outline: none;
}

table.sheet.header .nav_links a.active:hover {
  color: #fff;
  background-color: #000;
  text-decoration: none;
}

table.sheet.header .nav_links .identity {
  color: #555;
}

/* SHEET: ALERT --------------------------------------------------------------*/

table.sheet.alert,
table.sheet.info {
  margin: 0em auto 1em auto;
  font-family: Georgia, "Times New Roman", Times, serif;
}

table.sheet.alert.reduced_gap,
table.sheet.info.reduced_gap {
  margin-bottom: -1em;
}

table.sheet.alert td.content,
table.sheet.info td.content {
  text-align: center;
}

table.sheet.alert td.content {
  background-color: #ebb2a3;
  border: 1px solid #c76647;
  font-size: 1.5em;
}

/* SHEET: INFO ----------------------------------------------------------------*/

table.sheet.info td.content {
  background-color: #c4e7a5;
  border: 1px solid #83c24e;
  font-size: 1.2em;
}

/* SHEET: DIALOG -------------------------------------------------------------*/

table.sheet.dialog {
  margin: 3em auto;
}

table.sheet.dialog.a4 {
  margin-top: 0;
}

table.sheet.dialog td.content,
table.sheet.dialog th {
  padding: 0;
  text-align: center;
}

table.sheet.dialog h2 {
  padding: 5px 10px;
  color: #2d5e81;
}

table.sheet.dialog img.h2_divider {
  margin-top: -16px; /* height of image */
  margin-bottom: 1em;
  display: block;
}

table.sheet.dialog td.content {
  background-color: #f3f6be;
}

table.sheet.dialog td.content div.container {
  width: 846px !important;  /* grid(830) + left(8) + right(8) (remember 40 padding & border) */
  padding: 20px 20px 20px 20px;
}

table.sheet.dialog div.dialog.content {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5px;
}

table.sheet.dialog input {
  font-size: 1.2em;
}

table.sheet.dialog div.fieldWithErrors {
  display: inline;
}

table.sheet.dialog label {
  color: #336e99;
  font-family: Georgia, "Times New Roman", Times, serif;
}

table.sheet.dialog p {
  padding-left: 10px;
  padding-right: 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.2em;
}

table.sheet.dialog fieldset {
  border-color: #CED2A1;
  margin: 0 10px 10px 10px;
}

table.sheet.dialog legend {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.4em;
  color: #336e99;
}

table.sheet.dialog div.dialog.commands {
  text-align: center;
  background-color: #CED2A1;
  padding: 5px 10px;
  font-size: 1.2em;
}

/* Centering a list is a little tricky. The follow is a good reference
 * http://www.tyssendesign.com.au/articles/html/centering-a-dropdown-menu/
 */
table.sheet.dialog #errorExplanation {
  background-color: #ffdfdf;
  margin: 10px;
  padding-bottom: 10px;
  border: 5px solid #e59191;
  text-align: center;
}

table.sheet.dialog #errorExplanation h2 {
  font-size: 1.4em;
  color: #2d5e81;
  background-color: #e59191;
  padding-top: 0;
  padding-bottom: 0.2em;
}

table.sheet.dialog #errorExplanation p {
  display: none;
}

table.sheet.dialog #errorExplanation ul {
  display: table;
  margin: 0 auto;
  list-style-type: disc;
  list-style-position: inside;
  color: #2d5e81;
}

table.sheet.dialog #errorExplanation ul li {
  text-align: left;
  font-size: 1.2em;
}

/* SHEET: MAIN ---------------------------------------------------------------*/

table.sheet.main td.content {
  background: #fbfbfb url(../images/tack_top_left.gif) no-repeat;
  width: 846px;  /* grid(830) + left(8) + right(8) (remember 40 padding & border) */
  padding: 0;
}

table.sheet.main td.content div.outline {
  background: url(../images/tack_top_right.gif) no-repeat top right;
  border: 1px solid #c7c7c7;
}

table.sheet.main td.content div.outline div.indent {
  margin: 20px 20px 20px 20px;
}

/* SHEET CONTENT =============================================================*/

table.sheet.main input.title {
  width: 100%;
  line-height:1.35em;  
}

/* LIST BOARDS ---------------------------------------------------------------*/

table.sheet.main table.board_list {
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
}

table.sheet.main table.board_list td {
  vertical-align: top;
  border-top: 1px solid #e6e6e6;
}

table.sheet.main table.board_list td.summary {
  width: 100%;
}

table.sheet.main table.board_list td.summary .title {
  text-align: left;
}

table.sheet.main table.board_list td.summary .subtitle {
  color: #888;
}

table.sheet.main table.board_list td.commands {
  white-space: nowrap;
}

/* SHOW BOARD ----------------------------------------------------------------*/

.design_preview {
	border: 1px solid black;
}

.link { 
  font-size: x-large;
  background-color: silver;
}  

/* EDIT BOARD ----------------------------------------------------------------*/

table#layout th {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;  
}

table#layout th.main_heading {
  background: #b5caed;  
  color: #262b33;
}

table#layout th.column {
  padding-left: 28px; /* offset to counter radio */  
}

table#layout th.sub_heading {
  color: #505969;
}

table#layout td.layout_type {
  text-align: center;
  vertical-align: middle;
  height: 69px;
  padding: 0px 0px 0px 0px;
  border: 2px solid #fbfbfb;
}

table#layout td#selected {
  background: #a7daaa;  
}

table#layout td.layout_type img {
  vertical-align: middle;
}

table#design {
  width: auto;
  margin-left: auto;
  margin-right: auto; 
}

table#design td.design_image,
table#design td.design_radio {
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

table#design td.design_image img {
  vertical-align: middle;
  border: 2px solid gray;
}

table#design td.design_label {
  text-align: center;
  vertical-align: top;
  padding-top: 0px;
}

.postit_container {
  position: relative;
}

.postit_container div.postit {
  position: absolute;
  left: -140px;
  width: 131px;
  height: 125px;
}

.postit_container div#postit_title.postit {
  top: -70px;
  background: url(../images/postit_title.png) no-repeat center center;
}

.postit_container div#postit_layout.postit {
  background: url(../images/postit_layout.png) no-repeat center center;
}

.postit_container div#postit_style.postit {
  background: url(../images/postit_style.png) no-repeat center center;
}

/* PLANS ----------------------------------------------------------------------*/

table#plans {
  width: auto;
  border-collapse: collapse;
  margin: -18px auto 0 auto;
}

table#plans img {
  border: 0;
  vertical-align: text-bottom;
}

table#plans th.feature {
  background: transparent url(../images/plans/head_feature.gif) no-repeat bottom left;
  white-space: nowrap;
}

table#plans td.feature {
  text-align: right;
  background: transparent url(../images/plans/feature.jpg) no-repeat bottom left;
  width: 180px;
  font: bold 14px/15px Georgia, "Times New Roman", Times, serif;
  color: #6e6f37;
  padding-right: 8px;
  text-shadow: 1px 1px 1px #fff !important;
}

table#plans tfoot td.feature {
  background: transparent url(../images/plans/foot_feature.gif) no-repeat top left;
}

table#plans th {
  height: 64px;
  border-right: 1px solid #f3f6be;
  vertical-align: bottom;
  text-align:center;
  color: #fff;
  font: bold 21px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
  background: transparent url(../images/plans/head.gif) no-repeat bottom left;
  text-shadow: 1px 1px 1px #555;
  padding-top: 9px;
}

table#plans td {
  text-align: center;
  background: transparent url(../images/plans/body.jpg) no-repeat bottom left;
  border-right: 1px solid #f3f6be;
  color: #fff;
  width: 135px;
  height: 40px;
  font: bold 12px/18px verdana;
  text-shadow: 1px 1px 1px #555;
}

table#plans tfoot td {
  text-shadow: none;
}

table#plans tfoot td {
  background: transparent url(../images/plans/foot.gif) no-repeat top left;
  height: 64px;
  vertical-align: top;
  padding-top: 8px;
  padding-bottom: 16px;
}

table#plans td.active {
  background: transparent url(../images/plans/body_active.jpg) no-repeat bottom left;
}

table#plans th.active {
  background: transparent url(../images/plans/head_active.gif) no-repeat bottom left;
}

table#plans tfoot td.active {
  background: transparent url(../images/plans/foot_active.gif) no-repeat top left;
}

table#plans td.hover {
  background: transparent url(../images/plans/body_hover.jpg) no-repeat bottom left;
}

table#plans th.hover {
  background: transparent url(../images/plans/head_hover.jpg) no-repeat bottom left;
  padding-bottom: 9px;
  padding-top: 0;
  width: 150px;
}

table#plans tfoot td.hover {
  background: transparent url(../images/plans/foot_hover.jpg) no-repeat top left;
  padding-top: 16px;
  padding-bottom: 0;
}

/* SIDE NOTES =================================================================*/

table.sheet div.sidenote {
  color: #503c3c;
  text-align: left;
}

table.sheet div.sidenote .drop_cap {
  float: left;
  font-family: Old English, Georgia, serif;
  font-size: 250%;
  line-height: 100%;
  margin-right: 0.1em;
  padding: 0em 0.1em 0em 0.1em;
  background-color: #fff2f2;
  border: 3px double #ddb5b5;
}

table.sheet div.sidenote a:link,
table.sheet div.sidenote a:visited,
table.sheet div.sidenote a:active {
  color: #301a5f;
}

table.sheet div.sidenote a:hover {
  color: #fff;
  background-color: #301a5f;
  text-decoration: none;
}

table.sheet div.sidenote ul li {
  list-style:none;
  background: url(../images/sidenote_bullet.gif) no-repeat left top;
  padding-left: 15px;
  margin-left: -10px;
}

/* FOOTER ====================================================================*/

img#copyright,
img#terms,
img#privacy,
img#feedback {
  margin: 10px 10px 0px 10px;
  margin-top: 10px;
  margin-bottom: 0px;
  border-top: 1px solid #a71c16;
  border-bottom: 1px solid #72140f;
}

/* STATIC ====================================================================*/

.important {
  padding: 2px 8px;
  margin-top: 5px;
  background: #fffbcc;
  border: 1px solid #e6db55;
}

/* LINK BUTTON ===============================================================
 * Used to make links appear as buttons. Check link for more info:
 *
 * - http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html
 *
 * To use, create a link with the following structure...
 *
 * - <a href="x" class="button"><b><b><b>txt</b></b></b></a>
 * - <a href="x" class="button"><b><b><b>t<img src="16x16.gif" />txt<b><b><b>t</a>
 *
 * --------------------------------------------------------------------------*/

a.button {
  display: block;
  border: solid;
  border-left-color: #bebebe;
  border-right-color: #959595;
  border-width: 0 1px;                  /* Left and right borders only */
  color: #000;
  background: #f5f5f5;                  /* Background color of button */
  text-decoration: none;
  outline: none;
  cursor: pointer;
  width: 70%;
}

a.button b {
  display: block;
  position: relative;
  top: -1px;
  left: 0;
  border: solid;
  border-top-color: #bebebe;
  border-width: 1px 0 0;                /* Top border only */
  color: #333;
  white-space: nowrap;
}

a.button b b {
  border-width: 0 0 1px;                /* Bottom border only */
  border-bottom-color: #959595;
  top: 2px;
}

a.button b b b {
  top: -1px;
  padding: 0px 6px;
  border-width: 0;
}

a.button b b b img {
  margin-bottom: -2px;
}

a.button:hover,
a.button:hover b {
  border-color: #aaa;
  background-color: #ddd;               /* Normal bg color less 0x252525 */
  color: #333;
}

a.button:active,
a.button:active b {
  border-color-top: #959595;            /* Switch border colors, eg. l<->r, t<->b, ... */
  border-color-left: #959595;
  border-color-bottom: #bebebe;
  border-color-right: #bebebe;
  background-color: #ddd;
  color: #f5f5f5;                       /* ...and switch non-hover fore/background colors */
  background-color: #444 !important;    /* Always to be used even for specializations (otherwise their :active is used) */
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
 * Specializations: Buttons
 * --------------------------------------------------------------------------*/

a.button.plan_register {
  background: transparent url(../images/plans/body_active.jpg) no-repeat center center;
  margin-left: auto;
  margin-right: auto;
}

a.button.plan_register b {
  color: #fff;
}

a.button.plan_register:hover,
a.button.plan_register:hover b {
  background: transparent url(../images/plans/body.jpg) no-repeat center center;
  color: #fff;
}

a.button.plan_register:active,
a.button.plan_register:active b {
  background: transparent url(../images/plans/feature.jpg) no-repeat center center;
  color: #000;
}