@charset "UTF-8";
/* CSS Ottawa Ukraina Homepage */

/* Colours:
			Grey: #717074
			Medium Blue: #5183c8
			Light Blue: #8ab5f2
			Lighter Blue: #c1dbff
*/

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}


/* ------------------------ Layout -------------------------------- */ 

#container {
	width: 880px;
	padding: 0px;
	}
	
#leftSideWrapper {
	width: 198px;
	float: left;
	}
	
#logo {
	width: 198px;
	height: 201px;
	}
	
#vertNav {
	background: url(../images/horiz-nav.jpg) no-repeat bottom left;
	width: 198px;
	height: 442px;
	}
			
#rightSideWrapper {
	}

#topNavWrapper {
	background: url(../images/top-nav-bar.jpg) no-repeat;
	width: 682px;
	height: 140px;
	float: left;
	}
	
#topNav {
	width: 362px;
	height: 22px;
	background: none;
	position: relative;
	top: 118px;
	left: 65px;	
	text-align: center;
	clear: both;
	}	
	
#contactUs {
	width: 97px;
	height: 22px;
	background: none;
	position: relative;
	top: 96px;
	left: 565px;	
	text-align: center;
	}
	
#contentWrapper {
	width: 617px;
	height: 400px;
	float: left;
	padding: 25px 0px 0px 65px;
	}
	
#mainGraphic {
	width: 598px;
	height: 271px;
	background-color:#333333;
	}
	
#threeBoxWrapper {
	width: 575px;
	padding: 25px 0px 0px 20px;
	float: left;
	}
	
#newsBox {
	background: url(../images/red-box.jpg) no-repeat;
	width: 190px;
	border-right: 1px dotted #717074;
	float: left;
	}
	
#mottoBox {
	background: url(../images/blue-box.jpg) no-repeat;
	width: 170px;
	border-right: 1px dotted #717074;
	margin: 0px 0px 0px 15px;
	float: left;
	}	
	
#postBox {
	background: url(../images/grey-box.jpg) no-repeat;
	width: 180px;
	float: left;
	margin: 0px 0px 0px 15px;
	}		
	
#newsBox h1, #mottoBox h1, #postBox h1 {
	padding: 0px 20px 0px 10px;
	line-height: 3px;
	margin: 8px 0px 20px 0px;
	}
	
#newsBox h2, #mottoBox h2, #postBox h2 {
	font-family: Trebuchet MS, Verdana, Arial;
	line-height: 1.25em;
	font-size: 10px;
	padding: 0px 20px 0px 0px;
	}

#newsBox p, #mottoBox p, #postBox p {
	font-family: Trebuchet MS, Verdana, Arial;
	line-height: 1.25em;
	font-size: 10px;
	padding: 0px 20px 0px 0px;
	color: #717074;
	}
		
#newsBox a, #mottoBox a, #postBox a {
	font-family: Trebuchet MS, Verdana, Arial;
	text-decoration: none;
	color: #0066CC;
	}
	
#newsBox a:hover, #mottoBox a:hover, #postBox a:hover {
	border-bottom: 1px solid #0066CC;
	}

.profilebox-wrapper {
	width: 617px;
	float: left;
	border-bottom: 1px dotted #717074;
	padding: 25px 0px; 
	}

	
.profilebox-left {
	float: left;
	}
	
.profilebox-right {
	float: left;
	width: 390px;
	padding: 0px 0px 0px 25px;
	}
	
	

	
/*--------------------------------------------[ TOP NAVIGATION ]-------*/
	
	
#topNav p, #contactUs p {
	font-family: Trebuchet MS, Verdana, Arial;
	font-size: 10px;
	color: #717074;
	margin: 0;
	line-height: 10px;
	padding-top: 5px;
	}
	
#topNav a {
	padding: 0px 0px 0px 0px;
	text-decoration: none;
	color: #717074;
	}
	
#topNav a:hover {
	border-bottom: 1px solid #717074;
	}
		
#contactUs a {
	padding: 0px 0px 0px 0px;
	text-decoration: none;
	color: #CC0000;
	}

#contactUs a:hover {
	border-bottom: 1px solid #CC0000;
	}


/*--------------------------------------------[ Vertical NAVIGATION ]-------*/


	
#vertNav ul li {
	font-family: Trebuchet MS, Verdana, Arial;
	font-size: 11px;
	color: #717074;
	line-height: 1.5em;
	list-style: none;
	margin-left: 0;
	padding: 0;
	}
	
#vertNav ul {
	list-style: none;
	margin-top: 0px;
	margin-left: 35px;
	padding: 0;
	}
	
#vertNav ul ul {
	margin-left: 15px;
	}
	
#vertNav ul ul ul {
	margin-left: 15px;
	}	
	
#vertNav a {
	font-family: Trebuchet MS, Verdana, Arial;
	text-decoration: none;
	color: #0066CC;
	}
	
#vertNav a:hover {
	border-bottom: 1px solid #0066CC;
	}
	
#rightLinks {
	float: right;
	width: 145px;
	padding: 0px;
	color: #303030;
	line-height: .5em;
	}

#rightLinks a {	
	color: #0066CC;
	font-size: 10px;	
	text-decoration: none;
	line-height: 1.25em;
	}
	
#rightLinks a:hover {	
	border-bottom: 1px solid #0066CC;
	}

	
	
/*--------------------------------------------[ TYPOGRAPHY ]-------*/


h1 {
	font-family: Trebuchet MS, Verdana, Arial;
	font-size: 14px; 	
	text-transform: uppercase;
	color: #FFF;
	}
	
h2 {
	color: #505050;
	}

h3 {
	font-family: Trebuchet MS, Verdana, Arial;
	font-size: 16px; 
	line-height: 1em;
	color: #505050;	
	margin: 0px 0px 50px 0px;
	border-bottom: 1px solid #505050;
	width: 362px;
	}
	
h4 {
	font-size: 16px;
	color: #303030;
	}

.date {
	font-size: 10px;
	line-height: 1em;
	margin: 10px 0px 5px 0px;
	color: #717074;
	}

.headline {
	font-size: 12px;	
	margin: 0px;
	color:#990000;
	margin-bottom: 5px;
	}
	
.fullStory {
	font-size: 12px;	
	margin: 0px 0px 20px 0px;
	color: #303030;
	width: 400px;
	padding: 0px;
	}	
	
.fullStory a {
	font-size: 12px;	
	text-decoration: none;
	color: #0066CC;
	}

.fullStory a:hover {
	font-size: 12px;	
	text-decoration: underline;
	color: #0066CC;
	}		
	
	
.headline a {
	font-size: 12px;	
	text-decoration: none;
	color: #0066CC;
	}	
	
.headline a:hover {
	font-size: 12px;	
	text-decoration: underline;
	color: #0066CC;
	}	
	
	
.fullStoryMom {
	font-size: 12px;	
	margin: 0px 0px 20px 0px;
	color: #303030;
	width: 300px;
	padding: 0px 0px 0px 25px;
	float: left;
	}	
	
	
.borderBottom {
	border-bottom: 1px dotted #717074;
	width: 425px;
	margin: 115px 0px 30px 0px;
	}

.borderBottom2 {
	border-bottom: 1px dotted #717074;
	width: 425px;
	margin: 0px 0px 25px 0px;
	}
	

/*--------------------------------------------[  Images  ]-------*/

.floatR {
	float: right;
	}

.floatL {
	float: left;
	}
	
	
/*--------------------------------------------[ TABLES ]-------*/


table {
	margin: 0;
	border-left: solid #FFF 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background: #CCCCCC;
	border-width: 1px;
	}

th {
	vertical-align: top;
	text-align: center;
	padding: 3px;
	border-bottom: solid #FFF 1px;
	border-right: solid #FFF 1px;
	border-top: solid #FFF 1px;
	background: #c1dbff;
	}

tr {
	vertical-align: top;
	}
	

td {
	border-bottom: solid #FFF 1px;
	border-right: solid #FFF 1px;
	padding: 3px;
	}

td.blue {
	background: #5183c8;
	color: #FFF;
	}
	
td.blue1 {
	background: #0000CC;
	color: #FFF;
	}

td.green {
	background: #006600;
	color: #FFF;
	}
	
td.red {
	background: #990000;
	color: #FFF;
	}
	
td.yellow {
	background: #b19b11;
	color: #FFF;
	}
	
td.yellow1 {
	background: #FFFFCC;
	color: #FFF;
	}
	
td.inactive {
	background: #e1e1e1;
	}	


td.blue a, td.red a, td.yellow a {
	color: #FFF;
	text-decoration: underline;
	font-size: 10px;
	}
	
td.blue1 a, td.red a, td.yellow1 a {
	color: #FFF;
	text-decoration: underline;
	font-size: 10px;
	}

td.blue a:hover, td.red a:hover, td.yellow a:hover {
	color: #FFF;
	text-decoration: none;
	font-size: 10px;
	}
	
td a, tr a, table a {
	font-size: 10px;
	text-decoration: none;
}






/*-------------------------------------[ Clear Fix ]--------*/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}