/*Basic CSS Styles*/

body {
	font:normal 85%/135% Verdena;
	color: #555;
	background-color: #F0F0F0;
	border-top: solid 5px #F0F0F0;
	background: 
	url(../assets/top1.png) repeat-x -50% top, 
	url(../assets/middle.png) repeat-x 50% top, 
	url(../assets/bottom.jpg) repeat-x top; 
}

header, nav, hgroup, section, article, figure, figcaption, footer { 
display: block; margin: 0; padding: 0; border: 0;}

h1, h2, h3 { font-weight: normal; color: #000000; line-height: 150%; }
h1 { font-size: 2em; }
h2 { font-size: 1.2em; }
h3 { font-variant: small-caps; font-size: .90em; }

a { color: #000; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active {	text-decoration: underline; }

img { border: none; }

p {	margin: 5px 0; }

strong { font-weight: bold; color:#000; }

hr {
	color: #000;
	border-top: dotted 1px #555;
	width: 600px;
	margin-left: 0;
}



header, nav, hgroup, section, article, footer, figure, figcaption {
    display:block;
    margin: 0;
    padding: 0;
    border:0;
}

#container {
    width: 960px; margin: 0 auto;
}

header {
    margin: 15px 30px;
    color: #000; width: 100%; height: 130px;
}

header hgroup h1 { 
    font: normal 25px/145% verdena;
    color: #000;        
}

header hgroup h2 { color: #000; font-size: 14px;}

header nav { margin-top: 15px; float: left; }

header nav ul li { list-style: none; float: left; }

header nav ul li a {
        margin-right: 10px;
        padding: 5px 15px 6px 15px;
        font-weight: bold;
        
        color: #fff;
        color: rgba(30, 30, 30, 0.30);
        text-shadow: 0 1px 1px rgba (254, 254, 254, 0.90);
        
        -webkit-border-radius: 14px;
        -moz-border-radius: 14px; 
        border-radius: 14px;
        
        background: rgba(102, 12, 247, 0.30);
        
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

header nav li a:hover, header nav li a:focus {
        color: #000;
        text-decoration: none;
        
          background: rgba(161, 3, 158, 0.30);
        
}

section { margin: 45px 0 0 30px; }

section h2 { margin: 25px 0px 10px 30px;}

section div {
    border-top: dotted 1px #555;
    margin: 15px 0;
    padding: 0 30px;
    overflow: hidden;
}

figure {
    background-color: #F0F0F0;
    float: left;
    margin: 15px 0 30px 30px;
    padding: 5px;
    border: dotted 1px #555;
}

figure figcaption {
    font: italic .90em verdena;
    color: #000;
    text-align: center;
    margin-top 5px;
}

footer {
    border-top: dotted 1px #555;
    padding: 15px 0;
    margin: 15px 30px;
    text-align: center;
    overflow: hidden;
}

#scale figure a img, #rotate figure a img, #skew figure a img {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

#scale figure a:hover img {
    background: #F0F0F0;
   -webkit-transform: scale(1.25);
   -moz-transform: scale(1.25);
   -o-transform: scale(1.25);
   transform: scale(1.25);
   
   -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

#rotate figure a:hover img {
     -webkit-transform: scale(1.25) rotate(-10deg);
     -moz-transform: scale(1.25) rotate(-10deg);
     -o-transform: scale(1.25) rotate(-10deg);
     transform: scale(1.25) rotate(-10deg);
}

#skew figure a:hover img {
    -webkit-transform: skew(-45deg, 15deg);
    -moz-transform: skew(-45deg, 15deg);
    -o-transform: skew(-45deg, 15deg);
    transform: skew(-45deg, 15deg);
}