/* 
this is a style sheet for Nordic Nannies, all the parts of layout are defined in this one file
in order to make changes, you have to be familiar with css language
css specification can be found at http://www.w3.org/Style/CSS/
css level 2 revision 1 has been used 

comments are separeted from the actual css code with backslash and asterisk combination

*/

html { /* defines of html element */
padding: 0;
margin: 0;
text-align: center;
}

body { /* defines body element */
background: #88b9d7 url("tausta05.jpg") left top repeat;
color: #003366;

font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
font-size: 10pt;
letter-spacing: 0.05em;
padding: 0;
margin: 0 auto;


}

.runko { /* defines .runko element */
width: 900px;
text-align: justify;
margin: 0px auto;
background: #ffffff url("banneri01.jpg") left top no-repeat;
border-left: 2px solid #003366;
border-right: 2px solid #003366;
border-bottom: 2px solid #003366;
padding: 150px 0 0 0;

}

.valikko { /* defines .valikko (main menu) element */
display: block;
width: 900px;
height: 40px;
border-top: 2px solid #003366;
padding: 0;
margin: 0 0 30px 0;
text-align: center;
text-transform: uppercase;
}

.valikko a { /* links in the main menu */

width: 176px;
margin: 0 1px auto;
display: block;
float: left;
background: #88b9d7 url("valikkotausta05.jpg") bottom center no-repeat;
border-left: 1px solid #003366;
border-right: 1px solid #003366;
border-bottom: 1px solid #003366;
padding: 5px 0 5px 0;	
text-align: center;

color: #003366;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
}

.valikko a:visited { /* visited links in the main menu */
color: #003366;
}

.valikko a:hover { /* links in the main menu when mouse is over */
color: #ffffff;
padding: 12px 0 5px 0;
text-decoration: none;
}

.alavalikko { /* defines sub menu element */
display: block;
width: 180px;
float: left;
padding: 0 10px 0 10px;
text-align: left;
margin: 0 0 2em 0;
}

.alavalikko a { /* links in the sub menus */
background: #ffffff url("valikkopampula01.jpg") left center no-repeat;
padding: 0px 0 2px 30px;
display: block;
height: auto;
margin: 5px 0 5px 0;

color: #003366;
text-decoration: none;

letter-spacing: 0.08em;

}

.alavalikko a:visited { /* visited links in the sub menus */
color: #003366;
}

.alavalikko a:hover { /* links in the sub menus when mouse is over */
/*color: #cc6699;*/
color: #9966cc;
text-decoration: none;
}

.alavalikko .ala {
background: #ffffff url("valikkopampula02.jpg") left center no-repeat;
margin-left: 20px;
}

.teksti { /* defines the actual textual contents */
display: block;
background-color: ;
width: 680px;
text-align: ;
margin-left: 200px;
padding: 0 10px 0 10px;
}

/*
.teksti .oikeapalsta { // defines an element called 'oikeapalsta' (right column), can be found at index.php 
text-align: justify; 
margin: 0; 
padding-left: 10px;
padding-right: 0px;
width: 330px; 
float: left; 
clear: right;
}

.teksti .vasenpalsta { defines an element called 'vasenpalsta' (left column), can be found at index.php 

text-align: justify; 
margin: 0; 
padding-left: 0px;
padding-right: 10px;
width: 330px; 
float: left; 
clear: right;
}
*/

/*Override defaults for all tags. Source: http://alistapart.com/articles/crosscolumn */

.teksti #overall {
width: 100%; 
margin: 0 auto;
}


.teksti .palsta {
width: 320px; 
padding: 0 10px; 
float: left;
}

.palsta p {
padding: 0; 
text-align: justify; 
}

.palsta .space { 
width: 180px; 
height: 200px; 
/*Set the width to half of the image and set the 
  height to the image height plus a little room 
  for the caption. */
float: right; 
padding: 5px;
} 
/*Float the span right and include any padding. */


.palsta .pullout { 
width: 375px; 
height: 210px;
/*Set the width and height of the span 
  to the image size. */
float: left; 
padding: 5px;
/*Float the span left and give it the 
  same amount of padding as CCspace. */
margin-left: -215px;
/*Move the image into the first column by negative 
  margin. The number is half the width of the  
  image (175px) plus the gutter (10px). */
}


.pullout span {
width: 390px; 
position: absolute;

/*Set the width of the nested span to the image 
  width. Position the span absolutely, so it 
  will appear in IE for the PC. */
text-align: center; 
font-size: .9em; 
font-weight: bold;}
/*Caption styling appears at this level.*/


a { /* defines links in general, all the links are defined by this if isn't told otherwise in this css file (ie. links in the menu) */
/*color: #cc6699;*/
color: /*#cd4388*/ #9966cc;
text-decoration: none;
}

a:visited { /* defines visited links in general */
/*color: #cc6699;*/
color: /*#cd4388*/ #9966cc;
text-decoration: none;
}

a:hover { /* defines links when mouse is over */
color: #003366;
text-decoration: underline;
}

h1, h2 { /* defines headings h1 and h2 */
font-family: "Times New Roman", Georgia, Times, serif;
font-weight: bold;
font-style: italic;

}

h1 {
border-bottom: 1px dashed #cee3ef;
padding-bottom: 5px;
}

h2 {
margin: 1.5em 0 0 0;
}

h3 {

}

h4 {
font-size: 10pt;
font-weight: bold;
}

form h4 {
margin-top: 2em;
margin-bottom: 0em;
}

form h3 {
margin-top: 2em;
}

h2.uk {
background: #ffffff url("flag_uk.jpg") left top no-repeat;
height: 30px;
padding-left: 70px;
padding-top: 3px;
}

h1.uk {
background: #ffffff url("flag_uk.jpg") left center no-repeat;
height: 30px;
padding-left: 75px;
border-bottom: none;
}

h2.finland {
background: #ffffff url("flag_finland.jpg") left top no-repeat;
height: 30px;
padding-left: 60px;
padding-top: 3px;
}

h1.finland {
background: #ffffff url("flag_finland.jpg") left center no-repeat;
height: 30px;
padding-left: 65px;
border-bottom: none;
}

h2.sweden {
background: #ffffff url("flag_sweden.jpg") left top no-repeat;
height: 30px;
padding-left: 60px;
padding-top: 3px;
}

h1.sweden {
background: #ffffff url("flag_sweden.jpg") left center no-repeat;
height: 30px;
padding-left: 65px;
border-bottom: none;
}

h2.ireland {
background: #ffffff url("flag_ireland.jpg") left top no-repeat;
height: 30px;
padding-left: 70px;
padding-top: 3px;

}

h1.ireland {
background: #ffffff url("flag_ireland.jpg") left center no-repeat;
height: 30px;
padding-left: 75px;
border-bottom: none;
}

h1.austria {
background: #ffffff url("flag_austria.jpg") left center no-repeat;
height: 30px;
padding-left: 62px;
border-bottom: none;
}

h1.france {
background: #ffffff url("flag_france.jpg") left center no-repeat;
height: 30px;
padding-left: 62px;
border-bottom: none;
}

h1.italy {
background: #ffffff url("flag_italy.jpg") left center no-repeat;
height: 30px;
padding-left: 62px;
border-bottom: none;
}

h1.netherlands {
background: #ffffff url("flag_netherlands.jpg") left center no-repeat;
height: 30px;
padding-left: 62px;
border-bottom: none;
}

h1.portugal {
background: #ffffff url("flag_portugal.jpg") left center no-repeat;
height: 30px;
padding-left: 62px;
border-bottom: none;
}

h1.spain {
background: #ffffff url("flag_spain.jpg") left center no-repeat;
height: 30px;
padding-left: 62px;
border-bottom: none;
}

h1.denmark {
background: #ffffff url("flag_denmark.jpg") left center no-repeat;
height: 30px;
padding-left: 53px;
border-bottom: none;
}

h1.norway {
background: #ffffff url("flag_norway.jpg") left center no-repeat;
height: 30px;
padding-left: 58px;
border-bottom: none;
}

h1.belgium {
background: #ffffff url("flag_belgium.jpg") left center no-repeat;
height: 30px;
padding-left: 52px;
border-bottom: none;
}

h1.germany {
background: #ffffff url("flag_germany.jpg") left center no-repeat;
height: 30px;
padding-left: 67px;
border-bottom: none;
}

.alatunniste { /* defines footer element */
text-align: center;
width: 900px;
border-top: 2px solid #003366;
margin: 3em 0 0 0;
clear: both;
}

table.listaus { /* defines data table */
width: 600px;

text-align: left;
margin-bottom: 1.5em;
border: 1px solid #003366;
}

.listaus a { /* links in data table */
color: /*#cd4388*/ #9966cc;
text-decoration: none;
}

.listaus a:visited {
color: /*#cd4388*/ #9966cc;
text-decoration: none;
}

.listaus a:hover {
color: #cc6699;
text-decoration: underline;
}

.listaus a img {
border: none;
}

.listaus th {
font-weight; bold;
border-bottom: 1px solid #003366;

}

.listaus tr {
margin-bottom: 5px;
}


.parillinen {
background-color: #ffffff;
height: auto;
padding: 2px 1px 2px 1px;
margin: 0;
}

.pariton {
background-color: #bee4eb;
height: auto;
padding: 2px 1px 2px 1px;
margin: 0;
}

.listaus .id {
width: 30px;
text-align: center;
}

.listaus .time {
width: 200px;
}

.listaus .delete {
width: 50px;
text-align: center;
}




.warning {
color: #ff3333;
}

td.warning {
width: 500px;
}

input {
margin: 0 30px 0 5px;
}

div.address p {
margin: 0 0 0 0;

}

div.address p.name {
font-weight: bold;
margin: 0 0 15px 0;
}

div.address p.caps {
text-transform: uppercase;
}

div.address p.phone {
margin: 15px 0 0 0;
}

form {
text-align: left;
}

form input {
background-color: #e8f2f8;
color: #333333;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
font-size: 10pt;
letter-spacing: 0.05em;
padding: 1px 2px 1px 2px;
margin: 1px 30px 1px 0px;

}

form input[type="hidden"] {
border: 1px solid #003366;
color: #333333;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
}

form input[type="file"] {
border: 1px solid #003366;
color: #333333;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
margin-right: 5px;
}

/*form input[type="radio"] {
margin: 1px 30px 1px 0;
border: none;
}

form input[type="checkbox"] {
margin: 1px 30px 1px 0;
border: none;
}*/

form input[type="text"] {
margin-left: 0;
margin-right: 0px;
border: 1px solid #003366;
}

form input#question17, form input#question51, form input#question52, form input#question63 {
margin-right: 5px;
}

form input#question19, form input#question20 {
margin-right: 5px;
}

form select {
background-color: #e8f2f8;
border: 1px solid #003366;
color: #333333;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
font-size: 10pt;
letter-spacing: 0.05em;
padding: 2px 2px 2px 2px;
margin: 0 0 0 0px;
}

form select option {
padding: 0px 5px 0px 5px;
}

form label {
margin-right: 5px;
height: 12px;
display: inline;

}


form input[type="submit"] {
background-color: #e8f2f8;
border: 1px solid #003366;
color: #333333;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
font-size: 10pt;
letter-spacing: 0.05em;
width: auto;
padding: 2px 5px 2px 5px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}

form input.send:hover {
color: #ffffff;
background-color: #333333;

}

form textarea {
color: #333333;
background-color: #e8f2f8;
border: 1px solid #003366;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
font-size: 10pt;
letter-spacing: 0.05em;
padding: 1px 2px 1px 2px;
}

form table {
border: none;
font-size: 10pt;
width: 600px;
}

form table .first {
width: 100px;
}

form table td {
padding: 0;
}

form p {
margin-bottom: 1.2em;
}

table.terms {
font-size: 10pt;
letter-spacing: 0.05em;
}

/* highlighted list */

ul.highlight {
border: 2px solid #003366;
background-color: #b6d4e7;
padding: 5px 5px 1em 5px;
margin: 0;
}

.highlight li {
list-style-type: none;
font-weight: bold;
margin-top: 1em;
}

.highlight li li {
list-style-type: square;
font-weight: normal;
margin-top: 5px;
}

/* "normal" list */

ul.normal {
padding: 0 0 1em 0;
margin: 0 0 0 20px;
}

ul.normal li {
list-style-type: square;
font-weight: normal;
margin-top: 5px;
}

/* "normal" ordered list */

ol.normal {
padding: 0 0 1em 0;
margin: 0 0 0 20px;
}

ol.normal li {
font-weight: normal;
margin-top: 10px;
}

/* list similar to "highlight" except there's no background color and border */

ul.porras {

padding: 0;
margin: 0;
}

.porras li {
list-style-type: none;
font-weight: bold;
margin-top: 1em;
}

.porras li li {
list-style-type: square;
font-weight: normal;
margin-top: 5px;
}

/* list similar to porras except text is bold */

.porrasstrong {
padding: 0;
margin: 0;
}

.porrasstrong li {
list-style-type: none;
font-weight: bold;
margin-top: 1em;
}

.porrasstrong li li {
list-style-type: square;
font-weight: bold;
margin-top: 5px;
}

/* list similar to porras except there's no bold heading*/

ul.otsikko {

padding: 0;
margin: 0;
}

.otsikko li {
list-style-type: none;
font-weight: normal;
margin-top: 1em;
}

.otsikko li li {
list-style-type: square;
font-weight: normal;
margin-top: 5px;
}

/* footer, note in the bottom of the page */
p.footer {
margin-top: 2em;
border-top: 1px dashed #a0b7c9;
padding: 5px 0 0 0;
}

.teksti img {
margin: 0 10px 0 10px;
border: 1px solid #003366;
}

.left {
float: left;
margin-right: 10px;
margin-left: 0;
}

.right {
float: right;
margin-left: 10px;
margin-right: 0;
}

.center {
clear: both;
text-align: center; 
}

img.kartta {
margin-bottom: 1.5em;
margin-left: 0;
margin-right: 15px;
float: left;
}

.designed {
margin: 0 auto;
width: 900px;
text-align: right;
font-size: 8pt;
}

table.countriestable {
border: 2px solid #a0b7c9;
padding: 2px;
text-align: left;
}

.countriestable th {
background-color: #003366;
color: #ffffff;
padding: 2px;
}

.countriestable td {
border: 1px solid #a0b7c9;
margin: 0;
padding: 2px;
}