/*
	============================================	
	Colors:
	============================================	
	Strong Blue: #0066ff (0, 102, 255);
		- links	
	Strong Purple: #6600cc (102, 0, 204);
		- visited links
	Orange: #ff6600 (255, 102, 0);
		- current page in main nav
		- RSS feed link
		- Your webucation site link
	True Read: #ff0000 (255, 0, 0);
	 	- <strong>
		- whatisawebucator.com link
	Bright Green: #00cc00 (0, 204, 0);
	Grays:
		#333 (51, 51, 51) 
			- Headings
		#666 (102, 102, 102)
			- Text
		#999 (153, 153, 153)
			- Login
			- Steal this site! link
			
	============================================
	Fonts:
	============================================
	Bradley Hand ITC TT 
		(http://new.myfonts.com/fonts/linotype/bradley-hand-itc/)
		- Background writing
		- #stealthistheme
		- #sitename
		- #sitedescription
		- #login
	Marker Felt
		(http://free-fonts.biz/font_Marker%20Felt.ttf.html)
		- #mainmenu
	Rockwell
		(Microsoft Office)
		- #sitenotice
		- h1, h2, h3, h4, h5, h6
		- <aside>
		- #askaquestion


*/


/*
============================================
960 Ganked code:
============================================
*/

#wrapper,
.wrapper,
#sitenotice,
#mainmenu,
#introsection,
#mainpage,
#footer,
#thewall p#graffiti,
#thewall p.backtotop
 {margin-left:auto;margin-right:auto;width:960px; clear: both;}
#wrapper,
#mainpage,
#article {width: 1080px}

#mainpage {float: left;}
#article {float: left; width: 960px}
#maincontent {width:600px; float: left;}
#aside {width:300px; float: right;}

/*
============================================
Global Rules:
============================================
*/
a,
a strong{text-decoration: none; color: rgb(0, 102, 255);}
a:visited,
a:visiter strong {color: rgb(102, 0, 204);}
a:hover,
a:hover strong {color: rgb(255, 102, 0) ;}
li {list-style: none;}
.hidden,
#login label,
#login input.submit,
#question label,
ul#skipto {position: absolute; left: -99999px;}
strong {color: rgb(255,0,0);}

/*
============================================
Typography
============================================
*/
h1, h2, h3, h4, h5, h6 {margin:0 0 30px 0; padding: 0; line-height: 30px; text-transform: capitalize}
h1 {font-size: 32px; clear: left}
h2 {font-size: 28px; clear: left}
h3,
#footer dl#whatisawebucator dt {font-size: 24px; }
#mainpage h2 em {color: #333;}
h3.draft {font-weight: normal; color: #666;}
#mainpage ul.students h3 {margin: 0; padding: 0; background-image: none}

#mainpage dt,
#mainpage dd,
#mainpage p,
#mainpage li {font-size: 16px; padding: 0; margin: 0; line-height: 30px; margin: 30px 0;}
#mainpage li {margin: 0}
#mainpage ul,
#mainpage ol {margin-bottom: 30px; list-style-position: inside}
#mainpage #maincontent ol, #mainpage #maincontent ul  {margin-left: 25px;}

#mainpage h3.post {font-weight: normal; font-size: 18px; font-family: Arial, serif;}

#mainpage #aside h2,#mainpage #aside h3 {font-size: 14px; line-height: 10px; background: none; margin:0; padding:0; color: rgb(51,51,51); padding-top: 20px;}
#mainpage #aside h2 {font-size: 16px; color: #444; margin: 30px 0}

#mainpage #aside p,
#mainpage #aside li,
#mainpage #aside dt,
#mainpage #aside dd, {font-size: 10px; padding: 0; margin: 0; line-height: 30px; font-weight: normal}

#mainpage #aside p {font-weight: normal; margin-left: 0}

#mainpage dl {margin-left: 10px;}
#mainpage dt {font-weight: bold}
#mainpage dt,
#mainpage dd {margin: 0; padding: 0}

#footer dl#whatisawebucator dl {position: relative}
#footer dl#whatisawebucator dt {display: block; margin-left: 60px; padding-top: 10px; margin-bottom: 20px}
#footer dl#whatisawebucator dd {margin-left: 60px; padding-right: 10px;}
#footer #webucatornetwork h3 {color: rgb(255,255,255); font-size: 16px; margin: 5px 0 15px;}


/* Marker Felt */
ul#mainmenu {font-family: "Marker Felt", "AbcBulletin", Arial; font-weight: bold}

/* Rockwell */
#sitenotice,
h1, h2, h3, h4, h5, h6,
#aside,
#header .askaquestion,
#searchsubmit,
#aside h2,
#aside h3,
#footer dl#whatisawebucator dt
{font-family: Rockwell, "New Courier", Courier, Georgia, "Times New Roman", Times, serif;}



/* Bradley Hand ITC TT */
p#stealthistheme,
p#sitename,
p#sitedescription,
#login input#loginusername,
#login p.username
{font-family: "Bradley Hand ITC TT", "Bradley Hand ITC";}

/*
============================================
Backgrounds:
============================================
*/
body {background: #3a5a31 url(http://dabrook.org/images/ui/bg-tile.jpg)  repeat;}	
#header {background: url(http://dabrook.org/images/ui/spine.gif) repeat-x;}

p#maintext {background: url(http://dabrook.org/images/ui/bg-text.png) repeat-y 0 0; height: 1000px; z-index: -100; position: absolute; top: 160px; margin-left: -260px; padding-left: 260px; width: 960px;}

h1 {background: url(http://dabrook.org/images/ui/h1.png) no-repeat 0 3px; padding-left: 100px; margin-left: -100px;}
#mainpage h2 {background: url(http://dabrook.org/images/ui/h2.png) no-repeat 0 3px; padding-left: 100px; margin-left: -90px;}
#mainpage h3 {background: url(http://dabrook.org/images/ui/h3.png) no-repeat 0 3px; padding-left: 84px; margin-left: -74px; clear: left;}

#mainpage .secondarysubcontent p{margin: 0 10px; font-size: 14px}
#mainpage .secondarysubcontent h2,
#mainpage .secondarysubcontent h3 {background-image: none; font-size: 20px; font-weight: normal; margin-bottom: 0}
#mainpage .secondarysubcontent h2 {font-size: 24px; color: rgb(255,102,0) }



/*
============================================
<header>
============================================
*/
p#sitenotice {color: #fff; font-size: 12px; padding-top: 5px;}
p#sitenotice strong {color: rgb(0, 204, 0);}
p#sitenotice a {color: #fff; text-decoration: underline;}
p#sitenotice a:hover {text-decoration: #FF6600; color:#FF6600;}
ul#mainmenu {margin-top: 25px; height: 55px; position: relative; z-index: 200}
ul#mainmenu li {float: left; font-size: 28px; margin: 0 24px 0 0;}
ul#mainmenu li a:visited,
ul#mainmenu li a {background: rgb(255, 255, 255); background: rgb(255, 255, 255); background: rgba(255, 255, 255, .9); padding: 0px 8px; color: rgb(0,0,0); display: block;}
ul#mainmenu li a:hover,
ul#mainmenu li a.active {color: rgb(255,102,0); background: rgba(255, 255, 255, 1); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);}
ul#mainmenu li a.active {-webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); color: rgb(102,0,204); }

ul#mainmenu li a.dropped {background: #000; padding: 10px 8px 12px; margin: -10px 0 -12px; color: #fff; display: block; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);}


#introsection {position: relative;}
p#stealthistheme {text-align: right; position: absolute; right: 24px; top: 100px; width: 180px; text-align: center}
p#stealthistheme a {font-size: 24px; color: rgb(153, 153, 153); background: url(http://dabrook.org/images/ui/html-css-download-icon.png) no-repeat 0 -65px; padding-left: 36px; height: 80px; display: block}
p#stealthistheme a:hover {color: rgb(255, 102, 0);background: url(http://dabrook.org/images/ui/html-css-download-icon.png) 0px 5px no-repeat;}


img#logo {position: absolute; z-index: -100; top: 0; left: -40px; top: -25px}
p#askaquestion {position: absolute; z-index: 90; top: 140px; left: 160px;}
input#searchsubmit,
p#askaquestion a,
a.button,
input#submit {background: rgb(255, 102, 0); color: rgb(255,255,255); font-size: 12px; display: block; width: 80px; text-align: center; line-height: 10px; padding: 5px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 102, 0)), to(rgb(231, 92, 0)));}
p#askaquestion a:hover,
a.button:hover,
input#submit:hover,
input#searchsubmit {background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 102, 0)), to(rgb(222, 59, 2))); cursor: pointer;}
a.button {width: auto;display: block;font-size: 16px; padding: 10px;}

p#sitename a {display: block; color: rgb(255,255,255); font-size: 50px; line-height:60px; position: absolute; top: 20px; left: 250px;}
p#sitedescription a {display: block; color: rgb(255, 102, 0); font-size: 22px; position: absolute; top: 140px; left: 270px;}


.dropdown {display: none}
.dropdown {margin: 0 0 20px; position: absolute; background: #000 ; z-index: 100; top: 100px; padding: 20px; 
	-webkit-border-bottom-right-radius: 10px; 
	-moz-border-radius-bottomright: 10px; 
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px; 
	-moz-border-radius-bottomleft: 10px; 
	border-bottom-left-radius: 10px;
/*	border-width: 5;
	-webkit-border-image: url(http://dabrook.org/images/ui/spine.gif) 5 5 5 5 stretch stretch;
	-moz-border-image: url(http://dabrook.org/images/ui/spine.gif) 5 5 5 5 stretch stretch;
*/	}
.dropdown p {font-size: 18px; maring: 0;}
.standoutlink,
p#decifer a,
.dropdown p a {background: #171717; border: 1px #282828 solid; color: #646464; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 10px; display: block; float: left;}
#thewall p.backtotop a {display:inline; float: none; padding: 2px; color: #000; border-bottom: 1px #000 solid; background: #C4C3C2;}
#thewall p.backtotop a:hover,
p#decifer a:hover,
.dropdown p a:hover {color: #fff; border-color: #fff;}
ul#submenu li {margin: 0; padding: 0; list-style: disc inline; font-size: 16px;}
ul#submenu li.course {width: 220px; float: left; clear: none; margin-right: 20px; color: #fff;}
ul#submenu li#springbrookclasses {width: 160px;}
.dropdown a {color: #fff;}
.dropdown a:hover {color: #0066ff;}
ul#submenu li.course strong {font-size: 20px;}
ul#submenu li.course li {list-style: disc inside}


/*
============================================
div#login
============================================
*/
#login {position: absolute; right: 10px; top:10px; z-index: 200}
#login input.field,
#login p.username {display: block; width: 190px; border: none; border-bottom: 1px #ccc dotted; background: transparent; text-align: right; color: #666; font-size: 22px; margin-bottom: 0}
#login p {margin: 0; padding: 0} 
p#forgotpassword,
p#logoutlink {font-size: 10px; margin: 0; padding: 0; line-height: 12px; text-align: right; margin-top: 4px}
p#forgotpassword a,
p#logoutlink a {color: #222; }
p#forgotpassword a:hover,
p#logoutlink a:hover {color: rgb(255,102,0)}


/*
============================================
div#mainpage
============================================
*/
#maincontent {margin-top: -30px; position: relative; }

#mainpage {background: rgb(255,255,255) url(http://dabrook.org/images/ui/pink-line.gif) repeat-y 100px top; margin-top: 200px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: relative; z-index: 0; }
#article { background: url(http://dabrook.org/images/ui/lines.gif) repeat 0 0px; position: relative; margin-top: 120px; padding-left: 120px; padding-bottom: 120px;}
#mainpage p,
#mainpage ul,
#mainpage ol {margin-left: 10px;}
/* #mainpage img */ 

#mainpage li {margin-left: 10px; list-style-type: disc;}
#mainpage ol li {list-style: decimal;}

#mainpage ul#projectcategories li {list-style-type:none; padding-left: 0; margin-left: -10px}
#mainpage ul#projectcategories li h2 {padding-left: 90px}
#mainpage ul#projectcategories li ul li {list-style-type:disc; margin-left: 10px}

#mainpage ul#blogarticles {margin-left: 0; padding-left: 0}
#mainpage ul#blogarticles li {list-style: none; margin-left: 0; padding-left: 0}

#mainpage ul.students li {text-transform:capitalize}
#mainpage #aus {margin-bottom: 30px}
#mainpage .posts {width: 280px; float: left; clear: none;}
#mainpage .posts + .posts {margin-left: 20px;}
#mainpage .posts h3 {color: #222;}
#mainpage .posts h3.whatscurrent {float: left; clear: none; text-align: left; margin: 0; padding: 10px 0}
#mainpage .posts img#calendaricon {float: left; clear: none; margin: 10px 10px 30px 10px}
#mainpage .posts ul.whatscurrent {clear: left}
#mainpage .posts li {list-style: none; margin-left: 0}
#mainpage .posts p.date + p {margin-top: -30px;}
#mainpage .suggested li em,
#mainpage .posts p.date  {color: #999; font-style: normal}
#mainpage .posts + .posts {margin-left: 30px;}
#mainpage .current li a:link,
#mainpage .current li a:visited {color: #444; text-decoration: underline;}
#mainpage .current li a:hover {color: #FF6500}

/*
============================================
search
============================================
*/

input#searchsubmit {width: auto; border: none; display: inline; padding: 5px 4px; margin: 10px 5px 0; background: #ddd; color: #666; border: 1px #ccc solid}
input#searchsubmit:hover {background: #ff6600; color: #fff}
#aside input#searchbox {font-size: 12px; border: 1px #ccc dotted; rgb(0,0,0); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; display: block; float: left; clear: left; margin-top: 10px}

#aside input#searchbox:focus {border: 1px #999 solid;}
#res div {background: transparent; width: 600px}
#aside h2.searchlabel {margin-top: 30px; float: left; clear: both; width: 100%}

/*
============================================
form#comment_form
============================================
*/

#contact {width: 550px; margin: 20px 0; float: left;clear: both; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #395931; border: 1px #282828 solid; color: #fff; position: relative;}
#contact h2 {margin-left: -110px;}
#contact form {width: 320px; float: left; clear: none;}
#contact p {margin: 0 0 10px; padding: 0}
#contact fieldset legend {display: none}
#contact label {display: block; position: relative}
#contact label.required em {color:#ff6600}
#contact p.minortext {margin-bottom: 3px}
#contact p.minortext label {font-size: 10px;}
#contact input#captcha,
#contact select,
#contact input.text,
#contact textarea.text {width: 300px; padding: 2px 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px #646464 solid; background: #fff; font-size: 16px;}
#contact textarea.text {height: 150px;font-size: 12px; line-height: 30px; background: #fff url(http://dabrook.org/images/ui/lines.gif); border-color: rgb(0,0,0);}
#contact input.checkbox {float: left; display: block; margin-top: 8px}
#contact input#captcha,
registercaptcha {width: 150px; float: left; margin-top: 4px;}
#contact input#membershipcaptcha,
#contact input#registercaptcha {width: 160px; float: left; margin-top: 12px; margin-right: 10px}
#contact #capthaimage {float: right; display: block}
#contact m {color: #fff;}
#contact input#username {background: transparent; border: none; border-bottom: 1px #fff solid; color: rgb(255, 102, 0); font-weight: bold}
#contact select {margin-bottom: 10px;}
.commentbox {position: relative;}
.commentbox img.gravatar {}
h3 em.date {position:absolute; top: 5px; right: 0; color: #999; font-style: normal}

#contact #preview {float: right; clear: none; width: 220px; margin-top: 25px;}
#contact #preview strong {color: #fff}

#contact p.directions {font-size: 12px; margin: 0; padding: 0; color: #ccc;}
form.register label {margin: 0; padding: 0; font-size: 20px; font-weight: bold}

form#hostingapplication {background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 2px #ccc solid; padding: 20px; color: #666; float: left; clear: both}
form#hostingapplication p {font-size: 18px; line-height: 200%;}
form#hostingapplication input {border: none; border-bottom: 1px #ccc dashed; font-size: 18px; width: 200px; color: #222; padding: 0 2px}
form#hostingapplication input#studying {width: 300px}
form#hostingapplication input#submit {border: none; color: #fff; width: auto; padding: 4px 8px; font-size: 14px; margin-left: 400px; font-weight: bold}
form#hostingapplication select {font-size: 14px; padding: 2px}
form#hostingapplication strong {color: #666}

/*
============================================
.notices
============================================
*/

#mainpage .greenlight,
#mainpage .notice,
#mainpage .warning {padding: 10px; margin-right: 10px; float: left; width: 100%; clear: both; -webkit-border-radius: 10px; -moz-border-radius: 5px; border-radius: 5px; background-position: 0 bottom; background-repeat: repeat-x}

#mainpage .notice {background: #DBFFDB url(http://dabrook.org/images/ui/bg-gradient-yellow.png); border: 2px #ffcc00 solid; }
#mainpage .warning  {background: #DBFFDB url(http://dabrook.org/images/ui/bg-gradient-red.png); border: 2px #cc0000 solid;}
#mainpage .greenlight {background: #DBFFDB url(http://dabrook.org/images/ui/bg-gradient-green.png); border: 2px #090 solid;}

#mainpage .greenlight a {color: #090}

#mainpage .notice a {color: rgb(255,0,0)}
#mainpage .warning a {color: #cc0000}
 
#mainpage .greenlight a:hover,
#mainpage .notice a:hover,
#mainpage .warning a:hover
 {text-decoration: underline}


/*
============================================
tables
============================================
*/
table,
table#grades {width: 100%; margin-bottom: 60px;}
table th,
table#grades th,
table#grades tr.final-grade,
table#hosting tr.total  {background: #222; color: #fff; text-align: left; font-size: 16px; padding: 3px 5px;}
table th + th,
table#grades th + th {border-left: 1px #fff solid;}
table tr td,
table#grades tr td {padding: 8px 5px 3px; vertical-align:bottom;}
table#grades tr.final-grade td {padding: 3px 5px;}

table#hosting {font-size: 16px; background: #fff; border: 1px #ccc solid}
table#hosting col.designer {border-left: 1px #ccc solid; border-right: 1px #ccc solid;}
table#hosting col.developer {background: #FCF99A;}
table#hosting th {text-align: center;}
table#hosting td.designer {color: #FFFECF; border-left: 1px #222 solid; border-right: 1px #222 solid}
table#hosting td.developer {color: #FFFB82}

table#hosting th,
table#hosting tr.total {border: 1px #222 solid; font-size: 20px;}
table#hosting th + th {border-left: 1px #fff solid;}
table#hosting th.features {width: 320px; text-align: left}
table#hosting tr {border-bottom: 1px #ccc solid}
table#hosting td + td {text-align: center}


/*
============================================
extras
============================================
*/
blockquote {margin-left: 10px; border-left: 4px #ccc double;}
.featureimage, .featured, .feature {float: left; margin: 0 10px 10px 0}
.secondaryimage, .secondaryfeature {float: right; margin: 0 0 10px 10px}
code,
#colorbox .feature, #colorbox .featured {margin-bottom: 5px;}
.codeSi pre	{width: 580px; float: left; clear: both; overflow: scroll; margin: 10px 0; padding: 10px 5px 15px; border: 1px #000 solid; background: rgba(255,255,255,.8);}
em.more {font-style: normal; color: #666}
p.previous {float: left; clear: none; width: 48%;}
p.next {float: right; clear: none; width: 48%; text-align: right}


/*
============================================
calendar
============================================
*/

.calendarBG {float: left; clear: left;border-collapse: collapse;	 font-size: 12px; line-height: 12px; background: rgb(255,255,255); background: rgba(255,255,255,.7)}
.calendarBG td {width: 83px;padding: 2px;}
.calendarBG td.calendarBGdayBox {height: 6em; position: relative; border: 1px #ccc solid; vertical-align: top;  font-size: 12px; color: #666}
.calendarBG td.calendarBlank {background: rgb(238,240,238); background: rgba(238,240,238,.7);}
#mainpage table ul {margin: 0; padding: 0}
#mainpage table li.calendarEventTitle {font-size: 10px; line-height: 12px; margin: 0; padding: 0; list-style-position: inside; list-style: none; margin-bottom: 10px}									
.calendarHeader th {padding: 4px 0; text-align: center; }	
.calendarMonthLinks {color:#fff;}
.calendarDayHeading {padding: 10px 0; text-align: center; background: #33474d url(http://dabrook.org/images/hairline.gif) repeat-x;}
.calendarDayHeading td {background: #222; padding: 10px 0; color: #ededed}
.calendarToday {background-color: 	#DDE8FF;}
.calendarDayNumber {vertical-align: top}


/*
============================================
.text-links
============================================
*/
.text-links {border: 1px #ccc solid; -webkit-border-radius: 10px; -moz-border-radius: 5px; border-radius: 5px; padding: 0; margin-bottom: 30px; background: #fff url(http://dabrook.org/images/ui/bg-gradient.png) repeat-x bottom; float: left; clear: both; position: relative; width: 100%}
.text-links strong {font-weight: normal; position: absolute; top: -8px; left: 10px; background: #fff; font-size: 10px; color: #666}
.text-links ul {padding-top: 10px;}
.text-links ul,
.text-links ul li {margin: 0; padding: 0;}
#mainpage .text-links ul li {display: block; float: left; font-size: 12px;}


/*
============================================
ul.ads
============================================
*/

#aside ul.ads {float: left; clear: both; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px #ccc solid; padding: 2px; background: #fff; margin-bottom: 60px; width: 286px}

#aside ul.ads,
#aside ul.ads li {margin: 0; padding: 0; list-style: none}
#aside ul.ads li {float: left}

#aside ul.ads li a img,
#maincontent ul.previousworkshop li p a img {border:1px #ccc solid; padding:5px; background:#fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: block; margin: 2px}
#aside ul.ads li a:hover img,
#maincontent ul.previousworkshop li p a:hover img {background: #ddd; border-color: #999}


/*
============================================
div#aside
============================================
*/

#aside {color: #666; padding-right: 2px; position: relative; z-index: 100; font-size: 12px; margin-top: -40px}
#aside a.rssfeedlink {color: rgb(255,102,0);}
#aside a.rssfeedlink:hover {text-decoration: underline;;}
#aside a strong {color: #ff6600}
.shoutout,
.current {float: left; padding: 10px; width: 265px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: 1px #ccc solid; background: #fff url(http://dabrook.org/images/ui/bg-gradient.png) repeat-x bottom; margin: 20px 0}
.focus {background: #fff url(http://dabrook.org/images/ui/bg-gradient.png) repeat-x bottom; border: 1px #222 solid}
.current { padding: 10px; width: 200px; margin: 0 0 0 10px; clear: none; padding: 0; margin-top: -10px}
#mainpage .current h3 {margin-top: 10px; background-image: none; text-align: center}
#mainpage #aside .shoutout h2 {padding: 5px 0; margin: 0; text-align: center}
#mainpage #aside .focus h2 {margin: -10px -10px 10px; padding: 10px 0; text-align: center; background: #444; color: #fff; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px;}
#mainpage #aside .shoutout ul,
#mainpage #aside .shoutout ol {margin: 0 0 0 15px}
#mainpage #aside .shoutout p,
#mainpage #aside .shoutout ul li,
#mainpage #aside .shoutout ol li {margin: 2px 0; font-size: 14px; line-height: 20px;}
#mainpage #aside .shoutout p strong {color: #444}


p#licensing {text-align: center;}

/*
============================================
workshops
============================================
*/

#maincontent ul.previousworkshop, 
#maincontent ul.previousworkshop li {margin:0; padding: 0;}
#maincontent ul.previousworkshop li {width: 300px; margin: 0px; list-style-type: none; float: left; background-image: none;}
ul.previousworkshop li h3 {font-size: 14px; margin: 0; padding: 0; position: absolute; left:-99999px;}
#maincontent ul.previousworkshop li p {margin: 0; padding: 0;}

/*
============================================
ul#breadcrumbs
============================================
*/
ul#breadcrumbs {position: absolute; left: 120px; width: 640px}
ul#breadcrumbs li {float: left; list-style: disc; margin-left: 20px}
ul#breadcrumbs li.first {list-style: none; margin-left: 0 }

/*
============================================
hosting
============================================
*/
ul#hosting-plans {width: 100%; clear: both; float: left}
ul#hosting-plans, 
ul#hosting-plans li {list-style-type: none; margin: 0; padding: 0}
ul#hosting-plans li p, 
ul#hosting-plans li h3 {margin: 0; padding: 0; line-height: auto; background: none}
ul#hosting-plans li {border: 1px #ccc solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 220px; padding: 20px; float: left; clear: none; background: #fff; margin: 10px}
ul#hosting-plans li p.year {margin: 5px 0 0 110px; font-size: 20px; color: #444}
ul#hosting-plans li p.price {font-size:60px; text-align: center; font-weight: bold; text-shadow: 2px 2px 2px #ccc; margin: 0; letter-spacing: normal; color: #333}
ul#hosting-plans li h3 {font-size: 32px; text-align: center; font-weight: normal; text-shadow: 2px 1px 1px #ddd; color: #333}
ul#hosting-plans li p.description {line-height: 120%; text-align: center; margin: 15px 0 0; color: #444}

ul#hosting-plans li p.calltoaction,
ul#hosting-plans li p.secondary {margin: 20px 0 5px; text-align: center}
ul#hosting-plans li p.secondary {margin: 5px 0 0;}
ul#hosting-plans li p.secondary a {color: #999; text-decoration: underline}
ul#hosting-plans li p.secondary a:hover {color: #222;}
ul#hosting-plans li p.calltoaction a {-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #ff6600; color: #fff; text-align: center;  padding: 5px 20px; width: 220px; font-size: 20px; font-weight: bold;}
ul#hosting-plans li p.calltoaction a:hover {color: #222}

/*
============================================
Podcast Player
============================================
*/

#audioplayer_1 {margin-top:3px; margin-bottom:30px; margin-left:10px;}

/*
============================================
#subcontent
============================================
*/

.mainsubcontent,
.secondarysubcontent {float: left; clear: none; width: 350px; padding-bottom: 10px}
.secondarysubcontent {float: right; width: 220px;border-left: #ccc 1px dotted; display: block; -moz-box-shadow: rgba(0, 0, 0, 0.2) -5px 5px 25px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) -5px 5px 25px; padding-top: 20px; margin-top: -10px; background: rgb(255,255,255)}
#mainpage .secondarysubcontent li {font-size: 12px; padding: 0 5px; margin: 0; list-style-position: inside; line-height: normal; margin-bottom: 10px}

/*
============================================
div#footer
============================================
*/
#footer {overflow: auto; padding-bottom: 40px;}
#footer dl#whatisawebucator {display: block;width: 402px; height: 196px; background: url(http://dabrook.org/images/ui/notecard.png) no-repeat; float: right; clear:none;-moz-box-shadow: rgba(0, 0, 0, 0.2) -5px 5px 25px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px; margin-right: 20px; margin-top: 50px;}
#footer dl#whatisawebucator dt a,
#footer dl#whatisawebucator dd a {color: rgb(255,0,0);}
#footer dl#whatisawebucator dd a:hover {text-decoration: underline;}

#footer #webucatornetwork {float: right; clear: none; width: 240px;}
#footer #webucatornetwork li {list-style: disc; color: rgb(255, 255, 255);}
#footer #webucatornetwork li a {color: rgb(255, 255, 255);}
#footer #webucatornetwork li a:hover {text-decoration: underline;}
#footer #webucatornetwork p#webucatornetworklink {padding: 0 10px;}
#footer #webucatornetwork p#webucatornetworklink a {color: rgb(255,255,255); font-weight: bold; font-size: 16px;}
#footer #webucatornetwork p#webucatornetworklink a:hover {color: rgb(255,102,0);text-decoration: none;}

#question {float: left; clear: none; width: 280px; position: relative;}
#question h2 {margin-bottom: 10px;}
#question h2 a {margin: 0; color: rgb(255,255,255);  line-height: auto;}
#question h2 a strong {color: rgb(255,102,0);}
#question p {font-size: 14px; padding: 5px; line-height: 16px; margin: 0;}
#question p strong {color: rgb(255,255,255);}
#question input#captcha { display: block; float: left; clear: none; width: 110px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border: 1px #fff solid; padding: 6px 5px 7px; margin-right: 5px }
#question textarea {font-size: 12px; width: 100%; height:165px; background: rgb(255,255,255); background: rgba(255,255,255, 1); border: 2px rgb(255,255,255) solid; rgb(0,0,0); margin-bottom: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;padding: 5px 2px; line-height: 30px;}
#question textarea:focus {font-size: 12px; line-height: 30px; background: #fff url(http://dabrook.org/images/ui/lines.gif); border-color: rgb(0,0,0);}
#thewall p.backtotop {position: relative; margin: 0 auto;}
#thewall p.backtotop em {position: absolute; left:0; top: 20px; z-index: 400; font-style: normal;}
#question input#submit {width: auto; padding: 10px; display: block; clear: both; border: none; margin-top: 10px}

#simplemodal-container #question {padding: 20px; background-color: #3a5a31; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 5px #000 solid}
#simplemodal-container a.modalCloseImg {
	background:url(http://dabrook.org/images/ui/x.png) no-repeat; /* adjust url as required */
	width:25px;
	height:29px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:10px;
	right:-20px;
	cursor:pointer;
}


#thewall {background: url(http://dabrook.org/images/ui/bricks.png) repeat-x; height: 299px; position: relative;}
#thewall p#graffiti {background: url(http://dabrook.org/images/ui/graffiti.png) no-repeat; height: 284px; margin-top:0; margin-bottom: 0;}
#thewall p#decifer {position: absolute; bottom: 0; margin-bottom: 5px;}