/*

common.css

Author: Andrew Smith

*/

body {
	margin:0 auto;
	font-size:62.5%;font-family:verdana,arial,sans-serif;color: #333;
	text-align:center;
	background:#333 url(../img/main/bg-body.gif) repeat top center }

/* reset browser defaults */
h1, h2, h3, h4, h5, h6 {
	margin:20px 20px 10px;padding:0;
	font-weight:bold;font-family:arial,sans-serif }

h2 {
	margin:10px 20px;
	font-size:2.2em;
	text-shadow:#333 1px 1px 1px }

h3 {
	margin:20px 20px 5px;
	font-size:2em }

h4 {
	font-size:1.5em }

a { color:#cd4815;text-decoration:none }
a:hover {	color:#333 }
a img { border:0 }
	
ul {margin:0;padding:0;list-style:none}
ul.bullets { list-style-type:disc}

p { margin:0 20px 10px;line-height:1.8em;font-size:1.2em }
li,
.secondary dl dd,
.secondary dl dt { line-height:1.8em;font-size:1.2em }
li p,
li li { font-size:1em }

p.footnote {
	font-size:0.9em
}

.hidden { display:none }

input,
textarea {
	font-family:verdana,arial,sans-serif;
	font-size:1.2em;
	border:solid 1px #bbb
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */


/* NETWORK STYLING =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

ul#network-panel {
	overflow:hidden;margin:0 auto;
	width:956px;
	color:#888;
	background:#333;border-bottom:solid 1px #000 }

ul#network-panel li {
	float:right;padding:0.5em 20px;
	font-size:1em }

ul#network-panel li.network-name {
	float:left;width:234px;
	border-right:solid 1px #000 }

ul#network-panel li a {
	color:#a1a1a1 }
	
	
#wrapper {
	margin:0 auto;padding:0;
	width:964px;
	text-align:left;
	background: url(../img/main/bg-shadow.gif) repeat-y top center }

#page {
	margin:0 4px;
	background: url(../img/main/bg-stripes.gif) repeat-x top center }
	

#header {
	padding:10px 0 }

#content,
#comments,
#footer {
	overflow:hidden;
	width:auto;
	background:url(../img/main/bg-content.gif) repeat-y top right }

.main {
	float:left;
	padding-top:20px;width:684px;
}

.secondary {
	float:left;
	width:272px;
	background:#e6e6e6 }
	

h1 {
	margin:10px 10px 10px 20px;
	width:451px;height:63px;
	background:url(../img/main/h1-logo.gif) no-repeat }

h1 a {
	display:block;
	width:451px;height:63px;
	text-indent:-9999em;
	outline:none
}

#header .header {
	float:left;
	width:674px }
	
#header .header p {
	font-size:1.5em;
	line-height:1em;
}

#header .search {
	float:left;margin-left:20px;
	width:257px;height:50px;
	background:#d4521f url(../img/header/bg-search.gif) no-repeat top right
}

#header .search label {
	display:inline-block;
	margin:10px 0 10px 10px;
	font-size:1.1em;color:#fff }

#header .search input {
	margin:8px 5px;padding:5px;
	width:164px;
	border:solid 1px #bbb
}

#header .search .submit {
	display:none
}

#header .top100 {
	float:left;margin:5px 0 5px 20px;
	background:#1c1c1c url(../img/header/btn-short.gif) no-repeat top left
}

#header .top100 a {
	display:block;
	width:126px;height:50px;
	font-size:1.1em;color:#fff;
	text-indent:10px;line-height:4.2em
}

#header .random {
	float:left;margin:5px;
	background:#1c1c1c url(../img/header/btn-short.gif) no-repeat top left
}

#header .random a {
	display:block;
	width:126px;height:50px;
	font-size:1.1em;color:#fff;
	text-indent:10px;line-height:4.2em
}

#header .top100 a:hover,
#header .random a:hover {
	color:#d4521f;
}

#header .advertisement {
	float:left;
	width:180px;height:150px;
	background:#eee;
}

/* NAVIGATION -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

ul#navigation {
	clear:both;margin:0;
	width:auto;height:40px;
	border-bottom:solid 1px #ac3b10; }

ul#navigation li {
	float:left;overflow:hidden;
	padding:0;width:134px;height:40px;
	background:#d4521f url(../img/header/bg-nav.gif) repeat-x;
	border-left:solid 1px #f76128;
	border-right:solid 1px #ac3b10;
	font:bold 1.4em arial }
	
ul#navigation li.selected {
	background-position:0 -40px }

ul#navigation li a {
	display:block;overflow:hidden;
	padding:14px 0 13px;width:134px;
	color:#fff }

ul#navigation li a:hover {
	color:#333 }

ul#navigation li a span {
	display:block;
	margin:0 0 0 20px;height:14px;
	text-indent:-9999em;overflow:hidden;
	background:url(../img/header/a-nav-text.gif) no-repeat }

/* first item has no left border */
ul#navigation li.home { width:140px;border-left:0 }
ul#navigation li.home a { width:140px }
ul#navigation li.about {	border-right:0 }


ul#navigation li.home a span {
	width:36px;
	background-position:0 top }

ul#navigation li.home a:hover span {
	background-position:0 bottom }

ul#navigation li.applications a span {
	width:32px;
	background-position:-37px top }

ul#navigation li.applications a:hover span {
	background-position:-37px bottom }

ul#navigation li.games a span {
	width:44px;
	background-position:-71px top }

ul#navigation li.games a:hover span {
	background-position:-71px bottom }

ul#navigation li.tools a span {
	width:33px;
	background-position:-116px top }

ul#navigation li.tools a:hover span {
	background-position:-116px bottom }

ul#navigation li.tutorials a span {
	width:55px;
	background-position:-150px top }

ul#navigation li.tutorials a:hover span {
	background-position:-150px bottom }

ul#navigation li.submit a span {
	width:47px;
	background-position:-207px top }

ul#navigation li.submit a:hover span {
	background-position:-207px bottom }

ul#navigation li.forum a span {
	width:39px;
	background-position:-254px top }

ul#navigation li.forum a:hover span {
	background-position:-254px bottom }
ul#navigation li.about a span {
	width:38px;
	background-position:-295px top }

ul#navigation li.about a:hover span {
	background-position:-295px bottom }
	
/* BREADCRUMBS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

ul.breadcrumbs {
	overflow:auto;
	margin-left:20px;
	width:400px;
	height:25px;
}

ul.breadcrumbs li {
	float:left;
	margin-right:10px;
	padding-left:16px;
	font-size:1.1em;
	background:url(../img/main/li-breadcrumbs.gif) no-repeat 0 55%;
}

ul.breadcrumbs li.home {
	padding-left:0;
	background:none;
}
	
/* SECONDARY BAR =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.secondary h3 {
	margin:40px 20px 0;
}

.secondary h4 {
	padding-top:10px;
	border-top:solid 1px #bbb }

.secondary h4.first {
	margin-top:92px;
}

.secondary h4.continued {
	padding-top:0;
	border-top:none }
	
.secondary ul {
	margin:0 20px }

.secondary ul.bullets li {
	margin:0 20px }
	
.secondary ul.news li span {
	font-size:0.9em }

/* ADVERTISEMENTS -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.secondary .advertisements {
	overflow:hidden;
	margin:0 7px;
	padding-top:20px;
}

.secondary .advertisements ul {
	overflow:hidden;
	margin:0;
	width:270px;
}

.secondary .advertisements ul li {
	margin:0;padding:0;
	float:left;
}

.secondary .advertisements ul li.ad_125 {
	margin:0 2px 4px;
	width:125px;height:125px;
	text-align:center;
	background:#ccc
}

.secondary .advertisements a.odd {
	clear:left;
}
.ad_230 {
	width:230px;height:160px;
	text-align:center;
	border:solid 1px #ccc
}

/* FOOTER -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

#footer {
	padding-bottom:10px
}

#footer .main h2 {
	display:none
}

#footer .main h3 {
	margin:0px 0 10px;
	font-size:1.3em;
}

#footer .secondary p {
	margin:5px 20px 0;
	text-align:left
}

#footer .secondary div {
	margin:30px 0 10px;
}
	
/* HIGHEST RATED --------------------------------------------------------------- */	

ul.highest-rated {
	overflow:hidden;
	margin:10px 20px;padding:10px 0;
	width:644px;
	border-top:solid 1px #bbb
}

ul.highest-rated li {
	float:left;
	margin:0;
	width:25%;
}

ul.highest-rated li li {
	float:none;
	margin:5px 0 0;padding-left:10px;width:auto;
	font-size:1em;
	background:transparent url(../img/main/li-bullet.gif) no-repeat scroll 1px -10px
}

/* CAROUSEL -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */	

#carousel {
	overflow:hidden;
	margin:0 0 10px 20px;width:664px;
	background:url(../img/main/bg-carousel.jpg) no-repeat }

#carousel #hero {
	float:left;
	margin:0;
	background:#000 }

#carousel #hero div,
#carousel #hero div div a {
	overflow:hidden;display:block;
	width:368px;height:230px;
	background:url(../img/carousel/bg-hero-corners-caption.png) no-repeat top left }

#carousel .caption {
	padding:80px 5px 0; }

#carousel #hero h2,
#carousel #hero h3 {
	margin:150px 5px 0px;padding:5px 5px 0;
	color:#fff }

#carousel #hero p {
	margin:0 10px;
	padding-top:0px;
	color:#fff;
	font-size:1.3em;line-height:1.0em }

#carousel li a {
	font-size:1em;color:#fff }

#carousel ul {
	float:left;
	margin:0;width:128px }
	
#carousel ul.first {
	margin-right:10px;
}

#carousel ul.last {
	margin-left:10px;
}

#carousel li {
	float:left;cursor:pointer;
	margin:0 0 10px 0;width:128px;height:110px;
	background:#000 }

#carousel li a {
	overflow:hidden;display:block;
	width:128px;height:110px;
	background:url(../img/carousel/bg-small-corners-caption.png) no-repeat top left }

#carousel li.highlight a {
	background:url(../img/carousel/bg-small-selection-caption.png) no-repeat top left }

#carousel li img,
#carousel li span.description {
	display:none }

/* PAGING -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

ul.paging {
	overflow:hidden;
	float:right;
	margin:0 20px;padding:5px 0;
	width:auto;
}

ul.paging li {
	float:left;
	margin:5px 2px 0;
	width:24px;height:24px;
	font-size:1.2em;
	text-align:center;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border:solid 1px #D0D0D0;
}

ul.paging li a {
	display:block;
	width:24px;height:24px;
}

ul.paging li a:hover {
	background:#d4521f;
}

/* POST -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

div.post pre {
	margin:10px 30px;padding:10px;
	font-size:1.1em;line-height:2em;
	border:solid 1px #e6e6e6 }

div.post ul {
	margin:10px 20px;
	list-style-type:disc}

div.post ul li {
	margin-left:20px }

div.post blockquote {
	margin:10px 20px;
	background:url(../img/post/bg-blockquote-open.gif) no-repeat left top }

div.post blockquote p {
	margin:0;padding:5px 30px;
	background:url(../img/post/bg-blockquote-close.gif) no-repeat right bottom }

/* IMAGE CAPTIONS -------------------------------------------------------------- */
.wp-caption {
	margin:20px auto;
	width:410px;
	text-align:center;
	/*background:url(../img/post/bg-caption.gif) no-repeat bottom left*/ }

.wp-caption img {
	margin:0 auto }

.wp-caption p {
	padding:0 0 5px;
	font-size:1.1em }

/* POST META DATA -------------------------------------------------------------- */
div.post ul.meta,
dl.archive ul.meta {
	overflow:hidden;
	margin:5px 20px 10px;padding:5px 0;
	width:auto;
	list-style-type:none;
}

div.post ul.meta {
	border-top:dotted 1px #d0d0d0;border-bottom:dotted 1px #d0d0d0;
}

div.post ul.meta.last {
	margin-bottom:20px;
	border-bottom:solid 1px #d0d0d0
}

div.post ul.meta li,
dl.archive ul.meta li {
	float:left;
	margin:0;
	font-size:1.2em;
}

div.post ul.meta li.type {
	width:400px;
}

div.post ul.meta li.date {
	width:244px;
	text-align:right;
}
ul.meta li.rating {
	width:270px }

.rating span {
	height:14px;
	width:75px
}

.rating span {
	display:inline-block;
	line-height:1.2em;
	background:url(../img/post/bg-rating.gif) repeat-x bottom left
}

.rating span span {
	text-indent:-10000em;
	background-position:top left }

.rating span span.rating-00 { width:0px }
.rating span span.rating-05 { width:7px }
.rating span span.rating-10 { width:15px }
.rating span span.rating-15 { width:22px }
.rating span span.rating-20 { width:30px }
.rating span span.rating-25 { width:37px }
.rating span span.rating-30 { width:45px }
.rating span span.rating-35 { width:52px }
.rating span span.rating-40 { width:60px }
.rating span span.rating-45 { width:67px }
.rating span span.rating-50 { width:75px }
	
ul.meta li.comments {
	width:124px }

ul.meta li.read-more {
	width:250px;
	text-align:right;
}

ul.meta li.read-more a {
	padding-left:20px;
	background:url(../img/post/a-read-more.gif) no-repeat center left }

div.post ul.actions {
	overflow:hidden;
	width:auto
}

div.post ul.actions li {
	float:left;
	margin:0;
	font-size:1em;
	list-style-type:none;
}

div.post li.goto {
	width:300px
}

div.post li.share {
	width:344px;
}

div.post ul.share {
	overflow:hidden;
	margin:10px 0 0 0;
	width:344px;
}

div.post ul.share h4 {
	margin:10px 0
}

ul.share li,
div.post ul.share li {
	float:left;
	margin:0 0 5px 10px;
	list-style-type:none;
}

ul.share li.label {
	width:130px;
}

ul.share li a {
	display:block;
	width:32px;height:32px;
	text-indent:-10000em;
	background:url(../img/post/bg-share.png) no-repeat top left;
}

ul.share li.delicious a { background-position:0 0 }
ul.share li.digg a { background-position:-32px 0 }
ul.share li.facebook a { background-position:-64px 0 }
ul.share li.linkedin a { background-position:-96px 0 }
ul.share li.reddit a { background-position:-128px 0 }
ul.share li.stumbleupon a { background-position:-160px 0 }
ul.share li.technorati a { background-position:-192px 0 }
ul.share li.twitter a { background-position:-224px 0 }

div.post a.button {
	float:right;
	margin:5px 0
}

div.post a.button,
div.post a.button span,
div#comments div.button,
div#comments div.button input {
	display:inline-block;
	height:40px;	
	background:url(../img/post/btn-action.gif) no-repeat top left;
}

div.post a.button span,
div#comments div.button input {
	margin:0 0 0 5px;
	padding:0 10px 0 5px;
	cursor:pointer;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	line-height:3.4em;
	background-position:bottom right;
}

div#comments div.button input {
	width:auto;
	border:none;
}

div.post a.button:hover span,
div#comments div.button input:hover {
	color:#333
}

/* CHART */

ul.chart {
	margin:0 20px
}

ul.chart li.top005 {
	
}


ul.chart li ul {
	overflow:auto;
}

ul.chart li ul li {
	float:left;
	margin:0;
}

ul.chart li.rank {
	width:30px;
	text-align:right;
}

ul.chart li.top001 li.rank { font-size:2em }
ul.chart li.top005 li.rank { font-size:1.6em }
ul.chart li.top020 li.rank {  }
ul.chart li.top100 li.rank {  }

ul.chart li.image {
	margin-left:10px;
	width:128px;
}

ul.chart li.content {
	margin-left:10px;
	width:460px;
}

ul.chart li.content h3,
ul.chart li.content h4,
ul.chart li.content p {
	margin:0;
}

ul.chart li.top001 {
	margin-bottom:15px;
	padding:10px 0;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background:#d4521f;
	color:#fff
}

ul.chart li.top001 h3 a,
ul.chart li.top001 p {
	color:#fff
}

ul.chart li.top001 a {
	color:#e6e6e6
}

ul.chart li.top005,
ul.chart li.top020 {
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:solid 1px #e6e6e6;
}

ul.chart li.top100 {
	font-size:0.9em;
	margin-bottom:5px;
	padding-bottom:5px;
	border-bottom:solid 1px #e6e6e6;
}

ul.chart li.top100 li.title {
	margin-left:10px;
	width:300px;
}

ul.chart li.top100 li.category {
	margin-left:10px;
	width:270px;
	text-align:right;
}

ul.chart li.top100 li.rank {
	width:30px;
	text-align:right;
}

/* POST SUMMARY -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

.secondary dl {
	overflow:hidden;
	margin:0 20px;
	width:auto }

.secondary dl dt {
	clear:left;
	float:left;
	width:110px;
	font-weight:bold
}

.secondary dl dd {
	float:left;
	margin:0;
	width:122px
}

.secondary ul.actions {
	padding:5px;
	overflow:hidden;
	width:auto;
	background:#fff;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

div.overall-rating {
	margin:0 20px 10px;
	border:solid 1px #cd4815;
	background:#fff
}

div.overall-rating p {
	padding:0;
	color:#cd4815;
	font-size:6em;
	font-weight:bold;
	line-height:1.2em;
	text-align:center;
}

/* COMMENTS -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

#comments h3 {
	margin-top:0;padding-top:10px;
	border-top:solid 1px #bbb
}

#comments dl {
	margin:0 20px
}

#comments dl dt {
	clear:left;
	float:left;
	width:64px;
	border-top:dotted 1px #d0d0d0
}

#comments dl dt img {
	margin:20px 0 0 0 }

#comments dl dd {
	float:left;
	margin:0;
	width:580px;
	border-top:dotted 1px #d0d0d0
}

#comments form {
	clear:left;
}

#comments fieldset {
	margin:10px 0;
	border:none
}

#comments fieldset dl dt {
	width:130px;
}
#comments fieldset dl dd {
	width:500px;
}

#comments fieldset dl dt,
#comments fieldset dl dd {
	border:none
}

#comments form h3 {
	border-top:dotted 1px #d0d0d0
}

#comments label {
	font-size:1.2em;
	font-weight:bold;
	line-height:1.8em;
}

#comments input,
#comments textarea {
	margin-bottom:10px;
	padding:5px 2px;
	border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	-webkit-border-radius: 0 4px 4px 0;
}

#comments input {
	width:300px
}

#comments textarea {
	width:500px;
}

#comments input,
#comments textarea {
	border-left-width:3px;
}

#comments input:focus,
#comments textarea:focus {
	border-left-color:#cd4815;
}

/* SOCIAL NETWORKING =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

ul.social-networking {
	overflow:hidden;
	width:232px }

ul.social-networking li {
	float:left;
	margin-right:5px;
	width:74px;height:64px }
	
ul.social-networking li a {
	display:block;
	width:74px;height:64px;
	text-indent:-10000em
}

ul.social-networking li.last {
	margin-right:0 }

ul.social-networking li.rss { background:url(../img/icons/social-networking/bg-rss.png) no-repeat center center }
ul.social-networking li.twitter { background:url(../img/icons/social-networking/bg-twitter.png) no-repeat center center }
ul.social-networking li.facebook { background:url(../img/icons/social-networking/bg-facebook.png) no-repeat center center }

/* BROWSER CHECK =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

ul.check {
	overflow:hidden;
	margin:0 20px 10px;width:232px }

ul.check li {
	float:left;
	width:116px;height:47px;
	font-weight:bold;
	background:url(../img/icons/bg-tick-cross.gif) no-repeat bottom left }

ul.check li.tick {
	background-position:top left }

ul.check li span {
	display:block;
	margin-left:55px;
	width:61px;
	line-height:1.3em	
}

ul.check li.check-canvas {
	margin-right:10px;
	width:106px
}

ul.check li.check-canvas span {
	margin-top:10px
}

ul.check li.check-canvas-text span {
	margin-top:4px
}

ul.yes-script.check {
	visibility:hidden;
}

div.yes-script.check-message {
	display:none
}

ul.browsers {
	overflow:hidden;
	margin:0 20px 10px;width:232px }
	
ul.browsers li {
	float:left;margin:0;padding:0;
	width:74px;height:90px;
	background: url(../img/icons/browsers/large/bg-grid.gif) no-repeat center center }

ul.browsers li p {
	margin:0;
	font-size:0.8em;
	font-weight:bold;
	text-align:center
}

ul.browsers li a { 
	display:block;margin:4px 5px;
	width:64px;height:64px;
	text-indent:-10000em;
	background-image:url(../img/icons/browsers/large/browsers.jpg) }
	
ul.browsers li.firefox a { background-position:0 0 }
ul.browsers li.chrome a { background-position:-64px 0 }
ul.browsers li.opera a { background-position:-128px 0 }
ul.browsers li.safari a { background-position:-192px 0 }
ul.browsers li.internet-explorer a { background-position:-256px 0 }

ul.browsers li.firefox a:hover { background-position:0 -64px }
ul.browsers li.chrome a:hover { background-position:-64px -64px }
ul.browsers li.opera a:hover { background-position:-128px -64px }
ul.browsers li.safari a:hover { background-position:-192px -64px }
ul.browsers li.internet-explorer a:hover { background-position:-256px -64px }

ul.browsers li.firefox a.not-available { background-position:0 -128px }
ul.browsers li.chrome a.not-available { background-position:-64px -128px }
ul.browsers li.opera a.not-available { background-position:-128px -128px }
ul.browsers li.safari a.not-available { background-position:-192px -128px }
ul.browsers li.internet-explorer a.not-available { background-position:-256px -128px }

/* PETITION -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
form.petition {
	margin:0 20px 10px;
	font-size:1.1em;
	border-bottom:1px solid #bbb
}
	
form.petition input,
form.petition textarea {
	margin-bottom:10px;
	padding:5px 2px;
	border-left-width:3px;
	border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	-webkit-border-radius: 0 4px 4px 0;
}