/* 

  CSS Web Style from www.suodenjoki.dk 

  (C) 2003-2009 Michael Suodenjoki
  
  ----------------------------------------
  | HEADER                               |
  ----------------------------------------
  | BREADCRUMB  UPDATED  LANGUAGE        |
  ----------------------------------------
  | -- COLS ---------------------------- |
  | | -- COL1 --------- -- COL2 ------ | |
  | | |               | |            | | |              
  | | |               | |            | | |              
  | | |               | |            | | |              
  | | |               | |            | | |              
  | | |               | |            | | |              
  | | |               | |            | | |              
  | | |               | |            | | |              
  | | ----------------- -------------- | |
  | ------------------------------------ |
  ----------------------------------------  
  | FOOTER                               |
  ----------------------------------------

*/

@import url(frontpage.css);
@import url(photo.css);

*
{
  margin: 0;
  padding: 0;
}
body
{
  xfont-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  xfont-size: 1em;
  xline-height: 1.5em;

  font-family: Candara, Calibri, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Eras Medium ITC";
  font-size: 95%;

  margin-left: 3%;
  margin-right: 3%;
  margin-top: 30px;
  
  background-color: rgb(245,245,245);
  background-image: url(../images/texture.jpg);
  xbackground-image: url(../images/news/2010/newyear.jpg);
  x-webkit-background-size: 100% 100%;
  xbackground-repeat: no-repeat;
  xbackground-attachment: fixed;
}
/************************************************

                COLOR SETUP

************************************************/
div#logo div#bottomleft
{
  background-color: #cc0a31; /* Februar 19, 2008 */  
  background-color: #806c77; /* September 1, 2009 */  
  background-color: #cc9966; /* Januar 3, 2010 */  

  color: white;
  cursor: pointer;
}

a:hover, a:active, a:link
{
  xcolor: #cc0a31; /* Februar 19, 2008 */  
}

a:visited
{
  xcolor: #a10827; /* Februar 19, 2008 */  
}

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

                   GENERAL

************************************************/
div#page
{
  display: table-cell;
}
dd
{
  margin-bottom: 1em;
}
pre
{
  margin-bottom: 1em;
}
ol
{
  margin-bottom: 1em;
}
ul
{
  margin-bottom: 1em;
}
p
{
  margin-bottom: 1em;
}
p
{
  text-align: justify;
  color: #252525;
}
ul
{
  margin-left: 3em;
}
ol
{
  margin-left: 3em;
}
dd
{
  margin-left: 3em;
}
blockquote
{
  margin-left: 3em;
}
h1, h2, h3, h4, h5, h6
{
  margin-bottom: 0.5em;
}
h1
{
  font-family: Times,"Gill Sans MT","Gill Sans","Eras Demi ITC";
}
h1 a:visited, h1 a:hover, h1 a:active, h1 a:link
{
  color: black;  
}
h1.title
{
  margin-bottom: 0.2em;
  font-size: 350%;
  font-family: Times,"Gill Sans MT","Gill Sans","Eras Demi ITC";
  font-weight: bold;
  line-height: 110%;
  
  letter-spacing: -0.05em;
  clear: none;
}
img
{
  border: 0px;
  -ms-interpolation-mode:bicubic;
}
a:link
{
  background-color: transparent;
  text-decoration: none;
}
a:visited
{
  background-color: transparent;
  text-decoration: none;
}
a:active
{
  background-color: transparent;
  text-decoration: none;
}
a:hover
{
  background-color: transparent;
  text-decoration: none;
}
a:hover
{
  text-decoration: underline;
}
table
{
  margin-bottom: 0.5em;
}
td 
{
  vertical-align: top;
}
th 
{
  vertical-align: top;
}
.backcolor
{
  background-color: #4D4D4D;
  color: white;
}
blockquote.pullquote
{
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  padding: 0;
  padding-left: 2em;
  padding-top: 1em;
  font: 20px/24px georgia, palatino, serif;
  text-align: center;
  background-image: url(../images/quote.png);
  background-position: left top;
  background-repeat: no-repeat;
}
blockquote.pullquote p
{
  text-align: center;
}
cite
{
  display: block;
  clear: both;
  font-size: 75%;
  font-style: italic;
}

span#quote
{
  font-family: Georgia, palatino, serif;
  font-weight: bold;
}

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

                   ARTICLE

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


ul.articles
{
  line-height: 100%;
  margin-left: 0em;
}
ul.articles li
{
  display: block;
  list-style-image: none;
  background-image: url(../images/article.png);
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-left: 46px;
  height: 38px;
  padding-bottom: 0px;
  margin-right: 2%;
}
ul.articles li a
{
  font-weight: bold;
}
ul.articles li span.subhead
{
  color: #A9A9A9;
}

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

                 BLOG SECTION

************************************************/
#blogsection
{
  float: left; 
  width: 510px;
}
#blogsection h1
{
  xfont-family: Gabriola,'Segoe Print','Bradley Hand ITC','Brush Script MT',Arial,Helvetica,Georgia; 
  font-family: 'Segoe Print','Bradley Hand ITC','Brush Script MT',Arial,Helvetica,Georgia; 
  font-size: 250%; 
  line-height: 120%;
  font-weight: bolder; 
  clear: both; 
  margin-top: 0.8em; 
  margin-bottom: 0.3em;
}
#blogsection h1:first-child
{
  margin-top: 0;
}
#blogsection p, #blogsection li
{
  line-height: 1.4em;
}

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

                 BLOG COMMENTS

************************************************/
h2.postinfo
{
  font-weight: normal;
  font-family: "Franklin Gothic Book",Tahoma,Geneva,sans-serif;
  font-size: 9pt;

  margin-top: -0.3em;
  color: #A9A9A9;
  margin-bottom: 1em;
}
span.comments
{
  cursor: pointer;
}
div.commentsref
{
  cursor: pointer;
  border: 1px solid #A9A9A9;
  padding: 2px;
  display: inline;
  width: 1%;
  font-family: "Eras Medium ITC","Century Gothic", Verdana;
}
div.comments
{
  border: 1px dotted rgb(102,102,102);
  border: 1px dotted rgb(51,102,51);
  border: 1px dotted gray;
  padding: 0.5em;
  display: none;
  margin-top: 1em;
  cursor: hand;
}
div.comments h3
{
  margin-top: 0em;
}
div.comments h4
{
  font-size: 110%;
}
.comments p
{
  xmargin-top: -1.4em;
}
a.comments:hover
{
  color: #A9A9A9;
  cursor: hand;
}

a.comments:active
{
  color: #A9A9A9;
  cursor: hand;
}

a.comments:visited
{
  color: #A9A9A9;
  cursor: hand;
}

a.comments:link
{
  color: #A9A9A9;
  cursor: hand;
}

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

                 LINKS SECTION

************************************************/
ul.links ul
{
  margin-left: 0em;
  padding-left: 0em;

  list-style-type:none;
  
  line-height: 110%;

  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Eras Medium ITC";
  font-size: 90%;
}
ul.links
{
  margin-left: 0em;
  padding-left: 0em;

  xlist-style-position:inside;
  list-style-type:none;
  
  line-height: 110%;

  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Eras Medium ITC";
  font-size: 90%;
}
ul.links li
{
  margin-top: 1em;
  margin-left: 1em;
  padding-left: 0em;

  font-family: "Century Gothic";
  font-size: 125%;
  text-transform: uppercase;
}
ul.links li li
{
  margin-top: 0em;
  margin-left: 1em;

  font-family: "Eras Medium ITC","Century Gothic","Trebuchet MS","Lucida Sans Unicode";
  font-size: 80%;
  text-transform: none;
}

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

               FEEDBACK SECTION

************************************************/
dl.feedback dt
{
  margin-top: 1em;
  font-style: italic;
}
dl.feedback dd
{
  margin-left: 50%;
}
dl.feedback dt span#quote
{
  font-size: 120%;
}
dl.feedback p
{
  color: #5C5C5C;
}
/************************************************

                     HEADER

   -- #header ----------------------------------
   | - #logo(small)--         -- #infobar ---- |
   | |              |         |              | |
   | ----------------         ---------------- |
   ---------------------------------------------

   -- #header2----------------------------------
   | | - #breadcrumb --       -- Updated --- | |
   | | |              |       |            | | |
   | | ----------------       -------------- | |
   | ----------------------------------------- |
   ---------------------------------------------
   
************************************************/

#header
{
  width: 100%;
  clear: both;
}
#header2
{
  width: 100%;
  clear: both;
}

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

                   FOOTER

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

div#footer
{
  padding-top: 5px; 
  width: 100%; 
  clear: both;
  height: 2em; 
  font-size: 75%; 
  color: black;
}

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

                 LOGO (SMALL)

************************************************/
div#logosmall
{
  display: block;
}
div#logosmall div#bottomleft
{
  padding-left: 0.2em;
  padding-right: 0.2em;
  background-color: #FF8C00;
  color: white;
  font-family: "Arial Black";
  font-size: 170%;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline;
}
div#logosmall div#bottomright
{
  display: inline;
  color: #FF8C00;
  font-family: "Arial Black";
  font-size: 170%;
  text-transform: uppercase;
}

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

                  INFO BAR

************************************************/
#infobar
{
  float: right;
}
#infobar_top
{
  font-family: "Franklin Gothic Book","Eras Demi ITC","Eras Light ITC","Bradley Hand ITC";
  font-size: 9pt;
}
#infobar_top a:hover
{
  color: black;
}

#infobar_top a:active
{
  color: black;
}

#infobar_top a:visited
{
  color: black;
}

#infobar_top a:link
{
  color: black;
}

#infobar_bottom
{
  text-align: right;
}

div#infoui
{
  float: right;
  margin-bottom: 3%;
}

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

             LANGGUAGE & BREADCRUMB

************************************************/                   
div#bul
{
  margin-bottom: 2em;
}
p.breadcrumb
{
  display: inline;
  font-family: "Franklin Gothic Book";
  font-size: 100%;
  color: #808080;
}
p.updated
{
  display: inline;
  font-family: "Franklin Gothic Book";
  font-size: 100%;
  color: #808080;

  white-space: nowrap;
  margin-left: 0px;
}
p.language
{
  display: inline;
  text-align: left;
  font-family: "Franklin Gothic Book";
  font-size: 100%;
  color: #808080;

  white-space: nowrap;
  margin-left: 0px;
}

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

                   COLUMNS

  -- COLS --------------------------------
  | -- COL1--- -- COL2- ----- -- COL3 -- |
  | |        | |             | |       | |              
  | |        | |             | |       | |              
  | |        | |             | |       | |              
  | |        | |             | |       | |             
  | |        | |             | |       | |              
  | |        | |             | |       | |
  | |        | |             | |       | |
  | ---------- --------------- --------- |
  ----------------------------------------

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

/**** 2 COLUMNS ***/
div.cols2
{
  width: 100%;
}
div.cols2 div.col1
{
  float: left;
  width: 73%;
}
div.cols2 div.col2
{
  float: right;
  width: 24%;
  margin-left: 1%;
  padding-left: 1%;
  border-left: 1px dotted black;
}

/**** 3 COLUMNS ***/
div.cols3 div.col1
{
  float: left;
}
div.cols3 div.col2
{
}
div.cols3 div.col3
{
  float: right;
}

/*** FLOATING "COLUMN" ***/
div.floatcol
{
  float: right;
  width: 30%;
  margin-left: 1%;
  padding-left: 1%;
  border-left: 1px dotted black;
}

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

                  CODE / SYNTAX

************************************************/
.syntax
{
  margin-left: 4em;
  padding-left: 1%;
  padding-bottom: 2em;
  font-size: 90%;
  border-left: 1px dotted black;
  background: url(../images/codebg.png) bottom right no-repeat;
  background-color: #EEEEEE;
  
  font-family: "Courier New", Courier, monospace;
  xfont-size: 100%;
}
/************************************************

                 (INFO) BOXES

************************************************/
.box
{
  border: 1px solid #A9A9A9;
  padding: 0.5em;
  margin-left: 1em;
  background-color: #A9A9A9;
  color: white;
}
.box250
{
  float: right;
  width: 250px;
  border: 1px solid #A9A9A9;
  padding: 0.5em;
  margin-left: 1em;
  background-color: #A9A9A9;
  color: white;
}
.box250 p
{
  text-align: left;
}

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

                 BUSINESS CARD

************************************************/
.card
{
  width: 25em;
  margin-bottom: 0.5em;

  border: 1px solid #A9A9A9; 
  padding: 10px; 

  color: black;
  background-color: white; 

  background-image: url(../images/visitkortbg.png);

  filter: progid:DXImageTransform.Microsoft.dropshadow(color=#BFBFBF,offx=3,offy=3,positive=true);
  
  position: relative;
}

/* \*/
* html div.card {height: 0.5em;}
/* */

.card_name
{
  font-size: 200%; 
  font-weight: bold;
  font-family: 'Garamond',Times,Arial;
}
.card_title
{
  font-family: Helvetica; 
  font-variant: small-caps; 
  letter-spacing: 2px;
  margin-bottom: 1em;
}
.card_bottom_part
{
}
.card_photo
{
}
.card_address
{
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: Helvetica,Times,Garamond;
  font-size: 95%;
}


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

           PHOTO GALLERY FRAME & TITLE

************************************************/
.title
{
  font: 115% "Century Gothic";
  font-weight: bold;
}
div#frame
{
  background: url(../images/frames/frame_gray.png) no-repeat;
  background: url(../images/frames/frame_gray_texture.jpg) no-repeat;
  padding: 25px;
}
div#frame img
{
  width: 150px;
  height: 100px;
}

div#brev p
{
  margin-left: 2em;
  margin-right: 2em;
}

div#brev p
{
  font-family: 'Lucida Handwriting';
}

div#gallery
{
  display: inline-block;
  width: 350px;
  xborder: 1px solid #EFEFEF;
  float: left;
}
div#gallery-left
{
  float: left;
}
div#gallery-right
{
  xfloat: left;
  xwidth: 430px;
}
div#gallery-right p
{
  margin:0;
  padding:0;
}
div#gallery-right p:first-child
{
  font-weight: bold;
}

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

                RATING TABLE

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

table.ratingtable
{
  margin-left: 2em; 
  width: 90%; 
  border-collapse: collapse;
}

table.ratingtable thead tr th
{
  border-bottom: 1px gray solid;
}

table.ratingtable tr.alt td
{
  background-image: url(../images/myspace/transparent.png);
}