/*  
Theme Name: BadGrenola
Theme URI: http://www.badgrenola.com/
Description: BadGrenola.com's wordpress theme.
Author: Matt Brealey
Author URI: http://www.badgrenola.com/
Version: 1.0
Tags: badgrenola, bad, grenola, vfx, cg
*/


/*
Blue = 
color:#2170B3;

Green = 
color:#0c763b;

Orange = 
color:#cf6525;
*/


/* Trimmed CSS Reset via Eric Meyer - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}

/* Main Page Layout */

html, body {
height:100%;	
}

body {	
text-decoration:none;	
font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;
font-size:10px;
color:#fff;
line-height: 1;
text-align:center;
background:#191919 url('images/BGstripe.png') repeat top center;
}

a {
text-decoration:none;
color:#fff;
}

#wrapper {
display:block;
width:960px;
//height:1195px;
text-align:left;
margin-left:auto;
margin-right:auto;
background-color: #161616;	
padding:0 20px;
padding-bottom:30px;
}

#header, .greyBar, #featuredSection, #postsSection, #footer {
width:100%;
display:block;	
}

#header {
height:130px;
//background-color:green;
}

.greyBar {
height:15px;
background-color:#232323;	
overflow:hidden;
}

.greyBarHidden {
display:none;	
}

#featuredSection {
height:260px;	
}

#featuredSectionHidden {
display:none;	
}

	#fPostsContainer {
	height:230px;
	width:100%;
	display:block;
	position:relative;
	top:15px;
	}

#postsSection {
//height:725px;
}

	#allPostsContainer {
	//height:725px;
	width:100%;
	position:relative;
	top:15px;
	display:block;
	overflow:hidden;
	
	margin-bottom:30px;
	}

#footer {
height:45px;
background-color:#232323;
font-weight:bold;
}

#footer span {
color:#666;	
}

#footer p {
color:#333;
clear:both;
text-align:center;
font-weight:normal;
height:20px;
width:100%;
display:block;
background-color:#111;
padding-top:6px;	
}


#footer ul {
padding:10px;	
}

#footer li {
color:#464646;	
font-size:10px;
list-style:none;
float:left;
pointer: default;
}

#footer a {
font-size:11px;
color:#464646;	
}

#aroundTheWeb {
width:440px;
height:10px;
display:block;
float:left;
}

#aroundTheWeb a:hover {
color:#2e7679;	
}

#linksList {
width:440px;
height:10px;
display:block;
float:right;	
}

#linksList li {
float:right;	
}

#linksList a:hover {
color:#0c763b;	
}

/* Details */

/*Header*/

#header {
background:#fff url('images/headerImage.jpg') no-repeat top center;	
}

#logoClickBlock a {
width:415px;
height:130px;
display:block;
float:left;	
}

#headerRightSide {
width:545px;
height:130px;
display:block;
float:right;
}

#topBar {
height:25px;
width:450px;
display:block;	
float:right;
}

#twitterBox {
height:105px;
width:330px;
margin-top:5px;
display:block;	
float:right;	
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#999;
z-index:-20;
}

#twitterBoxText {
position:relative;
top:41px;
left:-45px;
width:345px;
height:45px;
line-height:1.2;	
}

#twitterBox a {
color:#2170B3;
}

#twitterBox a:hover {
color:#cf6525;
}

#twitterBox li {	
list-style:none;
}


/*Menu*/

/* menu */

#menu { 
list-style:none;
display:inline-block;
z-index:1000; 
height:20px;
width:450px;
display:block;	
float:right;
}

#menu a { 
color:#777;
text-decoration:none;
}

.menuItem{
float:left; 
position:relative;
padding-top:7px;
height:25px;
display:block;
font-size:11px;
color:#777;
padding-left:12px;
padding-right:8px;
}

#searchLabel{
cursor:default;
position:relative;
padding-left:18px;
padding-right:0px;
}





/* sub-menus*/

#menu ul { 
padding:0px; 
margin:0px; 
display:block; 
display:inline;
}

#menu ul li a {
color:#888;	
}

#menu li ul {
width:459px;
height:40px;
/* for IE */ display:none; 
background: url('images/menuDropdown.jpg') no-repeat top left;	
color:#555;
}

#vfxSubMenu { 
position:absolute; 
top:25px;
left:-9px;
display:block; 
color:#0395CC; 
/* for IE */ display:none; 
}

#sciSubMenu { 
position:absolute; 
top:25px;
left:-50px;
display:block;
color:#0395CC; 
/* for IE */ display:none; 
}

#tutorialsSubMenu { 
position:absolute; 
top:25px;
left:-88px;
display:block;
color:#0395CC; 
/* for IE */ display:none; 
}

.ff3_5 #tutorialsSubMenu {
left:-89px;	
}

.ff3_6 #tutorialsSubMenu {
left:-88px;	
}

/* to colour the categories on hover */

#vfxLink:hover > a {
color:#0c763b;
}

#sciLink:hover > a{
color:#2e7679;
}

#tutorialsLink:hover > a {
color:#cf6525;	
}

/* to colour the subcategories on hover */

#vfxLink a:hover {
color:#0c763b;
}

#sciLink a:hover{
color:#2e7679;
}

#tutorialsLink a:hover {
color:#cf6525;	
}

#menu li:hover ul { 
display:block;
}

#menu li ul li{ 
display:inline;
float:left;
list-style-type:none; 
padding-top:6px;
padding-left:12px;
font-size:10px;
}

.gecko #menu li ul li {
padding-top:8px;	
}

/* search */
#searchBox {
float:right;	
}

#searchLabel {
float:left;
}

#searchInput {
width:180px;
height:16px;
margin: 2px;
display:block;
float:left;
border:solid 2px #101010;
background-color:#161616;
color:#aaa;
padding-left:2px;
font-size:11px;
padding-left:3px;
}

#searchButton {
color: #eee;
background:#555;
border: 0px;
height:21px;
width:32px;
margin-top:2px;
margin-right:2px;
cursor:pointer;
}

/*GreyBars*/

.sectionTitle {
display:block;
margin-left:22px;
margin-top:2px;
width:300px;
float:left;
}

.sectionTitle a {
height:15px;
width:35px;
display:block;
float:left;
}

.sectionTitle a:hover {
color:#2170B3;	
}

.sectionTitle span {
color:#2170B3;
}

#pagination {
width:600px;	
height:20px;
display:block;
float:right;
text-align:right;
font-size:10px;
padding-top:3px;
font-size:11px;
}

.wp-pagenavi {
float:right;	
margin-right:15px;
}

.wp-pagenavi a:hover {
color:#2170B3;	
}

.wp-pagenavi .pages {
display:none;

}

.wp-pagenavi .current {
color:#cf6525;
float:left;
margin:0 10px;
}

.wp-pagenavi .page {
text-align:center;
height:15px;
width:30px;
float:left;
display:block;	
float:left;
}

.wp-pagenavi .nextpostslink {
margin-left:10px;	
float:left;
}

.wp-pagenavi .previouspostslink {
margin-right:10px;	
float:left;
}

.ie .sectionTitle {
margin-top:3px;	
}

.mac.gecko .sectionTitle {
margin-top:3px;	
}

/*FeaturedPosts*/

#featuredTutorial {
height:230px;
width:379px;
display:block;
float:left;
background-color:#ccc;	
}

#otherFeaturedContainer {
float:right;
width:576px;
height:230px;
display:block;	
}

#featuredVFX {
width:576px;
height:113px;
display:block;
background-color:#ccc;	
margin-bottom:4px;
}

#featuredSci {
width:576px;
height:113px;
display:block;
background-color:#ccc;	
}

.featuredTile1Pic {
display:block;
width:379px;
height:147px;
position:relative;
top:22px;
left:22px;
}


.featuredTile1Info{
position:relative;
left:-1px;
top:12px;
display:block;
width:335px;
height:10px;		
}

.featuredTile1Category {
font-size:9px;
color:#cecccc;
width:50px;
float:left;
}

.featuredTile1Date {
color:#cecccc;
font-size:9px;
float:right;	
}

.featuredTile1Title {
text-decoration:none;
font-size:29px;
position:relative;
left:-1px;
top:14px;
letter-spacing:-1px;
}

.featuredTile1Text {
position:relative;
top:20px;
display:block;
height:20px;
width:334px;
line-height:1.3;
color:#dedddd;	
}

.featuredTile2Pic {
display:block;
width:576px;
height:80px;
position:relative;
top:22px;
left:22px;
float:left;
}

.featured2Thumb {
float:left;	
padding-right:25px;
}

.featured3Thumb {
float:left;	
padding-right:25px;
margin-top:1px;
}

.featured2ContentBox {
float:left;	
width:362px;
}

.featuredTile2Info{
display:block;
height:10px;		
}

.featuredTile2Category {
font-size:9px;
color:#cecccc;
width:50px;
float:left;
}

.featuredTile2Date {
color:#cecccc;
font-size:9px;
float:right;	
}

.featuredTile2Title {
text-decoration:none;
font-size:29px;
position:relative;
left:-1px;
top:3px;
letter-spacing:-1px;
}

.featuredTile2Text {
position:relative;
top:6px;
display:block;
height:20px;color:#dedddd;	
line-height:1.3;
}

/*MainPosts*/

.allPosts{
list-style:none;
display:inline;	
}

.postItem{
display:inline;
float:left;
margin-right:3px;
margin-bottom:3px;
height:230px;
width:189px;
}

.singlePostContainer {
display:block;
height:230px;
width:189px;
background-color:#ccc;
}

.tileContainer, .tile {
display:block;
//overflow:hidden;
height:230px;
width:189px;
}

.orangeTile .tile {	
background:#fff url('images/orangeBGJoint.jpg') no-repeat top center;
}

.orangeTile:hover .tile {	
background:#fff url('images/orangeBGJoint.jpg') no-repeat bottom center;
}

.orangeTile:hover .tilePostText {	
display:block;
}

.orangeTile:click .tile {	
background:#fff url('images/orangeBGJoint.jpg') no-repeat bottom center;
}

.blueTile .tile {
background-color:#ccc;	
background:#fff url('images/blueBGJoint.jpg') no-repeat top center;
}

.blueTile:hover .tile {	
background:#fff url('images/blueBGJoint.jpg') no-repeat bottom center;
}

.blueTile:hover .tilePostText {	
display:block;
}

.blueTile:click .tile {	
background:#fff url('images/blueBGJoint.jpg') no-repeat bottom center;
}

.greenTile .tile {
background-color:#ccc;	
background:#fff url('images/greenBGJoint.jpg') no-repeat top center;
}

.greenTile:hover .tile {	
background:#fff url('images/greenBGJoint.jpg') no-repeat bottom center;
}

.greenTile:hover .tilePostText {	
display:block;
}

.greenTile:click .tile {	
background:#fff url('images/greenBGJoint.jpg') no-repeat bottom center;
}


.tilePic {
display:block;
width:145px;
height:147px;
position:relative;
top:23px;
left:22px;
}

.tilePic img {
width:145px;
height:147px;
display:block;	
}

.tileInfo{
position:relative;
left:-1px;
top:12px;
display:block;
width:148px;
height:10px;		
}

.tilePostText {
display:none;
width:125px;
height:127px;
position:absolute;
top:0px;
background-color:#161616;
overflow:hidden;
padding:10px;
line-height:1.3;
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:”alpha(opacity=70)”;
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
left:0px;
font-size:11px;
}

.tileCategory {
font-size:9px;
color:#cecccc;
width:50px;
float:left;
}

.tileDate {
font-size:9px;
float:right;
color:#cecccc;	
}

.tileTitle {
text-decoration:none;
font-size:18px;
position:relative;
left:-1px;
top:13px;
letter-spacing:-1px;
height:16px;
width:152px;
display:block;
}

.ttw {
font-weight: bold;
color:#fff;
}

.ttg {
color:#cecccc;	
}

/*Featured*/

#featuredTutorial {
display:block;
height:230px;
width:379px;
background-color:#ccc;
}

#featuredSci {
display:block;
height:113px;
width:576px;
background-color:#ccc;
}

#featuredVFX {
display:block;
height:113px;
width:576px;
background-color:#ccc;
}

.featuredTile {
display:block;
//overflow:hidden;
height:230px;
width:379px;
}

.featuredTile2 {
display:block;
//overflow:hidden;
height:113px;
width:576px;
}

.tutorialTile .featuredTile {	
background:#fff url('images/featuredOrangeJoint.jpg') no-repeat top center;
}

.tutorialTile:hover .featuredTile {	
background:#fff url('images/featuredOrangeJoint.jpg') no-repeat bottom center;
}

.tutorialTile:click .featuredTile {	
background:#fff url('images/featuredOrangeJoint.jpg') no-repeat bottom center;
}

.vfxTile .featuredTile2 {	
background:#fff url('images/featuredGreenJoint.jpg') no-repeat top center;
}

.vfxTile:hover .featuredTile2 {	
background:#fff url('images/featuredGreenJoint.jpg') no-repeat bottom center;
}

.vfxTile:click .featuredTile2 {	
background:#fff url('images/featuredGreenJoint.jpg') no-repeat bottom center;
}

.sciTile .featuredTile2 {	
background:#fff url('images/featuredBlueJoint.jpg') no-repeat top center;
}

.sciTile:hover .featuredTile2 {	
background:#fff url('images/featuredBlueJoint.jpg') no-repeat bottom center;
}

.sciTile:click .featuredTile2 {	
background:#fff url('images/featuredBlueJoint.jpg') no-repeat bottom center;
}

/*Tags*/

.tileTags {
font-size:9px;
color:#3a3a3a;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position:relative;
left:-117px;
top:-162px;
display:block;
width:250px;
height:12px;
margin-left:-2px;
}

.tileTags li {
list-style:none;
display:inline;
margin-right:5px;	
}

.tileTags a {
color:#333;
}

.tileTags a:hover {
color:#ff6000;
}

.ff3 .tileTags {
display:none;	
}

.ff3_5 .tileTags {
display:block;	
left:-115px;
}

.win.ff3_5 .tileTags {
left:-116px;	
}

.ie .tileTags {
display:none;	
}

.featuredTileTags {
font-size:9px;
color:#3a3a3a;
position:relative;
top:-10px;
left:350px;
width:250px;
height:10px;
display:block;
}

.featuredTileTags li {
list-style:none;
display:inline;
margin-right:5px;	
}

.featuredTileTags a {
color:#333;
}

.featuredTileTags a:hover {
color:#ff6000;
}

.ff3 .featuredTileTags {
display:none;	
}

.ff3_5 .featuredTileTags {
display:block;
top:-8px;
}

.ie .featuredTileTags {
display:none;	
}

win.ff3_5 .featuredTileTags {
top:-11px;	
}