@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,greek);


html {
    margin: 0; 
    padding: 0; 
    background: #dbdbdb; 
}

.form-row input, .form-row textarea { 
    font-family: "Open Sans"; 
    display: block;
    width: 20em;
    border: 1px solid #333;
    border-radius: .25em;
    line-height: 1.4;
    box-sizing: border-box;
    width: 100%;
    padding: .2em .25em;
}

.form-row textarea {
    height: 15em;
}

.btn {
    width: auto;
    padding: .25em 1em;
    background: #d1d1d1;
    color: black;    
    font-family: "Open Sans"; 
    border-radius: .25em;
    line-height: 1.4;
    box-sizing: border-box;
}

body { 
    font-family: "Open Sans"; 
    margin: 0; 
    padding: 0; 
    background: #dbdbdb; 
    color: #666666; 
    font-size: 100%; 
}

#page { 
    width: 90%; 
    margin: 0 auto;
    max-width: 1350px; 
}

nav { 
    padding: 2em 0; 
    margin-left: 25%; 
    border-bottom: 2px solid #c3c3c3; 
}

nav ul { margin: 0; padding: 0; }

nav li { font-size: 125%; font-weight: bold; list-style: none; display: inline-block; margin: 0 10px; vertical-align: middle; }

nav li:last-child { margin-right: 0; }

nav a { color: white; text-decoration: none; }

nav a:hover { color: #666666; }

h2 { font-size: 125%; font-weight: bold; padding-bottom: .75em; }

h1 { font-size: 150%; font-weight: bold; padding-bottom: .5em; }

p { padding-bottom: .5em; }

#aside { width: 25%; float: left; font-size: 81.25%; }

#aside-content { padding-right: 3em; }

#book-presenter, #articles { 
    background: #222222; 
    float: left; 
    margin: 0; 
    width: 75%; 
    font-size: 81.25%; 
    border-radius: .5em; 
    color: white; 
    padding: 2em; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

#book-presenter a, #cv-container a {
	color: white;
}

#terms-container { background: #222222; float: left; margin: 0; width: 75%; font-size: 81.25%; border-radius: .5em; color: white; padding: 2em; box-sizing: border-box; 
-moz-box-sizing: border-box; }

#cv-container { background: #222222; float: left; margin: 0; width: 75%; font-size: 81.25%; border-radius: .5em; color: white; padding: 2em; box-sizing: border-box; 
-moz-box-sizing: border-box; }

a.book-thumbnail { padding: .5em; text-align: center; display: block; text-decoration: none; color: #c3c3c3; }

a.book-thumbnail p { height: 5em; }

a.book-thumbnail:hover { background: #999999; border-radius: .5em; color: white !important; }

div.book-container { width: 33.333333333%; display: inline-block; vertical-align: top; float: left; }

.book-thumbnail img { width: 100%; height: 25em; }

#logo-spacer { }

#main-container { margin: 1em 0; }

#logo { width: 15%; position: absolute; top: 1em; }

div.row { clear: both; }

footer { clear: both;  text-align: center; padding: 2em 0; font-size: 81.25%; }

#cv-container ol { list-style-type: decimal; list-style-position: outside; margin-left: 2em; margin-bottom: 2em; }

#articles ol { list-style-type: decimal; list-style-position: outside; margin-left: 2em; margin-bottom: 2em; }

#articles a { color: white; }

#cv-container img { float: right; margin: 0 0 2em 2em; border: .75em solid white; }

#photo-thumbnails img { float: left; border: .5em solid white; max-width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; }

#photo-thumbnails li { min-width: 33%; display: inline-block; overflow: hidden; vertical-align: top; }

#book-thumbnail { width: 50%; float: left; text-align: center; }

#book-details { width: 50%; float: left; padding: 2em; box-sizing: border-box; -moz-box-sizing: border-box; }

#book-details a { color: white; text-decoration: none; background: gray; padding: .25em 1em; border: 1px solid gray; border-radius: .5em; margin: 1em 0; display: 
block; text-align: center; max-width: 15em; }

#book-thumbnail a.book-thumbnail img { width: auto; }

.form-row {
    margin-bottom: 1em;
}

.form-error {
    color: red;
    font-weight: bold;
    margin-left: 1em;
}

@media screen and (min-width: 1300px) {
    div.book-container { 
        width: 25%; 
    }
}
@media screen and (max-width: 1299px) and (min-width: 767px) {
    div.book-container { 
        width: 33.333333333%; 
    }
}
@media screen and (max-width: 768px) and (min-width: 480px) {
    div.book-container { 
        width: 50%; 
    }
}	
@media screen and (max-width: 480px) {
    div.book-container { 
        width: 100%; 
    }
	#cv-container {
		width: 100%;
	}
    #aside { 
        width: 100%; 
    }
    #book-presenter { 
        width: 100%; 
    }
}