// FUNCTIONS

.box-shadow (@x: 0, @y: 2px, @blur: 2px, @color: #000) {box-shadow: @arguments; -webkit-box-shadow: @arguments;}
.inner-shadow (@x: 0, @y: 2px, @blur: 2px, @color: #000) {box-shadow: inset @arguments; -webkit-box-shadow: inset @arguments;}
.text-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {text-shadow: @arguments; -webkit-text-shadow: @arguments; }
.border-round (@radius: 5px)  {border-radius: @radius; -webkit-border-radius: @radius}

.headline (@fontsize: 22px)   {color: @color-text-header;text-indent:0;font-size:@fontsize;line-height:1.2em;font-family: 'Signika', sans-serif;font-weight: 400;margin:0;padding:0}
.subheadline (@fontsize: 18px)   {color: @color-text-header;text-indent:0;font-size:@fontsize;line-height:1.2em;font-family: 'Titillium Web', sans-serif;font-weight: 300;margin:0;padding:0}


// TEXT COLORS


// darken(@color-back, 10%)

@color-input-border:       #ccc;
@color-input-background:   #fff;
@color-background:         #fff;
@color-text:               #555;
@color-text-light:         #aaa;
@color-text-highlighted:   #333;
@color-text-header:        #ccc;
@color-text-header-active: #ccc;
@color-text-header2:       #549ee2;
@color-text-link:          #004480;
@color-text-link-active:   #0074d8;
@color-text-link-article:  #008000;
@color-text-link-back:     #bfdfbf;



/*****/
/*****/
/*****/
/*****/
/*****/
/*****/



.small               {color: @color-text-light; font-size:.9em}
.clr                 {clear: both}
.left                {text-align: left}
.right               {text-align: right}
.nowrap              {white-space: nowrap}

/*****/

body {
                     font-size: 16px; 
                     font-family: 'Titillium Web', sans-serif;
                     font-weight: 300;
                     color: @color-text;
                     -background-color:@color-background;
                     padding: 0;
}
a, 
a:link, 
a:visited            {color: @color-text-link}
a:hover, 
a:active,
a:focus              {color: @color-text-link-active;text-decoration:underline}

em                   {font-style:italic}
strong               {font-weight:700}
dl,dt,dd,ol,ul,li    {margin:0;padding:0}
img                  {vertical-align: middle}
img[align=left]      {float:left}
img[align=right]     {float:right}
blockquote           {margin: 8px 0;padding: 0 0 0 32px; color: #333; font-style:italic; background: url(/common/images/quotes.png) top left no-repeat}

/*****/

h1                   {text-transform:uppercase; font-weight: bold; .headline(28px)}
h2                   {text-transform:uppercase; font-weight: bold; .headline(18px); color: @color-text-link}
h3                   {text-transform:uppercase; .headline(16px); color: @color-text-link}

h1 a                 {text-decoration: none; color: @color-text-header !important;}
h1 a:hover           {text-decoration: none; color: @color-text-header-active;}

h2 a,
h3 a                 {text-decoration: none; color: @color-text-link;}
h2 a:hover,
h3 a:hover           {text-decoration: none; color: @color-text-link-active;}

/*****/

label                   {font-weight:normal;cursor:pointer}
fieldset                {border:0}

input,
select, 
textarea {
   clear: both;
   float: none;
   display: block;
   
   color: #000;
   font-size: 16px;
   border: solid 1px @color-input-border;
   margin:0;
   padding: 0;
   -webkit-appearance: none;
   .border-round(5px);
}

input[type=hidden]      {display:none}

input[type=checkbox],
input[type=radio]       {display: inline-block; vertical-align: 0%}

input[type=checkbox]    {-webkit-appearance: checkbox}
input[type=radio]       {-webkit-appearance: radio}

input[type=email], 
input[type=text], 
input[type=tel], 
input[type=number], 
input[type=integer], 
input[type=float], 
input[type=password], 
select                  {height: 26px}

input[type=submit], 
input[type=button]      {padding: 8px 0}

textarea                {resize: vertical}

input[placeholder],
textarea[placeholder]   {text-align: left; color: #777; text-indent: 8px}
input:-ms-input-placeholder {text-align: left; color: #777; text-indent: 8px}

input[type=submit], 
input[type=button] {
   border: solid 1px #0065ab;
   background: #0065ab;
   color: #fff;
}


input:focus,
select:focus, 
textarea:focus {
   border:solid 2px @color-text-link-active;
   .border-round(3px); 
   .box-shadow(0,0,6px,@color-text-link-active); 
}



/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

.info {padding: 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px}

.bluebox   {background: #e1f4ff; border: 1px solid #bee6fc}
.yellowbox   {background: #fea; border: 1px solid #fd9}
.greybox   {background: #f0f0f0; border: 1px solid #ddd}
.greenbox   {background: #c5f7c1; border: 1px solid #ddd}
.redbox   {background: #f0f0f0; border: 1px solid #ddd}

#anmoder {margin-top: 20px}

#sender, #loader {
   text-align: center;
   padding: 20px;
   
   p {display: inline; padding: 20px; background:	url(/common/images/spinner.gif) center right no-repeat }
}

#errors {
   font-size: 11px;
   
   p { margin: 3px 0 0 0; padding: 3px; line-height: 14px}
}

/**/

.validate-show {}
.validate-hide {visibility: hidden; display: none}
.validate-valid {}
.validate-invalid {visibility: hidden}
.validate-result-hide {display: none}

.felt_ok select,
.felt_ok textarea,
.felt_ok input { 
   background: @color-background; 
   border: 1px solid @color-input-border;
}

.felt_fejl select,
.felt_fejl textarea,
.felt_fejl input:invalid,
.felt_fejl input { 
   outline:none;
   box-shadow:none;
   background: #fcc !important;
   border: 1px solid @color-input-border;
}

.felt_ugyldig select,
.felt_ugyldig textarea,
.felt_ugyldig input:invalid,
.felt_ugyldig input { 
    outline:none;
    box-shadow:none;
   background: #fea !important; 
   border: 1px solid #fd9;
}


/**/

#formula {
   width: 100%;
   
   input:not([type=checkbox]):not([type=radio]),
   textarea,
   select {width: 100%}
   
   p { margin: 0 0 8px 0}

   dl, dt, dd {
      float: none;
      display: block;
      clear: both;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }
  
   dl {
     padding: 4px 8px;
     margin-bottom: 3px;
   }

   dd {
     width: 100%;
   }

}


/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/* SMARTPHONE */

@media screen and (min-width: 0px) and (max-width: 480px) {
   body {
      font-size: 20px; 
   }

   h1 {
      font-size: 26px;
      text-align: center;
   }
   h2 {
      font-size: 24px;
      text-align: center;
      color: @color-text;
   }
   h3 {
      font-size: 22px;
      text-align: center;
      color: @color-text;
   }
   
   input,
   select, 
   textarea {
      font-size: 20px;   
      .border-round(2px);
      inner-shadow: 0;
      box-shadow: none;
      -webkit-box-shadow: none;
   }
   input[type=email], 
   input[type=text], 
   input[type=tel], 
   input[type=number], 
   input[type=integer], 
   input[type=float], 
   input[type=password], 
   select                  {height: 36px}

   input[type=checkbox],
   input[type=radio]
   {
     /* Double-sized Checkboxes */
     -ms-transform: scale(2.1, 2.1); /* IE */
     -moz-transform: scale(2.1, 2.1); /* FF */
     -webkit-transform: scale(1.5, 1.5); /* Safari and Chrome */
     -o-transform: scale(2.1, 2.1); /* Opera */
   }   
}