#wholepage {
	
	padding-top:25px;
	padding-bottom:25px;
}


body {
	
line-height:30px;	
}

body {
  height: 100%;
  padding-bottom: 25px;
}


* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
 /* height: 300px; /* Should be removed. Only for demonstration */
}

/* Create 1  column  */
.columna {
  float: left;
  width: 100%;
  padding: 10px;
/*  height: 300px; /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

 /* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  margin-top:7px;
}


input.ypoxreotiko {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  background-color : #FFCC99; 
  font: 150% Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin-top:3px;
}

input.proairetiko {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  background-color : #F2F7FB; 
  font: 150% Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin-top:3px;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7;
  
}


/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75 {
    width: 100%;
    margin-top: 0;
  }
} 

@media screen and (max-width: 600px) {
  input[type=submit] {
    width: 50%;
    margin-top: 0;
  }
} 

  
legend {
font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
background: #fff;
color: #800000;
border: solid 1px black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 6px;
}

.header {
width: 60%;
font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-weight:bold;
background: #fff;
color: #800000;
border: solid 1px black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 6px;
margin-bottom: 26px;
}

.shmeioseis {
width: 100%;
font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
background: #FFF;
padding: 6px;
}

/* Dashed red border */
hr.new2 {
  border-top: 1px dashed red;
}

/* Large rounded green border */
hr.new1 {
  border: 5px solid #800000;
  border-radius: 5px;
}

#myinfo {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
  font: 110% Verdana, Geneva, Arial, Helvetica, sans-serif; 
 }
 
 #titlos1 {
  width: 100%;
  margin: 0 auto;
  font: 200% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #800000;
  font-weight:bold;
  text-align: left;
  padding-left: 30px;
}

#titlos2 {
  width: 90%;
  margin: 0 auto;
  font: 150% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #800000;
 }
 
 #titlos3 {
  width: 90%;
  margin: 0 auto;
  font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #777;
  padding-top:25px;
	padding-bottom:25px;
	 text-align: justify;
  text-justify: inter-word;
 }
 
 #titlos4 {
  width: 90%;
  margin: 0 auto;
  font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #777;
  padding-top:3px;
	padding-bottom:25px;
 }
 
 #titlos5 {
  width: 85%;
  font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #777;
  padding-left: 25px;
  text-align: justify;
  text-justify: inter-word;
  display:inline-block;
   }
  #titlos6 {
   width: 25%;
  display: inline-block;
   }
 	
#odigies {
  width: 90%;
  margin: 0 auto;
  font: 140% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #f91414;
  padding-top:3px;
	padding-bottom:25px;
 }
 
 #messagewhole {
  width: 60%;
  margin: 0 auto;
  font: 100% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #777;
  border: 4px dotted blue;
  padding:10px;
 }
 
 #messageheader {
  width: 60%;
  margin: 0 auto;
  font: 100% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #777;
 }
 
 #message1 {
  width: 60%;
  margin: 0 auto;
  font: 100% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #800000;
   }
   
#message2 {
  width: 60%;
  margin: 0 auto;
  font: 100% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #777;
  padding-bottom: 25px;
   }
   
.btn {
  display:inline-block;
  background:#f14e4e;
margin:0.9em 0.1em 0.9em 1.5em;
border:0.16em solid rgba(41,23,32,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:bold;
font-size: 150%;
color:#FFFFFF;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
width:100px;
height: 35px;
}
input[type="submit"].btn:hover {
  border: 3px solid rgba(41,23,32,1);
  }
  
.error{ color: red; 
font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

.errorsubmit{ color: red; 
font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
padding-left: 15px;
}

.successsubmit{ color: green; 
font: 130% Verdana, Geneva, Arial, Helvetica, sans-serif; 
padding-left: 15px;
}

   
 p.somenotes{
    font: 110% Verdana, Geneva, Arial, Helvetica, sans-serif; 
  color: #777;
  padding-left: 10px;
  padding-right: 10px;
  text-align: justify;
  text-justify: inter-word;
  display:inline-block;
}