framework.css

/**************************************************
Author      : Imri Paloja
Email       : imri.paloja@gmail.com
HomePage    : www.eurobytes.nl
Version     : 0.1
Name        : framework.css
Description : a css framework for a consistent style across web-browsers, Operatings systems and screen size.
**************************************************/

/*
Note: This is still a work in progress!

*/

/*

    Vendor extensions port:
        http://jsfiddle.net/simevidas/udyTs/show/light/

*/


/*
Tags From: http://www.w3schools.com/tags/
*/

a, abbr, acronym, address, applet, area, article, aside, audio, b, base, basefont, bdi, bdo, big, blockquote, body, br, button, canvas, caption, center, cite, code, col, colgroup, datalist, dd, del, details, dfn, dialog, dir, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, frame, frameset, head, header, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, menu, meta, meter, nav, noframes, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strike, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, tt, u, ul, var, video, wbr {
    border: 0 none;
    font-family: "Times New Roman",Georgia,Serif;
    font-size: 100%;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    text-indent: 0;
    letter-spacing: 0;
    line-height:1.5em;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    word-spacing: normal;
}

article, aside, bdi, details, dialog, img figcaption, figure, footer, header, main, mark, menuitem, meter, nav, progress, rp, rt, ruby, section, summary, time, wbr {
    display: block;
}

* {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box 
}

/*

When the firefox equivalent has been tested and, deduced as to working,
the chome scrollbar feature will be activated along with the firefox plugin

::-webkit-scrollbar {
width: 10px; height: 10px;
}

::-webkit-scrollbar-track {
background: #f9f9f9;
}

::-webkit-scrollbar-thumb {
background: #CCCCCC;



::-webkit-scrollbar {
    width: 10px; height: 10px;
}

::-webkit-scrollbar-track {
    background: #f9f9f9;
}

::-webkit-scrollbar-thumb {
    background: #CCCCCC;
}
*/

/* Arrow down up */

 /* Up arrow*/
::-webkit-scrollbar-thumb:hover {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #FFFFFF;
}

/* Down arrow */
::-webkit-scrollbar-thumb {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #FFFFFF;

/* Arrow down up */

/* Up arrow */
::-webkit-scrollbar-thumb:hover {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FFFFFF;
}

/* Down arrow */
::-webkit-scrollbar-thumb {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #FFFFFF;
}


/*
Firefox equivalent:;

http://jscrollpane.kelvinluck.com/

*/

/* Selected txt

This will need to provide a CANONICAL answer to selected text colors.
=======
/*          Selected txt

    This will need to provide a CANONICAL answer to selected text colors.

*/

::selection {
   background-color: rgba(0, 0, 0, 0.25);
   color: rgba(0, 0, 0, 0.75);
}

::-moz-selection {
   background-color: rgba(0, 0, 0, 0.25);
   color: rgba(0, 0, 0, 0.75);
}

/* links(a)

This will need to provide a CANONICAL answer to links.
=======
   background-color: #0065A4;
   color: #FFFFFF;
}

::-moz-selection {
   background-color: #0065A4;
   color: #FFFFFF;
}

/*          links(a)

    This will need to provide a CANONICAL answer to links.

*/

a {
    color: #3465A4;
    text-decoration: none;
}


a:link {
	color: brown;
}

a:visited {
	color: lightblue;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: #454545;
}


/*
    Headers still need to be tested, but for now this will do.
*/


h2, h3, h4, h5, h6 {
    font-family: serif;
    font-size: 160%;
    margin: 2px 3px;
    padding: 2px 3px;
}

h1 {
    font-family: serif;
    font-size: 200%;
    margin: 2px 3px;
    padding: 2px 3px;
    text-align: center;
}

p {
    font-size: 15px;
    margin: 1%;
}

b, strong {
    font-size: 100%;
    font-weight: bolder;
}

i {
    font-style: italic;
}

mark {
    background-color: #FFFF00;
}

/*

The following below still needs testing!
the border and background-color to be removed or, different canonical colors.

*/


blockquote {
    margin: 5% auto;
    padding: 0px 3px;
    background-color: #F5F5F5;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 1px 1px 10px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
    font-size: 100%;
    margin: 5% auto;
    padding: 2px 3px;
    text-align: left;
    width: 75%;
}

 blockquote i:before {
    color: #454545;
    content: open-quote;
    font-weight: bold;
    margin-right: -3px;
}

blockquote i:after {
    color: #454545;
    content: close-quote;
    font-weight: bold;
    margin-left: -3px;
}

cite {
    font-size: 12px;
    padding: 0px 3px;
    padding: 2px 3px;
    border: 1px solid #CCCCCC;
    background-color: #F5F5F5;
}

cite:before {
    content: open-quote;
    font-weight: bold;
}

cite:after {
    content: close-quote;
    font-weight: bold;
}

sup {
    font-size: 11px;
    vertical-align: super;
}

kbd {
    background-color: #F7F7F7;
    border: 1px solid #CCCCCC;
    padding: 0 3px;
    text-shadow: 0 1px 0 #FFFFFF;
}

code {
    background-color: #EEEEEE;
    border: 1px dashed #CCCCCC;
    font-family: monospace;
    font-size: 12px;
    font-weight: normal;
    padding: 0 5px;
    word-wrap: break-word;
}


/* inputs

I deliberetly left this blank. the inputs need some further thinking.
same thinking for select, option, form.


/*  inputs */

input {
    background-image: none;
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    padding: 0px 3px;
}

input[type="submit"], input[type="reset"],input[type="button"], button {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    outline: none;
    border-radius: 0px 0px 0px 0px;
    background: linear-gradient(to bottom, #FFFFFF, #F9F9F9) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    color: #454545;
    padding: 0px 3px;
    text-align: center;
}

input[type="submit"]:hover, input[type="reset"]:hover,input[type="button"]:hover, button:hover {
    box-shadow: 0 1px 2px rgba(30, 25, 25, 0.2);
    background: linear-gradient(to bottom, #F9F9F9, #FFFFFF) repeat scroll 0 0 rgba(0, 0, 0, 0.75);
}

input[type="search"],input[type="text"],textarea, button {

}

input[type="search"]:hover,input[type="text"]:hover,textarea:hover,button:hover {
}


input[type="search"]:focus,input[type="text"]:focus,textarea:focus,button:focus {
}


input[type="search"]:active,input[type="text"]:active,button:active {

}

input:active,button:active {

}

textarea {
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25) inset;
    padding: 5px;
}

textarea:hover {
    border: 1px solid rgba(0, 0, 0, 0.75);
}

textarea:active {
    border: 1px solid #CCCCCC;
}

textarea:focus {
    border: 1px solid #CCCCCC;
  
}

hr {
    border: 1px solid #CCCCCC;
}

img {
    border: 0px none;
}

hr {
    border: 1px solid #CCCCCC;
}

img {
    border: 0px none;
}