@charset "utf-8";
/*--ALL OTHER STYLES--*/

/* Scroller */
#scroller{height: 200px; width: 457px; overflow: hidden; float: right; margin: 10px 20px 0 0;}
	#scroller ul{ float: left;}
	#scroller div{ background: #000; position: absolute; height: 30px; width: 340px; color: #fff; line-height: 30px; text-align: left; padding-left: 10px;}
		#scroller a{ text-decoration: none; font-size: 14px;}
	#scroller img{}
#dots{ width: 457px; margin: 5px 20px 0 0; float: right;}
	#dots a{ margin: 4px; background: url(../Images_layout/scroller_button.png) no-repeat center center; padding: 2px; text-indent:30px; width: 15px; height: 15px; display: block; overflow: hidden; float: left;}
	#dots a.activeSlide{ background: url(../Images_layout/scroller_active.png) no-repeat center center;}

/* Home Page */
#animations{ width: 550px; float: left; margin: 10px;}
#websites{ width: 270px; float: left; margin: 10px 0 0 30px; }
#animations p, #websites p{ text-align: left;}

.section{ width:270px; float: left; margin: 10px;}
	.section h3{ font-size: 18px;}
	.section p{text-align: left; margin: 5px 0 0 0;}
	.section .image{ height: 200px;}
	
/* Web Design */
.webdesign{ width:200px; height: 175px; float: left; margin: 5px 10px 10px 10px; padding: 0; background: #222; }
	.webdesign h1{ margin:10px 0 10px 0; padding: 0; font-size: 14px; font-weight: normal; color: #fff;}
	.webdesign img{}
	.webdesign p{margin: 5px 0 5px 0; padding: 0; color: #5e7573; text-decoration: underline;}
	.webdesign a{font-size: 12px; color: #5e7573;}
	
/* Flash */
.flash{ width:200px; height: 195px; float: left; padding: 0; background: #222; margin: 5px 8px 10px 8px; }
	.flash .name{ height: 50px;}
	.flash h1{ margin:10px 0 10px 0; padding: 0; font-size: 16px; font-weight: normal; color: #fff;}
	.flash img{}
	.flash p{margin: 0px 0 5px 0; padding: 0; color: #999;}
	.flash a{color: #5e7573; font-size: 12px;}

/* View Flash */
#flashWrapper{ width: 720px; background: #222; padding: 20px;}
#flashTitle{ width:700px; height: 30px; line-height: 30px; background: #222; color: #fff; margin-top: 5px; font-size: 26px;}
#flashSwf{ background: #222; color: #fff; margin-top: 5px; padding: 10px;}
#flashInfo{ background: #252525; color: #fff; margin-top: 5px; width: 700px; padding: 5px;}
	#flashInfo #left{ width: 385px; padding: 5px; float: left;}
		#flashInfo #left h1{ font-size: 30px; margin: 0; padding: 0; font-weight: normal;}
	#flashInfo #right{ width:285px; padding: 5px; float: right; border-left: thin solid #fff;}
		#flashInfo #right h1{ font-size: 20px; margin: 0; padding: 0; font-weight: normal;}
		#flashInfo #right p{ font-size: 18px; margin: 0 0 5px 0; padding: 0;}

#flashComments{ background: #222; color: #fff; padding: 10px; margin-top: 5px; width: 700px;}
	#flashComments #right{ padding: 5px; float: right; width: 315px;}
		#flashComments #right h1{ font-size: 30px; margin: 0; padding: 0; font-weight: normal;}
		#flashInfo #right p{ font-size: 18px; margin: 0 0 5px 0; padding: 0;}
	#flashComments #left{ padding: 5px; width: 315px; float: left;}
		#flashComments #left h1{ font-size: 20px; border-right: thin solid #fff; margin: 0; padding: 0; font-weight: normal;}
		#flashInfo #left p{ font-size: 18px; margin: 0 0 5px 0; padding: 0;}

/*Messages*/
.msg-success{ width:600px; color:#060; background:#BBFFBD; border:thin solid #090; padding:5px; }
.msg-info{ width:600px; color:#f3af4d; background:#FFE9C9; border:thin solid #FFCF81; padding:5px; }
.msg-error{ width:600px; color:#900; background:#FFC4C4; border:thin solid #C00; padding:5px; }
.msg-blue{ width:600px; color: #0c5799; background:#d9f0ff; border:thin solid #0a1256; padding:5px; }
	
/*Back Link*/
.back{ margin: 0 0 0 20px; text-align: left;}
	.back a{ }
	
/*Blog*/
.blogPost{ width:810px;}
	.blogPost .header{ background: #222 /*#319CCE*/; padding: 2px;}
	.blogPost .header .title{ width: 650px; float: left; text-align: left; padding: 5px 5px 5px 10px; color: #fff;}
	.blogPost .header .date{ width: 100px; float: left; color: #999; text-align: right; font-size: 10px; line-height: 20px; margin-left: 30px;}
	.blogPost .content{ width: 790px; background: #CAE2EE; padding: 5px 5px 5px 5px; margin-bottom: 30px; font-size: 14px; text-align: left;}
	
/*Contact*/
#contactLeft{ float: left; margin-left: 70px;}
#contactRight{ float: left;}
	#contactRight .contactBox{width: 400px;}
	#contactRight .msg-success, #contactRight .msg-info, #contactRight .msg-error{ width: 380px; font-size: 12px; margin: 4px 0 4px 0;}
.contactBox{ width: 300px; border: thin solid #d8d8d8; padding: 3px; margin: 3px;}
.contactBox h1{ font-size: 18px; text-shadow: none;}
.contactBox a{ font-size: 14px;}
.contactBox i{ font-size: 12px;}
.contactBox input, .contactBox textarea{border: thin solid #d8d8d8;}

.contactReceivedBox{ border: thin solid #333; width: 600px; text-align: left; font-size: 12px; padding: 5px;}
	.contactReceivedBox span{padding: 0; margin: 0; font-size: 14px;}
	.contactReceivedBox .subBox{ width: 180px; float: left; padding: 2px; margin-left: 5px;}
	.contactReceivedBox .subBox_date{ width: 200px; float: left; padding: 2px; margin-left: 5px;}
	.contactReceivedBox .subBox_message{ padding: 2px; margin-top: 10px;}