﻿body { min-width: 960px; }

/* Header 
----------------------------------------------------------*/

#header { height: 80px; padding: 20px; background-color: #d9eacf; }
#header .left { margin-right: 20px; }
#header img { width: 75px; }
#header h1 { font-size: 1.4em; width: 150px; font-weight: bold; margin-bottom: 15px; }
#header h2 { font-size: 1.0em; width: 150px; }

#nav-menu { width: 400px; height: 30px; margin: 60px 0 0 100px; }
#nav-menu li { 
    display: inline-block; padding: 5px 20px 5px 20px; height: 30px; margin-right: 10px; 
    text-align: center; font-weight: bold; line-height: 30px;
}
#nav-menu li.active { 
    background-color: #7ea47e; color: #fff;
    -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; 
    -moz-border-radius-topleft: 7px; -moz-border-radius-topleft: 7px;
    border-top-left-radius: 7px; border-top-right-radius: 7px;  
}
#nav-menu li a { text-decoration: none; color: #000; }
#nav-menu li a:link, .navMenuItem li a:visited { color: #000; }
#nav-menu li a:hover { color: #d31b1b; }

#header #social img { 
    width: 30px; height: 30px; margin-right: 10px; background-color: #fff; cursor: pointer;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}

#sub-header { height: 15px; background-color: #7ea47e; }

/* Content 
----------------------------------------------------------*/

#content { padding: 35px 0 50px 30px; font-size: 1.2em; line-height: 1.5em; }
#content h1 { margin: 20px 0 15px 0; font-size: 1.5em; color: #ba1f1f; }
#content h2 { margin: 20px 0 0 0; font-size: 1.1em; color: #ba1f1f; }
#content h3 { margin: 0 0 0 0; font-size: 1.0em; color: #ba1f1f; }
#content p { padding-right: 20px; margin: 0 0 30px 0; }
#content p img { float: right; margin-left: 20px; border: 1px solid #A0A0A0; }
#content a { color: #ba1f1f; text-decoration: none; }
#content a:hover { text-decoration: underline; }

#content input, select { margin-bottom: 20px; border: 1px solid #ddd; }
#content input[type="text"] { height: 35px;  width: 310px; padding: 0 10px 0 10px; font-size: 1.0em; }
#content input[type="checkbox"] { margin: 0 5px 0 0; vertical-align: middle; } 
#content select { width: 200px; padding: 5px; }
#content textarea { 
    border: 1px solid #ddd; margin-bottom: 10px; width: 600px; height: 160px; 
    padding: 10px;
}


/* Kanji Apps 
----------------------------------------------------------*/

div.preview { width: 400px; padding: 10px 0 100px 0; margin: 0 40px 0 40px; }
div.preview header { padding-bottom: 15px; text-align: center; font-weight: bold; }
div.preview img.bordered { border: 1px solid #ddd; }
div.preview img.screenshot { height: 250px; }
div.preview div.thumbs { padding: 15px; }
div.preview div.thumbs img { float: left; width: 60px; height: 40px; margin: 0 14px 0 14px; cursor: pointer;  }
div.preview div.thumbs img.selected { border: 2px solid #388afb; }


/* Kanji List 
----------------------------------------------------------*/

#kanji-list-filter { margin-top: 20px; }
#kanji-grid { margin-top: 15px;  }
#kanji-grid td { margin-top: 10px;  padding: 0 30px 8px 0; }
#kanji-grid a { 
    font-size: 1.6em; text-decoration: none !important; cursor: pointer; color: #444; 
    font-family: Arial, sans-serif;
}
#kanji-grid a:hover { color: #d31b1b; }


/* Adds 
----------------------------------------------------------*/

#adds { float: right; width: 160px; margin-top: 20px; }
#adds ul { list-style-type: none; }
#adds li { margin: 10px 0 50px 0; font-size: 0.95em; width: 150px; text-align: center; }
#adds li a { color: #B76201; text-decoration: none; }
#adds li a:hover { text-decoration: underline; }
#adds li img { margin-bottom: 5px; border: none; }