*
table
tr
th
td*/
/*header style
*/
#loginlinkbox{width: 100%; overflow:auto;}
#loginlink {color: #fff; font-size: 0.875em; float: right; display:block;}
#headerhr {border-top: 1px solid #6F655D; width: 90%; margin: auto; margin-top: 6px;}
/*Java script hide content
#panel {
display: none;
Click to show panel
*/
/*gallery
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 *
animation: mymove 0.8s infinite;
}
/* Safari 4.0 - 8.0 *
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard syntax *
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Safari 4.0 - 8.0 *
@-webkit-keyframes mymove {
from {left: 300px;}
to {left: 0px;}
}
/* Standard syntax *
@keyframes mymove {
from {left: 300px;}
to {left: 0px;}
}
*/
div#holder{
overflow: hidden;
width: 460px;
height: 520px;
margin: 0px;
padding:0px;
border: none;
position: relative;
top: 100px;
clear: both;
}
img {display: block; float: left; margin: 0px; padding: 0px;}
#galery {
width: 9660px;
height: 520px;
display: block;
position: relative;
margin: 0px;
padding:0px;
-webkit-animation: galery 50s infinite; /* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease-in-out;
animation: galery 51s infinite;
animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
}
@keyframes galery {
0% {top: 0px; left: 0px;}
5% {top: 0px; left: -460px;}
10% {top: 0px; left: -920px;}
15% {top: 0px; left: -1380px;}
20% {top: 0px; left: -1840px;}
25% {top: 0px; left: -2300px;}
30% {top: 0px; left: -2760px;}
35% {top: 0px; left: -3220px;}
40% {top: 0px; left: -3680px;}
45% {top: 0px; left: -4140px;}
50% {top: 0px; left: -4600px;}
55% {top: 0px; left: -5060px;}
60% {top: 0px; left: -5520px;}
65% {top: 0px; left: -5980px;}
70% {top: 0px; left: -6440px;}
75% {top: 0px; left: -6900px;}
80% {top: 0px; left: -7360px;}
85% {top: 0px; left: -7820px;}
90% {top: 0px; left: -8280px;}
95% {top: 0px; left: -8740px;}
100% {top: 0px; left: -9200px;}
}
/* Background
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-repeat: repeat-x;
background-attachment: fixed;
background-position: right top;
background: #ffffff url("img_tree.png") no-repeat right top;
*/
/*examples
max-width: 500px;
margin: auto;
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier
/* Fade in tooltip - takes 1 second to go from 0% to 100% opacity -
opacity: 0;
transition: opacity 1s;
box-shadow: 2px 2px 10px #aaa;
text shadow creating a border
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text shadow creating a glow
text-shadow: 0 0 3px #FF0000;
text shadow creating gradient glow
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
Applying this to all elements is safe and wise:
* {
box-sizing: border-box;
}
*/
#black {float: left;background-color: #000; padding: 50px; font-weight: bold;}
#white {float:left; padding: 50px; font-weight: bold;}
.color_3 {color: #ED1C24;}
.color_4 {color: #0088CB;}
.color_5 {color: #FFCB05;}
.color_6 {color: #727272;}
.color_7 {color: #B0B0B0;}
.color_9 {color: #727272;}
.color_10 {color: #B0B0B0;}
.color_12 {color: #C2BDB9;}
.color_13 {color: #706760;}
.color_14 {color: #473E36;}
.color_15 {color: #131211;}
.color_16 {color: #EBC48A;}
.color_17 {color: #C4A473;}
.color_18 {color: #9B8158;}
.color_19 {color: #776343;}
.color_20 {color: #5A4B34;}
.color_21 {color: #9B8F86;}
.color_22 {color: #6F655D;}
.color_23 {color: #131211;}
.color_27 {color: #EDEDED;}
.color_28 {color: #DBDBDB;}
.color_29 {color: #A5A5A5;}
.color_30 {color: #515151;}
.color_31 {color: #C0A06E;}
.color_32 {color: #9B8158;}
.color_33 {color: #776343;}
.color_34 {color: #5A4B34;}
.color_35 {color: #3D3323;}
/* CSS Property & values
animation: name(name) duration(s) timing-function(lin/ease/ease-in/ease-out/ease-in-out/cubic-bezier()) delay(s) iteration-count(int/infinite) direction(fwd/rev/alternate) fill-mode play-state;
background: bg-color(#000) bg-image(url('')) position(% or PX)/bg-size(auto/px) bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
DISPLAY:
inline Default value. Displays an element as an inline element (like
). Any height and width properties will have no effect Play it »
block Displays an element as a block element (like ). It starts on a new line, and takes up the whole width Play it »
flex Displays an element as a block-level flex container Play it »
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values Play it »
inline-flex Displays an element as an inline-level flex container Play it »
inline-table The element is displayed as an inline-level table Play it »
list-item Let the element behave like a
element Play it »
run-in Displays an element as either block or inline, depending on context Play it »
table Let the element behave like a element Play it »
table-caption Let the element behave like a element Play it »
table-column-group Let the element behave like a element Play it »
table-header-group Let the element behave like a element Play it »
table-footer-group Let the element behave like a element Play it »
table-row-group Let the element behave like a element Play it »
table-cell Let the element behave like a | element Play it »
table-column Let the element behave like a element Play it »
table-row Let the element behave like a | element Play it »
none The element is completely removed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit
align-content
stretch Default value. Lines stretch to take up the remaining space Play it »
center Lines are packed toward the center of the flex container Play it »
flex-start Lines are packed toward the start of the flex container Play it »
flex-end Lines are packed toward the end of the flex container Play it »
space-between Lines are evenly distributed in the flex container Play it »
space-around Lines are evenly distributed in the flex container, with half-size spaces on either end Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit
align-items **
align-self **
all **
animation name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name keyframename|none|initial|inherit;
animation-duration time|initial|inherit;
animation-timing-function linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
animation-delay time|initial|inherit;
animation-iteration-count number|infinite|initial|inherit;
animation-direction normal|reverse|alternate|alternate-reverse|initial|inherit;
animation-fill-mode none|forwards|backwards|both|initial|inherit;
animation-play-state paused|running|initial|inherit;
backface-visibility **
background bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
background-color color|transparent|initial|inherit;
background-image url|none|initial|inherit;
background-position X%/Y% - Xpx/Ypx
background-size auto|length|cover|contain|initial|inherit;
background-repeat repeat|repeat-x|repeat-y|no-repeat|space|round|initial|inherit;
background-origin padding-box|border-box|content-box|initial|inherit;
background-clip border-box|padding-box|content-box|initial|inherit;
background-attachment scroll|fixed|local|initial|inherit;
background-blend-mode normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
border
border-bottom border-width border-style border-color|initial|inherit;
border-bottom-color color|transparent|initial|inherit;
border-bottom-left-radius length|% [length|%]|initial|inherit;
border-bottom-right-radius length|% [length|%]|initial|inherit;
border-bottom-style none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
border-bottom-width medium|thin|thick|length|initial|inherit;
border-left border-width border-style border-color|initial|inherit;
border-left-color color|transparent|initial|inherit;
border-left-style none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
border-left-width medium|thin|thick|length|initial|inherit;
border-right border-width border-style border-color|initial|inherit;
border-right-color color|transparent|initial|inherit;
border-right-style none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
border-right-width medium|thin|thick|length|initial|inherit;
border-top border-width border-style border-color|initial|inherit;
border-top-color color|transparent|initial|inherit;
border-top-left-radius length|% [length|%]|initial|inherit;
border-top-right-radius length|% [length|%]|initial|inherit;
border-top-style none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
border-top-width medium|thin|thick|length|initial|inherit;
border-image source slice width outset repeat|initial|inherit;
border-image-outset length|number|initial|inherit;
border-image-repeat stretch|repeat|round|initial|inherit;
border-image-slice number|%|fill|initial|inherit;
border-image-source none|image|initial|inherit;
border-image-width number|%|auto|initial|inherit;
border-width medium|thin|thick|length|initial|inherit;
border-spacing length (length Length)|initial|inherit;
border-style none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
border-radius 1-4 length|% / 1-4 length|%|initial|inherit;
border-collapse separate|collapse|initial|inherit;
border-color color|transparent|initial|inherit;
bottom auto|length|initial|inherit;
If position: absolute; or position: fixed; - the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block.
If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
If position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If position: static; - the bottom property has no effect.
box-decoration-break **
box-shadow none|h-offset v-offset blur spread color |inset|initial|inherit;
none Default value. No shadow is displayed Play it »
h-offset Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box Play it »
v-offset Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Play it »
blur Optional. The blur radius. The higher the number, the more blurred the shadow will be Play it »
spread Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow Play it »
color Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.
inset Changes the shadow from an outer shadow (outset) to an inner shadow
box-sizing content-box|border-box|initial|inherit;
caption-side **
caret-color **
@charset **
clear none|left|right|both|initial|inherit;
clip auto|shape|initial|inherit;
color
column-count **
column-fill **
column-gap **
column-rule **
column-rule-color **
column-rule-style **
column-rule-width **
column-span **
column-width **
columns **
content normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
:before | :after
counter-increment **
counter-reset **
cursor
alias The cursor indicates an alias of something is to be created Play it »
all-scroll The cursor indicates that something can be scrolled in any direction Play it »
auto Default. The browser sets a cursor Play it »
cell The cursor indicates that a cell (or set of cells) may be selected Play it »
context-menu The cursor indicates that a context-menu is available Play it »
col-resize The cursor indicates that the column can be resized horizontally Play it »
copy The cursor indicates something is to be copied Play it »
crosshair The cursor render as a crosshair Play it »
default The default cursor Play it »
e-resize The cursor indicates that an edge of a box is to be moved right (east) Play it »
ew-resize Indicates a bidirectional resize cursor Play it »
grab The cursor indicates that something can be grabbed Play it »
grabbing The cursor indicates that something can be grabbed Play it »
help The cursor indicates that help is available Play it »
move The cursor indicates something is to be moved Play it »
n-resize The cursor indicates that an edge of a box is to be moved up (north) Play it »
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east) Play it »
nesw-resize Indicates a bidirectional resize cursor Play it »
ns-resize Indicates a bidirectional resize cursor Play it »
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west) Play it »
nwse-resize Indicates a bidirectional resize cursor Play it »
no-drop The cursor indicates that the dragged item cannot be dropped here Play it »
none No cursor is rendered for the element Play it »
not-allowed The cursor indicates that the requested action will not be executed Play it »
pointer The cursor is a pointer and indicates a link Play it »
progress The cursor indicates that the program is busy (in progress) Play it »
row-resize The cursor indicates that the row can be resized vertically Play it »
s-resize The cursor indicates that an edge of a box is to be moved down (south) Play it »
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east) Play it »
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west) Play it »
text The cursor indicates text that may be selected Play it »
URL A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used Play it »
vertical-text The cursor indicates vertical-text that may be selected Play it »
w-resize The cursor indicates that an edge of a box is to be moved left (west) Play it »
wait The cursor indicates that the program is busy Play it »
zoom-in The cursor indicates that something can be zoomed in Play it »
zoom-out The cursor indicates that something can be zoomed out Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit
direction **
display
inline Default value. Displays an element as an inline element (like ). Any height and width properties will have no effect Play it »
block Displays an element as a block element (like ). It starts on a new line, and takes up the whole width Play it »
flex Displays an element as a block-level flex container Play it »
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values Play it »
inline-flex Displays an element as an inline-level flex container Play it »
inline-table The element is displayed as an inline-level table Play it »
list-item Let the element behave like a
element Play it »
run-in Displays an element as either block or inline, depending on context Play it »
table Let the element behave like a element Play it »
table-caption Let the element behave like a element Play it »
table-column-group Let the element behave like a element Play it »
table-header-group Let the element behave like a element Play it »
table-footer-group Let the element behave like a element Play it »
table-row-group Let the element behave like a element Play it »
table-cell Let the element behave like a | element Play it »
table-column Let the element behave like a element Play it »
table-row Let the element behave like a | element Play it »
none The element is completely removed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit
empty-cells **
filter **
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
@import
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
object-fit
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index
*/