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.8em;}

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: 6px;
}

.small {
font-size: 1.3em;
}
.crush {
line-height: 0.2em;
}
.title {
display:block;vertical-align:top;float:right;
}

.tile {background:url(banner/transtile.gif) repeat-x; margin:5px; padding: 5px; }

.floatright {
float: right;
}
.floatleft {
float: left;
}

.comment {
border-style:solid;
border-color: #777777;
border-width:0px;
background-color: #ffffff;
padding: 0px, 6px, 6px, 6px;
}

.innercomment {
padding: 0px, 0px, 0px, 25px;
}
.quote {
font-family: georgia, helvetica, sans-serif;
padding: 4px;
}
body {
font-size: 1.3em;
}

.logo {
background:url(banner/wcsf2big.gif) no-repeat; 
}
.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: 15px;
background-color: #fffff;
font-size: 1.1em;
}

input[type=submit] {
padding: 10px;
outline: none;
border: 2px solid #337700;
border-radius: 15px;
background-color: #ffffff;
font-size: 1.3em;
}

textarea {
padding: 10px;
outline: none;
border: 2px solid #337700;
border-radius: 15px;
background-color: #ffffff;
font-size: 1.1em;
}

.styled-select select {
padding: 10px;
outline: none;
border: 2px solid #337700;
border-radius: 15px;
background-color: #ffffff;
font-size: 1.1em;
   }

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, 5%, 0em, 5%;
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: 2; 
flex-grow: 2; 
flex-basis: 20em;
box-sizing: border-box;
padding: 1em;
    justify-content: flex-end;
}
img.rounded {border-radius: 30%;}

.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: 32%;
padding: 0.3em;
}

.flex-sub-two-thirds {
  flex: 66%;
}

/* 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%;
  }

}

@media (max-width: 400px) {

 #leftbox #mainbox, #imagesbox {
    padding: 0.3em;
  flex: 100%;
  }
}
@media (max-width: 400px) {
  .flex-smaller-item, .flex-sub-item-thirds, .flex-sub-two-thirds {
    flex: 100%;
  }
}

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

.navigation a {word-spacing: 1em;}
.starbox {BACKGROUND: #ffffff;}