/* Subia Drafts Stylesheet */
/* Designed by Shadipity 2010 */


/* -----clearing browser style----- */
html, body {
margin:0;
padding:0;
border:none;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
font-weight:normal;
line-height:20px;
text-decoration:none;
background-color:#666666;
}

/* -----preset----- */
head {display:none;} 
img {border:none;}

/* -----fonts----- */
h1 {
font-size:18px;
line-height:18px;
text-align:center;
color:#333333;
margin: 20px;
text-transform: uppercase;
}
h2 {
font-size:18px;
line-height:14px;
text-align:center;
color:#FFFFFF;
margin: 20px;
}
h3 {
font-size:14px;
text-align:center;
color:#FFFFFF;
text-transform: uppercase;
line-height: 12px;
}
h4 {
font-size:14px;
text-align:left;
color:#CC0000;
line-height: 14px;
margin: 20px;
}
h5 {
font-size:10px;
text-align:center;
color:#FFFFFF;
line-height: 12px;
margin: 20px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:17px;
text-align: justify;
color:#0F0F0F;
margin: 20px;
}

/* -----links----- */
a:link {/* unvisited link */
color:#CC0000;
text-decoration:none;
}      
a:visited {/* visited link */  
color: #666666;
text-decoration:none;
} 
a:hover {/* mouse over link */ 
color: #CC0000;
text-decoration: underline;
} 
a:active {/* selected link */ 
color: #CC0000;
text-decoration:none;
} 

/* -----header----- */
#header {
height:245px;
width:780px;
margin: 20px auto;
}
.box-top-001 {
width:780px;
height:24px;
background: url(images/001-box-top.gif);
float: left;
background-repeat: no-repeat;
}
.box-bottom-001 {
background: url(images/001-box-bottom.gif);
width:780px;
height:24px;
background-repeat: no-repeat;
float: left;
}
#logo {
background: url(images/subia_logo.png);
height:252px;
width:780px;
background-repeat: no-repeat;
background-color: #CC0000;
}

/* -----wrapper----- */
#wrapper{
width:780px;
margin: 20px auto;
height: auto;
}
.box-top-002 {
width:780px;
height:24px;
background: url(images/001-box-top.gif);
float: left;
background-repeat: no-repeat;
}
.box-bottom-002 {
background: url(images/001-box-bottom.gif);
width:780px;
height:24px;
background-repeat: no-repeat;
float: left;
}

/* -----container----- */
#container {
height:auto;
float: left;
width: 780px;
background-color: #CC0000;
}
.content {
height:auto;
width:520px;
float: left;
margin: 0px 20px 0px 24px;
}
.box {
height:auto;
width:520px;
background-color: #FFFFFF;
padding-bottom: 1px;
}
.box-top-003 {
width:520px;
height:24px;
float:left;
background: url(images/002-box-top.gif);
background-repeat: no-repeat;
}
.box-bottom-003 {
background: url(images/002-box-bottom.gif);
width:520px;
height: 24px;
background-repeat: no-repeat;
}

/* -----navbar----- */
#navbar {
width:180px;
height:auto;
margin: 0px 24px 0px 0px;
float: right;
}
.navbar-box-top {
width:180px;
height:27px;
float: right;
background: url(images/003-box-top.gif);
background-repeat: no-repeat;
}
.navbar-box-bottom {
width:180px;
height:27px;
float: left;
background: url(images/003-box-bottom.gif);
background-repeat: no-repeat;
}
.navbar-box {
width:180px;
height: auto;
background-color: #666666;
}
.navbar-box li a{
display:block;
height:20px;
text-align:right;
font-size:11px;
font-weight:bold;
color:#FFFFFF;
padding-right:50px;
border-top:1px solid #CC0000;
line-height: 20px;
text-decoration: none;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
background-position: right top;
text-transform: capitalize;
width: 90px;
}
.navbar-box li a:hover{
background-color:#CC0000;
background-position:center right;
padding-right:50px;
}
.navbar-box ul {
list-style:none;
margin-top: 26px;
}
.navbar-box ul li{
}

/* -----footer----- */
#footer {
width:780px;
height:80px;
margin: 20px auto;
float: left;
}
.pp-box {
background-color: #CC0000;
margin-top: 24px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
color:#666666;
text-align: center;
}
.pp-box a {
color:#FFFFFF
}

.pp-box-top {
width:780px;
height:24px;
float:left;
background: url(images/001-box-top.gif);
background-repeat: no-repeat;
}
.pp-box-bottom {
width:780px;
height:24px;
float:left;
background: url(images/001-box-bottom.gif);
background-repeat: no-repeat;
}

/* -----banner----- */
#banners{
width:300px;
height:300px;
margin:20px auto 10px auto;
padding:5px 5px 5px 5px;
background: #CC0000;
border-color: #666666;
border-style: solid;
border-width: 1px;
}	
#banners div{
width:300px;
height:250px;
display:none;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#banners #banner1{
display:block;
}
#banner div img{
border:0px;
display:block;
width:300px;
height:230px;
}
#banners div span{
width:280px;
position:relative;
display:block;
top:-50px;
line-height:15px;
background:#666666;
font-size:12px;
padding:5px 5px 5px 15px;
color: #FFFFFF;
}
#banners ul{
width:300px;
height:25px;
background:#666666;
margin:10px 0 0 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0px;
float:left;
}
#banners ul li{
display:inline;
float:left;
margin:0 !important;
}
#banners ul li a{
text-decoration:none;
padding:5px;
line-height:20px;
color:#ffffff;
height:20px;
font-weight:bold;
float:left;
margin:0 !important;
}
#banners ul li a:hover{
background:#ffffff;
color:#CC0000;
text-decoration:none;  
}

/* -----hoverbox----- */
.hoverbox ul {
list-style: none;
}
.hoverbox a {
cursor: default;
}
.hoverbox a .preview {
display: none;
}
.hoverbox a:hover .preview {
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img {
background: #FFFFFF;
border-color: #666666;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 120px;
height: 95px;
}
.hoverbox li {
background: #CC0000;
border-color: #666666;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview {
border-color: #000000;
width: 220px;
height: 170px;
}

/* -----infobox----- */

#infobox {
height: 720px;
width: 500px;
margin: auto;
}
.infoleft {
height: 200px;
width: 245px;
float: left;
}
.inforight {
height: 200px;
width: 245px;
float: right;
}
.infolong {
	height: auto;
	width: 500px;
	float: right;
	margin-bottom: 10px;
}

/*-----background image-----*/
#backgroundleft {
background-image:url(images/background_left.png);
	position:fixed;
	width:200px;
	height:253px;
	z-index:auto;
	left:0px;
	top:0px;
	margin-top:300px;
	float:left;
}
#backgroundright {
	background-image:url(images/background_right.png);
	position:fixed;
	width:200px;
	height:253px;
	z-index:auto;
	right:0px;
	top:0px;
	margin-top:300px;
	float: right;
}