/* 
    Document        : typography
    Created on      : 21.6.2011, 9:33:56
    Author          : Unknown, Petr Klobás    
    Description:
        Sets up some sensible typography.
*/

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */

html { font-size:100.01%; font: 15px/1.5 sans-serif; }
body { font: 15px/1.5 "Trebuchet MS", "Geneva CE", lucida, sans-serif; color: #333; /*font-size: 75%;*/ margin: 0; background: #fff; }


/* Headings
-------------------------------------------------------------- */

/* first version
h1      { font-size: 47px; font-weight: bold; letter-spacing: 12px; color: #3484D2; margin: .4em 0 -.3em; text-shadow: 1px 1px 0 white; }
h2, h3  { font-size: 18px; color: #7A7772; margin: .6em 0; text-shadow: 1px 1px 0 white; }
h3      { font-size: 16px; color: #3484D2; }
h4      { font-size: 14px; font-weight: bold; }
*/

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 1.75em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 1.3em; margin-bottom: 0.75em; }
h3 { font-size: 1.1em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; text-indent: 2em; text-align: justify;}
/* 
	These can be used to pull an image at the start of a paragraph, so 
	that the text flows around it (usage: <p><img class="left">Text</p>) 
 */
.fleft  			{ float: left; /*margin: 1.5em 1.5em 1.5em 0; padding: 0;*/ }
.fright 			{ float: right; /*margin: 1.5em 0 1.5em 1.5em;*/ }

a           {color: #3484D2; text-decoration: none;}
a:hover, 
a:active, 
a:focus     { text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn	{ font-weight: bold; }
em,dfn      { font-style: italic; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
hr          { visibility: hidden; height: 2em; }

/* Images
-------------------------------------------------------------- */
img         { border: none; }

/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 0.5em 0.5em 0; padding-left: 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em; margin-bottom: 1em;}

.lst-no-bullet  {list-style-type: none;}

/* Tables
-------------------------------------------------------------- */

/* 
	Because of the need for padding on TH and TD, the vertical rhythm 
	on table cells has to be 27px, instead of the standard 18px or 36px 
	of other elements. 
 */

 /**
  * @todo    spravit tabulky
  * 
  * table       { margin-bottom: 1.4em; }
  * th          { font-weight: bold; text-align: center;}
  * thead th    { background: #c3d9ff; }
  * th,td,caption { padding: 4px 10px 4px 5px; }

  * td img {vertical-align: text-bottom;}
  */
  
.datagrid {margin: 1em 0; border: 1px solid #888; font-size: 0.9em;}
.datagrid th, .datagrid td {padding: 0.2em 0.4em;  background-color: #aaa; border-right: 1px solid #888;}
.datagrid th { font-weight: bold;  border-bottom: 2px dotted #888; vertical-align: middle;}

/*.datagrid tr:nth-child(even) td*/
tbody tr.even td
{ 
	background: #e5ecf9;
}
/*.datagrid tr:nth-child(odd) td,*/
tbody tr.odd td  {
	background:  #ccc;
}
/*
tfoot       { font-style: italic; }
caption     { background: #eee; }
*/

/* Forms
-------------------------------------------------------------- */

fieldset    { text-align: left; border: 1px solid black; border-radius: 1.5em 1.5em; padding: 1.3em; margin-bottom: 15px;}
legend      { font-weight: bold; margin-left: 1.2em; text-transform: uppercase; padding: 0 0.5em; }
input, select, textarea {margin-left: 1em; padding: 0.25em; border-radius: 0.3em; font-size: 0.9em;}
button      {padding: 4px 10px;}

/* Misc classes
-------------------------------------------------------------- */

small,.small{ font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; font-weight: normal;}
.smaller    { font-size: 12px;}
.large      { font-size: 1.2em; /*line-height: 2.5em; margin-bottom: 1.25em;*/ }
.hidden     { display: none; }
.visible    { display: block; }
.half-width { width: 50%; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }
.left       { text-align: left; }
.center     { text-align: center; }
.vcenter    { vertical-align: middle;}
.right      { text-align: right;}
.bold       { font-weight: bold; }
.italic     { font-style: italic;}
.no-decor   { text-decoration: none; } .no-decor:hover   { text-decoration: none; }
.underlined { text-decoration: underline; }

.red        {color: #8a1f11;} 
.full-red   {color: #f00;}
.green      {color: green;}   
.yellow     {color: #ffd324;}
.orange     {color: #e17009; }

.bg-light-red       { background-color: #f8c1c3; }
.bg-light-yellow    { background-color: #f8f2c1; }

.flash      { color: black; padding: 1em; margin: 1em 0; max-width: 94%;}
.inline-icon{ margin-right: 0.5em; margin-bottom: -0.15em;}

.width-30 {width: 30%;}
.width-40 {width: 40%;}
.width-50 {width: 50%;}
.width-100{width: 100%;}

.space-after {margin-bottom: 1em;}
.ajax-spinner {background: url('/images/spinner.gif') 0% 50% no-repeat; padding-left: 20px; display: none;}

a[href^="error:"] {background: red; color: white;}

/* Success, info, notice and error boxes
-------------------------------------------------------------- */

.error,
.notice,
.success, 
.info       { padding: 0.8em 2.5em; margin-bottom: 1em; border: 2px solid #ddd; list-style-type: none;}

.error      { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; background-image: url('/images/icons/16x16-icon-error.png'); background-position: 1%; background-repeat: no-repeat;}
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; background-image: url('/images/icons/16x16-icon-notice.png'); background-position: 1%; background-repeat: no-repeat;}
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; background-image: url('/images/icons/16x16-icon-ok.png'); background-position: 1%; background-repeat: no-repeat;}
.info       { background: #d5edf8; color: #205791; border-color: #92cae4; background-image: url('/images/icons/16x16-icon-info.png'); background-position: 1%; background-repeat: no-repeat;}
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #A5553A; }
.info a     { color: #205791; }
.required   { color: #000; font-weight: bold;}