@charset "UTF-8";

/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  Project: Scarky.com                                          ••
   ••  Date:    July 2009                                           ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••   
   
    1. Global Styles
       1.0 Reset
       1.1 Embedded Fonts
       1.2 Default               – styles for content elements
       1.3 Common                – reset of 1.2 for certain parts of the layout
       1.4 Accessibility         – accessible techniques
       
    2. Layout
       2.1 Columns
       2.2 Clearfix
       
    3. Master Header             – top panel (main nav + rss)
    4. Content
       4.1 Logo                  – scarky’s logo
       4.2 Headers               – types of content headers
       4.3 Shortcuts             – statistics area shortcuts
       4.4 Categories            – blog top categories
       4.5 Navigation            – blog pager + go to the top
       4.6 Buttons               – rich buttons
       4.7 Pager                 – pager for statistics
       4.8 Tables                - data tables for statistics
       
    5. Article                   – blog posts
       5.1 Short                 – short post – just title + meta info
       
    6. Comments                  – comments for posts (+ form)
    7. Footer                    – footer (links, copyright)
      
    Text color                   #282828
    Link color                   #069
    Hover link color             #c33
    Header color                 #585d66
    
---------------------------------------------------------------------- */

/* 1. GLOBAL
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 1.0 =Reset
---------------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-style: inherit;
	font-weight: inherit;
}

a, ins, del {
  text-decoration: none
}

q, blockquote {
	quotes: none;
}

q:after, q:before,
blockquote:after, blockquote:before {
	content: "";
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

th, td {
  vertical-align: top;
}

th {
  text-align: left;
}

button, input, select, textarea {
  font: inherit;
}

/* 1.1 =Fonts
---------------------------------------------------------------------- */

@font-face {
  font-family: "Marker-Felt";
  src: url("f/MarkerFelt.ttf") format('truetype');
}

/* 1.2 =Default
---------------------------------------------------------------------- */

body {
  font: normal 87.5%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif; 
  color: #282828;
}

a {
  color: #069;
  font-weight: bold;
  border-bottom: 1px solid #bbd6e4;
}

a:hover,
a:focus {
  color: #c33;
  border-bottom-color: #e7a0a0;
}

del       { text-decoration: line-through; }
strong, b { font-weight: bold; }
em, i     { font-style: italic; }
li        { list-style: none; }

button, input[type="submit"], input[type="image"] {
  cursor: pointer;
}

blockquote, p, ul, ol, dl, table.data,
.header-items, .header-title, .header-major {
  margin-bottom: 30px;
}

blockquote {
  background: url("i/bg-blockquote-end.png") no-repeat 100% 100%;
  padding-right: 30px;  
}

blockquote p {
  padding-left: 30px;
  background: url("i/bg-blockquote.png") no-repeat;
}

blockquote p + p {
  background: none;
}

li {
  margin-bottom: 7px;
}

ul li {
  background: url("i/bullet-list.png") no-repeat 7px 3.5px;
  padding-left: 30px;
}

ol li {
  list-style-type: decimal;
  list-style-position: inside;
  margin-left: 10px;
}

ul ol,
ul ul,
ol ol,
ol ul {
  margin-bottom: 0;
  margin-top: 5px;
}

pre {
	margin-bottom: 10px;
}

/* 1.3 =Common
---------------------------------------------------------------------- */

#footer p,
#footer ul,
#master-header p,
#master-header ul,
.article .header ul,
.article .time,
.article.short ul,
.categories p,
.categories ul,
.comment-form p,
.comments .author,
.comments .time,
.navigation,
.shortcuts ul,
.tabs {
  margin-bottom: 0;
}

#footer ul li,
#master-header li,
.article .header li,
.article.short li,
.categories li,
.comments > li,
.navigation li,
ul.pager li,
.tabs li {
  background: none;
  padding-left: 0;
  margin-bottom: 0;
}

.site-name,
.shortcuts,
.comments .time {
  margin-left: -196px;
  width: 166px;
}

.article .header ul,
.article.short ul,
.categories p,
.comments .author,
.navigation .top {
  width: 194px;
  padding-left: 20px;
}

.article .header ul,
.article.short ul,
.categories li,
.comments .author {
  font-family: "Marker Felt", "Merker-Felt", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
}

.article .header ul a,
.article .header-title a,
.article.short ul a,
.categories li a,
.comments .author a,
.comments .time a,
.navigation a,
.tabs a {
  font-weight: normal;
}

#footer a,
#master-header a,
.article .header ul a,
.article .header-title a,
.article.short ul a,
.button,
.categories a,
.comments .author a,
.comments .time a,
.navigation a,
.shortcuts a,
.site-name,
.tabs a {
  border-bottom: 0;
}

/* 1.4 =Accessibility
---------------------------------------------------------------------- */

#a11y,
.structural {
  position: absolute;
  height: 1px;
  width: 1px;
  left: -999em;
}

/* 2. LAYOUT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

html {
  background-color: #c0d5e8;
}

body {
  background: #fff url("i/body-top.png") repeat-x;
}

#site {
  background: url("i/body-bottom.png") repeat-x 0 100%;
}

/* 2.1 =Columns
---------------------------------------------------------------------- */

.columns .primary,
.columns .secondary {
  float: left;
}

/* 2.2 =Clearfix
---------------------------------------------------------------------- */

.clearfix:after {
  clear: right;
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}

/* 3. MASTER-HEADER
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#master-header {
  background: #3c5e92 url("i/header.png") repeat-x;
  border-bottom: 5px solid #5a79ac;
  line-height: 1;
}

#master-header div {
  width: 649px;
  padding: 17px 291px 13px 20px;
  margin: 0 auto;
  position: relative;
  color: #c8d6d9;
}

#master-header li {
  display: inline;
  padding-right: 2ex;
}

#master-header li.current a {
  border-bottom: 1px solid #778fb3;
}

#master-header li a {
  color: #fff;  
}

#master-header strong {
  color: #fff;
}

#master-header a[type] {
  position: absolute;
  top: 0;
  right: 92px;
  width: 179px;
  height: 43px;
  text-indent: -1000em;
  background: url("i/badge-rss.png") no-repeat;
}

/* 4. CONTENT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#page {
  background: #fff url("i/page-top.png") no-repeat;;
  padding: 167px 20px 1px 216px;
  width: 724px;
  margin: 0 auto;
  min-height: 450px;
}

.copy {
  padding-right: 190px;
}

/* 4.1 =Logo
---------------------------------------------------------------------- */

.site-name {
  float: left;
  margin-top: -30px;
  height: 98px;
  text-indent: -1000em;
  background: url("i/logo.png") no-repeat 100% 0;
}

/* 4.2 =Headers
---------------------------------------------------------------------- */

.header-title,
.header-major
.header-minor {
  color: #585d66;
  letter-spacing: -0.04em;
}

.header-title {
  font-size: 30px;
}

.header-title a,
.header-major a {
  font-weight: normal;
}

.header-major {
  font-size: 24px;
}

.header-items .header-major {
  margin-bottom: 0;
}

.header-items * {
  display: inline;
}

.header-items em {
  font-style: normal;
  font-size: 14px;
  color: #b7bec9;
}

.section .header-items {
  margin-bottom: 10px;
}

/* 4.3 =Shortcuts
---------------------------------------------------------------------- */

.shortcuts {
  float: left;
}

.shortcuts h2 {
  background: url("i/border-dotted.png") repeat-x 0 100%;
  padding-bottom: 7px;
  margin-bottom: 14px;
}

.shortcuts li {
  background-position: 0 3.5px;
  padding-left: 24px;
}

.shortcuts a {
  font-weight: normal;
  color: #282828;
}

/* 4.4 =Categories
---------------------------------------------------------------------- */

.categories {
  padding: 20px 0 40px;
  overflow: hidden;
  background: url("i/bg-whos-using-it.png") no-repeat 510px 13px;
}

.categories ul,
.categories p {
  float: left;
}

.categories ul {
  width: 510px;
}

.categories li {
  font-size: 18px;
  padding-right: 30px;
  float: left;
}

.categories li a {
  color: #585d66;
}

/* 4.5 =Navigation
---------------------------------------------------------------------- */

.navigation {
  background: url("i/border-dotted.png") repeat-x;
  margin-left: -196px;
  padding-top: 30px;
  position: relative;
  text-align: center;
}

.navigation .pager {
  background: url("i/bg-navigation.png") no-repeat 50% 100%;
  padding-bottom: 14px;
}

.navigation .top {
  position: absolute;
  right: 0;
  top: 30px;
  text-align: left;
}

.navigation a {
  color: #b7bec9;
}

.navigation.articles {
  margin-top: -1px;
}

.more {
  text-align: right;
}

/* 4.6 =Buttons
---------------------------------------------------------------------- */

.button {
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
}

.button.minor,
td .button {
  height: 25px;
}

.button.clone {
  background-image: url("i/button-clone.png");
  width: 77px;
}

td .button {
  margin-bottom: -4px;
  opacity: 0.5;
}

tr:hover td .button {
  opacity: 1;
}

/* 4.7 =Pager
---------------------------------------------------------------------- */

ul.pager {
  text-align: center;
}

ul.pager li {
  display: inline;
  padding: 0 1ex;
}

ul.pager li.current {
  color: #aaa;
}

/* 4.8 =Tables
---------------------------------------------------------------------- */

table.data {
  width: 100%;
  color: #333;
  background: url("i/bg-table.png") no-repeat;
}

table.data th, table.data td {
  background-repeat: repeat-x;
  background-position: 0 100%;
}

table.data th {
  font-weight: bold;
  padding: 10px 10px 9px;
  background-image: url("i/border-table-header.png");
}

table.data td {
  padding: 6px 10px 12px;
  background-image: url("i/border-table.png");
}

table.data td:first-child,
table.data th:first-child {
  padding-left: 0;
}

table.data td:last-child,
table.data th:last-child {
  padding-right: 0;
}

table.data tr.even td {
  background-color: #fbfbfb;
}

table.data th.numeric,
table.data td.numeric {
  text-align: right;
}

/* 4.9 =Tabs
---------------------------------------------------------------------- */

.tabs {
  background: url("i/bg-tabs-vert.png") repeat-x 0 100%;
  overflow: hidden;
}

.tabs li {
  float: left;
  background-color: #f6f6f6;
  border: 1px solid #ddd;
  border-bottom: 0;
  margin-right: 10px;
  margin-bottom: 1px;
}

.tabs li a {
  display: block;
  padding: 5px 10px;
  color: #999;
}

.tabs li a:hover,
.tabs li a:focus {
  background-color: #fff;
}

.tabs li.current {
  background-color: #fff;
  margin-bottom: 0;
}

.tabs li.current a {
  color: #069;
  padding-top: 6px;
}

.panel {
  padding: 10px;
  border: 1px solid #ddd;
  border-top: 0;
}

/* 5. ARTICLE
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

.article {
  margin-left: -196px;
  padding-top: 20px;
}

.article:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.article.style-primary {
  background: url("i/bg-swoosh.png") no-repeat;
}

.article.style-secondary {
  background: url("i/bg-swoosh-2.png") no-repeat;
}

.article.style-tertiary {
  background: url("i/bg-swoosh-3.png") no-repeat;
}

.article .header-title,
.article .body {
  margin-left: 196px;
  padding-right: 214px;
}

.article .header-title a {
  color: #585d66;
}

.article .time,
.comments .time,
.comments .author,
.article .header ul a {
  color: #b7bec9;
}

.article .time,
.comments .time {
  float: left;
  width: 166px;
  padding-right: 30px;
  margin-top: -4px;
  text-align: right;
  text-transform: lowercase;
}

.article .time strong,
.comments .time strong {
  display: block;
  font-size: 30px;
  font-family: Georgia, Constantia, Gentium, Minion, "Times New Roman", serif;
  font-weight: normal;
  line-height: 30px;
}

.article .time em,
.comments .time em {
  font-size: 14px;
  vertical-align: 4px;
}

.article .header ul,
.article.short ul {
  float: right;
}

.article .body {
  padding-bottom: 1px;
  margin-bottom: 10px;
  background: url("i/border-dotted.png") repeat-x 0 100%;
}

/* 5.1 =Short
---------------------------------------------------------------------- */

.article.short {
  background: url("i/border-dotted-long.png") no-repeat 196px 100%;
  padding-bottom: 20px;
}

.article.short .header-title {
  float: left;
  margin-left: 0;
  padding-right: 0;
  width: 510px;
}

.article.short .header-title a {
  color: #6e7480;
}

.article.short .time,
.article.short ul a,
.comments .author a {
  color: #cfd6e3;
}

/* 6. COMMENTS
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#discussion {
  margin-top: -10px;
}

#discussion,
#contribute {
  background: url("i/bg-swoosh-2.png") no-repeat;
  margin-left: -196px;
  padding-left: 196px;
  padding-top: 30px;
}

.comments .author {
  float: right;
}

.comments > li {
  padding-bottom: 1px;
  margin-bottom: 30px;
  display: block;
  background: url("i/border-dotted.png") repeat-x 0 100%;
}

.comments > li > blockquote {
  background: none;
  padding-right: 0;
  margin-right: 214px;
}

.comments > li > blockquote > p {
  background: none;
  padding-left: 0;
}

.comments .time a {
  color: #cfd6e3;
}

#contribute {
  margin-top: -30px;
  background-image: url("i/bg-swoosh-3.png");
  margin-bottom: 30px;
}

.comment-form {
  margin-right: 214px;
}

.comment-form .field {
  position: relative;
}

.comment-form .field label,
.comment-form .field label span {
  background: url("i/bg-label.png") no-repeat;
}

.comment-form .field label {
  right: 530px;
  position: absolute;
}

.comment-form .field label span {
  display: block;
  padding: 1px 10px;
  white-space: nowrap;
  background-position: 100% 100%;
}

.comment-form textarea {
  min-height: 110px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.comment-form textarea,
.comment-form .field {
  margin-bottom: 15px;
}

.comment-form input[type="text"] {
  width: 245px;
}

.comment-form p {
  float: right;
  width: 240px;
  color: #b7bec9;
}

.comment-form abbr {
  color: #cf1616;
}

.comment-form .field.required span {
  padding-right: 0;
}

.comment-form #submit {
  border: 0;
  padding: 0;
  height: 35px;
  width: 172px;
  background: url("i/button-add-comment.png") no-repeat;
  text-indent: -1000em;
}

.comment-form #submit::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* 7. FOOTER
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#footer {
  width: 960px;
  margin: 0 auto;
  background: url("i/pic-shark.png") no-repeat 100% 100%;
}

#footer a {
  font-weight: normal;
  color: #585d66;
}

#footer ul {
  background: url("i/page-bottom.png") no-repeat;
  padding: 87px 0 34px;
  text-align: center;
}

#footer li {
  display: inline;
  padding: 0 14px;
}

#footer p {
  margin-top: -12px;
  text-align: center;
  padding-bottom: 30px;
}

#footer p,
#footer p a {
  color: #a1b6bb;
}

#footer p span {
  display: block;
}








/* XXX =Widget
---------------------------------------------------------------------- */
.gwt-TabBar {
	background: url("i/bg-tabs-vert.png") repeat-x 0 100%;
	overflow: hidden;
}
.gwt-TabBarFirst-wrapper{
	display: none;
}
.gwt-TabBar .gwt-TabBarItem {
/*	float: left;*/
	background-color: #f6f6f6;
	border: 1px solid #ddd;
	border-bottom: 0;
	margin-right: 10px;
	margin-bottom: 1px;
}

.gwt-TabBar .gwt-TabBarItem .gwt-Label {
	display: block;
	padding: 5px 10px;
	color: #999;
}

.gwt-TabBar .gwt-TabBarItem-selected {
	background-color: #fff;
	margin-bottom: 0;
}

.gwt-TabBar .gwt-TabBarItem-selected .gwt-Label{
	color:#006699;
}

.gwt-TabPanelBottom {
	border-color:-moz-use-text-color #DDDDDD #DDDDDD;
	border-color: #DDDDDD;
	border-style:none solid solid;
	border-width:0 1px 1px;
	padding:10px;
	
}

.label {
	float:left;
	line-height:170%;
	padding-right:2%;
	text-align:right;
	width: 180px;
}

.header-fieldset{
	margin-bottom: 10px;
}

.header-fieldset a{
	border: 0px;
	color:black;
	font-weight:normal;
}

.builder .submit td{
  background-color: #76d6f6;
  border-top: 1px solid #51b0cf;
  margin: 0 -10px -10px;
  padding: 10px 10px 7px;
}

.builder .submit button {
  border: 0;
  padding: 0;
  position: relative;
  left: 30%;
  height: 0;
  padding-top: 25px;
  background: url("i/button-save-challenge.png") no-repeat;
  width: 109px;
  display: block;
  overflow: hidden;
  font-size: 0;
}

.builder .multi-select {
  max-height: 109px;
  overflow: auto;
  border: 1px solid #ddd;
}

.builder .multi-select .gwt-CheckBox {
  border-top: 1px solid #ddd;
  clear: both;
  display: block;
}

.builder .multi-select .first-child {
  border-top: 0;
}

.builder .multi-select input {
	float: left;
	margin-right: 5px;
}

.builder .multi-select label {
  display: block;
}

.builder .multi-select label:hover {
  background-color: #ddd;
}

.builder .extra {
  float: left;
  font-size: 10px;
  margin-left: 10px;
}

.builder .expand .header-fieldset {
	margin-left: 0px;
}
.builder .header-fieldset .h {
	margin-left: 20px;
}

.builder .header-fieldset p {
	margin-right: 10px;
}
.text-area{
	height: 150px;
	width: 100%;
}

/***************************************************************************
 nowe
 **************************************************************************/

 .builder .multi-select .boldline{
	border-bottom: 2px solid red;
}