/*
______a g x___c r e a t i v e s______________________________________

Title:			AGX CREATIVES | Gaphic Design & Web Development
				Portfolio & References website
Project:		Graphic design & Clientside Programing
Technologies:	XHTML, CSS, javaScript, PHP, Flash

JS framework:	jQuery 1.2.6 // Plugins
				 --#Toggle-layout-------------------
				 --#Accordion-----------------------
				 --#Sliding Menu--------------------
				 --#Contact Form--------------------
				 
JS modules:		ShadowBox 2.0 MultiMedia Viewer

URL:			http://www.agx.hu/
---------------------------------------------------------------------

Developed by:	Tari Gabor
				designer, webdeveloper
				-----------------------------------------------------
Website: 		http://tari.agx.hu/
Contact: 		tari@agx.hu
---------------------------------------------------------------------

Date:			09.18.2008.
				All contents are reserved.
				
_____________________________________________________________________

*/
* { margin:0; padding:0; border:0; }





/* MAIN CONTROLS -------------------------------------------------------------------------------------------------------------------*/

html { background: url(../gfx/bg2.jpg) #8e8374; }

body {
	color: #BAAE9D;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans Console", Arial, Helvetica, sans-serif !important;
	font-size: 11px;
}

#wrapper {
	position: relative;
	width: 866px;
	margin: 35px auto;
	margin-top: 10px;
}




/* PAGE'S HEADINGS ------------------------------------------------------------------------------------------------------------- */

h2 {
	border-bottom: 1px dotted #9E9281;
	margin-bottom: 10px;
}

.home { height:35px; }
.ref, .pro, .megold, .kontakt { height:40px; }

.home 			{ background: url(../gfx/home_head.png) no-repeat; }
.ref 			{ background: url(../gfx/ref_head.png) no-repeat; }
.pro			{ background: url(../gfx/pro_head.png) no-repeat; }
.megold 		{ background: url(../gfx/megold_head.png) no-repeat; }
.kontakt 		{ background: url(../gfx/kontakt_head.png) no-repeat; }





/* GENERAL STYLES -----------------------------------------------------------------------------------------------------------------*/

a 		{ color:#BBCECF; text-decoration:none; outline:none; }
a:hover { color:#04D8D1; }

p {
	font-size: 11px;
	color: #BAAE9D;
	line-height: 16px;
	padding-top: 5px;
	margin-left: 3px;
}

span {
	font-size: 11px;
	color: white;
	line-height: 16px;
	padding-top: 10px;
}

ul {
	margin: 0px;
	list-style-position: inside;
	list-style: none;
}


/* HEADLINES ---------------------------------------------------------------------------------------------------------------------*/

h3, h4, h5 {
	font-weight: normal;
	font-size: 18px;
}

h3 { margin-left:3px; color:#04D8D1; margin-bottom:10px; }
h4 { margin-left:3px; color:white; }
h5 { color:white; }

h6 {
	font-size: 14px;
	color: #04D8D1;
	margin-bottom: 5px;
	padding-left: 15px;
	padding-top: 10px;
}




/* HEADER ---------------------------------------------------------------------------------------------------------------------------*/

#logo {
	background: url(../gfx/logo.png) no-repeat left bottom;
	text-indent: -9999em;
	width: 343px;
	height: 103px;
	margin-top: -10px;
}



/* MAIN PAGE ----------------------------------------------------------------------------------------------------------------------*/

.mainContainer-1 {
	width: 402px;
	height: 210px;
	float: left;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-right: 30px;
	margin-left: 35px;
	border: 3px solid #D5D5D5;
	background: #2E2820;
}

.mainContainer-1 img {
	cursor: url(../gfx/lupe.png), pointer;
}

.mainContainer-2 {
	width: 278px;
	float: left;
	margin-top: 45px;
	text-align: justify;
}




/* NAVIGATION ----------------------------------------------------------------------------------------------------------------------*/

ul.nav {
	position: absolute;
	top: 47px;
	right: 50px;
	list-style: none;
	font-size: 11px;
	margin: 0;
	padding: 0;
}

ul.nav li {
	list-style: none;
	float: left;
	text-align: center;
	width: 102px;
}

.nav-element a {
	float: left;
	padding-right: 24px;
	padding-left: 24px;
	padding-top: 14px;
	padding-bottom: 12px;
	color: #9D8B71;
	background: url(../gfx/link.png) no-repeat center top;
	background-position: 13px 5px;
	text-decoration: none;
	outline: none;
	text-transform: uppercase;
}

.nav-element a:hover {
	color: #E5DCCF;
	background: url(../gfx/link_over.png) no-repeat center top;
	background-position: 13px 0;
	padding-top: 6px;
	padding-bottom: 20px;
}
	
ul.nav li.ui-tabs-selected a, ul.nav li.ui-tabs-selected a:hover {
	color: #E5DCCF;
	background: url(../gfx/link_over.png) no-repeat center top;
	background-position: 13px 0;
	padding-top: 6px;
	padding-bottom: 20px;
}





/* CONTENT CONTAINERS ---------------------------------------------------------------------------------------------------------------*/

#contentTop {
	margin-top: -28px;
	height: 30px;
	background: url(../gfx/top2.png) no-repeat;
}

#contentMiddle {
	background: url(../gfx/mid2.png) repeat-y;
	padding: 0 40px;
}

#contentBottom {
	height: 32px;
	background: url(../gfx/bot2.png) no-repeat bottom;
}

.ui-tabs-hide {
	display:none;
}
	
.section {
	overflow: hidden;
	clear: both;
}




/* MEGOLDASOK - PAGE ------------------------------------------------------------------------------------ */

.mainItem-1, .mainItem-2 {
	float:left;
	margin-right: 60px;
	margin-bottom: 15px;
}

.mainItem-3 { float:left; }

.mainItem-1, .mainItem-2, .mainItem-3 { width:220px; }

.mainItem-1 ul, .mainItem-2 ul, .mainItem-3 ul {
	margin-top: 10px;
}

.mainItem-1 ul li, .mainItem-2 ul li, .mainItem-3 ul li {
	list-style: none;
	font-size: 12px;
	color: #D9D0C3;
	line-height: 22px;
	list-style-image: url(../gfx/pipe.png);
	list-style-position: inside;
	padding-left: 15px;
}

.megold-footer {
	float: left;
	width: 800px;
	border-top: 1px dotted #9E9281;
}

.megold-footer a {
	color: #BAAE9D;
	padding: 1px;
}

.megold-footer a:hover {
	padding-left: 20px;
	color: #3F352B;
	background: url(../gfx/csillag.jpg) no-repeat left #04D8D1;
}

.ugyfeleink {
	float: left;
}

.ugyfeleink ul {
	width: 170px;
	float: left;
	padding-left: 15px;
	padding-bottom: 10px;
}

.ugyfeleink ul li {
	list-style: none;
	padding: 1px;
}


	
	
/* REF // NAVIGATION-ITEMS ------------------------------------------------------------------------------------------------ */

#refItems {
	font-size: 11px;
	font-weight: normal;
	width: 385px;
	position: absolute;
	top: 107px;
	right: 40px;
	cursor: pointer; 
}

#refItems li { display:inline; }
		
#refItems li a {
	padding: 3px 8px;
	margin-right: 1px;
	color: #645E55;
	background: #292621;
	border-bottom: none;
	outline: none;
}
			
#refItems li a:hover {
	background: #0D0C0A;
	color: white;
}
			
#refItems li.ui-tabs-selected a, #refItems li.ui-tabs-selected a:hover {
	padding: 3px 8px;
	background-color: #04D8D1;
	color: black;
}



	
	
/* REF // SITE ITEMS ------------------------------------------------------------------------------------------------------------- */
.item {
	margin-top: 20px;
	margin-bottom: 20px;
	height: 270px;
}

.itemDesc {
	float:left;
	text-align: justify;
	width: 300px;
	margin-right: 40px;
}

.itemContainer { 
	width: 443px;
	float: left;
	margin-top: 0;
	cursor: url(../gfx/lupe.png), pointer;
}

.itemImg, .itemImg-cursor-none {
	float: left;
	margin-bottom: 6px;
	border: 3px solid #B6B6B6;
	border-bottom: none;
	background: #B6B6B6;
}

.itemImg a 				{ cursor:url(../gfx/lupe.png), pointer; }
.itemImg:hover 			{ border:3px solid #04D8D1; border-bottom:none; background:#04D8D1; }
.itemImg-cursor-none 	{ cursor:default; }

.itemSmall a, .bf a, .csb a, .tp a, .hc a, .netD a, .pg a, .to a, .ff a, .om a {
	border: 1px solid #807A6F;
	float: left;
	margin-right: 4px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 2px;
	height: 15px;
	width: 15px;
	background: #181613;
}

.itemSmall a:hover, .bf a:hover, .csb a:hover, .tp a:hover, .hc a:hover, .netD a:hover, .pg a:hover, .to a:hover, .ff a:hover, .om a:hover  {
	border: 1px solid #72B400;
	background: #72B400;
	cursor: url(../gfx/lupe.png), pointer;
}

.itemSmall a:hover, .bf a:hover, .csb a:hover, .tp a:hover, .hc a:hover, .netD a:hover, .pg a:hover, .to a:hover, .ff a:hover, .om a:hover  {
	cursor: url(../gfx/lupe.png), pointer;
}

.itemSmall a:hover { border:1px solid #72B400; background:#72B400; }

.bf 	a:hover 	{ border:1px solid #4C73B8; background:#042662; }
.csb 	a:hover 	{ border:1px solid #B29CB1; background:#5C0003; }
.tp 	a:hover 	{ border:1px solid #BD8BE7; background:#492166; }
.hc 	a:hover 	{ border:1px solid white; background:white; }
.netD 	a:hover 	{ border:1px solid #5DD2D1; background:#1D9594; }
.pg 	a:hover 	{ border:1px solid #AFAFAF; background:#131313; }
.to 	a:hover 	{ border:1px solid #FCBB45; background:#D14D03; }
.ff 	a:hover 	{ border:1px solid #DF5401; background:white; }
.om 	a:hover 	{ border:1px solid #FF0000; background:black; }

.descriptionHead {
	font-size: 12px;
	color: #71B200;
}

ul.description {
	font-size: 12px;
	color: white;
	background: url(../gfx/acc_menu_bg.jpg) repeat-x top #22201C;
	margin-left: 1px;
	padding-top: 7px;
	padding-bottom: 10px;
	text-align: left;
}

ul.description li {
	list-style: none;
	font-size: 11px;
	color: #BDBFB6;
	line-height: 16px;
	list-style-position: inside;
	padding-left: 15px;
}

.url { float:left; margin-top:10px;  margin-bottom:6px; }
br 	 { clear: both; }



	
/* FORM ELEMENTS ------------------------------------------------------------------------------------------------------------- */
label {
    float: left;
    width: 60px;
    margin: auto 10px 15px 5px;
    text-align: left;
	font-size: 12px;
}

form br { clear:left; }

#formDiv { 
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 30px;
	width: 350px;
	border-right: 1px dotted #ABA091;
	float: left;
}

.formdesc { 
	margin-right: 40px;
}

input {
	margin: 0 15px 0 0;
	width: 200px;
	height: 14px;
}
	
textarea {
	margin-top: 5px;
	font-family: Lucida, Arial, sans-serif;
	font-size: 11px;
	width: 272px;
	height: 80px;
	overflow: auto;
}
	
input, textarea {
	padding: 4px;
	background-color: #342D24;
	border: 1px solid #7F776C;
	color: white;
}

input:hover, textarea:hover {
	background-color: #342D24;
	border: 1px solid #9A9185;
}

input:focus, textarea:focus {
	background-color: #342D24;
	border: 1px solid #04D8D1;
}
	
.submit {
	cursor: pointer;
	color: #BAAE9D;
	font-size: 11px;
	width: 60px;
	height: 30px;
	padding: 5px;
	float: right;
	margin-right: 65px;
	margin-top: 0px;
}

.submit:hover {
	color: black;
	background: #04D8D1;
	border: 1px solid #04D8D1;
}


/* KONTAKT ELEMENTS ------------------------------------------------------------------------------------------------------------- */

#kontaktPage {
	float: left;
	margin: 20px;
	margin-left: 40px;
	margin-top: 10px;
}

.kontaktContent {
	font-size: 11px;
	margin-top: -15px;
}

.kontaktContent a:hover { text-decoration: none; }

.sites { 
	margin-bottom: 0;
	font-size: 10px;
	margin-top: 20px;
	padding: 0;
	text-decoration: none;
}

.sites:hover { text-decoration:none; }
		


/* FOOTER ------------------------------------------------------------------------------------------------------------- */
.copyLeft, .copyRight {
	font-family: Arial, Helvetica, sans-serif;
	margin-top: -5px;
	margin-left: 40px;
	margin-right: 40px;
	font-size: 11px;
	color: #D7D2CB;
}

.copyLeft { float:left; }
.copyRight { float:right; font-weight: bold; }

.copyLeft a:hover, .copyRight a:hover {
	color: white;
	border-bottom: 1px dotted white;
}




/* ACCORDION ------------------------------------------------------------------------------------------------------------- */

.accPanel {
	width: 300px;
	margin-top: 15px;
}

.accPanel-head {
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
	margin: 1px;
    background: #292621;
}

.accPanel-head:hover {
	color: white;
	background: #201D1A;
}

.accPanel-body 		{ display:none; }
.accPanel-body-open { display:block; }