/* @override 
	http://tarifawindsurfing.com/assets/css/html.css
	http://localhost:8888/tarifawindsurfing/assets/css/html.css
*/

html {
  height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	font: 400 0.7em verdana, arial, sans-serif;
	line-height: 170%;
	color: #000000;
	background-color: #FFFFFF;
}

h1 {
	clear: both;
	font: 700 2.5em "trebuchet ms", serif;
	color: #FF0000;
}

h2 {
	font: 400 1.2em "trebuchet ms", serif;
	color: #333333;
}

h2 a {
	color: #0066FF;
}

h2 a:hover {
	color: #00CCFF;
}

h3 a {
	color: #0066CC;
	font-family: "trebuchet ms", serif;
	font-size: 1em;
	font-weight: 700;
}

h3 {
	font: 700 1.6em "trebuchet ms", serif;
	color: #FF0000;
}

h4 {
	color: #0066FF;
	font-family: "trebuchet ms", serif;
	font-size: 1.2em;
	font-style: italic;
	font-weight: 400;
}

h5 {
  font: 700 1.3em "trebuchet ms", serif;
  color: #F17400;
}

h6 {
	color: #0066FF;
	font-family: "trebuchet ms", serif;
	font-size: 1.2em;
	font-weight: 400;
}


h1, h2, h3, h4, h5, h6, p, dl {
  margin: 0;
  padding: 10px 15px;
}

/* Done so the leftmost column aligns properly with the header.
   If the leftmost column has class gradient applied to it, 
   this class isn't required. */
.leftColumn h1,
.leftColumn h2, 
.leftColumn h3,
.leftColumn h4,
.leftColumn h5,
.leftColumn h6,
.leftColumn p,
.leftColumn dl {
  padding-left: 0;
}

a {
	color: #0066FF;
}

/* Uncomment this if you would like a visited link style 
a:visited {
  text-decoration: line-through;
} */

a:hover {
	color: #00CCFF;
}

b {
	color: #000000;
	font-weight: bold;
}

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

ol {
  color: #FC0;
}

ol span {
  color: #EEE;
}

ul {
  list-style-image: url(../images/bg/bullet.gif);
}

del {
  color: #AAA;
}

code {
  margin: 10px 15px;
  padding: 10px;
  display: block;
  overflow: auto;
  
  font: 400 1em courier, monospace;
  line-height: 120%;
  white-space: pre;
  
  background: #444;
}

.leftColumn code {
  margin-left: 0;
}

acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}

dt {
  font-weight: bold;
  color: #FFB323;
}

dd {
  margin-left: 0;
  padding-left: 45px; 
}
.boarder {
	margin-bottom: 2em;
	background-image: url(../images/bg/line.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	min-height: 205px;
	height: expression(this.height > 205 ? 205: true);
}
.greyblock {
	background-color: #CCCCCC;
	display: block;
}
img {
	border: none;
}

/**************************************************************
   Form Elements
 **************************************************************/



/**************************************************************
   modx dito and included icons
 **************************************************************/
 .ditto_info {
	font-family: Helvetica, Arial, sans-serif;
	padding-left: 20px;
	font-size: 0.9em;
	}


/**************************************************************
   Blockquote and included icons
 **************************************************************/

blockquote {
	margin: 10px 15px;
	padding-left: 27px;
	background-color: none;
	background-image: url(../images/bg/line.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

blockquote.go {
  background-image: url(../images/icons/go.gif);
}

blockquote.stop {
  background-image: url(../images/icons/stop.gif);
}

blockquote.tiki {
  background-image: url(../images/icons/tiki.png);
}


/**************************************************************
   #sidenav: The side bar menu
 **************************************************************/
#sidenav ul {
	margin: 0px;
	padding: 0px;
}

#sidenav li {
	font: 400 1.1em "trebuchet ms", serif;
}

#sidenav li a {
	display: block;
	text-decoration: none;
	color: #000000;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left:  15px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
	}
	
#sidenav li a:hover {
	color: #FFFFFF;
	background-image: url(../images/bg/hover.jpg);
	background-repeat: no-repeat;
}

#sidenav  ul li {
	display: inline;
	font: 400 1.2em "trebuchet ms", serif;
}

#sidenav ul li a {
	display: block;
	text-decoration: none;
	color: #000000;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left:  15px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
} 

#sidenav ul li a:hover a:active {
	color: #FFFFFF;
	background-image: url(../images/bg/hover.jpg);
	background-repeat: no-repeat;
}

#sidenav ul li ul li {
	display: inline;
	font: 400 0.9em "trebuchet ms", serif;
	}
	
#sidenav ul li ul li a {
	display: block;
	color: #000000;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left:  30px;
	text-indent: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
} 

#sidenav ul li ul li a:hover {
	color: #000000;
	background-image: none;
	text-decoration: underline;
	
}
#sidenav ul li ul li ul li {
	display: inline;
	font: 400 0.9em "trebuchet ms", serif;
	}
	
#sidenav ul li ul li ul li a {
	display: block;
	color: #000000;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left:  50px;
	text-indent: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
} 

#sidenav ul li ul li ul li a:hover {
	color: #000000;
	background-image: none;
	text-decoration: underline;
	
}
/**************************************************************
   #news: Holds the side news image etc
 **************************************************************/
#news {
}
#news img {
	float:left;
	max-width: 110px;
	width: expression(this.width > 110 ? 110: true);
	max-height: 90px;
	height: expression(this.height > 90 ? 90: true);
	/*width:expression(document.body>div#content>div#page>div.width25 floatLeft leftColumn>div#sidenav>div#news > 110? "110px": "auto" );*/
	border: none;
	padding: 2px;
	}
/**************************************************************
   #centernews: Holds the main news image
 **************************************************************/	
#mainnews {
	min-height: 300px;
  	heignt: expression(this.height > 300 ? 300: true);
	}
/**************************************************************
   #centernews: Holds the main news image
 **************************************************************/

	
#centernews img{
  float: right;
  padding: 10px;
  max-width: 350px;
  width: expression(this.width > 350 ? 350: true);
  max-height: 280px;
  heignt: expression(this.height > 280 ? 280: true);
  border: none;
  }
/**************************************************************
   #modxcontent: Holds the cms content map.
 **************************************************************/
 
 #modxcontent {
 	padding-left: 10px;
	}

 #modxcontent img{
 	padding: 5px;
	}	
/**************************************************************
   #gmap: Holds the google map.
 **************************************************************/
#gmap {
	padding-left: 20px;
	}
/**************************************************************
   #homevid: Holds the youtube vid on home page
 **************************************************************/	
#homevid {
	padding: 10px;
	}
	
/**************************************************************
   #most recen: Holds the most recent articles
 **************************************************************/

#mostrecent ul li {
	font: 400 1em verdana, arial, sans-serif;
	padding: 0px;
	margin: 0px;
	color: #000000;
	}
	
#mostrecent ul li a{
	font: 700 1em verdana, arial, sans-serif;
	text-decoration: underline;
	border: none;
	padding: 0px;
	margin: 0px;
	color: #0066FF;
	}
	
#mostrecent ul li a:hover{
	text-decoration: underline;
	border: none;
	background-image: none;
	padding: 0px;
	margin: 0px;
	color: #00ccFF;
	}

.shared-footer {
	clear: both;
	padding-top: 10px;
}
.shared-footer ul {
	width: 24%;
	float: left;
	margin: 0;
	padding: 0;
}
.shared-footer ul li {
	list-style: none !important;
}
.shared-footer ul li a {
	text-decoration: none;
}

/* TWITTER */
.twitter-feed {
	margin-bottom: 15px;
}
.twitter-feed h2 a{
	color: #999;
	font-size: 16px;
	font-weight: bolder;
	text-decoration: none;
}
.twitter-feed h2 {
	background: url(../../images/twitter.jpg) no-repeat right center;
}
.twitter-feed li a{
	border: none!important;
	text-decoration: none;
	color: #999!important;
	font-style: normal!important;
}
.twitter-feed li a:hover {
	background-image: none!important;
	color: #666!important;
}
.twitter-feed .date {
	font-style: italic;
	color: #0066FF;
	padding-bottom: 0;
}
/**************************************************************
   Images
 **************************************************************/

img.floatRight {
  margin: 5px 0px 10px 15px;
}

img.floatLeft {
  margin: 5px 15px 10px 0px;
}