123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- /*
- This is my baseline for creating websites. All pages MUST inherit
- from these styles in order to be thrown into production.
- You can expand them at will to, for example, create a color scheme,
- but these minimal rules must remain intact.
- This library is provided under the conditions of the GNU GPL.
- For more information, please visit http://www.gnu.org/licences
- THEME: mint.
- */
- html {
- background: #DAE4DF;
- color: #475747;
- }
- /*
- * Ok, so font choice is a hard one.
- * It seems that Verdana is more readable at smaller sizes, but Trebuchet
- * seems a little more presentable at larger sizes.
- */
- body {
- font-family: Verdana, Arial, sans-serif;
- font-size: 12pt;
- }
- h1, h2, h3 {
- font-family: "Trebuchet MS", Verdana, sans-serif;
- font-weight: normal;
- }
- h1 {
- font-size: 2.5em;
- }
- h2 {
- font-size: 2em;
- }
- h3 {
- font-size: 1.7em;
- }
- p, li, blockquote {
- line-height: 1.5em;
- }
- a, a:visited {
- color: #3EAB75;
- text-decoration: none;
- }
- a:hover {
- color: #30C67C;
- text-decoration: underline;
- }
- blockquote {
- font-size: 1.3em;
- width: 400px;
- font-style: italic;
- padding: 5px;
- margin: 0 auto;
- }
- .rightfloat {
- float: right;
- margin: 10px;
- }
- .leftfloat {
- float: left;
- margin: 10px;
- }
- img {
- border: 5px solid #888;
- display: block;
- margin: 5px 10px;
- border-radius: 4px;
- }
- form label {
- display: block;
- margin: 5px 0;
- }
- form {
- margin: 10px;
- padding: 10px;
- background: #cecece;
- }
- /* All the text inputs in HTML */
- form input[type="text"], form input[type="password"],
- form input[type="email"], form input[type="search"], form textarea {
- border: 1px solid #000;
- padding: 5px;
- }
- form input[type="text"]:focus, form input[type="password"]:focus,
- form input[type="email"]:focus, form input[type="search"]:focus,
- form textarea:focus {
- box-shadow: 0 0 2px 3px #009b28;
- }
- form input[type="button"], form input[type="submit"],
- form button {
- padding: 7px;
- background: #aeaeae;
- margin: 5px;
- border: 1px solid #444;
- cursor: pointer;
- }
- form input[type="button"]:hover, form input[type="submit"]:hover,
- form button:hover {
- background: #bfbfbf;
- }
- form input[type="button"]:active, form input[type="submit"]:active,
- form button:active {
- background: #939393;
- }
- form input[type="button"].alt, form input[type="submit"].alt,
- form button.alt {
- padding: 7px;
- background: #c82626;
- margin: 5px;
- color: #FFF;
- border: 1px solid #9d0909;
- cursor: pointer;
- }
- form input[type="button"].alt:hover, form input[type="submit"].alt:hover,
- form button.alt:hover {
- background: #d94a4a;
- }
- form input[type="button"].alt:active, form input[type="submit"].alt:active,
- form button.alt:active {
- background: #9d0909;
- }
- form textarea {
- height: 300px;
- width: 95%;
- }
- /* tables need love too */
- table {
- border-spacing: 0;
- background: #FFF;
- border: 1px solid #888;
- }
- table thead {
- background: #555;
- color: #FFF;
- }
- table td, table th {
- border: 1px solid #888;
- }
- table tbody tr:nth-child(2n+1) {
- background: #CCC;
- }
- footer {
- background: #555;
- color: #FFF;
- text-align: center;
- font-size: 0.8em;
- margin: 0;
- padding: 20px;
- }
- /*Responsive design section*/
- @media screen and (min-width: 900px) {
- body {
- width: 900px;
- margin: 0 auto;
- }
- }
- @media screen and (max-width: 899px) {
- body {
- margin: 0 5%;
- font-size: 12pt;
- }
- form input:not([type="checkbox"],[type="radio"]), form textarea,
- form button {
- width: 93%;
- }
- blockquote {
- width: 80%;
- }
- .rightfloat, .leftfloat, img {
- float: none;
- display: block;
- margin: 0 auto;
- }
- img {
- max-width: 92%;
- }
- /* REQUIRES WORK! Has to be scrollable in mobile devices... */
- table {
- width: 95%;
- overflow: scroll;
- }
- table td, table th {
- min-width: 150px;
- }
- }
|