BODY {
BACKGROUND: #ffffff;
background:url(banner/kreela6.jpg) right top no-repeat;
 font-family: arial, verdana, sans-serif;
}

A:link {	COLOR: #337700}
A:visited { COLOR: #000099}
A:hover { COLOR: #55aa00}
A:active {   COLOR: #55aa00}
HR {COLOR: #337700; WIDTH: 80%}
H1 {font-size: 1.6em;}

H3 {COLOR: #337700; text-decoration: none;}

H4 {
COLOR: #777777; font-family: "futura light BT", arial, sans-serif
}
.box {
border-style:solid;
border-color: #777777;
border-width:2px;
background-color: #ffffff;
padding: 0.4em;
border-radius: 5px;
}
.small {font-size: 0.8em;}
.crush {line-height: 0.2em;}
.title {
padding: 0px 8%;
margin: 0px 1%;
}
.tile {
background:url(banner/transtile.gif) repeat-x; margin:5px; padding: 5px; 
}
.floatright {float: right; padding-left: 0.6em;}
.floatleft {float: left; padding-right: 0.6em;}

.comment {
border-style:solid;
border-color: #777777;
border-width:0px;
background-color: #ffffff;
padding: 0px 0.5em 0.5em 0.5em;
}
.innercomment {padding: 0px 0px 0px 1.6em;}
.quote {
font-family: georgia, helvetica, sans-serif;
padding: 0.3em;
}
body {
font-size: 1em;
}

.logo {
background:url(banner/wcsf2big.gif) no-repeat; 
margin: 0.1em 8%;
padding: 0px 8%;
min-width: 120px;
min-height: 96px;
}
.right-constrain {
float:right;
padding: 10px;
padding-right: 0px;
margin: 10px;
margin-top: 0px;
margin-right: 0px;
min-width: 250px;
max-width: 260px;
}

.left-constrain {
padding: 10px;
padding-left: 0px;
float:left;
margin: 10px;
margin-top: 0px;
margin-left: 0px;
min-width: 250px;
max-width: 260px;
}

input[type=text] {
padding: 10px;
outline: none;
border: 2px solid #337700;
border-radius: 12px;
background-color: #ffffff;
background:radial-gradient(#ffffff,#f0f0f0);
}

input[type=submit] {
padding: 10px;
outline: none;
border: 2px solid #777777;
border-radius: 12px;
background-color: #ffffff;
background:radial-gradient(#ffffff,#337700);
}

textarea {
padding: 10px;
outline: none;
border: 2px solid #337700;
border-radius: 12px;
background-color: #ffffff;
background:radial-gradient(#ffffff,#f0f0f0);
}

.styled-select select {
padding: 10px;
outline: none;
border: 2px solid #337700;
border-radius: 12px;
background-color: #ffffff;
background:radial-gradient(#ffffff,#f0f0f0);
   }
img {
  max-width: 100%;
  height: auto;
}

#top-banner {
text-align: center; 
  max-width: 100%;
  height: auto;
}

#content-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
box-sizing: border-box;
padding: 1em;
margin: 0em 8% 0em 8%;
flex-wrap: wrap;
 }
  
#leftbox {
width: 25%;
height: 100%;
flex-shrink: 1; 
flex-grow: 1; 
flex-basis: 10em;
box-sizing: border-box;
padding: 1em;
text-align: center;
}

  #mainbox {
    width: 50%;
    height: 100%;
  flex-shrink: 2; 
flex-grow: 2; 
flex-basis: 20em;
box-sizing: border-box;
padding: 1em;
}

#imagesbox {
width: 25%;
height: 100%;
flex-shrink: 1; 
flex-grow: 1; 
flex-basis: 10em;
box-sizing: border-box;
padding: 1em;
    justify-content: flex-end;
}
img.rounded {border-radius: 35%;}

.flex-sub-container {
display: flex;
 flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
align-content: space-evenly;
box-sizing: border-box;
padding: 0.5em 1.5em 0.5em 1.5em;
width: 100%;
row-gap: 1em;
}

.flex-sub-item-left {
  flex: 50%;
justify-content: center;
}

.flex-sub-item-right {
  flex: 50%;
}

.flex-smaller-item {
  flex: 25%;
justify-content: center;
padding: 0.5em 2em 0.5em 2em;
}

img.flex-smaller-item { min-width: 60px;}

.flex-larger-item {
  flex: 75%;
flex-shrink: 2;
padding: 0.5em 2em 0.5em 2em;
}

.flex-sub-item-thirds {
  flex: 30%;
padding: 0.1em 0.5em;
}

.flex-sub-two-thirds {
  flex: 60%;
padding: 0.1em 0.5em;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-sub-item-right, .flex-sub-item-left {
    flex: 100%;
  }
}

@media (max-width: 600px) {

 #leftbox #mainbox, #imagesbox {
    padding: 0.3em;
  flex: 50%;
  }
#mainbox {
    padding: 0.3em;
  flex: 100%;
  }
body {background-size: 25% auto;}
}

@media (max-width: 400px) {

 #leftbox #mainbox, #imagesbox {
    padding: 0.3em;
  flex: 100%;
  }

body {background-size: 20% auto;}
}
@media (max-width: 400px) {
  .flex-smaller-item, .flex-sub-item-thirds, .flex-sub-two-thirds {
    flex: 100%;
  }
}

.navigation {
line-height: 2em;
padding: 0px 8%;
word-spacing: 2.5em;
margin: 0px 1%;
}

.navigation a {word-spacing: 0.4em;}
.starbox {BACKGROUND: #ffffff;}
.wordspaced {word-spacing: 2.5em;
line-height: 2em;}