@charset "utf-8";
/* Philosophy HTML Template Main CSS Document */

/*
Theme Name: Philosophy
Version: 1.0
Author: Freebeauty
Author URI: http://themeforest.net/user/freebeauty
*/

/* 
0.1 TOC
----------------------------------------------------
I GLOBAL STYLES
----------------------------------------------------
1.0 Reset
1.1 Float and Clear
1.2 Headings
1.3 Text Elements
1.4 Links
1.5 Forms Elements
1.6 Blockquote
1.7 Basic Boxes
1.8 Tables
1.9 Images and Image lists
1.10 List and Navigation
1.11 Pagination

----------------------------------------------------
II MAIN PAGE ELEMENTS
----------------------------------------------------
2.0 Body
2.1 Header
2.2 Main Navigation
2.3 intro
2.4 Main
2.5 Bottom
2.6 Sub Bottom
2.7 Footer	
 
----------------------------------------------------
III SPECIFIC PAGES
----------------------------------------------------
3.0 Slider
3.1 Portfolio and Image Gallery
3.2 Blog
3.3 Contact Page
*/

/* I GLOBAL STYLES
------------------------------------------------------------- */

/* 1.0 Reset
------------------------------------------ */

.table_orase {
	padding: 0;
	margin: 0;	
}

.table_orase td {
	font-size : 11px;
	background: #fff;
	padding: 2px 6px 2px 6px;
	color: #4f6b72;
}

* {
	margin: 0;
	padding: 0;
}
img, fieldset { 
	border: 0; 
}
ol li { 
	list-style: decimal; 	
}
ul li {
	list-style: none;
	padding: 0;
	margin: 0;
}

q:before, q:after {
	content:'';
}
a:focus {
	outline: 0;
}

/* 1.1 Float and Clear 
------------------------------------------ */
.fl {
	float: left;
}
.fr {
	float: right;
}
.clear {
	clear: both;
}
#wrapper .clearMB {
	margin-bottom: 0;
}
#wrapper .clearMR {
	margin-right: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}

/* 1.2 Headlines
------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	color: #666;
	font-weight: normal;
	padding: 5px;
	font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
}

h1 { font-size: 18px; 
	line-height: 23px; }
h2 { font-size: 16px; 
	line-height: 21px; }
h3 { font-size: 17px; 
	line-height: 21px;;}
h4 { font-size: 15px; 
	line-height: 19px; }
h5 { font-size: 15px; 
	line-height: 19px; }
h6 { font-size: 15px; 
	line-height: 19px; }


h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}


hr {
	margin-bottom: 5px;
	border: 0 #ccc  dotted;
	border-top-width: 1px;
	clear: both;
	height: 0;
}
/* 1.3 Text Elements
------------------------------------------ */
p {
	line-height: 18px;
	margin-top: 12px;
}
#header p, #intro p, 
#noIntro p, #footer p {
	margin: 0;
}
strong {
	line-height: 20px;
}
.date {
	font-size: 11px;
}

/* Address
------------------------- */
address {
	font-style: normal;
	line-height: 18px;
	margin-bottom: 12px;
}
#footer address {
	margin: 0;
}

/* Toggle Paragraph
------------------------- */
.toggle p {
	margin-bottom: 12px;
}

/* 1.4 Links
------------------------------------------ */
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.importantA {
	float: left;
	padding: 3px 12px;
	padding-right: 25px;
	display: block;
}
.importantA:hover {
	text-decoration: none;
}
.paragraphA {
	padding: 10px;
	margin-bottom: 10px;
}
.paragraphA p {
	margin-top: 0;
}
.paragraphA a {
	display: block;
}
.paragraphA a:hover {
	text-decoration: none;
}

/* 1.5 Form Elements
------------------------------------------ */
form {
	margin-top: 12px;
}
form ul li {
	margin-bottom: 12px;
}
input, textarea {
	font-size: 12px;
	font-family: Arial, sans-serif;
	padding: 5px;
}
input.submit {
	padding: 4px 5px;
}

/* 1.6 Blockquote
------------------------------------------ */
blockquote {
	margin: 10px;
	padding: 5px;
	border-left: 5px solid #e6e6e6;
}
blockquote p {
	color: #868686;
	margin: 5px 0 12px 5px;
}

/* 1.7 Basic Box
------------------------------------------ */
.box {
	margin-bottom: 50px;
}
.halfBox {
	float: left;
	width: 465px;

	margin: 0 30px 50px 0;
}
.oneThirdBox {
	float: left;
	width: 300px;
	margin: 0 30px 50px 0;
}
.twoThirdBox {
	float: left;
	width: 630px;
	margin: 0 30px 50px 0;
}
.oneFourthBox {
	float: left;
	width: 217px;
	margin: 0 30px 50px 0;
}
.innerBox p {
	margin: 0;
	margin-bottom: 12px;
}
.subBox {
	margin-bottom: 15px;
}
#primaryContent {
	float: left;
	width: 630px;
	margin-right: 30px;
}
#secondaryContent {
	float: left;
	width: 300px;
}


/* 1.9 Images and Image lists
------------------------------------------ */
.imgLeft {
	float: left;
	margin-right: 10px;
}
.imgListLeft li {
	float: left;
	margin-right: 10px;
}
.imgListRight li {
	float: right;
	margin-left: 10px;
}
.imgBorder {
	padding: 1px;
}

/* 1.10 List and Navigation
------------------------------------------ */

/* List
------------------------- */
.list li {
	line-height: 18px;
	list-style: none;
	padding: 5px;
	padding-left: 15px;
}
.arrow li {
	padding-left: 20px;
}
.check li {
	padding-left: 20px;
}

/* Navigation
------------------------- */
.nav li a {
	line-height: 18px;
	display: block;
	padding: 8px;
	padding-left: 17px;
}
.nav li a:hover {
	text-decoration: none;
}
.nav li li a {
	margin-left: 15px;
}
.nav li li li a {
	margin-left: 30px;
}
.nav li li li li a {
	margin-left: 45px;
}

/* 1.11 Pagination
------------------------------------------ */
.pagination {
	padding-top: 15px;
	padding-left: 1px;
	margin-bottom: 50px;
}
.pagination li {
	font-size: 11px;
	float: left;
	margin-right: 5px;
}
.pagination li a {
	display: block;
	padding: 4px 6px;
}


/* II MAIN PAGE ELEMENTS
------------------------------------------------------------- */

/* 2.0 Body
------------------------------------------ */
body {
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
	line-height: 1.0;
}

/* 2.1 Header
------------------------------------------ */
#header {
	width: 960px;
	margin: 0 auto;
}
#logo {
	float: left;
	padding: 30px 0 20px 0;
}
#logo a {
	display: block;
	float: left;
	width: 300px;
	height: 35px;
}
#logo .logoDesc{
	line-height: 15px;
}
#searchAndCall {
	float: right;
	width: 350px;
	margin-top: 20px;
}
.topCall {
	float: left;
	line-height: 20px;
	padding: 0 10px 0 18px;
}

/* Search
------------------------- */
.searchForm {
	float: right;
	margin-top: 0;
}
.searchFieldset {
	position: relative;
}
.searchInput {
	font-size: 11px;
	font-style: italic;
	width: 170px;
	padding: 2px;
}
.searchInput:focus {
	font-style: normal;
}
.searchButtom {
	position: absolute;
	right: 2px;
	top: 0;
	width: 15px;
	height: 15px;
}

/* 2.2 Main Navigation
------------------------------------------ */
#mainNav {
	float: right;
	margin: 40px 0 20px 0;
}
#mainNav ul li { 
	font-size: 15px; 
	line-height: 15px;
	float: right;
	z-index: 99; 
	position: relative;
	padding: 0;
	margin: 0;
}
#mainNav ul li a {
	padding: 7px 7px 7px 0;
}
#mainNav ul li a.lastBox {
	padding-right: 0;
}
#mainNav ul li a:hover { 
	text-decoration: none;
}
#mainNav ul li ul { 
	z-index: 99; 
	visibility: hidden; 
	position: absolute; 
}
#mainNav ul li ul li {
}
#mainNav ul li ul li a { 
	font-size: 16px;
	line-height: 14px;
	padding: 8px;  
}
#mainNav ul li ul li ul { 
	top: 0; 
	left: 176px;
}
#mainNav ul li:hover ul ul { 
	visibility: hidden; 
}
#mainNav ul li:hover ul, #mainNav ul li ul li:hover ul { 
	visibility: visible; 
}

/* 2.3 Intro
------------------------------------------ */
#intro {
	width: 960px;
	margin: 0 auto;
	padding: 40px 0;
}
#noIntro {
	font-size: 11px;
	width: 960px;
	margin: 0 auto;
	padding: 15px 0;
}
.introContent {
	font-size: 16px;
	line-height: 24px;
}
.introContent img {
	margin-right: 15px;
}

/* 2.4 Main
------------------------------------------ */
#main {
	width: 960px;
	margin: 0 auto;
	padding-top: 30px;
}

/* 2.5 Bottom
------------------------------------------ */
#bottom {
	width: 960px;
	margin: 0 auto;
	padding-top: 30px;
}

/* 2.6 Sub Bottom
------------------------------------------ */
#subBottom .spaceBottom {
	margin-bottom: 30px;
}
#subBottom .attr {
	font-size: 11px;
	display: block;
	padding: 3px 0;
}
#subBottom .comment {
	padding: 3px 0;
	padding-left: 27px;
}
#subBottom .category {
	padding: 3px 0;
	padding-left: 27px;
}
#subBottom .nav li a {
	padding: 3px;
	padding-left: 15px;
}

/* 2.7 Footer
------------------------------------------ */
#footer {
	padding: 15px 0;
}
#footer .copy {
	float: left;
	font-size: 11px;
	line-height: 14px;
}
#footer .social li {
	line-height: 14px;
	font-size: 11px;
	padding-left: 5px;
}
#footer .social img {
	margin-right: 3px;
}


/* III SPECIFIC PAGES
------------------------------------------------------------- */

/* 3.0 Slider
------------------------------------------ */
#slider {
	width: 960px;
	margin: 30px auto 20px auto;
}
#s3slider {
    width: 960px; /* important to be same as image width */
    height: 420px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    margin: 30px auto 20px auto;
}
#s3sliderContent {
    width: 960px; /* important to be same as image width or wider */
    position: absolute; /* important */
    top: 0; /* important */
    margin-left: 0; /* important */
}
.s3sliderImage {
    float: left; /* important */
    position: relative; /* important */
    display: none; /* important */
}
.s3sliderImage span {
    position: absolute; /* important */
    left: 0;
    font: 16px/20px Verdana, Geneva, sans-serif;
    line-height: 24px;
    padding: 15px;
    width: 930px;
    background: url(text_background.png);
    color: #fff;
    display: none; /* important */
    bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

/* 3.1 Portfolio and Image Gallery
------------------------------------------ */
.caption {
	display: none;
}

/* Portfolio
------------------------- */
.folio {
	position: relative;
}
.folio h2 {
	position: absolute;
	top: 75px;
	left: 2px;
	font-size: 14px;
	line-height: 14px;
	padding: 5px;
}
.folio .lightbox {
	display: block;
}
.folioLarge {
	position: relative;
}
.folioLarge h2 {
	position: absolute;
	top: 200px;
	left: 2px;
	padding: 5px;
	font-size: 18px;
	line-height: 18px;
}
.folioLarge .lightbox {
	display: block;
}

/* Gallery
------------------------- */
.gallery {
	margin-bottom: 30px;
}
.gallery li {
	float: left;
	margin-right: 30px;
}
.gallery .lightbox {
	display: block;
}
.galleryLarge {
	position: relative;
}
.galleryLarge h2 {
	font-size: 14px;
	line-height: 14px;
	margin-bottom: 5px;
}
.galleryLarge .imgDesc {
	font-size: 11px;
	padding: 3px;
	float: left;
	width: 290px;
	position: absolute;
	top: 14px;
	left: 2px;
}
.galleryLarge .imgDesc p {
	margin: 6px;
}

/* 3.2 Blog
------------------------------------------ */
.blog {
	margin-bottom: 50px;
}
.blog h2 {
	margin-bottom: -10px;
}
.blog .attr {
	font-size: 11px;
	padding: 7px 1px;
	margin: 15px 0;
}
.blog .attr p {
	margin: 0;
}
.blog .attr .author {
	float: left;
	padding-left: 20px;
}
.blog .attr .category {
	float: left;
	padding-left: 26px;
}
.blog .attr .comment {
	float: right;
	padding-left: 26px;
}
.blog .attr .tag {
	float: left;
	padding-left: 26px;
}
.blog .attr .continue {
	float: right;
	font-style: italic;
}

/* Gallery in Sidebar
------------------------- */
.sideGallery li {
	float: left;
	margin-right: 15px;
	margin-top: 15px;
}

/* Comments Layout
------------------------- */
.comments {
	padding: 15px;
	margin-bottom: 15px;
}
.comments p {
	margin: 0;
	margin-bottom: 12px;
}
.comments .reply {
	font-style: italic;
	float: right;
}

/* Leave a Reply Form
------------------------- */
#commentForm ul li ul li {
	margin: 5px 0;
}
.commentInput {
	width: 245px;
}
.commentTextarea {
	width: 618px;
}

/* 3.3 Contact Page
------------------------------------------ */
#contactForm ul li ul li {
	margin: 5px 0;
}
.contactInput {
	width: 245px;
}
.contactTextarea {
	width: 618px;
}
.hide {
	display: none;
}

/* Highlight Error Info
------------------------- */
label.error {
	font-size: 11px;
	float: none;
	padding-left: 10px;
}
#response {
	font-size: 11px;
}

/* Headline
------------------------------------------ */


/* Date in Last News
------------------------------------------ */
.date {
	color: #131313;
}

/* Links
------------------------------------------ */
a {
	color: #3399CC;
}
.importantA {
	background: #f3f3f3 url(importantA.png) right bottom no-repeat;
}
.importantA:hover {
	color: #ffffff;
	background: #3399CC url(importantA.png) right top no-repeat;
}
.paragraphA {
	color: #666666;
	background: #f3f3f3;
}
.paragraphA a {
	color: #666666;
	background: url(paragraphA_background.png) right top no-repeat;
}
.paragraphA a:hover {
	color: #3399CC;
}

/* Form Elements
------------------------------------------ */
input, textarea {
	color: #666666;
	background: #ffffff;
	border: 1px solid #e6e6e6;
}
input:focus, textarea:focus {
	border: 1px solid #3399CC;
}
input.submit {
	color: #f6f6f6;
	background: #131313;
}
input.submit:hover {
	color: #3399CC;
	background: #ffffff;
}
input.submit:focus {
	border: 1px solid #e6e6e6;
}

/* Blockquote
------------------------------------------ */
blockquote {
	border-left: 5px solid #e6e6e6;
}

/* Inner Box
------------------------------------------ */
.innerBox {
	border: 1px solid #e6e6e6;
	background: #f3f3f3;
	padding: 15px;
}

/* Image
------------------------- */
.imgBorder {
	border: 1px solid #e6e6e6;
}
.lightbox img:hover {
	border: 1px solid #3399CC;
}

/* List
------------------------- */
.list li {
	background: url(list.png) no-repeat;
}
.arrow li {
	background: url(list_arrow.png) no-repeat;
}
.check li {
	background: url(list_check.png) no-repeat;
}

/* Navigation
------------------------- */
.nav li a {
	color: #666666;
	background: url(navigation.png) 1px top no-repeat;
	border-bottom: 1px solid #e6e6e6;
}
.nav li a:hover {
	color: #3399CC;
	border-bottom: 1px solid #3399CC;
	background: #f3f3f3 url(navigation.png) 1px top no-repeat;
}

/* Pagination
------------------------------------------ */
.pagination {
	border-top: 1px solid #e6e6e6;
}
.pagination li a {
	color: #999999;
	border: 1px solid #e6e6e6;
}
.pagination li a:hover {
	color: #3399CC;
	border: 1px solid #3399CC;
}
.pagination li a.current {
	color: #ffffff;
	background: #3399CC;
	border: 1px solid #3399CC;
}

/* Body
------------------------------------------ */
body {
	color: #666666;
	background: #ffffff;	
}

/* Header
------------------------------------------ */
#headerBackground {
	background: url(header_background.png);
}
#header {
	color: #999999;
}
#logo {
	background: url(logo_light.png) no-repeat;
}
#logo a {
	background: url(logo.png) no-repeat;
}
.topCall {
	background: url(telephone.png) left center no-repeat;
	border-right: 1px solid #444444;
}

/* Search
------------------------------------------ */
.searchFieldset {
	border: 1px solid #444444;
}
.searchInput {
	color: #999999;
	background: #1d1d1d;
	border: none;
}
.searchInput:focus {
	border: none;
}
.searchButtom {
	background: #1d1d1d url(search.png) 4px 4px no-repeat;
	border: none;
}

/* Main Navigation
------------------------------------------ */
#mainNav ul li a {
	color: #f6f6f6;
}
#mainNav ul li a:hover { 
	color: #3399CC;
}
#mainNav ul li a.current {
	color: #3399CC;
}
#mainNav ul li ul li a { 
	background: #1c1c1c; 
	border-top: 1px solid #303030; 
	border-bottom: 1px solid #0c0c0c; 
}

#mainNav ul li ul li a:hover {
	background: #262626;
}

/* Intro
------------------------------------------ */
#introBackground {
	border-top: 1px solid #363636;
	background: url(intro_background.png);
}
.introContent {
	color: #999999;
}

/* Main
------------------------------------------ */
#mainBackground {
	border-bottom: 1px solid #131313;
}

/* Bottom
------------------------------------------ */
#bottomBackground {
	border-top: 1px solid #464646;
	background: #262626;
}
#bottom {
	color: #999999;
	background: url(bottom_light.png) no-repeat;
}
#bottom .imgBorder {
	border: 1px solid #444444;
}
#bottom h1, #bottom h2, #bottom h3,
#bottom h4, #bottom h5, #bottom h6 {
	color: #f6f6f6;
}

/* Sub Bottom
------------------------------------------ */
#subBottom {
	border-bottom: 1px solid #202020;
}
#subBottom .attr {
	color: #636363;
}
#subBottom .comment {
	background: url(comment.png) no-repeat;
}
#subBottom .category {
	background: url(category.png) no-repeat;
}
#subBottom .date {
	color: #f6f6f6;
}
#subBottom .nav li a {
	color: #999999;
	background: url(buttom_navigation.png) no-repeat;
	border: none;
}
#subBottom .nav li a:hover {
	color: #3399CC;
}

/* Footer
------------------------------------------ */
#footer {
	border-top: 1px solid #333333;
}

/* Slider
------------------------------------------ */
#sliderBackground {
	border-top: 1px solid #363636;
	background: url(slider_background.png) repeat-x;
}

/* Portoflio
------------------------------------------ */
.folio h2 {
	color: #ffffff;
	background: url(text_background.png);
}
.folio .lightbox {
	background: url(folio_background.png) left top no-repeat;
}
.folio .lightbox:hover {
	background: url(folio_background.png) left bottom no-repeat;
}
.folioLarge h2 {
	color: #ffffff;
	background: url(text_background.png);
}
.folioLarge .lightbox {
	background: url(folio_large_background.png) left top no-repeat;
}
.folioLarge .lightbox:hover {
	background: url(folio_large_background.png) left bottom no-repeat;
}

/* Gallery
------------------------------------------ */
.gallery .lightbox {
	background: url(gallery_background.png) left top no-repeat;
}
.gallery .lightbox:hover {
	background: url(gallery_background.png) left bottom no-repeat;
}
.galleryLarge .imgDesc {
	color: #ffffff;
	background: url(text_background.png);
}

/* Blog
------------------------------------------ */
.blog .attr {
	color: #868686;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}
.blog .attr .author {
	background: url(author.png) no-repeat;
}
.blog .attr .category {
	background: url(category.png) no-repeat;
}
.blog .attr .comment {
	background: url(comment.png) no-repeat;
}
.blog .attr .tag {
	background: url(tag.png) no-repeat;
}

/* Highlight Error Info
------------------------------------------ */
label.error {
	color: red;
}
#response {
	color: red;
}

/* Comments
------------------------------------------ */
.comments {
	border: 1px solid #e6e6e6;
}