/* WebandCircus website stylesheet
   V1.0 Paul Bellamy, BellamyStudio, originally 2006
   Revised Apr.2008 */

/* core html elements */
body {
	background:#891111 url('/images/template/bg_fade.png') top left repeat-x;
	font:0.75em/1.5em "Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, Arial, sans-serif;
	color:#333
	}
img {
	border:0
	}

h1,h2,h3,h4{
	font-family:Tahoma, Arial, sans-serif;
	margin:.5em 0 0 0;
	padding:0;
	color:#444
	}
h1, h2 {
	font-size:1.2em;
	font-weight:normal;
	letter-spacing:-.1px;
	color:#f00;
	text-transform:uppercase
}
h3, h4 {
	font-size:1.2em;
	margin-bottom:.5em
}
p {
	margin:.25em 0 .5em 0
	}
a {
	color:#f00;
	text-decoration:none
}
a:hover {
	color:#c00
}
a:visited {
	color:#900
}
/* get rid of those dotted lines... */
a, a:active {
  outline: none;
}
hr {
	border:none;
	background-color:#dedede;
	height:1px;
	margin:20px 0;
}

/* set up floats */

#container, #boxtop, #boxbottom, #header, #logo, #leftColumn,
#rightColumn, #viewerColumn, #linksColumn, #introSlides,
#introText, #content, #portfolio, #speech {
	float:left
}
/* main template layout */
#wrapper {
	margin: 25px auto;
	padding:0;
	width:780px;
	text-align:left;
	}
#container {
	position:relative;
	width:780px;
	background:url('/images/template/template_bg.png') top left repeat-y;
	}
#boxtop {
	width:780px;
	height:31px;
	display:block;
	background:url('/images/template/template_top.png') top left no-repeat
}
#boxbottom {
	width:780px;
	height:38px;
	display:block;
	background:url('/images/template/template_bottom.png') top left no-repeat;	
}

#header {
	clear:both;
	width:740px;
	padding:0 20px;
	height:120px;
	margin-bottom:60px
}
#header #logo {
	margin:14px 0 0 5px;
	padding:0
}
#header #quote {
	display:block;
	float:right;
	width:450px;
	height:119px;
	background:url('/images/template/wordbubble_1d.jpg') top left no-repeat;
	padding:0;
	margin:0 5px 0 0 
}

#header #quote #speech {
	padding:10px 20px 20px 20px
}

/* navigation */

#Nav {position: absolute; display:block; top: 130px; left: 16px; width: 750px; height: 50px; padding: 0; margin: 0; z-index:1}
#Nav li {list-style: none; margin: 0; padding: 0; display: inline;}
#Nav li a:link, #Nav li a:visited {display: block; position: absolute; top: 0; height: 50px; cursor:pointer; z-index:2}
#Nav .li1 a {left: 0; width: 122px;}
#Nav .li2 a {left: 122px; width: 121px}
#Nav .li3 a {left: 243px; width: 117px}
#Nav .li4 a {left: 360px; width: 138px}
#Nav .li5 a {left: 498px; width: 114px}
#Nav .li6 a {left: 612px; width: 138px}

#Nav li a:link, #Nav li a:visited {display: block; position: absolute; background-image: url('/images/template/navbar.jpg'); background-repeat: no-repeat; top: 0px; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; height: 0; padding: 50px 0 0 0;}

#Nav .li1 a {background-position: 0 0; width: 122px}
#Nav .li2 a {background-position: -122px 0; width: 121px}
#Nav .li3 a {background-position: -243px 0; width: 117px}
#Nav .li4 a {background-position: -360px 0; width: 138px}
#Nav .li5 a {background-position: -498px 0; width: 114px}
#Nav .li6 a {background-position: -612px 0; width: 138px}

#Nav .li1 a:hover, .Home #Nav .li1 a {background-position: 0 -50px;}
#Nav .li2 a:hover, .About #Nav .li2 a {background-position: -122px -50px;}
#Nav .li3 a:hover, .News #Nav .li3 a {background-position: -243px -50px;}
#Nav .li4 a:hover, .Projects #Nav .li4 a {background-position: -360px -50px;}
#Nav .li5 a:hover, .Team #Nav .li5 a {background-position: -498px -50px;}
#Nav .li6 a:hover, .Contact #Nav .li6 a {background-position: -612px -50px;}

/* sorry, couple of ie6 fixes */
#Nav li a {cursor: pointer; background:inherit}

#content {
	padding:10px 20px 20px 25px;
	width:740px;
}

/* set up some padding */
#leftColumn, #rightColumn, #viewerColumn, #linksColumn {
	padding:10px
}
#leftColumn {
	width:420px;
	}
#rightColumn {
	width:255px;
	margin-left:16px
	}
#viewerColumn {
	width:460px;
}
#linksColumn {
	width:200px;
	margin-left:16px;
}
#footer {
	padding:0 0 0 30px;
	font-size:xx-small;
	color:#999
}
#footer a {
	color:#999;
	text-decoration:none;
	border-bottom:1px dotted #999
}
#introSlides {
	width:230px;
	height:200px;
	margin:10px 10px 0 0;
	overflow:hidden
}
#introText {
	margin-top:10px;
	width:175px
}

div.screenshot {
	width:460px;
	text-align:center;
	margin:0 auto 10px auto
}

/* bullet list styling */

#linksColumn ul, #linksColumn li {
	list-style:none;
	margin:0;
	padding:0
}
#linksColumn li a, #linksColumn li a:link, #linksColumn li a:visited {
	display:block;
	width:170px;
	padding:4px 0 4px 25px;
	background:  url('/images/template/link_icon.png') 0 5px no-repeat;
	border:1px solid white
	}

#linksColumn li a:hover {
	background: url('/images/template/link_hover.png') 0 5px no-repeat;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}

#linksColumn li a small {
	color:#999;
	text-decoration:none !important;
	border:none;
	background:none
}

/* News styling */
.date {
	margin:5px 0;
	color:#666;
	font-size:80%;
}
.image {
	padding:0;
	margin:10px 0 15px 0;
	background-color:#f3f3f3
}
.image img {
	margin:0
}
.image p {
	padding:5px;
	font-size:80%;
	color:#666;
	border-bottom:1px solid #ccc
}

/* Work links styling */

dl.example {
	margin: 0 0 10px 0;
	padding: 0 20px 0 0;
	clear:left
	}
dl.example dt {
	margin: 0;
	padding: 0;
	}
dl.example dt a {
	float: left;
	display: block;
	margin: 2px 10px 10px 0;
	padding: 4px;
	background: white;
	border:1px solid #ccc
	}
dl.example dt a img {
	float: left;
	}
dl.example dt a:hover {
	background: #cccccc;
	border:1px solid #bbb
	}
dl.example dd {
	margin: 0 0 2px 0 !important;
	padding: 2px 0 0 0;
	line-height:1.2em;
	font-size:90%
	}
dl.example dd a {
	font-size:120%
}

/* General form fieldset layout (two column)
----------------------------------------------------*/
fieldset {
	margin:0;
	padding:0;
	border:0
	}
form {padding:0;margin:0}
form legend {font-size:120%;font-weight:bold;text-decoration:underline;color:#333;padding:0;margin:0 0 .5em 0}
form p {padding:0 0 .5em 1em;clear:both}
form p small, form p label small {color:#666; line-height:1.1em;display:block}
form label {float:left; width:100px; margin:0 10px 0 0; font-size:1em}
form input, form textarea {border:1px solid #cdcdcd; width:250px; font-family: Arial, Helvetica, sans-serif; font-size:small; font-weight:bold; color:#655}
form input:focus, form textarea:focus {border:1px solid #891111;}
form input.button {width:88px; border:none}
.mandatory {color:red}

/* team pics bit */

div.staff {
	clear:both;
	margin:0 0 10px 0;
	padding:10px 0 10px 125px;
	background:url('/images/team/team_photo.png') 0 10px no-repeat
}

/* Misc Content Styling */

#portfolio {
	margin:10px 0
}
#viewerColumn h1 {
	margin:0 0 10px 0
}
.topmargin {
	margin-top:1em
}
.rounded-grey {
	border:1px solid #dedede;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.midheight {
	height:22em;
}

a.chat {
	padding:2px 0 2px 22px;
	background:url('/images/template/chat.png') left no-repeat;
}
.strike {
	text-decoration:line-through
}
.clearer {
	clear:both;
	height:0
}