/*   
Theme Name: Triangular Pixels Theme
Theme URI: http://www.triangularpixels.com
Description: Custom theme for TriangularPixels.com
Author: John Campbell
Author URI: http://www.triangularpixels.com.com
Version: 1
*/

@media screen
{

	*
	{
		margin: 0; padding: 0;
	}
	
	body
	{
		background: white; font: 14px/1.4 Georgia, Serif;
	}
	
	.screen-reader-text { position: absolute; left: -9999px; top: -9999px; }
	.clear { clear: both; }
	.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	
	* html .group, *:first-child+html .group { zoom: 1; } /* First selector = IE6, Second Selector = IE 7 */

	#page-wrap
	{
		width: 960px; margin: 20px auto;
	}

	h1, h2, h3
	{
		font-weight: normal; margin: 0 0 10px 0;
	}
	
	h1 { }
	h2 { }
	h3 { }

	p { margin: 0 0 10px 0; }
	
	a { }
	a:hover { } 

	blockquote { }
	blockquote p { }

	ul, ol { margin: 0 0 10px 0; }

	.post { }
	.entry { }
	.entry a { }
	.entry a:hover { }

	pre { }
	code, tt { }

	#meta { }
	.postmetadata { }

	#sidebar { }

	.navgation { }
	   .next-posts { }
	   .prev-posts { }

	#searchform { }
		#s { }
		#searchsubmt { }
		
	ol.commentlist { list-style: none; }
	ol.commentlist li { }
	ol.commentlist li.alt { }
	ol.commentlist li.bypostauthor { }
	ol.commentlist li.byuser { }
	ol.commentlist li.comment-author-admin { }
	ol.commentlist li.comment { }
	ol.commentlist li.comment div.comment-author { }
	ol.commentlist li.comment div.vcard { }
	ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
	ol.commentlist li.comment div.vcard cite.fn a.url { }
	ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 10px 10px; }
	ol.commentlist li.comment div.vcard img.avatar-32 { }
	ol.commentlist li.comment div.vcard img.photo { }
	ol.commentlist li.comment div.vcard span.says { }
	ol.commentlist li.comment div.commentmetadata { }
	ol.commentlist li.comment div.comment-meta { font-size: 10px; }
	ol.commentlist li.comment div.comment-meta a { color: #ccc; }
	ol.commentlist li.comment p { }
	ol.commentlist li.comment ul { }
	ol.commentlist li.comment div.reply { font-size: 11px; }
	ol.commentlist li.comment div.reply a { font-weight: bold; }
	ol.commentlist li.comment ul.children { list-style: none; margin: 10px 0 0; }
	ol.commentlist li.comment ul.children li { }
	ol.commentlist li.comment ul.children li.alt { }
	ol.commentlist li.comment ul.children li.bypostauthor { }
	ol.commentlist li.comment ul.children li.byuser { }
	ol.commentlist li.comment ul.children li.comment { }
	ol.commentlist li.comment ul.children li.comment-author-admin { }
	ol.commentlist li.comment ul.children li.depth-2 { border-left: 5px solid #555; margin: 0 0 10px 10px; }
	ol.commentlist li.comment ul.children li.depth-3 { border-left: 5px solid #999; margin: 0 0 10px 10px; }
	ol.commentlist li.comment ul.children li.depth-4 { border-left: 5px solid #bbb; margin: 0 0 10px 10px; }
	ol.commentlist li.comment ul.children li.depth-5 { }
	ol.commentlist li.comment ul.children li.odd { }
	ol.commentlist li.even { background: #fff; }
	ol.commentlist li.odd { background: #f6f6f6; }
	ol.commentlist li.parent { border-left: 5px solid #111; }
	ol.commentlist li.thread-alt { }
	ol.commentlist li.thread-even { }
	ol.commentlist li.thread-odd { }

	form { }

	input[type=text] { }

	textarea { }

	
	/* Base styles */

body
{
	margin: 0px;
	background-color: #b2aad1;
	font-family: carlitoregular, sans-serif;
}

a
{
	margin: 0px;
	text-decoration:none;
	font-weight: bold;
}

a:link
{
	color: #fb137c;
}

a:visited 
{
	color: #9b0c4d;
	text-decoration:none;
}

a:hover
{
	color: #ffffff;
	text-decoration:none;
}

a:active
{
	color: white;
	text-decoration:none;
}

p
{
	margin: 0px;
}

h1
{
	color: #000;
	margin-top: 8px;
	margin-bottom: 8px;
}

h2
{
	font-size: 160%;
	text-align: Left;

	margin-top: 4px;
	margin-bottom: 4px;
}

h2 a
{
	font-weight: normal;
}

/*
h2 a:active
{
	color: white
}

h2 a:visited
{
	color: #000000
}

h2 a:hover
{
	color: white;
}
*/

h3
{
	font-size: 120%;
	text-align: Left;

	margin-top: 2px;
	margin-bottom: 2px;
}

h3.left
{
	float: left;
}

h3.twitterId
{
	float: right;
	color: #9b8ec4;
}

h4
{
	color: #2c273f;
	font-style: italic;
	margin: 2px;
}

div
{
	margin: 0px;
	background-color: transparent;
}

hr
{
	width: 90%;
	height: 2px;
	border: 0;
	color: #B5ADD5;
	background-color: #B5ADD5;
	
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Header styles */

div.header
{
	background-color: #483c6c;
}

div.headerCenter
{
	background-color: #483c6c;
	margin-left: auto;
	margin-right: auto;
	min-width: 600px;
	max-width: 1000px;
}

div.logoWords
{
	background-color: transparent;
	
	float: left;
}

div.logoSymbol
{
	background-color: transparent;
	
	display: block;
	
	position: absolute;
	left: 50%;
	margin-left: -40px; /* Half of logo image width */
}

div.headerSection
{
	background-color: #483c6c;
	float: right;
	height: 80px;
	line-height: 80px;
	vertical-align: middle;
	margin-left: 0px;
	margin-right: 30px;
	font-size: 100%;
}

p.headerLink
{
	font-size: 160%;
	color: #EAE3FF;
}

a.headerLink
{
	font-size: 160%;
	font-weight: normal;
}

a.headerLink:link
{
	color: #ffe486;
	text-decoration:none;
}
a.headerLink:visited 
{
	color: #ffe486;
	text-decoration:none;
}
a.headerLink:hover
{
	color: #FB137C;
	text-decoration:none;
}
a.headerLink:active
{
	color: white;
	text-decoration:none;
}

div.hidden
{
	display: none;
}

/* Splash styles */

div.splash
{
	background-color: #070e5c;
}

div.splashCenter
{
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	min-width: 600px;
	max-width: 1000px;
	position: relative;
	height: auto;
}

img.splashBg
{
	display: block;
}

div.splashLeftArrow
{
	position: absolute;
	left: 20px;
	top: 250px;
	
	width: 64px;
	height: 74px;
	
	background: url('Images/SplashArrowLeft.png') bottom;
	text-indent: -99999px;
	
	cursor: pointer;
}
div.splashLeftArrow:hover
{
	background-position: 0 0;
}

div.splashRightArrow
{
	position: absolute;
	right: 20px;
	top: 250px;
	
	width: 64px;
	height: 74px;
	
	background: url('Images/SplashArrowRight.png') bottom;
	text-indent: -99999px;
	
	cursor: pointer;
}

div.splashRightArrow:hover
{
	background-position: 0 0;
}


div.splashDescriptionBox
{
	background-color: transparent;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 250px;
}

a.splashLink
{
	line-height: 100%;
	font-weight: normal;
}

h1.splashTitle
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 120%;
	line-height: 120%;
	text-align: right;
	font-weight: bold;
}

p.splashText
{
	text-align: right;
	line-height: 110%;
	color: #fee485;
}

p.splashMore
{
	text-align: center;
	color: #fee485;
	font-weight: bold;
}

div.dotBar
{
	height: 20px;
	
	background-color: transparent;
	margin-top: 4px;
	margin-left: auto;
	margin-right: auto;
	
	width: 100%;
	
	position: absolute;
}

div.dotCenter
{
	width: 138px;
	margin-left: auto;
	margin-right: auto;
	background-color: transparent;
	visibility: hidden;
}

img.splashDot
{
	margin: 4px;
}

/* Intro styles */

div.intro
{
	background-color: #544878;
	padding-left: 10px;
	padding-right: 5px;
	padding-top: 4px;
	padding-bottom: 4px;
}

div.introCenter
{
	background-color: #544878;

	margin-left: auto;
	margin-right: auto;
	min-width: 600px;
	max-width: 1000px;
}

div.introText
{
	background-color: transparent;
	
	min-height: 60px;
	line-height: 30px;
	margin-right: 230px;
	font-size: 120%;
	/*
	text-align: justify;
	*/
	text-align: center;
	
	color: #fee485;
}

div.introButton
{
	background-color: #fa137b;
	
	float: right;
	width: 202px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	margin: 10px;
	margin-right: 16px;
	
	/* Text colour */
	color: #fee486;
	font-size: 160%;
}

div.introButton:hover
{
	background-color: #ff68ce;
}

img.introImg
{
	position: relative;
	top: 4px;
}

a.introLink
{
	color: #fee485;
}

div.sectionHeader
{
	width: 100%;
	height: 100%;
	
	background-color: #EAE3FF;
}

div.sectionHeaderCenter
{
	margin-left: auto;
	margin-right: auto;
	min-width: 600px;
	max-width: 1000px;
}

div.sectionHeaderTitle
{
	background-color: #EAE3FF;
	font-size: 160%;
	color: #000000;
	
	padding-left: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Side bar */

div.sideBarBox
{
	width: 210px;
	height: auto;

	margin: 10px;
	background-color: #b2aad3;
	
	border-width: 0px;
	border-radius: 4px;
}

div.sideBarInner
{
	position: relative;
	top: 4px;
	
	width: 202px;
	height: auto;
	
	margin: 4px;
	margin-bottom: 8px;
	
	background-color: #eae3ff;
	
	text-align: right;
	
	border-width: 0px;
	border-radius: 2px;
}

/* Insert an empty table after the content in the sideBarBox.
   This stops the sideBarBox and sideBarInner margins collapsing, so we can create the bevelled edge properly */
div.sideBarBox:after
{
	content: ' ';
	display: table;
}

div.sideBarInner#photoFeed
{
	height: 180px;	
}
div.sideBarBox#photoFeedBox
{
	height: 189px;
}

div.sideBarInner#twitter
{
	height: 350px;	
}
div.sideBarBox#twitterBox
{
	height: 359px;
}

div.twitterDiv
{
	margin: 4px;
	background-color: transparent;
}

p.sidebarTitle
{
	position: relative;
	right: 6px;
	
	color: #534878;
	font-size: 130%;
	
	font-style: italic;
	margin-right: 8px;
}

p.sidebarText
{
	position: relative;
	
	color: #fb137c;
	font-size: 100%;
	
	font-style: italic;
	margin-left: 8px;
	
	text-align: left;
}

div.socialBox
{
	background-color: transparent;
	
	position: relative;
	left: -7px;
}

div.widgetBox
{
	background-color: transparent;
	
	position: relative;
	left: 0px;
	
}

div.widgetBox ul
{
	text-align: left;
	
	position: relative;
	left: 10px;
}

div.widgetBox li
{
	list-style-position: inside;
	
	position: relative;
	left: 0px;
	
	padding-right: 10px;
	/*
	padding-bottom: 0px;
	*/
}

p.widgetTitle
{
	position: relative;
	right: 0px;
	
	color: #534878;
	font-size: 130%;
	
	font-style: italic;
	margin-right: 8px;
}

div.tagcloud
{
	margin-left: 4px;
	margin-right: 4px;
}

img.socialIcon
{
	margin: 3px;
}

div.photoFeedBox
{

}

/* Content styles */

div.content
{
	background-color: #d7cdff;
}

div.contentCenter
{
	background-color: #d7cdff;

	margin-left: auto;
	margin-right: auto;
	min-width: 600px;
	max-width: 1000px;
	
	/* Temp hack: once we get dynamic widgets working ok we can remove this */
	min-height: 1500px;
}

div.contentMain
{
	margin-right: 230px;
	
	background-color: #d7cdff;
	
	padding: 10px;
	
	/* I have no idea why this works but it lets us float within
	   posts without disrupting the side bar */
	overflow: auto;
}



div.contentEntry
{
	background-color: transparent;
}

div.contentSidebar
{
	float: right;
	width: 230px;
	
	background-color: transparent;
}

img.left
{
	float: left;
	border-width: 3px;
	border-radius: 2px;
	border-color: #a89fca;
	border-style: solid;
	margin: 4px;
	
	position: relative;
	left: -4px;
	top: -2px;
}

img.right
{
	float: right;
	border-width: 3px;
	border-radius: 2px;
	border-color: #a89fca;
	border-style: solid;
	margin: 4px;
}

img.center
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
	border-width: 3px;
	border-radius: 2px;
	border-color: #a89fca;
	border-style: solid;
}

div.eventInfo
{
	background-color: transparent;
    vertical-align: middle;
    
	margin-top: 5px;
	margin-bottom: 5px;
	display: table;
	width: 100%;
}

img.eventImage
{
	float: left;
	margin: 0px;
	padding: 0px;
}

a.eventLink
{
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	
	width: 50%;
	
	font-size: 120%;
	font-weight: bold;
}

p.eventText
{
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	
	
	width: 80%;
	
	font-size: 120%;
	font-weight: bold;
}

p.timestamp
{
	font-style: italic;
	
	margin-top: 2px;
	margin-bottom: 4px;
}

div.postFooter
{
	margin-top: 10px;
	
	background-color: transparent;
}

p.readMore
{
	float: left;
}

p.postCategory
{
	float: right;
	font-style: italic;	
}

p.releaseDate
{
	color: black;

	font-size: 200%;
	font-weight: bold;
	text-align: center;
	
	margin-top: 8px;
	margin-bottom: 8px;
}

div.linkBar
{
	background-color: transparent;
	width: 100%;
}

a.linkLeft
{
	display: block;
	float: left;
}

a.linkRight
{
	display: block;
	float: right;
}

a.linkCenter
{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}


div.collumns3
{
	width: 100%;
}

div.leftCol
{
	float: left;
	width: 30%;
}

div.centerCol
{
	width: 40%;
}

div.rightCol
{
	float: right;
	width: 30%;
}


p.vision
{
	font-size: 120%;
	text-align: center;
}

a.twitter-timeline
{
	
}

a.center
{
	display: block;
	text-align: center;
	font-size: 120%;
	margin: 8px;
}

/* Search box */
div.widgetBox form
{
	background-color: transparent;
	
	padding-top: 10px;
	margin: 10px;
}

div.widgetBox form input
{
	margin: 4px;
}

#searchsubmit
{
	width: 175px;
	background: #483c6c; /* actually the button face colour */
	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 120%;
	color: white; /* actually the button text colour */
	
	border: 1px solid #999;
	border-radius: 15px;
}
#searchsubmit:hover
{
	background: #d7cdff;
}

/* Footer styles */

div.footer
{
	background-color: #544878;
	color: #fee485;
	text-align: center;
	padding: 8px;
}

div.footerWidgets
{
	text-align: center;
}

div.footerWidget
{
	background-color: transparent;
	display: inline;
	width: 100px;
	border: 0px solid black;
	margin-left: 8px;
	margin-right: 8px;
}

h1.footerWidgetTitle
{
	display: inline;
}

div.footerWidget ul
{
	display: inline;
	list-style-type: none;
}
div.footerWidget li
{
	display: inline;
	list-style-type: none;
	background-color: transparent;
	margin-left: 6px;
	margin-right: 6px;
}

img.size-thumbnail
{
	background-color: #b2aad3;
	border: 4px solid #b2aad3;
	border-radius: 4px;
}
img.size-medium
{
	background-color: #b2aad3;
	border: 4px solid #b2aad3;
	border-radius: 4px;
	margin: 4px;
}
img.size-full
{
	background-color: #b2aad3;
	border: 4px solid #b2aad3;
	border-radius: 4px;
}

img.aligncenter
{
	margin-left: auto;
	margin-right: auto;
	display: block;
}
img.alignleft
{
	float: left;
}
img.alignright
{
	float: right;
}

/* Comments */

ol.commentlist
{

}

ol.commentlist li
{
	padding: 10px;
	border: 0px solid black;
}

} /* END screen media */


@media print
{
	.do-not-print { display: none; }
	#comments { page-break-before: always; }

	body { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }
	h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
	h1 { font-size: 19pt; }
	h2 { font-size:17pt; }
	h3 { font-size:15pt; }
	h4,h5,h6 { font-size:12pt; }
	code { font: 10pt Courier, monospace; } 
	blockquote { margin: 1.3em; padding: 1em; }
	img { display: block; margin: 1em 0; }
	a img { border: none; }
	table { margin: 1px; text-align:left; }
	th { border-bottom: 1px solid #333;  font-weight: bold; }
	td { border-bottom: 1px solid #333; }
	th, td { padding: 4px 10px 4px 0; }
	caption { background: #fff; margin-bottom: 2em; text-align: left; }
	thead { display: table-header-group; }
	tr { page-break-inside: avoid; } 
	a { text-decoration: none; color: black; }	
} /* END print media */