/*contains all possible attributes
all {
    /*id starts with # and is for one particular item*/
    /*class starts with . and can be for multiple items and particular   tags like p.class for just paragraphs with that class */
    
    /*background*/
    background-color:#ffffff; /*rgb(255,0,0) or red*/
    background-image:url('paper.jpg'); /*2 images add this ,url(img_tree.gif)*/
    background-repeat:repeat-x; /* no-repeat or repeat-y or repeat or*/
    background-attachment:fixed; /*scroll*/
    background-position:center; /*left top or left center or left bottom or right top or right center or right bottom or center top or center center or center bottom or 50% 50% or 10px 10px */
    /*CSS3*/
    -moz-background-size:80px 60px; /* Old Firefox */
    background-size:80px 60px;
    background-repeat:no-repeat;
    background-origin:content-box; /*border-box or padding-box*/

    /*text*/
    color:#00ff00; /*rgb(255,0,0) or red*/
    text-align:center; /*right or left or justify*/
    text-decoration:none; /*overline or underline or line-through or blink */
    text-transform:uppercase; /*lowercase or capitalize*/
    text-indent:50px;
    /*CSS3*/
    text-shadow: 5px 5px 5px #FF0000;
    word-wrap:break-word; /*normal*/
    text-overflow:ellipsis; /*clip or string*/
    word-break:normal; /*break-all or hyphenate*/

    /*fonts*/
    font-family:"Times New Roman", Times, serif; 
    font-style:normal; /*oblique or italic*/
    font-size:40px;
    /*CSS3*/
    font-weight:bold; /*normal or 100 or 200 ... 900*/

    /*links*/
    a:link {color:#FF0000;}      /* unvisited link */
    a:visited {color:#00FF00;}  /* visited link */
    a:hover {color:#FF00FF;}  /* mouse over link */
    a:active {color:#0000FF;}  /* selected link */
    /*links can also use text-decoration and background-color*/
   
    /*lists*/
    list-style-type: circle; /*square or upper-roman or lower-alpha or armenian or cjk-ideographic or decimal or decimal-leading-zero or disc or georgian or hebrew or hiragana or hiragana-iroha or katakana or katakana-iroha or lower-greek or lower-latin or lower-roman or none or upper-alpha or upper-latin*/
    list-style-position:outside; /*inside*/
    list-style-image:url('sqpurple.gif');

    /*tables*/
    /*uses typical text and box code*/

    /*Box*/
    width:250px;
    padding:10px;
    border:5px solid gray; /*none or dotted or dashed or double or groove or ridge or inset or outset*/
    margin:10px; /*auto*/
    /*outline does all things border does*/
    /*CSS3*/
    border-radius:25px;
    -moz-border-radius:25px;
    box-shadow: 10px 10px 5px #888888;
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari and    Chrome */
    -o-border-image:url(border.png) 30 30 round; /* Opera */    

    /*transforms*/
    /*CSS3
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);  
    -moz-transform: rotate(30deg);  */
    /*also translate(50px,100px); and scale(2,4); and skew(30deg,20deg); and matrix(0.866,0.5,-0.5,0.866,0,0); also several 3d transforms but not fully supported by all browsers*/

    /*transitions not supported by ie
   transition: width 2s, height 2s, transform 2s;
   -moz-transition: width 2s, height 2s, -moz-transform 2s;
   -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
   -o-transition: width 2s, height 2s,-o-transform 2s;
   */

    /*animations not supported by ie and also complex*/

}

h1 {
    text-align:center;
}
body {
    background-image:url("Images/paper.jpg");
    -moz-background-size:100% 100%; /* Old Firefox */
    //background-size:cover;
    //background-repeat:no-repeat;
}

header {
    text-align:center;
    background-image:url(Images/bl2.jpg);
    -moz-background-size:100% 100%; /* Old Firefox */
    background-size:cover;
    background-repeat:no-repeat;
}

.header {
    text-align:center;
    background-image:url(Images/bl2.jpg);
    -moz-background-size:100% 100%; /* Old Firefox */
    background-size:cover;
    background-repeat:repeat;
}

.footer {
    clear:both;
    text-align:right;
    color:#44444444;
    font-size:60%;
}

.picture {
    margin-right: 20px;
    border:5px solid;
    box-shadow: 10px 10px 5px #888888;
    transition: all 0.8s Ease;
}

.picture_l {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    margin-right: 20px;
    border:5px outset;
    box-shadow: 10px 10px 5px #888888;
    transition: all 0.8s Ease;
}

.picture_r {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    margin-right: 20px;
    border:5px inset;
    box-shadow: 10px 10px 5px #888888;
    transition: all 0.8s Ease;
}

.picture:hover {
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    box-shadow: 15px 15px 10px 5px #666666;
}

.picture_l:hover{
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    box-shadow: 15px 15px 10px 5px #666666;
}

.picture_r:hover {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    box-shadow: 15px 15px 10px 5px #666666;
}

#menu {  
    list-style:none;  
    width:75%;
    text-align:center;  
    margin:auto; /*30px auto 0px auto;*/  
    height:43px;  
    padding:0px 20px 0px 20px;  
    /* Rounded Corners */  
    -moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;  
    /* Background color and gradients */  
    background: #555555;  
    background: -moz-linear-gradient(top, #555555, #222222);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555555), to(#013953));  
    /* Borders */  
    border: 1px solid #777777;  
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
    box-shadow:inset 0px 0px 1px #edf9ff;  
} 

#menu li {  
    float:left;  
    display:block;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:30px;  
    margin-top:7px; 
    margin-left:30px; 
    border:none;  
}  

#menu li:hover {  
    border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  
    /* Background color and gradients */  
    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  
    /* Rounded corners */  
    -moz-border-radius: 5px 5px 5px 5px;  
    -webkit-border-radius: 5px 5px 5px 5px;  
    border-radius: 5px 5px 5px 5px;  
} 

#menu li a {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px;  
    color: #EEEEEE;  
    display:block;  
    outline:0;  
    text-decoration:none;  
    text-shadow: 1px 1px 1px #000;  
} 

#menu li:hover a {  
    color:#161616;  
    text-shadow: 1px 1px 1px #FFFFFF;  
} 

#menu li .drop {  
    padding-right:21px;  
    background:url("img/drop.png") no-repeat rightright 8px;  
}  
#menu li:hover .drop {  
    background:url("img/drop.png") no-repeat rightright 7px;  
} 

.dropdown {  
    margin:4px auto;  
    float:left;  
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:10px 5px 10px 5px;  
    border:1px solid #777777;  
    border-top:none;  
    /* Gradient background */  
    background:#F4F4F4;  
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  
    /* Rounded Corners */  
    -moz-border-radius: 0px 5px 5px 5px;  
    -webkit-border-radius: 0px 5px 5px 5px;  
    border-radius: 0px 5px 5px 5px;  
}  

#menu li:hover .dropdown {  
    left:-1px;  
    top:auto;  
    z-index:10;
}  

.col {  
    display:inline;  
    float: left;  
    position: relative;  
    margin-left: 5px;  
    margin-right: 5px;  
    width:auto;
}  

    .imgshadow {  
        background:#FFFFFF;  
        padding:4px;  
        border:1px solid #777777;  
        margin-top:5px;  
        -moz-box-shadow:0px 0px 5px #666666;  
        -webkit-box-shadow:0px 0px 5px #666666;  
        box-shadow:0px 0px 5px #666666;  
    }  
    .img_left { /* Image sticks to the left */  
        width:auto;  
        float:left;  
        margin:5px 15px 5px 5px;  
    }  
    #menu li .black_box {  
        background-color:#333333;  
        color: #eeeeee;  
        text-shadow: 1px 1px 1px #000;  
        padding:4px 6px 4px 6px;  
        /* Rounded Corners */  
        -moz-border-radius: 5px;  
        -webkit-border-radius: 5px;  
        border-radius: 5px;  
        /* Shadow */  
        -webkit-box-shadow:inset 0 0 3px #000000;  
        -moz-box-shadow:inset 0 0 3px #000000;  
        box-shadow:inset 0 0 3px #000000;  
    }  
    #menu li ul {  
        list-style:none;  
        padding:0;  
        margin:0 0 12px 0;  
    }  
    #menu li ul li {  
        font-size:12px;  
        line-height:24px;  
        position:relative;  
        text-shadow: 1px 1px 1px #ffffff;  
        padding:0;  
        margin:0;  
        float:none;  
        text-align:left;  
        width:180px;  
    }  
    #menu li ul li:hover {  
        background:#666666;  
        border:none;  
        padding:0;  
        margin:0;  
    }  
    #menu li .greybox li {  
        background:#F4F4F4;  
        border:1px solid #bbbbbb;  
        margin:0px 0px 4px 0px;  
        padding:4px 6px 4px 6px;  
        width:116px;  
        /* Rounded Corners */  
        -moz-border-radius: 5px;  
        -webkit-border-radius: 5px;  
        border-radius: 5px;  
    }  
    #menu li .greybox li:hover {  
        background:#ffffff;  
        border:1px solid #aaaaaa;  
        padding:4px 6px 4px 6px;  
        margin:0px 0px 4px 0px;  
    }  

.info {
    color:#0000FF;
    text-shadow: 2px 2px 2px #ffffff;
}

.infocontainer {
    margin: auto 25px auto 25px;
    color:#0000FF;
    text-shadow: 2px 2px 2px #ffffff;
}

.infobox {
    margin: auto 25px auto 25px;
    padding: 0px 10px 5px 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-shadow: 2px 2px 2px #002200;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 72);
    /*-ms-filter must come before filter*/
    filter: alpha(opacity = 72);
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*All filters must be placed together*/
    background-color:#888888;
    background: -moz-linear-gradient(top, #888888, #BB55BB);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), color:#BB55BB);
}

.infobox_r {
    color:#000000;
    text-align:justify;
    padding: 0px 10px 5px 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-shadow: 2px 2px 2px #ffffff;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    background-color:#55BB55;
    word-wrap:break-word; /*normal*/
}

.infobox_l {
    padding: 0px 10px 5px 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-shadow: 2px 2px 2px #002200;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 72);
    /*-ms-filter must come before filter*/
    filter: alpha(opacity = 72);
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*All filters must be placed together*/
    background-color:#888888;
    background: -moz-linear-gradient(top, #888888, #BB55BB);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888),     color:#BB55BB);
}

.infodemo {
    text-align:center; /*right or left or justify*/
    text-decoration:blink; /*overline or underline or line-through or blink */
    text-transform:uppercase; /*lowercase or capitalize*/
    /*CSS3*/
    word-wrap:break-word; /*normal*/
    text-overflow:ellipsis;
    font-family:"Times New Roman", Times, serif; 
    font-style:italic; /*oblique or italic*/
    font-size:16px;
    /*CSS3*/
    font-weight:bold;
}

a:link {
    text-decoration:none;
    color:#000000;
}