/************************************
AURELIUS
URL: www.qwibbledesigns.co.uk/preview/aurelius/
AUTHOR: Matthew Corner (QwibbleDesigns)
DATE: 31 Jan, 2010
REVISION: 1.0
DESCRIPTION: A premium business and portfolio theme.
************************************/

/* Global Styles */

	body								{background-color: #FFFFFF; font-size:10px;	font-family: arial, san-serif; color:#000000;}
	a:focus								{outline:0px dotted;}
	a									{color:#717171; text-decoration:none;}
	a:hover								{color: green;}
	a span								{font-size:90%;}
	h1									{font-size:25px;}
	h2									{font-size:23px;}
	h3									{font-size:21px;}
	h4									{font-size:19px;}
	h5									{font-size:17px;}
	h6									{font-size:15px;}
	ol									{list-style:decimal;}
	ul									{list-style:disc;}
	li									{margin-left:0px; position:relative;}
	p,
	li,
	dl									{line-height:18px;}
	p,
	dl,
	hr,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ol,
	ul,
	pre,
	address,
	fieldset,
	img									{margin-bottom:0px;}
	#wrapper							{margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 25px; width:760px; min-width: 760px; max-width: 760px;}
	ul li ul,
	ol li ol							{margin-bottom:0px;}
	ol									{padding: 0 0 0 5px;}



/* share plus */
.collapse{
  display:block;
}
.collapse + input{
  display:none;
}
.collapse + input + *{
  display:none;
}
.collapse+ input:checked + *{
  display:block;
}



/* Custom Grid */

	.container_12 						{}
	.float								{display:inline; float:left; position:relative;}
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_10,
	.grid_11,
	.grid_12							{display:inline; float:left; position:relative; margin-left:0px; margin-right:0px;}
	.grid_00							{margin: 0px;}
	.grid_9								{margin:0px;}
	.grid_title							{line-height:18px;}


	
/* Global Classes */

	.hr									{border:none; border-bottom:1px solid #f0f0f0; border-top:1px solid #d6d6d6; clear:both; height:0; line-height:0; width:100%; font-size:0; padding:0 ;margin-bottom :20px;}
	.pr									{border:none; border-bottom:1px solid #f0f0f0; border-top:1px solid #d6d6d6; clear:both; height:0; line-height:0; width:100%; font-size:0; padding:0; margin-bottom :30px;}
	.dotted								{border-style:dashed; border-left:0; border-right:0;}	
	.meta								{font-weight:normal;font-family: arial, san-serif; font-size:10px; color:#999999 !important; line-height:16px; text-transform:none; text-shadow:none;}
	.boldText							{font-weight: bold;}
	.right								{float:right;}
	.left								{float:left;}
	.img_left							{float:left; margin:10px 20px 10px 0;}
	.img_right							{float:right; margin:10px 0 10px 20px;}
	.clear								{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}
	.textright 							{text-align:right;}
	.error,
	.success							{display:none;}
	.imageText							{font-style: italic; margin-bottom: 5px;}

/* Left side */
	table 								{border-collapse: collapse; width:100%;}
	table, th, td 						{border: 0px solid black;}
	.th100								{}
	.leftSide							{padding: 0px; width: 267px; vertical-align: top;}
	.rightSide							{padding-top: 150px;}
	header 								{position: relative; top: 0; left: 0; z-index: 100;}
	#menu-icon 							{display: hidden; width: 30px; height: 30px; background: #fff url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-48.png) center;}
	a:hover#menu-icon 					{background-color: #fff; border-radius: 0px;}


/* Buttons */

	.button, .button:visited 			{background:#fff; display:inline-block; padding:8px 10px 8px; color:#000; text-decoration:none; -moz-border-radius:1px; -webkit-border-radius:1px; border-bottom:1px solid rgba(0,0,0,0.25); position:relative; cursor:pointer; font-size:10px; line-height:1; border:0;}
 	.button:hover						{background-color:#fff; color:#AAAAAA; text-decoration:none;}
	.button:active						{background-color:#fff; color:#555555;}

/* Logo */
	.logo 								{margin-bottom: 140px;}

/* links */

	.tLinks								{font-family: arial, sans-serif; color: black; font-size: 10px; line-height: 200%;}
	.tLinks a 							{color: black;}
	.tLinks a:hover						{color: #AAAAAA;}
	.tLinks a:visited					{color: black;}

/* text */

	.text								{font-family: arial, sans-serif; color: black; font-size: 10px; line-height: 100%; padding: 0;}
	.text a 							{color: #222222;}
	.text a:hover						{color: #AAAAAA;}
	.text a:visited						{color: #222222;}

/* Titles */

	.textTitle							{font-family: arial, sans-serif; color: black; font-size: 10px; line-height: 150%; padding: 0; font-weight: bold;}
	.textTitle a 						{color: black;}
	.textTitle a:hover					{color: #AAAAAA;}
	.textTitle a:visited				{color: black;}

/* Site Navigation */

	ul#navigation						{text-transform:lowercase; list-style: none;}
	nav 								{margin : 0 0 0 180px;}
	ul#navigation li a					{font-family: 'Hind', sans-serif !important;display: block; border: 0px solid black; width:100px; text-decoration:none; color:#000000; font-size:12px; line-height: 200%; font-weight: 300; letter-spacing: 1px;}
	ul#navigation li a:hover			{color: #AAAAAA;}
	ul#navigation li a.current			{font-weight: 600; color: #000000;}
	ul#navigation li label				{font-family: 'Hind', sans-serif !important;display: block; border: 0px solid black; width:100px; text-decoration:none; color:#000000; font-size:12px; line-height: 200%; font-weight: 300; letter-spacing: 1px;}
	ul#navigation li label:hover		{color: #AAAAAA;}
	ul#navigation li label.current		{font-weight: 600; color: #000000;}
	ul#navigation li label				{font-family: 'Hind', sans-serif !important;display: block; border: 0px solid black; width:100px; text-decoration:none; color:#000000; font-size:12px; line-height: 200%; font-weight: 300; letter-spacing: 1px;}

	
	
/* Portfolio Styles */

	.portfolio_item						{position:relative; border: 10px solid white; overflow: hidden; float: left;}
	.portfolio_item img					{margin: -10px;}
	.portfolio_item:hover				{border: 0px solid white; }
	.portfolio_item:hover img			{margin: 0px;}
	
	
/* Contact Form */

	p.error								{margin-left:0px; margin-top:10px;}
	#contact_form ul					{float:left;}
	#contact_form ul li					{margin:0px; list-style:none; position:relative; clear:both;}
	#contact_form label					{line-height:35px; width:100px; text-align:left; float:left; margin-right:10px;}
	#contact_form input#name,
	#contact_form input#email,
	#contact_form input#subject,
	#contact_form textarea				{float:left; padding:3px; border:1px solid #CCCCCC; margin-left:0px; background:#fcfcfc; -moz-border-radius:1px; -webkit-border-radius:1px;}
	#contact_form input#name,
	#contact_form input#email,
	#contact_form input#subject			{width:400px;}
	#contact_form textarea				{width:400px;height:150px; resize: none;}
	#contact_form input.button			{width:400px;float:left;}



@media only screen and (min-device-width: 320px) and (max-device-width: 568px){
	body 								{ background: white; }
	.logo 								{position: fixed; top:-80px; width: 220px; margin-bottom: 0px;}
  	#wrapper							{margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 25px; width:100%; min-width: 100%; max-width: 100%;}
 	.rightSide							{padding-top: 50px;}

  	.leftSide							{padding: 0px; width: 0px; vertical-align: top;}
 	p 									{ padding-left: 10px; padding-right: 10px;}
  	header 								{position: fixed; display: block; height: 50px; background-color: white; width: 100%;}
  	.coverimage							{width: 100%;}

	.portfolio_item						{position:relative; border: 2px solid white; overflow: hidden; float: left; padding: 0px;}
	.portfolio_item img					{margin: -2px; width: 24.5vw; padding: 0px;}
	.portfolio_item:hover				{border: 0px solid white; }
	.portfolio_item:hover img			{margin: 0px;}


	nav ul, nav:active ul 				{display: none; position: fixed; padding: 10px; background: #fff; border: 1px solid #444; right: 20px; top: 50px; border-radius: 0px;}
	#menu-icon 							{display:block; position: fixed; top: 10px; right: 20px; z-index: 99;}
	
  	ul#navigation						{text-transform:lowercase;}
  	ul#navigation li					{}
	ul#navigation li 					{margin : 0;}
	ul#navigation li a					{font-family: 'Hind', sans-serif !important;display: block; border: 0px solid black; width:100px; text-decoration:none; color:#000000; font-size:12px; line-height: 200%; font-weight: 300; letter-spacing: 1px;}
	ul#navigation li a:hover			{color: #AAAAAA;}
	ul#navigation li a.current			{font-weight: 600; color: #000000;}
	ul#navigation li label				{font-family: 'Hind', sans-serif !important;display: block; border: 0px solid black; width:100px; text-decoration:none; color:#000000; font-size:12px; line-height: 200%; font-weight: 300; letter-spacing: 1px;}
	ul#navigation li label:hover		{color: #AAAAAA;}
	ul#navigation li label.current		{font-weight: 600; color: #000000;}
	ul#navigation li label				{font-family: 'Hind', sans-serif !important;display: block; border: 0px solid black; width:100px; text-decoration:none; color:#000000; font-size:12px; line-height: 200%; font-weight: 300; letter-spacing: 1px;}
	nav:hover ul 						{display: block;}
	#contact_form input#name,
	#contact_form input#email,
	#contact_form input#subject			{width:100%;}
	#contact_form textarea				{width:100%;height:150px; resize: none;}
	#contact_form input.button			{width:100%;float:left;}

}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : landscape){
	.portfolio_item img					{margin: -2px; width: 16.5vw; padding: 0px;}
}
	
	


/* Overiding Classes */
/* Must remain at the bottom of the stylesheet */

	.clearfix:after						{clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0;}
	* html .clearfix 					{height:1%;}
	.alpha								{margin-left:0;}
	.omega								{margin-right:0;}