/*---- Start reset ----*/
	html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, em, img, strong, dl, dt, dd, ol, ul, li, form, label {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
	ul {list-style: none;}
	input, textarea {font-family: inherit;}
	ins {text-decoration: none;}
/*---- Einde reset ----*/

html {
	height: 100%;
}
body {
	height: 100%;
	font-family: arial, helvetica, "Trebuchet ms", tahoma, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	color: #3c6789;
	background: #694602;
	word-wrap: break-word;
}
a {
	color: #694602;
	text-decoration: none;
}
a:hover,
a:focus {
	border-bottom: 1px solid;/* use border bottom because some mobile browsers don't have an underlined font)*/
}
img a {
	border: none;
}
p a {
	border-bottom: 1px solid;/* use border bottom because some mobile browsers don't have an underlined font)*/
}
p a:hover,
p a:focus {
	border-bottom: none;/* use border bottom because some mobile browsers don't have an underlined font)*/
}
.fail a {
	font-weight: bold;
	border-bottom: 1px solid;/* use border bottom because some mobile browsers don't have an underlined font)*/
}
.fail a:hover,
.fail a:focus {
	border-bottom: none;/* use border bottom because some mobile browsers don't have an underlined font)*/
}
em {
	font-style: italic;
}
h1,
h2,
h3 {
	color: #204869;
	font-size: 16px;
	font-weight: bold;
}
#screen_user_info h1 {
	margin: 0 0 2px 60px;
}
h2 {
	margin-top: 18px;
	font-size: 14px;
}
h3 {
	margin-top: 12px;
	font-size: 12px;
}

p {
	margin: 6px 0;
}
h3+p {
	margin-top: 0;
}
strong {
	font-weight: bold;
}
.weak,
.weak a {
	font-weight: normal;
	color: #7096b1;
	font-size: 11px;
}
h2 .weak {
	margin-left: 4px;
}
dl {
	clear: both;
}
dt {
	clear: left;
	float: left;
	width: 4.5em;
	font-weight: bold;
	text-align: right;
}
dd {
	/*float: left;*/
	margin-left: 5em;
}
ol {
}
ol li {
	margin-left: 30px;
}
ol#tweets,
ol#users,
ol#following {
	list-style: none;
}
#tweets li,
#users li,
#following li {
	margin-left: 0;
}
#wrapper {
	min-height: 100%;
	max-width: 480px;
	/* uncomment for emulating mobile */
	/*max-width: 234px;*/
}

#header {
	padding: 10px;
	/*background: transparent url(images/bg-header.gif) bottom left repeat-x;*/
	background: #c2d1fd url(images/bg-header.gif) bottom left repeat-x;
	background: #fff;
}
#screen_twitter_login #header {
	text-align: center;
}

#main {
	margin: 0;
	padding: 10px 4px 10px;
	/*background: #ccd8fd url(images/bg-body.gif) repeat-x;*/
	background: #ccd8fd url(images/bg-main.jpg) repeat-x;
}

#footer {
	/*
	position: absolute;
	bottom: 0;
	*/
	border-top: 4px solid #8f6b00;
	padding: 4px 4px 8px;
	background: #694602;
	color: #876e35;/* for non-links */
}
#footer h3 {
	margin-top: 0;
	border-bottom: 1px solid #876e35;
	padding-bottom: 2px;
	color: #a59567;
}
#footer .nav {
}
#footer ul {
	margin: 2px 0 6px;
}
#footer a {
	color: #a59567;
}
#footer li {
	padding-left: 10px;
	background: transparent url(images/twimply-icons.gif) no-repeat 0 -435px;
	list-style-position: outside;
}
#footer li.backward {
	background: transparent url(images/twimply-icons.gif) no-repeat 0 -495px;
}
#footer .pager {
	margin-top: 4px;
	border-top: 1px solid #876e35;
	padding-top: 4px;
}
#footer .pager a {
	border-color: #a59567;
}

ul.services {
	margin: 5px -10px 10px;/* compensate header's horizontal padding to be able to let border run over entire width */
	padding: 0 10px 5px;/* restore header's undone horizontal padding here */
	border-bottom: 1px solid #ccc;
}
ul.services {
}
.services li {
	margin: 5px 0;
}
.services a.instapaper,
.services a.delicious {
	padding: 0 0 0 12px;
	background: url(images/twimply-icons.gif) no-repeat 0 -76px;
	color: #204869;
}
.services a.instapaper {
	background-position: 0 -96px;
}
/*-- Start forms --*/
	.signin {
		margin: 8px 0 6px;
	}
	.signin a {
		border: none;/* otherwise a with button gets border-bottom */
	}
	
	#main form,
	.signinbox {
		margin: 10px 0;
		border: 2px solid #a2b8c9;
		/*width: 196px;*/
		padding: 10px;
		background: #eaf3f8;
	}
	.signinbox h1+.footnote {
		margin-top: 0;
	}
	
	.formblock {
		clear: both;
		margin-bottom: 5px;
	}
	
	label {
		float: left;
		width: 65px;
		font-weight: bold;
		cursor: pointer;
	}
	input+label {
		/* label coming after input field */
		float: none;
		font-weight: normal;
		width: auto;
	}
	label+input+p.footnote {
		margin: 0 0 0 70px;
	}
	
	input {
		vertical-align: middle;
		font-family: inherit;
	}
	
	input[type="text"],
	input[type="password"],
	textarea {
		border: 2px solid #c4d4df;
		background: #fff;
		width: 125px;
		font-size: 12px;
		color: inherit;
	}
	input[type="checkbox"] {
		margin: 0 4px 0 65px;
	}
	.textareawrapper {
		margin-right: 4px;/* compensate for 2x 2px border of textarea */
	}
	#updateform textarea {
		display: block;
		margin-bottom: 4px;
		width: 100%;
		height: 60px;
	}
	
	input[type="submit"] {
		border: 2px solid #a2b8c9;
		background: #c6d5e0 url(images/twimply-backgrounds.gif) repeat-x;
		cursor: pointer;
	}
	input[type="submit"]:hover,
	input[type="submit"]:focus {
		border-color: #7095b1;
	}
	input+input[type="submit"] {
		/* matches input type=submit that comes directly after another input element */
		margin-left: 4px;
	}
	.formblock input[type="submit"] {
		/* sign in forms */
		margin-left: 65px;
	}
	
	/* adjust secondary textarea for small screens */
	@media (max-height: 360px) {
		.secondary .textareawrapper {
			margin-right: 70px;
		}
		#updateform.secondary textarea {
			/* only one line high */
			height: 18px;
		}
		#updateform.secondary input[type="submit"] {
			/* position to the right of textarea */
			float: right;
			margin-top: -26px;
		}
	}
	
	#updateform label {
		display: block;
		float: none;
		/*margin: 0 0 2px -4px;*/
		margin: 0 0 2px;
		width: auto;
		color: #ccc;
		/*font-weight: normal;*/
	}
	p.secondary {
		display: inline;
		margin-left: 6px;
		color: #7095b1;
	}
	p.secondary a {
		color: #7095b1;
	}
	
	.signin {
		text-align: center;
	}
	.signin a:hover {
		border: none;
	}
	/*#search*/
/*-- End forms --*/

/*-- Start counter --*/
	#counter {
		float: right;
		margin-top: -4px;
		font-size: 16px;
		font-weight: bold;
		color: #ccc;
	}
	#rtsafe {
		margin: 0 2px;
		font-size: 11px;
		color: #ccc;
		font-weight: normal;
	}
	#status {
		background: #fff;
	}
/*-- End counter --*/

/*-- Start tweets --*/
	/*
	#screen_tweets h2 {
		margin-top: -10px;
		color: #fff;
	}
	*/
	#main h2:first-child {
		margin-top: 4px;
		color: #fff;
	}
	#menu {
		margin: 4px -4px;
		border-bottom: 1px solid #acccde;
		padding: 0 4px 4px;
	}
	#menu,
	#menu a {
		font-weight: normal;
		color: #7096b1;
	}
	#menu .active a {
		color: #98bacf;
	}
	#menu li {
		display: inline;
		border-left: 1px solid #98bacf;
		padding: 0 4px;
		font-size: 11px;
	}
	#menu li:first-child {
		border-left: none;
		padding-left: 0;
	}
	#tweets,
	#users {
		margin: 4px -4px;
	}
	.tweet,
	.user {
		margin: 4px 0;
		border-bottom: 2px dashed #fff;
		padding: 6px 4px 10px 2px;
		overflow: hidden;
	}
	.imgbox {
		position: relative;/* so we can position speech bubble */
		float: left;
		margin-right: 2px;
		width: 28px;
	}
	.imgbox a:hover {
		border: none;
	}
	.imgbox a img {
		margin-top: 0;
		border: 2px solid #ccd8fd;
	}
	.imgbox a:hover img {
		border-color: #fff;
	}
	.avatar {
		/*float: left;*/
		width: 24px;
		height: 24px;
	}
	#screen_user_info .imgbox {
		/* in user info page */
		margin: -18px 6px 5px;
		width: 48px;
		height: 48px;
	}
	#screen_user_info .imgbox .avatar {
		/* in user info page */
		width: 48px;
		height: 48px;
		vertical-align: top;
	}
	/* Start imgbox for retweets and replies */
		.retweet .imgbox {
			position: relative;/* so we can position imgs absolutely */
			height: 40px;
			background: transparent url(images/twimply-icons.gif) no-repeat 2px -199px;
		}
		.retweet .avatar {
			width: 16px;
			height: 16px;
		}
		.imgbox .retweeter {
			position: absolute;
			top: 15px;
			left: 8px;
		}
		
	/* Start imgbox for retweets and replies */
	a.tweetauthor {
		color: #204869;
		font-weight: bold;
	}
	
	.textbox {
		/*margin-left: 30px;*/
		overflow: hidden;
	}
	
	/* retweets */
	.textbox .retweeter {
		display: block;
		margin: 3px 0 1px;
	}
	
	.thumbs {
		display: block;
		text-align: center;
	}
	.thumbs a {
		margin: 0 2px;
	}
	.thumbs a:hover {
		border: none;
	}
	.thumbs img {
		margin: 4px auto;
		border: 2px solid #fff;
	}
	.thumbs a:hover img {
		border-color: #9cc9e1;
	}
	/* quickscan */
		.quickscan .tweet {
			border-width: 1px;
			padding: 2px 4px 2px 2px;
		}
		.quickscan .imgbox {
			width: 20px;
			height: auto;
			background: none;/* overrulet .retweet .imgbox */
		}
		.quickscan .avatar {
			width: 16px;
			height: 16px;
		}
	/* Start metadata & icons */
		.meta {
			/*clear: both;*/
			margin: 2px 0 0 1px;
			color: #7096b1;
			font-size: 11px;
			text-align: left;
		}
		.time {
			float: left;
		}
		.meta ul {
			display: inline;
		}
		.meta li {
			display: inline;
			border-left: 1px solid #7096b1;
			padding-left: 4px;
		}
		.meta li:first-child {
			border: none;
			padding: 0;
		}
		.meta .actions li {
			border: none;
			padding: 0;
		}
		.meta a {
			color: #7096b1;
		}
		a.icon {
			display: block;
			float: left;
			margin: 0 0 0 5px;
			border: 2px solid #fff;
			width: 8px;
			height: 8px;
			background: transparent url(images/twimply-icons.gif) no-repeat;
			vertical-align: middle;
		}
		a.icon:hover,
		a.icon:focus {
			border: 2px solid #9cc9e1;
		}
		a.fav {
			background-position: 0 0;
		}
		a.reply {
			background-position: 0 -20px;
		}
		a.retweet {
			background-position: 0 -40px;
		}
		a.message {
			background-position: 0 -60px;
		}
		a.delicious {
			background-position: 0 -80px;
		}
		a.instapaper {
			background-position: 0 -100px;
		}
		#screen_user_info .following_info {
			overflow: hidden;
		}
		/* icons for follow/unfollow */
			.followAction {
				padding-left: 20px;
				background: transparent url(images/twimply-icons.gif) no-repeat 2px -160px;
			}
			#screen_tweets .followAction {
				margin-left: 20px;
			}
			.unfollow {
				background-position: 2px -180px;
			}
		/* following/following back info */
			.following {
				margin-right: 5px;
				padding: 0 0 0 15px;
				background: transparent url(images/twimply-icons.gif) no-repeat 0px -160px;
			}
			.following a:hover,
			.following a:focus {
				border: none;
			}
			.following .avatar {
				width: 12px;
				height: 12px;
				/*vertical-align: bottom;*/
			}
			.love {
				/*background-position: 0px -420px;*/
			}
			.youFollowTheyFollow {
				/*background: green;*/
				background-position: 0 -298px;
			}
			.youFollowTheyDontFollow {
				/*background: red;*/
				background-position: 0 -318px;
			}
			.youDontFollowTheyFollow {
				background-position: 0 -338px;
			}
			.youDontFollowTheyDontFollow {
				background-position: 0 -358px;
			}
		/* for bigger screens */
		@media (min-width: 320px) {
			.actions li {
				/*margin-left: 2px;*/
			}
			.time {
				margin-top: 3px;
			}
			a.icon {
				margin-left: 2px;
				border: 2px solid #ccd8fd;
				width: 16px;
				height: 16px;
				background: transparent url(images/twimply-icons-big.gif) no-repeat;
			}
			a.reply {
				background-position: 0 -40px;
			}
			a.retweet {
				background-position: 0 -80px;
			}
			a.message {
				background-position: 0 -120px;
			}
			a.delicious {
				background-position: 0 -160px;
			}
			a.instapaper {
				background-position: 0 -200px;
			}
			
			.quickscan .textbox {
				/* an bigger screens quick scan is on 1 line, so center it vertically */
				margin-top: 3px;
			}
		}
	/* End metadata & icons */
	
	.pager {
		font-weight: bold;
		text-align: right;
	}
	.pager a {
		border-right: 1px solid #255278;
		padding: 0 4px;
	}
	.pager a:last-child {
		border-right: none;
	}
/*-- End tweets --*/

/*-- Start users --*/
	li.user {
		clear: both;
		margin: 4px;
	}
	.sleeping {
		overflow: visible;
	}
	.sleeping .textbox,
	.sleeping .textbox a {
		color: #849fc3;
	}
	.z,
	.protected {
		display: block;
		position: absolute;
		width: 17px;
		height: 18px;
		top: -14px;
		left: 14px;
		background: url(images/twimply-icons.gif) no-repeat 0 -380px;
	}
	.protected {
		width: 13px;
		height: 15px;
		top: 14px;
		left: 14px;
		background-position: 0 -400px;
	}
/*-- End users --*/

/*-- Start lists --*/
	#lists {
		margin: 10px -4px;
		/*border-top: 1px solid #ACCCDE;*/
		padding: 4px;
		font-weight: bold;
	}
/*-- End lists --*/

/*-- Start feedback (success, fail and info) --*/
	/* feedback elements always have class feedback, and one of the three success, fail, info */
	.feedback {
		margin: 10px 0 5px;
		/*padding: 8px;*/
		padding: 0 8px;
		border: 2px solid #95c68a;
		background: #c8e4c2;
		color: #39732d;
	}
	form .feedback {
		margin-top: 0;
	}
	.tweet .feedback {
		margin-top: 0;
	}
	.feedback a {
		border-bottom: 1px solid;
	}
	.feedback a:hover, .feedback a:focus {
		border-bottom: none;
	}
	.fail {
		border-color: #e07f7f;
		background: #ffe9e5;
		color: #740000;
	}
	.info {
		background-color: #ffc;
		border-color: #e4c26a;
		color: #694602;
	}
	.feedback h1,
	.feedback h2 {
		margin-top: 8px;
	}
	.fail h1,
	.fail h2,
	.fail a {
		color: #740000;
	}
	.fail a {
		border-color: #740000;
	}
	.info h1,
	.info h2,
	.info a {
		color: #694602;
	}
	.info a {
		border-color: #694602;
	}
	.success h1,
	.success h2,
	.success a {
		color: #39732d;
	}
	.success a {
		border-color: #39732d;
	}
	#main .feedback h2:first-child {
		color: inherit;
	}
/*-- End feedback (success, fail and info) --*/

.footnote,
.footnote a,
.payoff {
	font-weight: normal;
	font-size: 12px;
	color: #7095b1;
}
.payoff {
	margin: -2px auto -4px;
	color: #aaa;
}
#header span.footnote {
	margin-left: 4px;
	color: #aaa;
}
#header br+span.footnote {
	margin-left: 0;
}
.success .footnote,
#header .success .footnote,
.success .footnote a {
	color: #80ab77;
}
.fail .footnote,
#header .fail .footnote,
.fail .footnote a {
	color: #ba7573;
}
.info .footnote,
#header .info .footnote,
.info .footnote a {
	color: #b4a267;
}
.signinbox .footnote,
.signinbox .footnote a {
	color: #94b1c6;
}

.primary {
	font-size: 14px;
	font-weight: bold;
}

.remember {
	margin-left: 15%;
	text-align: center;
}
.remember a {
	display: block;
	float: left;
	margin: 4px 4px 8px;
	border: 2px solid #a2b8c9;
	border-right-color: #618099;
	border-bottom-color: #618099;
	/*-moz-border-radius: 5px;*/
	padding: 5px;
	width: 30%;
	color: #204869;
	font-weight: bold;
	background: #e8edf1 url(images/twimply-backgrounds.gif) repeat-x 0 -40px;
}
.remember a:hover,
.remember a:focus {
	border: 2px solid #6e8ba3;
	border-right-color: #305675;
	border-bottom-color: #305675;
}
/*-- features --*/
	.features li {
		clear: both;
		margin-left: 55px;
		/*color: #fff;*//* this way bullets will be white */
		color: #3C6789;/* this way bullets will be white */
		list-style-type: square;
		list-style-position: outside;
	}
	.features .hasicon {
		margin-left: 5px;
		list-style-type: none;
	}
	.features p,
	.features a {
		color: #3C6789;
	}
	.features img {
		float: left;
		margin: 2px 6px 0 0;
	}
	.features h3 {
		overflow: hidden;
		padding-bottom: 2px;/* needed to show underline */
	}
	.features+h3 {
		margin-left: 56px;
	}
	.features p {
		overflow: hidden;
	}
.floatfixer {
	clear: both;
}
/*-- debugging --*/
.log {
	background: #ffc;
	color: #694602;
}