/*-----------------------------------------------------------------------------
Screen Style Sheet

website:   http://www.redcirclephotography.com/
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/
/* Import any External Styles */
/*---------------------------------------------------------------------------*/

@import url('reset.css');
@import url('fonts.css');

/*---------------------------------------------------------------------------*/
/* Setup & Further Resets */
/*---------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
	font-weight: normal;
	color: #fff;
}

img { display: block; }

/* Removes fieldset borders. even on Opera 7 */
fieldset { border: 0 solid transparent; }

td
{
	text-align: left;
	font-weight: normal;
}

address,caption,cite,code,dfn,em,strong,th,var
{
	font-style: normal;
	font-weight: normal;
}

caption,th { text-align: left; }

/*---------------------------------------------------------------------------*/
/* General classes */
/*---------------------------------------------------------------------------*/
.clear
{
	clear: both;
	height: 0px !important;
	font-size: 0px !important;
	overflow: hidden;
}

.input
{
	border: 1px #CCC solid;
	padding: 2px;
}

.left { float: left; }
.right { float: right; }

/*---------------------------------------------------------------------------*/
/* Typography */
/*---------------------------------------------------------------------------*/
body
{
	/*
	font-family: 'Lucida Grande',  'Lucida Sans Unicode', Verdana,  Arial,  Helvetica,  sans-serif;
	*/
	font-family: "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
	color: #909090;
	background-color: #d2cfcd;
	text-align: center;
}

/* Font sizes - use percentages

9px  = 70%
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 123.1%
17px = 131%
18px = 138.5%
19px = 146.5%
20px = 153.9%
21px = 161.6%
22px = 167%
23px = 174%
24px = 182%
25px = 189%
26px = 197%

*/

.fontBlack { color: #000; }
.fontWhite { color: #fff; }
.fontGrey { color: #999; }
.bold { font-weight: bold; }

/*---------------------------------------------------------------------------*/
/* Headings */
/*---------------------------------------------------------------------------*/
h1 /* 58px */
{
	font-size: 446%;
	text-transform: uppercase;
	margin: 30px 0 10px 10px;
}
h2 /* 26px */ { font-size: 197%; }
h3 /* 19px */ { font-size: 146.5%; }
h4 /* 17px */ { font-size: 131%; }
h5 /* 15px */ { font-size: 116%; }
h6 /* 13px */ { font-size: 100%; }

/*---------------------------------------------------------------------------*/
/* Links */
/*---------------------------------------------------------------------------*/
a:link, a:visited, a:active
{
	color: #fff;
	text-decoration: none;
}

a:hover { color: #444; }

/*---------------------------------------------------------------------------*/
/* Structure */
/*---------------------------------------------------------------------------*/
#wrapper
{
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

#header
{
	float: left;
	width: 960px;
	height: 82px;
	position: relative;
}

#content
{
	float: left;
	width: 960px;
	border-top: 1px solid #E4E1DF;
}

#footer
{
	float: left;
	width: 960px;
	border-top: 1px #e4e1df solid;
	margin-top: 20px;
}

/*---------------------------------------------------------------------------*/
/* Header */
/*---------------------------------------------------------------------------*/

#header h2
{
	width: 220px;
	height: 28px;
	background-image: url(../images/elements/sprite-main.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
	top: 36px;
	left: 13px;
}

#header h2 a
{
	width: 100%;
	height: 100%;
	display: block;
}

#header a.tab
{
	width: 66px;
	height: 20px;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	right: 0;
	background-image: url(../images/elements/sprite-main.gif);
	background-repeat: no-repeat;
	background-position: 0 -28px;
}

#header a.tab:hover { background-position: 0 -48px; }

#mainNavigation
{
	position: absolute;
	width: 292px;
	height: 15px;
	overflow: hidden;
	bottom: 24px;
	right: 14px;
	background-image: url(../images/elements/mainNavigation.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#mainNavigation li a
{
	position: absolute;
	top: 0;
	text-indent: -9999px;
	padding: 15px 0 0 0;
	overflow: hidden;
	height: 0 !important;
	background-image: url(../images/elements/mainNavigation.gif);
	background-repeat: no-repeat;
}

#mainNavigation li.button1 a
{
	background-position: 0 0;
	width: 79px;
	left: 0;
}

#mainNavigation li.button1 a:hover { background-position: 0 -15px; }

#mainNavigation li.button2 a
{
	background-position: -96px 0;
	width: 52px;
	left: 96px;
}

#mainNavigation li.button2 a:hover { background-position: -96px -15px; }

#mainNavigation li.button3 a
{
	background-position: -164px 0;
	width: 71px;
	left: 164px;
}

#mainNavigation li.button3 a:hover { background-position: -164px -15px; }

#mainNavigation li.button4 a
{
	background-position: -252px 0;
	width: 40px;
	left: 252px;
}

#mainNavigation li.button4 a:hover { background-position: -252px -15px; }

body.portfolio #mainNavigation li.button1 a { background-position: 0 -15px; }
body.about #mainNavigation li.button2 a { background-position: -96px -15px; }
body.contact #mainNavigation li.button3 a { background-position: -164px -15px; }
body.blog #mainNavigation li.button4 a { background-position: -252px -15px; }

/*---------------------------------------------------------------------------*/
/* Footer */
/*---------------------------------------------------------------------------*/
#footer p
{
	padding: 15px;
	color: #a7a4a3;
	font-size: 77%;
	text-transform: uppercase;
}

#footer a { color: #a7a4a3; }
#footer a:hover { color: #FFF; }

/*---------------------------------------------------------------------------*/
/* Homepage Showcase */
/*---------------------------------------------------------------------------*/
#showcase
{
	float: left;
	margin: 0;
	list-style-type: none;
	background-color: #FFF;
	width: 930px;
	height: 620px;
	overflow: hidden;
	border-top: 5px #C7C4C2 solid;
	border-right: 5px #C7C4C2 solid;
	border-left: 5px #C7C4C2 solid;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
}

#showcase a
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 930px;
	height: 620px;
}

#showcaseNavWrapper
{
	float: left;
	width: 960px;
	height: 34px;
	position: relative;
}

#showcaseNavMask
{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 20;
	width: 960px;
	height: 34px;
	background-image: url(../images/home/showcaseNavMask.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#showcaseNav
{
	position: absolute;
	left: 15px;
	bottom: 0;
	z-index: 10;
	width: 930px;
	height: 34px;
	overflow: hidden;
}

#showcaseNav li
{
	float: left;
}

#showcaseNav li a
{
	display: block;
	height: 34px;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
}

#showcaseNav li a.activeSlide,
#showcaseNav li a:hover
{
	background-position: 0 -34px;
}

#showcaseNav li.tab0 a
{
	width: 232px;
	background-image: url(../images/home/tab-aerial.gif);
}

#showcaseNav li.tab1 a
{
	width: 232px;
	background-image: url(../images/home/tab-travel.gif);
}

#showcaseNav li.tab2 a
{
	width: 232px;
	background-image: url(../images/home/tab-abstract.gif);
}

#showcaseNav li.tab3 a
{
	width: 234px;
	background-image: url(../images/home/tab-macro.gif);
}

#showcase #imageLoaderSplashArea
{
	width: 930px;
	height: 620px;
	text-align: center;
}

#showcase #imageLoaderSplashArea .splashScreenImage
{
	margin: 300px auto 0 auto;
	text-align: left;
}


/*---------------------------------------------------------------------------*/
/* Content General */
/*---------------------------------------------------------------------------*/

#content
{
	float: left;
	width: 960px;
	border-top: 1px solid #E4E1DF;
}

#sideContent
{
	float: right;
	width: 304px;
}

#categoryContent,
#portfolioContent,
#aboutContent,
#contactContent,
#blogContent
{
	border-top: 1px solid #E4E1DF;
	float: left;
	width: 960px;
}


/*---------------------------------------------------------------------------*/
/* Pagination */
/*---------------------------------------------------------------------------*/

div.pagination
{
	clear: both;
	padding: 30px 0 0 15px;
}

a.pagination,
span.paginationOn
{
	padding: 1px 4px 1px 4px;
	border: 1px solid #C7C4C2;
	float: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

a.pagination
{
	border: 1px solid #C7C4C2;
}

a.pagination:hover
{
	background-color: #d7d4d2;
}

span.paginationOn
{
	border: 1px solid #C7C4C2;
	background-color: #d7d4d2;
}


/*---------------------------------------------------------------------------*/
/* Content Home */
/*---------------------------------------------------------------------------*/

#homeContent
{
	width: 960px;
	float: left;
}

#homeContent .homePanel
{
	width: 290px;
	float: left;
	padding: 0 15px 15px 15px;
}

#homeContent .homePanel h3
{
	height: 22px;
	border-bottom: 1px #e4e1df solid;
	text-indent: -9999px;
	background-image: url(../images/elements/sprite-main.gif);
	background-repeat: no-repeat;
	margin-bottom: 10px;
	font-size: 0;
}

#homeContent .intro h3 { background-position: 0 -68px; }
#homeContent .social h3 { background-position: 0 -90px; }
#homeContent .blog h3 { background-position: 0 -112px; }

#homeContent .blog h6
{
	color: #908e8d;
	font-weight: bold;
	margin-bottom: 3px;
}

#homeContent .blog a.read
{
	color: #fff;
	background-color: #c0bdba;
	padding: 0 0.3em;
	font-size: 85%;
}

#homeContent .blog a.read:hover
{
	color: #b6b3b2;
	background-color: #e2dedb;
}

#homeContent .social .logo,
.networks .logo
{
	text-indent: -9999px;
	background-image: url(../images/elements/sprite-main.gif);
	background-repeat: no-repeat;
	height: 40px;
	float: left;
	display: inline;
	margin-top: 5px;
}

#homeContent .social .krop,
.networks .krop
{
	background-position: 0 -134px;
	width: 59px;
	margin-right: 20px;
}

#homeContent .social .krop:hover,
.networks .krop:hover{ background-position: -59px -134px; }

#homeContent .social .behance,
.networks .behance
{
	background-position: 0 -174px;
	width: 93px;
	margin-right: 20px;
}

#homeContent .social .behance:hover,
.networks .behance:hover { background-position: -93px -174px; }

#homeContent .social .linkedIn,
.networks .linkedIn
{
	background-position: 0 -214px;
	width: 95px;
}

#homeContent .social .linkedIn:hover,
.networks .linkedIn:hover { background-position: -95px -214px; }

/*---------------------------------------------------------------------------*/
/* Content Porfolio */
/*---------------------------------------------------------------------------*/

#portfolioContent .selectCategory
{
	float: left;
	width: 435px;
	height: 314px;
	padding: 10px;
	background-color: #FFF;
	border: 5px solid #C7C4C2;
	margin: 0 0 30px 0;
}

#portfolioContent .aerial,
#portfolioContent .abstract
{
	margin-right: 30px;
}

#portfolioContent .selectCategory div
{
	float: left;
	width: 435px;
	height: 34px;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -9999px;
}

#portfolioContent .aerial div { background-image: url(../images/content/categories/category-aerial.gif); }

#portfolioContent .travel div { background-image: url(../images/content/categories/category-travel.gif); }

#portfolioContent .abstract div { background-image: url(../images/content/categories/category-abstract.gif); }

#portfolioContent .macro div { background-image: url(../images/content/categories/category-macro.gif); }


/*---------------------------------------------------------------------------*/
/* Content Category */
/*---------------------------------------------------------------------------*/

#categoryContent
{
	float: left;
	width: 960px;
}

#thumbs
{
	float: left;
	width: 630px;
}

#thumbs a.thumb 
{
	float: left;
	padding: 10px;
	border: 5px solid #C7C4C2;
	margin: 0 10px 10px 0;
	display: inline;
	background-color: #fff;
}

#thumbs a.spinner
{
	background: #fff url(../images/fg_forms/spinner.gif) no-repeat center center;
}

#sideContent .submenu
{
	float: left;
	width: 304px;
}

#sideContent .submenu li
{
	background-image: url(../images/elements/portfolioMenu.gif);
	background-repeat: no-repeat;
	clear: left;
	float: left;
	height: 37px;
	overflow: hidden;
	margin-bottom: 13px;
}

#sideContent .submenu li.button1 { width: 115px; }

#sideContent .submenu li.button2 { width: 122px; }

#sideContent .submenu li.button3 { width: 170px; }

#sideContent .submenu li.button4 { width: 126px; }

#sideContent .submenu li a
{
	background-image: url(../images/elements/portfolioMenu.gif);
	background-repeat: no-repeat;
	display: block;
	height: 100%;
	overflow: hidden;
	text-indent: -9999px;
	width: 100%;
}

#sideContent .submenu li.button1,
#sideContent .submenu li.button1 a { background-position: 0 0; }

#sideContent .submenu li.button2,
#sideContent .submenu li.button2 a { background-position: -138px 0; }

#sideContent .submenu li.button3,
#sideContent .submenu li.button3 a { background-position: -284px 0; }

#sideContent .submenu li.button4,
#sideContent .submenu li.button4 a { background-position: -476px 0; }

body.aerial #sideContent .submenu li.button1 a,
#sideContent .submenu li.button1 a:hover { background-position: 0 -37px; }

body.travel #sideContent .submenu li.button2 a,
#sideContent .submenu li.button2 a:hover { background-position: -138px -37px; }

body.abstract #sideContent .submenu li.button3 a,
#sideContent .submenu li.button3 a:hover { background-position: -284px -37px; }

body.macro #sideContent .submenu li.button4 a,
#sideContent .submenu li.button4 a:hover { background-position: -476px -37px; }

#sideContent .content
{
	float: left;
	width: 301px;
	padding: 20px 0 0 3px;
}

#sideContent .content .copy
{
	width: 265px;
}

#sideContent .content a.piclens
{
	width: 130px;
	height: 23px;
	text-indent: -9999px;
	background-image: url(../images/elements/sprite-main.gif);
	background-repeat: no-repeat;
	background-position: 0 -254px;
	margin-top: 30px;
	display: block;
}

#sideContent .content a.piclens:hover { background-position: 0 -277px; }


/*---------------------------------------------------------------------------*/
/* About Page */
/*---------------------------------------------------------------------------*/

#aboutContent .text
{
	float: left;
	width: 500px;
	padding: 0 0 0 15px;
}

#aboutContent .text h2
{
	margin: 20px 0 10px 0;
}

#aboutContent .pic
{
	float: right;
}

#aboutContent .pic img
{
	border: 5px solid #C7C4C2;
	padding: 10px;
	background-color: #fff;
}


/*---------------------------------------------------------------------------*/
/* Contact Page */
/*---------------------------------------------------------------------------*/

#contactContent .contactForm
{
	float: left;
	width: 600px;
	padding: 0 0 0 15px;
}

#contactContent .contactInfo
{
	float: left;
	width: 345px;
}

#contactContent .contactInfo p
{
	margin: 0.8em 0;
}


#contactContent .contactInfo .networks
{
	margin-top: 20px;
	float: left;
}


/*---------------------------------------------------------------------------*/
/* Blog Pages */
/*---------------------------------------------------------------------------*/

#blogContent .blogList,
#blogContent .blogPost
{
	float: left;
	width: 705px;
	padding: 0 15px 0 15px;
}

#blogContent .blogList h1,
#blogContent .blogPost h1
{
	margin-left: 0;
	line-height: 1;
}

#blogContent h2,
#blogContent h3,
#blogContent h4,
#blogContent h5,
#blogContent h6
{
	margin: 0.4em 0;
}

#blogContent .blogList p,
#blogContent .blogPost p
{
	margin: 0.8em 0;
}

#blogContent .blogDetails
{
	font-size: 85%;
	color: #a2a2a2;
}

#blogContent .blogList .border
{
	border-top: 1px solid #E4E1DF;
}

#blogContent .blogList a.read
{
	background-color: #C0BDBA;
	color: #FFFFFF;
	padding: 0 0.3em;
	text-transform: uppercase;
	font-size: 85%;
}

#blogContent .blogList a.read:hover
{
	color: #b6b3b2;
	background-color: #e2dedb;
}

#blogContent .blogOptions
{
	float: left;
	width: 215px;
	padding: 50px 0 0 10px;
}

#blogContent .blogOptions h2
{
	border-bottom: 1px #ddd solid;
	padding-bottom: 5px;
	margin: 0;
}

#blogContent .blogOptions ul
{
	padding-top: 7px;
	font-size: 93%;
}

#blogContent .blogOptions li
{
	line-height: 1.4em;
}

#blogContent .blogOptions li a
{
	color: #909090;
}

#blogContent .blogOptions li a:hover
{
	color: #fff;
}

#blogContent .blogOptions .blogCategories,
#blogContent .blogOptions .blogArchive,
#blogContent .blogOptions .blogSubscribe
{
	margin-top: 30px;
}

#blogContent .blogOptions .blogSubscribe a
{
	background-image: url(../images/elements/sprite-main.gif);
	background-repeat: no-repeat;
	background-position: 0 -420px;
	line-height: 24px;
	padding-left: 30px;
	display: block;
	margin-top: 7px;
}

#blogContent.entry .blogOptions .blogAbout
{
	margin-top: 30px;
}

#blogContent .blogOptions .blogAbout p
{
	margin-top: 7px;
	font-size: 93%;
}

#blogContent .blogOptions ul.blogArchiveList
{
	margin-left: 35px;
}

#blogContent .blogOptions ul.blogArchiveList li
{
	list-style-type: square;
}

#blogContent .blogOptions .blogAbout img
{
	background-color: #f4f4f4;
	padding: 3px;
	float: left;
	margin: 0 7px 4px 0;
	display: inline;
}

#blogContent .blogOptions .blogNav li
{
	border: 1px #c7c4c2 solid;
	margin-bottom: 5px;
	overflow: hidden;
}

#blogContent .blogOptions .blogNav li a
{
	color: #909090;
	display: block;
	padding: 6px 0 0 44px;
	line-height: 1.2;
	font-size: 12px;
	height: 35px;
	background-image: url(../images/elements/sprite-main.gif);
	background-repeat: no-repeat;
	background-color: #D2CFCD;
}

#blogContent .blogOptions .blogNav li a:hover
{
	background-color: #d7d4d2;
}

#blogContent .blogOptions .blogNav li.newer-post a { background-position: 187px -444px; }
#blogContent .blogOptions .blogNav li.newer-post a:hover { background-position: 187px -485px; }
#blogContent .blogOptions .blogNav li.older-post a { background-position: 0 -526px; }
#blogContent .blogOptions .blogNav li.older-post a:hover { background-position: 0 -567px; }

#blogContent .blogOptions .blogNav li a span
{
	text-transform: uppercase;
	display: block;
	color: #fff;
}

#blogContent .blogOptions .blogNav li a:hover
{
	color: #909090;
}